/* Start:/local/templates/NewDesign/css/custom.css?1794244820215660*/
/* Строка под копирайтом: Политика / Реквизиты / Настройки аналитики (В-2, Ф-2). */
.footer__legal {
    margin-top: 4px;
    font-size: 10px;
    line-height: 20px;
}

.footer__legal a {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer__legal a:hover {
    color: #000;
}

.footer__legal-sep {
    margin: 0 6px;
    color: rgba(0, 0, 0, 0.3);
}

/* Пояснение под e-mail в блоке контактов футера — серым, не жирным. */
.footer__privacy-note {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
}

.footer__privacy-note a {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer__privacy-note a:hover {
    color: #000;
}

/* Панель согласия на аналитику (Ф-4). Показывается только до выбора;
   до «Разрешить аналитику» счётчик Метрики не загружается вовсе. */
.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: #fff;
    border-top: 3px solid #e8684b;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12);
}

.consent[hidden] {
    display: none !important;
}

.consent__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 40px 24px;
    box-sizing: border-box;
    font-family: "ProximaNova", sans-serif;
}

.consent__text {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #000;
}

.consent__links {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.5;
}

.consent__links a {
    color: rgba(0, 0, 0, 0.6);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent__links a:hover {
    color: #000;
}

.consent__sep {
    margin: 0 6px;
    color: rgba(0, 0, 0, 0.3);
}

.consent__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.consent__btn {
    font-family: "ProximaNova", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px 26px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.consent__btn_yes {
    background: #000;
    color: #fff;
}

.consent__btn_yes:hover {
    background: #5ebc64;
    border-color: #5ebc64;
}

.consent__btn_no:hover {
    background: #000;
    color: #fff;
}

@media (max-width: 600px) {
    .footer__legal {
        font-size: 10px;
        line-height: 16px;
        padding-right: 25px;
    }

    .consent__inner {
        padding: 18px 20px 20px;
    }

    .consent__text {
        font-size: 13px;
    }

    .consent__btn {
        flex: 1 1 100%;
        text-align: center;
        padding: 14px 18px;
    }
}

/* Чекбокс согласия в калькуляторе (В-9, Ф-3). Живёт в зелёной ячейке
   отправки: кнопка сверху, под ней отметка согласия и подсказка. */
.calculate__submit {
    display: flex;
    flex-direction: column;
    background: #5ebc64;
}

.calculate__submit .calculate__button {
    flex: 0 0 132px;
    height: 132px;
    padding: 26px 16px 0;
    font-size: 19px;
    line-height: 1.15;
}

.calculate__submit .calculate__button.animation:before,
.calculate__submit .calculate__button.animation:after {
    top: 96px;
}

.calculate__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    background: #5ebc64;
    color: #fff;
    padding: 14px 16px 8px;
    box-sizing: border-box;
}

.calculate__consent-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.calculate__consent-box {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 2px solid #fff;
    background: transparent;
    position: relative;
    transition: background 0.15s ease;
}

.calculate__consent-box:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #5ebc64;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

.calculate__consent-input:checked + .calculate__consent-box {
    background: #fff;
}

.calculate__consent-input:checked + .calculate__consent-box:after {
    transform: rotate(45deg) scale(1);
}

.calculate__consent-input:focus-visible + .calculate__consent-box {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.calculate__consent-text {
    font-family: "ProximaNova", sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #fff;
}

.calculate__consent-text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.calculate__consent-text a:hover {
    color: #000;
}

.calculate__consent_error .calculate__consent-box {
    border-color: #e8684b;
    background: rgba(232, 104, 75, 0.35);
}

.calculate__consent-hint {
    font-family: "ProximaNova", sans-serif;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.8);
    background: #5ebc64;
    padding: 0 16px 14px;
    margin: 0;
}

.calculate__consent-hint_error {
    color: #fff;
    font-weight: 700;
}

/* Кнопка отправки, пока согласие не отмечено (В-9). */
.calculate__button:disabled,
.calculate__button[disabled] {
    background: #cfcfcf;
    color: rgba(0, 0, 0, 0.45);
    cursor: not-allowed;
}

.calculate__button:disabled:before,
.calculate__button:disabled:after {
    opacity: 0.35;
}

/* Юридические документы: /privacy/, /legal/, /consent/request/, /consent/analytics/.
   Страницы должны читаться на телефоне без горизонтального скролла и без
   мелкого кегля (Т-1), поэтому размеры в rem и max-width на контейнере. */
.legal {
    background: #fff;
    padding: 60px 40px 100px;
}

/* Горизонтальные отступы заданы у .legal, а не у контейнера: на мобильных
   контейнер не должен вылезать за экран (Т-1). */
.legal__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.legal__head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding-bottom: 40px;
    margin-bottom: 50px;
}

.legal__label {
    font-family: "ProximaNova", sans-serif;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 20px;
}

.legal__title {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    font-size: 56px;
    line-height: 0.95;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.legal__lead {
    font-family: "ProximaNova", sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.7);
    max-width: 780px;
    margin: 0;
}

.legal__layout {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.legal__body {
    flex: 1 1 auto;
    min-width: 0;
    font-family: "ProximaNova", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #000;
}

.legal__body p {
    margin: 0 0 18px;
}

.legal__body h2 {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.05;
    text-transform: uppercase;
    margin: 40px 0 18px;
}

.legal__body h3 {
    font-size: 18px;
    line-height: 1.4;
    margin: 30px 0 12px;
}

.legal__body ul,
.legal__body ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.legal__body li {
    margin-bottom: 8px;
}

.legal__body a {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal__body a:hover {
    color: #5ebc64;
}

.legal__placeholder {
    background: #f3f3f3;
    border-left: 4px solid #e8684b;
    padding: 32px 36px;
}

.legal__placeholder-title {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 16px;
}

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

.legal__nav {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 120px;
}

.legal__nav-link {
    font-family: "ProximaNova", sans-serif;
    font-size: 14px;
    line-height: 1.35;
    padding: 14px 18px;
    color: rgba(0, 0, 0, 0.65);
    text-decoration: none;
    background: #f3f3f3;
    transition: background 0.2s ease, color 0.2s ease;
}

.legal__nav-link:hover {
    background: #eaeaea;
    color: #000;
}

.legal__nav-link_active {
    background: #000;
    color: #fff;
}

.legal__nav-link_active:hover {
    background: #000;
    color: #fff;
}

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

    .legal__nav {
        position: static;
        flex: 1 1 auto;
        order: -1;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .legal {
        padding: 30px 20px 60px;
    }

    .legal__head {
        padding-bottom: 26px;
        margin-bottom: 30px;
    }

    .legal__title {
        font-size: 30px;
        overflow-wrap: break-word;
    }

    .legal__lead {
        font-size: 16px;
    }

    .legal__body {
        font-size: 15px;
    }

    .legal__placeholder {
        padding: 24px 20px;
    }
}

/* .contact__slider — на странице проекта (где вместе с этим блоком грузится
   ещё и настоящая библиотека swiper.min.css) элемент получал clientWidth в
   десятки миллионов пикселей (Swiper брал этот же размер за основу, отсюда
   и "космическая" ширина каждого слайда). У .contact__slider никогда не было
   явной ширины ни в одном файле — он flex-элемент внутри .contact__item_slider,
   поэтому фиксируем сами. */
   .contact__slider {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

.contact__slider .swiper-wrapper {
    min-width: 0 !important;
}

@font-face {
    font-family: CoFoPeshka;
    font-display: swap;
    src: url(/local/templates/NewDesign/css/../fonts/CoFoPeshka-Medium.woff2) format("woff2"), url(/local/templates/NewDesign/css/../fonts/CoFoPeshka-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url("/local/templates/NewDesign/css/../fonts/ProximaNova-Bold.woff2") format("woff2"), url("/local/templates/NewDesign/css/../fonts/ProximaNova-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url("/local/templates/NewDesign/css/../fonts/ProximaNova-Regular.woff2") format("woff2"), url("/local/templates/NewDesign/css/../fonts/ProximaNova-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@media (max-width: 568px) {
    body {
        width: 100%;
        min-width: 100%;
    }
}

.mMenu__2lvl {
    padding-top: 0;
}

.contacts_new__top-banner {
    position: relative;
    width: 100%;
}

.contacts_new__top-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contacts_new__top-banner-image {
    width: 600px;
    height: 600px;
}

.contacts_new__top-banner-image {
    position: relative;
}

.contacts_new__invite-content {
    position: absolute;
    width: 50%;
    top: 0;
    left: 0;
    padding: 65px 30px 0;
    text-align: center;
    color: #fff;
}

.contacts_new__invite-header {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    padding: 0 40px;
}

.contacts_new__invite-text {
    line-height: 20px;
    margin: 10px 0 0;
    text-align: center;
}

.contacts_new__invite-text .button_start {
    top: 200%;
}

.contacts_new__top-banner-contacts {
    position: absolute;
    top: 0;
    right: 300px;
    display: flex;
}

.contacts_new__top-banner-left {
    width: 300px;
    height: 300px;
    left: 0;
    font-size: 20px;
    font-weight: 700;
    background: #ffec55;
    padding: 55px 55px 0 55px;
}

.contacts_new__top-banner-right {
    width: 300px;
    height: 300px;
    color: #fff;
    background: #5ebc64;
    padding: 45px 55px 0 55px;;
}

.contacts_new__top-banner-map {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
}

.contacts_new__top-banner-text {
    height: 300px;
    width: 600px;
    background: #fff;
    padding: 60px 55px 0 55px;
}

.contacts_new__top-banner-map-block {
    width: 300px;
    height: 300px;
}

.contacts_new__top-banner-address {
    width: 300px;
    height: 300px;
}

.contacts_new__top-banner-header {
    font-size: 18px;
    font-weight: 700;
}

.contacts_new__top-banner-text-in {
    margin-top: 25px;
    font-size: 15px;
    line-height: 24px;
}

.contacts_new__top-banner-map-block {
    overflow: hidden;
}

.contacts_new__top-banner-map-block #clientsMap {
    margin: -130px 0 0 -600px !important;
}

.contacts_new__top-banner-address {
    padding: 90px 0 0;
    font-weight: 600;
    background: #000;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

.contacts_new__top-banner-address span {
    display: block;
    margin: 25px 0;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
}

.contacts_new__squares {
    display: flex;
    justify-content: space-between;
}

.contacts_new__scheme-more .button_scheme {
    z-index: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 132px;
    margin: -19px 0 0 -66px;
    height: 38px
}

.contacts_new__scheme-more-img {
    margin: 0 0 0 -300px;
}

.contacts_new__social-lable {
    width: 300px;
    height: 300px;
    background: #000;
    padding: 110px 55px 0 55px;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
}

.contacts_new__social-items {
    width: 300px;
    height: 300px;
    position: relative;
}

.contacts_new__social-item {
    width: 150px;
    height: 150px;
    background: #262626;
    transition: all 0.5s ease;
}

.contacts_new__social-item:hover {
    background: #5ebc64;
    transition: all 0.5s ease;
}

.contacts_new__social-item:before {
    background-position: center center;
    background-repeat: no-repeat;
    bottom: auto;
    content: "";
    display: block;
    height: 32px;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    position: absolute;
    right: auto;
    top: 50%;
    width: 32px;
    z-index: 1;
}

.contacts_new__socialbanners {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.contacts_new__scheme-more {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

/* Контакты (contacts_new) на планшете 601–1199px: все блоки в этой секции
   заданы фикс. px и position:absolute; right/width, рассчитанными на
   контейнер 1200px (см. .contacts_new__top-banner-map { width:1200px }).
   В более узком .wrap они вылезают за экран (фото перекрывается жёлтым
   блоком, "О нас" обрезан слева, диаграмма справа). Переносим ту же
   3-колоночную (300px) раскладку, что и в старой версии сайта: контейнер
   .wrap = 900px, фото сужается до 300, остальные блоки перестраиваются
   в строки по 900px без position:absolute с "right". */
@media screen and (min-width: 601px) and (max-width: 1199px) {
    .wrap:has(.contacts_new) {
        width: 900px;
    }

    .header {
        height: auto !important;
    }

    .contacts_new__top-banner {
        height: 600px;
    }

    .contacts_new__top-banner-image {
        width: 300px;
    }

    .contacts_new__invite-content {
        width: 100%;
    }

    .contacts_new__top-banner-contacts {
        left: 300px;
        right: auto;
    }

    /* "О нас" (row2, cols 2-3), "мы в соц. сетях" (row3, отдельная секция
       .contacts_new__squares) и "карта+адрес" (row4, cols 1-3) — разные
       строки с разным левым краем, поэтому вместо общего flex-контейнера
       позиционируем text/map-block/address по отдельности. Карта+адрес
       должны идти ПОСЛЕ блока соцсетей, поэтому кладём их поверх начала
       .contacts_new__squares (top:900 = 600 верхний блок + 300 соцсети),
       а диаграмму отодвигаем вниз margin-top, освобождая под них место. */
    .contacts_new__top-banner-map {
        position: static;
    }

    .contacts_new__top-banner-text {
        position: absolute;
        left: 300px;
        top: 300px;
        width: 600px;
        height: 300px;
    }

    .contacts_new__top-banner-map-block {
        position: absolute;
        left: 0;
        top: 900px;
        width: 600px;
        height: 300px;
    }

    .contacts_new__top-banner-address {
        position: absolute;
        left: 600px;
        top: 900px;
        width: 300px;
        height: 300px;
    }

    .contacts_new__squares {
        flex-wrap: wrap;
    }

    .contacts_new__socialbanners {
        width: 900px;
    }

    .contacts_new__squares_banner {
        margin-top: 300px;
    }

    .header .menu__submenu {
        left: -174px !important;
    }
}

.supply_new {
    display: flex;
    justify-content: space-between;
}

.supply_new__left-flex {
    width: 900px;
}

.supply_new__right-flex {
    width: 600px;
}

.supply_new__right-flex-wrap {
    display: flex;
}

.supply_new__right-flex-yellow {
    width: 600px;
    height: 300px;
    background: #ffec55;
    font-size: 18px;
    font-weight: 600;
    padding: 90px 70px;
}

.supply_new__right-flex-yellow span {
    display: block;
    font-size: 24px;
    margin-top: 42px;
    line-height: 24px;
    font-weight: 700;
}

.supply_new__right-flex-yellow span b {
    border-bottom: 2px solid;
}

.supply_new__right-flex-text {
    width: 300px;
    height: 300px;
    background: #fff;
    font-size: 17px;
    padding: 60px 55px;
    line-height: 24px;
    font-weight: 300;
}

.supply_new__right-flex-step {
    width: 300px;
    height: 300px;
    background: #e8684b none repeat scroll 0 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    padding: 44px 55px 0 94px;
    color: #fff;
    box-shadow: inset 0 0 5px 5px #e8684b;
    position: relative;
}

.supply_new__right-flex-step a {
    color: #fff;
    border-bottom: 2px solid;
}

.supply_new__right-flex-banner {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.supply_new__right-flex-banner img {
    margin-left: -300px;
}

.supply_new__right-flex-banner .button {
    z-index: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 132px;
    margin: -19px 0 0 -66px;
    height: 38px;
}

.supply_new__right-flex-wrap._left-margin {
    position: relative;
    right: -300px;
    z-index: 20;
}

.vacancy_new__flex-top {
    display: flex;
    width: 100%;
}

.vacancy_new__flex-top-yellow {
    width: 600px;
    /*height: 300px;*/
    background: #ffec55;
    padding: 75px 40px 0 55px;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
}

.vacancy_new__flex-top-pink {
    width: 600px;
    height: 300px;
    color: #fff;
    font-size: 15px;
    padding: 60px 40px 0 50px;
    background: #e8684b;
}

.vacancy_new__flex-bottom {
    display: flex;
}

.vacancy_new__flex-bottom-right img {
    width: 100%;
    height: auto;
    filter: grayscale(100%);
}

.vacancy_new__flex-bottom-left {
    width: 900px;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}

.vacancy_new__flex-bottom-right {
    width: 600px;
    height: fit-content;
    position: relative;
}

.vacancy_new__flex-bottom-white {
    background: #fff;
    width: 600px;
    height: 300px;
    padding: 55px 55px 0 40px;
    font-size: 15px;
    line-height: 24px;
}

.vacancy_new__flex-bottom-white-p {
    background: #fff;
    width: 600px;
    height: 600px;
    padding: 120px 55px 0 40px;
    font-size: 15px;
    line-height: 24px;
}

.vacancy_new__flex-bottom-yellow {
    width: 300px;
    height: 300px;
    background: #ffec55;
    padding: 90px 40px 0 55px;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
}

.vacancy_new__flex-slider {
    width: 900px;
    height: 600px;
    overflow: hidden;
}

.slider__label {
    width: 100% !important;
    text-align: center;
}

.slider__label .slider__item-header {
    font-weight: 700;
    font-size: 13px;
    line-height: 325%;
    text-align: center;
    letter-spacing: .1em;
    color: #ffec55 !important;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.slider__label .slider__item-name {
    font-family: CoFoPeshka;
    font-size: 150px !important;
    line-height: 87%;
    text-align: center;
    letter-spacing: .005em;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 3px;
    max-width: unset !important;
}

.slider__label .slider__item-author {
    font-weight: 400;
    font-size: 15px;
    line-height: 154%;
    text-align: center;
    color: #fff;
}

@media (min-width: 600px) {
    .header__slider_fixed .text_container {
        padding-bottom: 50px !important;
    }

    .submenu .subnavigation {
        gap: 30px;
    }
}

@media (max-width: 600px) {
    .label-mobile-top {
        top: 30% !important;
    }

    .workshop_new__top-right {
        height: 50vw !important;
        width: 100vw !important;
        line-height: 20px !important;
    }
}

.submenu .subnavigation {
    display: flex !important;
}

.workshop_new__top {
    display: flex;
}

.workshop_new__top-left {
    width: 600px;
    height: 300px;
    padding: 0 65px;
    font-size: 16px;
    line-height: 24px;
    background: #fff;
    display: flex;
    align-items: center;
}

.workshop_new__top-right {
    width: 600px;
    height: 300px;
    color: #fff;
    background: #5ebc64;
    padding: 0 75px;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
}

.workshop_new__center-flex {
    display: flex;
}

.workshop_new__center-left {
    width: 900px;
}

.workshop_new__center-right {
    width: 600px;
}

.workshop_new__center-left-top {
    display: flex;
    justify-content: flex-end;
}

.workshop_new__center-left-top-orange {
    background: #e8684b;
    width: 300px;
    height: 300px;
    color: #fff;
    padding: 0 50px;
    line-height: 20px;
    display: flex;
    align-items: center;
}

.workshop_new__center-left-top-image {
    width: 300px;
    height: 300px;
}

.workshop_new__center-left-top-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workshop_new__center-right-white {
    width: 100%;
    height: 800px;
    background: #fff;
    padding: 0 50px;
    display: flex;
    align-items: center;
}

.workshop_new__center-right-image {
    width: 100%;
    height: 300px;
}

.workshop_new__center-right-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workshop__header {
    width: 100% !important;
}

.workshop_new__center-left-social {
    display: flex;
}

.workshop_new__center-left-social-images {
    width: 300px;
}

.workshop_new__center-left-social-banner {
    width: 600px;
    height: 800px;
    background: #4867aa;
    padding: 45px 50px;
    box-shadow: 0 1px 0 #4867aa;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
}

.workshop_new__center-left-social-banner-small {
    width: 100%;
    height: 300px;
}

.workshop_new__center-left-social-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workshop_new__center-left-social-links {
    display: flex;
    flex-wrap: wrap;
}

.workshop_new__center-left-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    background: #000;
    transition: all 0.5s ease;
}

.workshop_new__center-left-social-link:hover {
    background: #5ebc64;
    transition: all 0.5s ease;
}

.workshop_new__center-left-social-link img {
    width: 32px;
    height: auto;
}

.sep-150 {
    width: 150px;
    height: 150px;
    display: none;
}

.workshop_new__center-left-social-banner .workshop__text p {
    padding-top: 4px;
}

.workshop_new__center-left-social-banner .workshop__header::before {
    position: absolute;
    content: '';
    display: block;
    left: 0;
    right: auto;
    top: -105px;
    bottom: auto;
    z-index: 1;
    margin-top: 0;
    margin-left: 0;
    background-image: url(/local/templates/NewDesign/css/../images/sprite.png);
    background-position: -449px 0;
    width: 27px;
    height: 54px;
}

.workshop_new__center-left-social-banner .workshop__header {
    position: relative;
}

.workshop_new__center-left-social-icon {
    display: none;
}

.workshop__slider-banner {
    position: relative;
    width: 100%;
    height: 300px;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workshop__slider-banner .workshop__slider-banner-title {
    font-size: 38px;
    font-weight: 500;
    margin: 0 auto;
    line-height: 40px;
    color: #fff;
    letter-spacing: 1px;
    font-family: CoFoPeshka;
}

.service__slider-info-new {
    margin: 0 150px 0;
    width: 1200px;
    padding: 100px 80px 100px;
    box-sizing: border-box;
    height: 100%;
    display: table;
    table-layout: fixed;
}

.footer_new {
    width: 100%;
    position: relative;
}

.footer__container_new {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 93.75rem;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin: 0 auto;
    background: #000;
    position: relative;
    z-index: 500;
}

.footer_new:before {
    width: 50%;
    height: 100%;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
}

.footer_new:after {
    width: 50%;
    height: 100%;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background: #e5e5e5;
}

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

.partners__head-subtitle {
    font-size: 14px !important;
}

.footer__new_col {
    margin-top: 45px;
}

.footer__new_col .footer__main-link {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);

}

.footer__container_new_item {
    margin-bottom: 50px !important;
    padding-right: 50px;
    padding-left: 50px;
}

.footer__item_white_absolute {
    display: flex;
    background: #fff;
    width: 600px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.footer__item_white_absolute_left, .footer__item_white_absolute_right {
    padding: 35px 50px;
    width: 300px;
    height: 300px;
}

.footer_bottom_copy {
    width: 100%;
    background: #E5E5E5;
    color: rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

.footer_bottom_copy-inner {
    max-width: 93.75rem;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer_bottom_copy-left {
    font-size: 10px;
    line-height: 20px;
    font-weight: 400;
}

.footer_bottom_copy-right {
    width: 600px;
    height: 100%;
    background: #fff;
    position: relative;
}

.footer_bottom_copy-social {
    display: flex;
    justify-content: flex-start;
    position: relative;
}

.footer_bottom_copy-right:before, .footer__item_white_absolute:before {
    left: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: #fff;
    content: '';
}

.footer_bottom_copy-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    background: #2E2E2E;
    transition: all 0.5s ease;
    cursor: pointer;
}

.footer_bottom_copy-social a:hover {
    background: #000000;
    transition: all 0.5s ease;
}

.footer__item_white_new {
    height: 100%;
}

.footer__item_white_new .hideInMobile, .footer__item_white-last_new {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.footer__info-link_new {
    font-size: 15px;
    line-height: 20px;
    padding-bottom: 16px;
    font-weight: 600;
    display: block;
}

.footer__info-link_new-text {
    font-size: 15px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.5);
}

.foote-last-content-first {
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;

}

.foote-last-content-first a {
    color: #000;
}

.footer__copyright_new-title {
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
}

.footer__copyright_new-text {
    color: rgba(0, 0, 0, 0.5);
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
}

.show-laptop {
    display: none;
}

.show-mobile {
    display: none;
}

.resume__about_new {
    margin-top: 150px;
    position: relative;
    display: flex;
}

.resume__photo_new {
    width: 900px;
    height: 600px;
}

.resume__photo_new-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume__info_new {
    width: 600px;
    height: 600px;
    padding: 0 95px;
    background: #5ebc64;
    text-align: center;
    color: #fff;;
}

.resume__about_flex {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}

.resume__history_new_white {
    height: 100%;
}

.resume__history_new {
    display: flex;
    align-items: flex-end;
}

.resume__history_new-left {
    width: 600px
}

.resume__me_new {
    width: 100%;
    height: 300px;
    background: #ffec55;
    padding: 0 75px;
}

.resume__me_slider {
    position: relative;
    width: 100%;
    height: 600px;
}

.resume__history_new-center {
    width: 600px;
    height: 900px;
    background: #fff;
    padding: 0 65px;
}

.resume__history_new-right {
    width: 300px;
}

.resume__img_new {
    width: 300px;
    height: 300px;
    position: relative;
}

.resume__history_new-right-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume__me_slider .resume__slider {
    position: unset;
}

.resume__blocks_fixed {
    display: flex;
}

.resume__blocks_fixed_left {
    width: 600px;
}

.resume__blocks_fixed_left_white {
    margin-top: 300px;
    background: #fff;
    padding: 0 65px;
    width: 100%;
    height: 600px;
}

.resume__blocks_fixed_right {
    width: 900px;
}

.resume__blocks_fixed_right-bottom {
    position: relative;
    width: 600px;
    height: 600px;
}

.resume__blocks_fixed_right-bottom .resume__slider_2 {
    position: unset;
}

.resume__blocks_fixed_right-top {
    display: flex;
}

.resume__img_new-top {
    width: 300px;
    height: 300px;
    position: relative;
}

.resume__img_new-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume__blocks_fixed_right-content-white {
    width: 600px;
    height: 600px;
    background: #f6f6f6;
    padding: 0 65px;
}

.resume__img_new-top:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(72, 72, 72, 0.25);
    z-index: 2;
}

.resume__news_item-images {
    display: flex;
}

.advantages-list__name {
    font-size: 30px !important;
}

.resume__img_news_new {
    width: 300px;
    height: 300px;
    position: relative;
}

.resume__img_news_new_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume__history-item_new {
    width: 600px;
    height: 300px;
    padding: 0 65px;
    background: #f6f6f6;
}

.resume__news_item_block_1 {
    display: flex;
}

.resume__news_item_block_1_white {
    width: 900px;
    height: 300px;
    background: #fff;
    padding: 0 65px;
}

.resume__news_item_block_1_image {
    width: 300px;
    height: 300px;
    position: relative;
}

.resume__news_item_block_1_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume__news_item_block_2 {
    display: flex;
    justify-content: flex-end;
}

.resume__news_item_block_2_slider {
    position: relative;
    width: 600px;
    height: 600px;
}

.resume__news_item_block_2_white {
    width: 600px;
    height: 600px;
    background: #f6f6f6;
    padding: 0 65px;
}

.resume__news_item_block_2_slider .resume__slider_3 {
    position: unset !important;
}

.resume__news_item_block_3 {
    display: flex;
}

.resume__news_item_block_3_left {
    position: relative;
    width: 600px;
    height: 600px;
}

.resume__news_item_block_3_left .resume__slider_4 {
    position: unset !important;
}

.resume__news_item_block_3_right {
    width: 900px;
}

.resume__news_item_block_3_right-top {
    width: 100%;
    height: 300px;
    background: #fff;
    padding: 0 65px;
}

.resume__news_item_block_3_right-bottom {
    display: flex;
}

.resume__news_item_block_3_right-bottom_1 {
    width: 600px;
    height: 300px;
    position: relative;
}

.resume__news_item_block_3_right-bottom_1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume__news_item_block_3_right-bottom_2 {
    width: 300px;
    height: 300px;
    position: relative;
}

.resume__news_item_block_3_right-bottom_2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume__news_item_block_4 {
    display: flex;
}

.resume__news_item_block_4_white {
    width: 600px;
    height: 300px;
    background: #f6f6f6;
    padding: 0 65px;
}

.resume__news_item_block_4_img {
    position: relative;
    width: 300px;
    height: 300px;
}

/* На широком десктопе (>1500, без масштабирования канвы) на old.aaba.ru
   "Пишу для FORBES Russia" (текст 600) + фото (300) + "Люблю жизнь" (600)
   стоят В ОДНУ строку (600+300+600=1500=ширина канвы). Спейсер нужен только
   для раскладки 1200-1500 (см. медиа-запрос ниже) — здесь прячем его и
   выставляем порядок текст→фото→"Люблю жизнь", как на old. */
.resume__news_item_block_4_spacer {
    display: none;
}

.resume__news_item_block_4_forbes-text {
    order: 1;
}

.resume__news_item_block_4_img {
    order: 2;
}

.resume__news_item_block_4_love-text {
    order: 3;
}

.resume__news_item_block_4_images {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume__news_item_block_4_img:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(72, 72, 72, 0.25);
    z-index: 2;
}

.project__review .reviews__quote-text {
    margin-top: 10px !important;
}

.project__review .reviews__name {
    display: flex;
    padding: 0px 50px 0 50px !important;
    flex-direction: column;
    align-items: flex-start;
    align-content: center;
    justify-content: center;
}

.resume__news_item_block_5 {
    display: flex;
}

.resume__news_item_block_5_left {
    width: 900px;
    height: 600px;
    background: #fff;
    padding: 0 65px;
}

.resume__news_item_block_5_right {
    display: flex;
    flex-wrap: wrap;
    width: 600px;
}

.resume__news_item_block_5_right_img {
    display: block;
    width: 300px;
    height: 300px;
    position: relative;
}

.resume__news_item_block_5_right_img img {
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    object-fit: cover;
}

.resume__news_item_block_5_right_img:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(72, 72, 72, 0.25);
    z-index: 2;
}

.fancybox-inner {
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.fancybox-image {
    width: auto !important;
    height: auto !important;
}

.menu__submenu.services_sub .services-list-menu {
    /*height: 305px;*/
    /*overflow: hidden;*/
}

.menu__submenu.services_sub .services-list-menu.open {
    height: auto;
    overflow-y: auto;
}

.menu__submenu.services_sub {
    height: unset !important;
    min-height: unset !important;
}

@media (max-height: 600px) {

}

.more-services-menu {
    /*flex-basis: 300%;*/
}

.open-menu-services {
    color: #fff;
    padding: 15px 0;
    cursor: pointer;
}

@media (max-width: 1500px) {
    .hidden-laptop {
        display: none;
    }

    .show-laptop {
        display: block;
    }

    .footer_new:before {
        display: none;
    }

    .footer__item_showreel_new {
        background: #E5E5E5;
    }

    .footer_bottom_copy-inner {
        max-width: 1200px;
    }

    .show-laptop .footer__map-link {
        position: unset;
        margin-top: 50px;
    }

    .footer__container_new {
        padding-bottom: 50px;
    }

    .service__slider-info-new {
        margin: 0;
        padding: 100px 155px 100px;
    }

}

@media (max-width: 1200px) {
    .contact__item {
        position: relative !important;
    }

    .footer_bottom_copy-inner {
        max-width: 100%;
    }

    .footer_new .footer__container_new {
        max-width: 100%;
    }

    .footer__container_new {
        grid-template-columns: repeat(4, 1fr);
    }

    .footer_bottom_copy-left {
        padding-left: 50px;
        background: #E5E5E5;
    }

    .show-laptop .footer__map-link {
        margin-top: 20px;
    }

    /* .wrap:not(:has(.contacts)):not(:has(.contacts_new)) { Если что раскомитить
        width: 100%;
    } */
}

@media (max-width: 1024px) {
    .footer__container_new_item {
        padding-right: 20px;
        padding-left: 20px;
    }

    .footer__container_new {
        padding-bottom: 80px;
    }
}

/* Футер (все страницы): белая карточка "Контакты" — position:absolute;
   right:0; bottom:0; width:600px; height:300px внутри .footer__container_new
   (см. .footer__item_white_absolute выше). Абсолютный блок не резервирует
   место в потоке — на 1025-1500px колонки ссылок становятся уже и выше
   (текст переносится на новую строку), и последняя колонка/видео-превью
   упирается прямо в карточку снизу-справа. Добавляем контейнеру запас
   снизу под её высоту (300px + отступ). */
@media (min-width: 1025px) and (max-width: 1500px) {
    .footer__container_new {
        padding-bottom: 340px;
    }
}

.work-steps__item_slider, .portfolio-4x4__slider {
    /*width: 900px!important;*/
    max-width: 900px !important;
}

.portfolio-4x4__img {
    max-width: 900px !important;
}

@media (max-width: 900px) {
    .work-steps__item_slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    .portfolio-4x4__img {
        max-width: 100% !important;
    }

    .footer__item_showreel_new {
        display: none;
    }

    .footer__item_showreel_nobile {
        display: block;
        width: 100%;
        height: 300px;
    }

    .footer__container_new {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer__item_white_absolute {
        max-width: calc(100% - 33%)
    }

    .footer__item_white_absolute_left, .footer__item_white_absolute_right {
        width: 50%;
    }

    .footer_bottom_copy-right {
        max-width: calc(100% - 33%)
    }

    .footer__item_white_absolute_left, .footer__item_white_absolute_right {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 602px) {
    .footer__container_new {
        display: flex;
        flex-wrap: wrap;
    }

    .footer__new_col {
        width: 50%;
    }

    .hidden-mobile {
        display: none;
    }

    .show-mobile {
        display: block;
    }

    .footer__item_white_absolute {
        position: unset;
        width: 100%;
        min-width: 100%;
        flex-wrap: wrap;
    }

    .popup .fancybox-title-over-wrap {
        right: 0 !important;
        width: 100% !important;
        z-index: 1;
    }

    .fancybox-wrap .popup__close {
        background: #fff !important;
    }

    .footer_bottom_copy-right {
        display: none !important;
    }

    .footer__item_white_absolute_left, .footer__item_white_absolute_right {
        width: 100%;
        height: auto !important;
    }

    .footer__container_new {
        padding-bottom: 0 !important;
    }

    .footer__item_white_absolute_right {
        padding: 35px 25px 25px;
    }

    .footer__item_white_absolute_left {
        padding-bottom: 15px;
    }

    .footer__item_white-last_new {
        justify-content: flex-start;
        gap: 35px;
    }

    .foote-last-content-first,
    .footer__copyright_new-title,
    .footer__copyright_new-text {
        font-size: 13px;
        line-height: 20px;
    }

    .footer_bottom_copy {
        background: #fff;
        padding-bottom: 20px;
        padding-left: 25px;
    }

    .footer_bottom_copy-left {
        padding-left: 0 !important;
        background: transparent;
    }

    .footer_bottom_copy-social {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .footer_bottom_copy-social a {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .mobile-footer-social.show-mobile {
        width: 100% !important;
        background-color: #fff;
    }

    .footer__item_white_absolute_left {
        background-color: #2E2E2E;
        color: #fff !important;
    }

    .footer__title, .footer__info-link_new-text {
        color: #fff !important;
    }

    .footer_bottom_copy-social-mobile-top {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .footer_bottom_copy-social-mobile-top a {
        height: 95px;
        background-color: #2E2E2E;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
        cursor: pointer;
    }

    .footer_bottom_copy-social-mobile-top a:hover {
        background-color: #000;
        transition: all 0.5s ease;
    }

    .portfolio__item_new {
        width: 100%;
    }

    .portfolio__item_new img {
        width: 100%;
    }

    .contact__item_portfolio.portfolio__item {
        width: 100% !important;
    }

    .portfolio__item {
        width: 100% !important;
    }

    body {
        max-width: 100% !important;
        min-width: 100% !important;
    }

    .wrap {
        width: 100% !important;
        min-width: 100% !important;
    }

    .contacts_new__top-banner-image {
        width: 100% !important;
    }

    .contacts_new__top-banner-contacts {
        position: relative;
        right: 0;
        width: 100%;
        display: block;
    }

    .contacts_new__invite-content, .contacts_new__top-banner-left, .contacts_new__top-banner-right {
        width: 100%;
    }

    .contacts_new__top-banner-map {
        position: relative;
        display: block;
    }

    .contacts_new__top-banner-text,
    .contacts_new__top-banner-map-block,
    .contacts_new__top-banner-address,
    .contacts_new__social-lable,
    .contacts_new__social-items,
    .contacts_new__scheme-more {
        width: 100%;
    }

    .contacts_new__squares {
        display: block;
    }

    .contacts_new__squares_banner {
        width: 100%;
        height: auto;
    }

    .contacts_new__scheme-more-img {
        width: 100%;
    }

    .subheader__nav-item {
        height: unset !important;
    }

    .subheader__nav-item span {
        line-height: 100% !important;
    }

    .subheader__nav {
        /*flex-wrap: inherit!important;*/
        width: 200%;
    }

    .subheader_contacts {
        overflow-x: auto !important;
    }

    .contacts_new__scheme-more-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        background-position: center;
        margin-left: 0 !important;
    }

    .contacts_new__squares_banner img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
        background-position: center;
    }

    .supply_new__right-flex-wrap,
    .supply_new__right-flex-wrap,
    .supply_new {
        display: block;
    }

    .supply_new__right-flex-yellow,
    .supply_new__right-flex-text,
    .supply_new__right-flex-step,
    .supply_new__left-flex,
    .supply_new__right-flex-banner,
    .supply_new__right-flex,
    .vacancy_new__flex-top-yellow,
    .vacancy_new__flex-top-pink,
    .vacancy_new__flex-bottom-left,
    .vacancy_new__flex-bottom-white,
    .vacancy_new__flex-bottom-yellow,
    .vacancy_new__flex-slider,
    .vacancy_new__flex-bottom-right,
    .vacancy__img-empty,
    .workshop_new__top-left,
    .workshop_new__top-right {
        width: 100%;
    }

    .supply_new__right-flex-yellow,
    .supply_new__right-flex-text,
    .vacancy_new__flex-top-yellow,
    .vacancy_new__flex-top-pink,
    .vacancy_new__flex-bottom-white,
    .vacancy_new__flex-bottom-yellow {
        padding: 30px;
    }

    .supply_new__right-flex-wrap._left-margin {
        right: 0;
    }

    .contacts__scheme-more-img, .vacancy_new__flex-bottom-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .supply_new__right-flex img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .vacancy_new__flex-top, .vacancy_new__flex-bottom {
        display: block;
    }

    .vacancy_new__flex-top-yellow {
        font-size: 16px;
        line-height: 22px;
    }

    .vacancy_new__flex-slider {
        height: auto;
    }

    .vacancy__img-empty {
        display: none;
    }

    .about__slider {
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
    }

    .vacancy_new__flex-bottom-white {
        height: auto;
    }

    .vacancy_new__flex-bottom-white-p {
        width: 100%;
        height: auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .prInternship .service__project-slider.p1 .features__slider-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        margin-left: 0 !important;
    }

    .workshop_new__top, .workshop_new__center-flex {
        display: block;
    }

    .workshop_new__top-left, .workshop_new__top-right {
        height: auto;
        padding: 30px;
    }

    .workshop_new__center-left {
        width: 100%;
    }

    .workshop_new__center-left-top {
        display: block;
    }

    .workshop_new__center-left-top-orange,
    .workshop_new__center-left-social-images,
    .workshop_new__center-left-social-banner,
    .workshop_new__center-right,
    .workshop_new__center-right-white {
        width: 100%;
        height: auto;
    }

    .workshop_new__center-left-top-image,
    .workshop_new__center-right-image,
    .workshop_new__center-left-social-banner-small {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .workshop_new__center-left-social {
        display: block;
    }

    .workshop_new__center-left-top-orange, .workshop_new__center-right-white {
        padding: 30px;
    }

    .sep-150 {
        display: none;
    }

    .workshop_new__center-left-social-banner {
        padding: 30px;
    }

    .workshop_new__center-left-social-banner .workshop__header:before {
        display: none;
    }

    .service__slider-info-new {
        margin-left: 0;
        padding: 40px 56px;
    }

    .bx-wrapper:not(.workshop__slider .bx-wrapper), .bx-viewport:not(.workshop__slider .bx-viewport) {
        height: unset !important;
    }

    .workshop__slider .bx-prev,
    .workshop__slider .bx-next {
        width: 40px;
    }

    .workshop__slider .bx-prev:hover,
    .workshop__slider .bx-next:hover,
    .workshop__slider .bx-prev:active,
    .workshop__slider .bx-next:active {
        background: transparent;
    }

    .resume__about_new,
    .resume__news_item_block_1,
    .resume__news_item_block_2,
    .resume__news_item_block_3,
    .resume__news_item_block_4,
    .resume__news_item_block_5 {
        margin-top: 0;
        display: block;
    }

    .resume__photo_new,
    .resume__info_new,
    .resume__history_new-left,
    .resume__me_new,
    .resume__me_slider,
    .resume__history_new-center
    .resume__history_new-right,
    .resume__img_new,
    .resume__blocks_fixed_left,
    .resume__blocks_fixed_left_white,
    .resume__blocks_fixed_right,
    .resume__img_news_new,
    .resume__history-item_new,
    .resume__news_item_block_1_white,
    .resume__news_item_block_1_image,
    .resume__news_item_block_2_slider,
    .resume__news_item_block_2_white,
    .resume__news_item_block_3_left,
    .resume__news_item_block_3_right,
    .resume__news_item_block_3_right-top,
    .resume__news_item_block_3_right-bottom_1,
    .resume__news_item_block_3_right-bottom_2,
    .resume__news_item_block_4_white,
    .resume__news_item_block_4_img,
    .resume__history_new-center,
    .resume__history_new-right,
    .resume__img_new-top,
    .resume__blocks_fixed_right-content-white,
    .resume__blocks_fixed_right-bottom,
    .resume__news_item_block_5_left,
    .resume__news_item_block_5_right,
    .resume__help,
    .resume__news_item_block_5_right_img {
        width: 100%;
        height: auto;
        margin-top: 0;
    }

    .resume__history_new, .resume__blocks_fixed_right-top {
        display: block;
    }

    .resume__blocks_fixed {
        display: block;
    }

    .resume__info_new,
    .resume__me_new,
    .resume__history_new-center,
    .resume__blocks_fixed_left_white,
    .resume__blocks_fixed_right-content-white,
    .resume__history-item_new,
    .resume__news_item_block_1_white,
    .resume__news_item_block_2_white,
    .resume__news_item_block_3_right-top,
    .resume__news_item_block_4_white,
    .resume__help,
    .resume__news_item_block_5_left
        /*.workshop__bottom_new-top-left*/
    {
        padding: 30px;
    }

    .resume__info_new .resume__header h1 {
        font-size: 18px;
        font-weight: 700;
        line-height: 22px;
    }

    .resume__img_14 {
        background-size: cover !important;
    }

    .resume__help {
        width: 100% !important;
        height: auto !important;
        padding: 30px !important;
        position: unset !important;
    }

    .resume__read {
        width: 100% !important;
        height: auto !important;
        top: 0 !important;
        padding: 30px !important;
    }

    .publications__text {
        margin-top: 0px !important;
    }

    .publications__text {
        padding: 30px !important;
        height: auto !important;
    }

    .publications__slider {
        position: unset !important;
        /* padding:30px давал серую рамку вокруг фото (просвечивал фон секции).
           Картинка должна занимать блок целиком — 100vw x 100vw. */
        padding: 0 !important;
        display: flex;
        justify-content: center;
    }

    .publications__label {
        width: 100% !important;
        position: unset !important;
    }

    .bx-controls.bx-has-controls-direction {
        /*display: none!important;*/
    }

    .subheader {
        margin-top: 56px !important;
    }

    #portfolio .swiper-wrapper {
        top: 0 !important;
    }

    .portfolio__slide-wrapper-img, .portfolio__slide-img {
        height: 100vh !important;
    }

    .workshop__years-number span {
        font-size: 25px !important;
    }

    .workshop__years-number_arrow {
        padding-right: 60px !important;
    }

    .workshop_new__top-left {
        font-size: 12px;
        height: 75vw !important;
        width: 100vw !important;
    }

    .service__slider-text {
        width: 100% !important;
    }

    .service__slider-info-new {
        width: 100% !important;
    }

    .resume__header {
        font-size: 26px !important;
    }

    .partners__logos, .partners__env-info {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .partners__header {
        font-size: 26px !important;
    }

    .partners__env-img_1 {
        width: 100% !important;
    }

    .partners__header {
        width: 100% !important;
    }

    .partners__env-info {
        height: auto !important;
    }

    .slider__label .slider__item-name {
        font-size: 60px !important;
    }

    .slider__label {
        /*top: 40%!important;*/
    }

    .header__slider_fixed .text_container {
        /*top: calc(100% - 200px)!important;*/
        /*height: auto!important;*/
        transition: none;
    }

    .header__slider_fixed .slider__label:not(.text_container) {
        left: 0 !important;
    }

    .project__info {
        widTH: 100% !important;
        height: auto !important;
        flex-direction: column !important;
        position: relative !important;
    }

    .project__info-list {
        float: none !important;
    }

    .project__info-list {
        width: 100% !important;
        padding: 20px !important;
    }

    .project__info-list li {
        padding-bottom: 5px;
        border-bottom: 1px solid #0000004D;
    }

    .project__info-list:first-child {
        padding-bottom: 0 !important;
    }

    .project__info-list + .project__info-list {
        padding-top: 0 !important;
    }

    .header__slider_fixed .text_container {
        font-size: 14px !important;
    }

    .project__map {
        width: 100% !important;
        top: 0 !important;
        position: relative !important;
        height: 210px !important;
    }

    .project__slider, .project__bottom-social {
        width: 100% !important;
        /*height: auto!important;*/
    }

    .project__text {
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        min-height: unset !important;
    }

    .block_rectangle, .project__desc {
        width: 100% !important;
        padding: 20px !important;
    }

    .project__slider {
        height: auto !important;
    }

    .project__header {
        font-size: 26px !important;
    }

    .block_square, .project__review {
        height: auto !important;
        position: relative !important;
    }

    .project__row, .block_center-top {
        height: auto !important;
    }

    /* блок отзыва на проекте: имя/должность слева, фото справа (в одну строку),
       цитата — отдельной строкой на всю ширину под ними. */
    .project__review {
        display: -ms-grid !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        -ms-grid-columns: 1fr 1fr !important;
    }

    .project__review .reviews__name {
        width: 100% !important;
        padding: 20px !important;
        -ms-grid-row: 1 !important;
        -ms-grid-column: 1 !important;
        grid-row: 1 !important;
        grid-column: 1 !important;
    }

    .project__review .reviews__author {
        left: unset !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        -ms-grid-row: 1 !important;
        -ms-grid-column: 2 !important;
        grid-row: 1 !important;
        grid-column: 2 !important;
    }

    .project__review .reviews__author img {
        width: 100% !important;
        height: 100% !important;
        -o-object-fit: cover !important;
        object-fit: cover !important;
        display: block !important;
        margin-left: 0 !important;
    }

    .project__review .reviews__quote {
        width: 100% !important;
        -ms-grid-row: 2 !important;
        -ms-grid-column: 1 !important;
        -ms-grid-column-span: 2 !important;
        grid-row: 2 !important;
        grid-column: 1 / span 2 !important;
    }

    /* "12" + вертикальная надпись "Преимуществ" на мобилке.
       Раньше надпись (flex-элемент) РАСТЯГИВАЛАСЬ на всю высоту цифр (align-
       items:stretch по умолчанию), а текст внутри растянутого бокса вставал
       по-разному в разных движках: в Chrome/Android — по центру, в WebKit/iOS
       — выше, из-за чего "Преимуществ" вылезало над верхом "12". Фиксим
       детерминированно: не растягиваем бокс, а центрируем сам текст по высоте
       через align-items/align-self:center — это одинаково во всех движках,
       никаких iOS-хаков не нужно. margin-left управляет отступом от цифр. */
    .advantages-list__num {
        /* Было display:flex + align-items:center. В WebKit/iOS флекс-элемент с
           writing-mode:vertical-rl получает неверный собственный размер (движок
           отдаёт ему всю доступную высоту), и центрирование центрирует уже
           «раздутый» бокс — из-за этого "Преимуществ" уезжало именно на айфоне,
           тогда как в Blink (ПК/Android) размер считался верно и всё стояло ровно.
           Уходим со стыка «флекс + вертикальный writing-mode» на обычную строчную
           раскладку: "12" и повёрнутая надпись — inline-элементы одной строки,
           выравнивание задаётся vertical-align. Это одинаково во всех движках. */
        display: block !important;
        white-space: nowrap !important;
        align-items: flex-end !important;
        line-height: 1 !important;
        position: relative !important;
    }

    .advantages-list__value{
        position: relative;
        top: 0;
    }

    /* Было: transform:rotate(270deg) на обычном горизонтальном тексте плюс
       фиксированная ширина 145px (реальная ширина НЕповёрнутого текста) с
       margin-left:-45px, чтобы подтянуть повёрнутый текст к цифре "12".
       Оба числа были подобраны вручную под конкретный рендер шрифта — на
       iOS Safari тот же текст рисуется чуть иначе, и либо съезжал (при
       маленькой ширине текст ещё и обрезался, см. историю правок), либо
       давал лишний зазор.
       Меняем на writing-mode: vertical-rl — это штатный CSS-механизм
       вертикального текста (не трансформ над горизонтальным текстом), браузер
       сам считает реальные ширину/высоту бокса по фактически отрисованным
       глифам — никаких магических чисел под конкретный движок не нужно,
       ни обрезаться, ни "гулять" тут нечему. vertical-rl по умолчанию даёт
       направление "читать, наклонив голову вправо" — rotate(180deg) разворачивает
       на противоположное, как было раньше (rotate(270deg) = "голову влево").
       Это НЕ transform над самим текстом (тот ломал разметку), а поворот уже
       готового вертикального блока на 180° — операция, не зависящая от
       ширины глифов, поэтому безопасна в любом движке.
       Только для .advantages-list._mobile (это правило внутри
       @media max-width:602px) — десктопная (_desktop) версия использует
       СВОЙ, отдельный CSS в style.css (position:absolute) и не затронута. */
    .advantages-list__name {
        position: static !important;
        /* inline-block вместо флекс-элемента: размер считается по содержимому
           (высота = длина строки в вертикальном режиме), а не по правилам
           флекс-раскладки, где WebKit ошибается. vertical-align задаёт положение
           по высоте строки детерминированно, без align-self. */
        display: inline-block !important;
        /* Ключевой момент. Было vertical-align:middle при фиксированной
           height:147px — то есть строка центрировалась внутри бокса, размер
           которого WebKit (iOS) и Blink считают по-разному для
           writing-mode:vertical-rl, а сам middle отсчитывается от x-height
           шрифта родителя. Отсюда и расхождение только на айфоне.

           По CSS 2.1 (§10.8.1) у inline-block с overflow, отличным от visible,
           базовая линия — это НИЖНИЙ КРАЙ МАРГИН-БОКСА. Это требование
           спецификации, одинаково реализованное во всех движках, а не подгонка
           под метрики шрифта. Значит: overflow:hidden + vertical-align:baseline
           сажают низ надписи ровно на базовую линию строки, а базовая линия —
           это и есть визуальный низ цифр "12" (у CoFoPeshka цифры без нижних
           выносных элементов). Ни x-height, ни собственный размер вертикального
           бокса в расчёте больше не участвуют.

           height:auto вместо 147px — бокс обязан облегать строку, иначе его
           нижний край (=базовая линия) уедет от конца текста. Заодно снимается
           старая проблема с подрезкой "П", ради которой уменьшали кегль. */
        vertical-align: baseline !important;
        overflow: hidden !important;
        /* База даёт 21px (style.min.css). В вертикальном режиме длина слова
           "Преимуществ" при этом кегле упирается в высоту блока, и нижняя буква
           "П" подрезается. Пара пикселей вниз — слово влезает целиком. */
        font-size: 19px !important;
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
        transform-origin: center !important;
        width: auto !important;
        height: auto !important;
        white-space: nowrap !important;
        margin-left: 16px !important;
        /* Базовая линия = нижний край МАРГИН-бокса (см. выше), поэтому
           отрицательный margin-bottom опускает сам бокс на те же 2px: нижние
           засечки "Преимуществ" встают вровень с низом цифр. Это чистая
           блочная модель, а не подгонка под метрики движка, — сдвиг одинаков
           в WebKit и Blink. */
        margin-bottom: 0px !important;
    }


    .advantages-list__text {
        width: 72vw !important;
    }


    .service__slider-header,
    .workshop__slider-banner-title,
    .workshop__header {
        font-family: CoFoPeshka !important;
        line-height: .93 !important;
        letter-spacing: .005em !important;
        text-transform: uppercase !important;
        font-weight: 500 !important;
        font-size: 55px !important;
    }

    .project__top-social-item {
        width: 105px !important;
        height: 105px !important;
    }

    .mMenu__2lvl {
        padding: 20px 20px 20px 0 !important;
    }

    .block {
        position: unset !important;
        height: auto !important;
    }

    /* Квадратная главная картинка проекта/услуги на мобиле: было
       height:300px — произвольное число, не равное ширине экрана, да ещё
       и с overflow:visible на обёртках, из-за чего сама картинка (её
       высоту вручную ставит bxSlider, ориентируясь на разные фото в
       галерее) вообще не обрезалась и вылезала за пределы этих 300px.
       100vw = высота ровно равна ширине экрана (375 → 375, 414 → 414),
       overflow:hidden обрезает картинку внутри (у неё уже есть
       object-fit:cover — см. style.css компонента), а не даёт ей вылезти. */
    .project__slider-outer, .project__slider-container, .project__slider-container .bx-wrapper, .project__slider-container .bx-wrapper .bx-viewport, .project__slider-container .featuresSlider__list {
        height: 100vw !important;
        overflow: hidden !important;
    }

    .project__slider-item {
        height: 100% !important;
    }

    .project__row {
        min-height: unset !important;
    }

    .resume__news_item-images .resume__img_news_new,
    .resume__news_item_block_3_right-bottom .resume__news_item_block_3_right-bottom_1,
    .resume__news_item_block_3_right-bottom .resume__news_item_block_3_right-bottom_2,
    .resume__news_item_block_5_right a {
        width: 50% !important;
        height: auto;
    }

    .resume__news_item-images {
        flex-wrap: wrap;
    }

    .resume__news_item-images .service__slider-label {
        bottom: unset;
        top: 29px;
        padding-right: 20px;
    }
}

/**/
.subheader__nav {
    /*padding: 0 !important;*/
    /*gap: 0 !important;*/
}

.subheader_publications .subheader__nav-item {
    transition: .3s ease;
}

.subheader_publications .subheader__nav-item:hover {
    color: #000;
}

@media screen and (max-width: 600px) {
    .subheader__nav {
        height: 42px !important;
        /*gap: 0px !important;*/
        justify-content: flex-start;
        padding: 0 10px !important;
        overflow-x: auto;
        min-width: 100vw !important;
    }

    .subheader__nav::-webkit-scrollbar {
        display: none;
    }

    .subheader__nav-item {
        font-size: 8px !important;
    }

    .workshop__slider-banner {
        height: 50vw !important;
        width: 100vw !important;
    }

    .workshop__bottom-slider .features__slider-item:before {
        height: 100vw !important;
    }
}

.vacancy_new__flex-bottom-right:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(72, 72, 72, 0.25);
    z-index: 2;
}

.main.mainServices {
    margin-top: calc(100svh - 0px) !important;
}

@media screen and (max-width: 600px) {
    .main.mainServices {
        margin-top: 600px !important;
    }

    .header__slider_fixed .text_container {
        justify-content: center;
        text-align: left !important;
    }

    .service__start .features__calc {
        padding-top: 80px !important;
    }

    .start__item {
        padding: 22px 55px 22px 94px !important;
    }

    .start__item_1 {
        padding: 44px 55px 22px 94px !important;
    }

    .service__features-label {
        padding-left: 20px !important;
        height: auto !important;
        position: initial !important;
    }

    .service__features-label span {
        line-height: 85% !important;
    }

    .service__nav-item {
        display: flex !important;
        align-items: center;
        max-height: 100px;
    }

    .service__nav-item span {
        top: initial !important;
    }

    .service__nav-item-block {
        display: flex !important;
        align-items: center;
    }

    .service__desc .start__procent {
        float: none !important;
        padding-bottom: 45px;
    }

    .start__procent-text {
        position: initial !important;
    }

    .start__procent-value {
        line-height: 1;
        margin-bottom: 16px;
    }

    .service__features-item:before {
        left: 20px !important;
        top: 36px !important;
    }

    .guests__item_1x1 {
        padding-bottom: 25px !important;
    }

    .workshop__master {
        height: 75vw !important;
        width: 100vw !important;
    }

    .workshop__header {
        margin-top: 0;
    }

    .workshop__bottom-slider.new_wbs .featuresSlider_workshop-img {
        height: 100vw !important;
        width: 100vw !important;
    }

    .workshop__bottom-slider.new_wbs .featuresSlider_workshop .bx-controls {
        top: auto !important;
        bottom: 0 !important;
    }

    .workshop__img_7 {
        height: 100vw !important;
        width: 100vw !important;
    }

    .workshop__text p:first-child {
        padding-top: 0 !important;
    }
}

/**/
.header .menu__submenu-block_all-services {
    cursor: pointer;
}

.menu__submenu.services_sub .services-list-menu {
    transition: .7s ease;
    /*max-height: 305px;*/
    /*height: auto;*/
}

.menu__submenu.services_sub .services-list-menu::-webkit-scrollbar {
    display: none;
}

.menu__submenu.services_sub .services-list-menu.open {
    max-height: 1000px;
}

.header .menu__item_hasChild .menu__submenu.active {
    /*visibility: visible;*/
    /*opacity: 1;*/
    /*-webkit-transition: .4s ease-out;*/
    /*-o-transition: .4s ease-out;*/
    /*transition: .4s ease-out;*/
}

.services_sub.open {
    display: none !important;
}

/**/
.portfolio-4x4__wrapper {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.portfolio-4x4__slider-next,
.portfolio-4x4__slider-prev {
    position: absolute;
    z-index: 99;
    background: #FFFFFF;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    float: left;
    -webkit-transition: background .1s linear 0;
    -moz-transition: background .1s linear 0;
    -o-transition: background .1s linear 0;
    -ms-transition: background .1s linear 0;
    transition: background .1s linear 0;
    -webkit-backface-visibility: hidden;
    text-indent: -9999px;
}

.portfolio-4x4__slider-prev {
    right: 50px;
}

.portfolio-4x4__slider-next:before2 {
    position: absolute;
    content: '';
    display: block;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 11px;
    height: 20px;
    background: url(/local/templates/NewDesign/css/../images/sprite.png) no-repeat -423px -209px;
    z-index: 1;
    margin-left: -5.5px;
    margin-top: -10px;
}

.portfolio-4x4__slider-prev:before2 {
    position: absolute;
    content: '';
    display: block;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 11px;
    height: 20px;
    background: url(/local/templates/NewDesign/css/../images/sprite.png) no-repeat -49px -318px;
    z-index: 1;
    margin-left: -5.5px;
    margin-top: -10px;
}

/**/
.slider_text_wrapper {
    display: none;
}

/* Чёрная safe-area на iPhone на всём сайте.
   С viewport-fit=cover контент уходит под чёлку/динамический островок сверху
   и под полосу-домашний-индикатор снизу; сами эти зоны Safari заполняет фоном
   страницы (body — светло-серый), из-за чего полоски выглядят серыми.
   Рисуем поверх этих зон фиксированные чёрные полоски ровно по высоте
   env(safe-area-inset-top/bottom). На устройствах без выреза insets = 0 —
   полоски нулевой высоты и не видны. pointer-events:none — не мешают тапам,
   z-index заведомо выше всего (включая моб. меню), т.к. это самый край
   экрана, где контента быть не должно. */
@supports (top: env(safe-area-inset-top)) {
    /* Чёрные полоски только БЕЗ открытой галереи, иначе z-index max перекрывает
       галерею. .fancybox-lock на iPhone не ставится (locked:!isTouch), поэтому
       дополнительно проверяем .gallery-open — её вешает JS в header.php. */
    html:not(.fancybox-lock):not(.gallery-open)::before,
    html:not(.fancybox-lock):not(.gallery-open)::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        background: #000;
        z-index: 2147483647;
        pointer-events: none;
    }

    html:not(.fancybox-lock)::before {
        top: 0;
        height: env(safe-area-inset-top);
    }

    html:not(.fancybox-lock)::after {
        bottom: 0;
        height: env(safe-area-inset-bottom);
    }
}

/**/
html.menu-open {
    overflow: hidden;
}

#portfolio .slider-prev::before {
    border-bottom: 1.5px solid #ffffff;
    border-left: 1.5px solid #ffffff
}

#portfolio .slider-next::before {
    border-top: 1.5px solid #ffffff;
    border-right: 1.5px solid #ffffff
}

@media screen and (max-width: 600px) {
    /* iOS safe-area (чёлка/динамический островок сверху, полоска свайпа снизу):
       без viewport-fit=cover (см. <meta viewport> в header.php) страница не
       рисует контент под этими зонами вообще — Safari просто оставляет их
       цветом body, и на тёмном .mMenu (#2E2E2E) сверху/снизу видна светлая
       полоса. Красим body в цвет меню, пока оно открыто, — полосы становятся
       чёрными, а не белыми/серыми.
       На страницах, где меню открывают после прокрутки вниз (например,
       карточка проекта), Safari подкрашивает safe-area цветом того места
       страницы, где был скролл в момент открытия, — а не нашим фоном.
       position:fixed «замораживает» страницу в позиции 0,0, пока меню
       открыто, поэтому Safari всегда берёт цвет верхней части — то есть
       наш #2E2E2E. */
    html.menu-open,
    html.menu-open body {
        background: #2E2E2E;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    /* меню — колонка: блок ссылок растягивается и выталкивает кнопку к низу */
    .mMenu {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }

    /* height:-webkit-fill-available (базовое правило) в мобильном Safari даёт
       высоту БЕЗ вычета верхних 25px и без учёта адресной строки — панель
       становится выше реального экрана, и кнопка "Оставить заявку" уезжает
       за пределы видимой области (нужен скролл, кнопка выглядит "не закреплённой").
       100dvh — реальная видимая высота на мобильных, кнопка всегда у низа экрана. */
    /* Раньше здесь вычитался ещё и env(safe-area-inset-bottom) — думал, что
       так компенсирую лишнюю высоту от viewport-fit=cover. На деле это
       открывало дыру внизу ПАНЕЛИ (высотой с сам инсет), через которую
       было видно страницу позади — панель просто переставала доставать
       до низа экрана. Наезд кнопки на футер оказался отдельным багом
       (см. position:relative у a:has(.mMenu__btn) ниже) и решается не тут —
       панели нужна полная высота до самого низа экрана, без вычета инсета. */
    /* (Ошибочно менял на flex-start, думая, что кнопка — третий отдельный
       flex-элемент вместе со списком и футером, и что от этого возникал
       отрицательный отступ. Оказалось, кнопка вложена ВНУТРЬ футера (см.
       комментарий у .mMenu__footer ниже), так что в .mMenu на самом деле
       только 2 flex-элемента — список и футер (94px). space-between с
       двумя такими элементами безопасна и именно так было изначально —
       возвращаю как было.) */
    .menu-open .mMenu {
        height: calc(100dvh - 35px);
        justify-content: space-between;
    }

    /* iPhone Safari: 100dvh на момент открытия меню не всегда совпадает с
       реально видимой высотой — адресная строка/тулбар успевают
       развернуться уже ПОСЛЕ того, как dvh посчитан, и низ панели (чёрный
       футер + оранжевая кнопка) уезжает под тулбар, не видно до конца.
       Надёжный фикс без JS: при position:fixed с ОБОИМИ top и bottom
       заданными (а не top+height) браузер сам растягивает блок между
       ними и живо пересчитывает нижнюю границу под реальный видимый
       вьюпорт при каждом показе/скрытии тулбара — в отличие от dvh это
       не "фотография" высоты в момент открытия, а полноценный якорь.
       @supports (-webkit-touch-callout: none) — стандартный приём для
       нацеливания правил именно на Safari на iOS (десктопные браузеры и
       Android Chrome это условие не проходят). */
    @supports (-webkit-touch-callout: none) {
        /* bottom:0 — панель тянется ровно до низа экрана (safe area
           включительно), кнопка и футер по умолчанию стоят вплотную к нему,
           без зазора. */
        .menu-open .mMenu {
            height: auto;
            bottom: 0;
        }

        /* Запас под скролл — НЕ на самом .mMenu (пробовал padding-bottom
           там: похоже, Safari в связке height:auto + top/bottom + padding
           реально ужимает внешнюю коробку на размер паддинга, а не
           добавляет его как внутренний резерв — низ панели отъезжал ВВЕРХ
           от истинного края экрана, и в получившуюся дыру снизу
           просвечивала страница за меню), а на .mMenu__footer — последнем
           элементе ВНУТРИ панели. margin-bottom тут не трогает внешние
           границы .mMenu (та как была прибита к bottom:0, так и осталась,
           кнопка/футер по умолчанию у самой safe area, без дыры) — просто
           добавляет немного лишнего прокручиваемого пространства ПОСЛЕ
           футера, на случай, если 100dvh на момент открытия недооценил
           реальную видимую высоту и низ панели оказался под плавающим
           тулбаром — тогда его можно доскроллить. */
        .menu-open .mMenu__footer {
            margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
        }
    }

    /* JS-фолбэк для WebView на iOS, которые не пересчитывают fixed
       top+bottom так же живо, как Safari (Chrome/Yandex для iOS и т.п.):
       если меню открыли при развёрнутой адресной строке (наверху страницы),
       панель выше "замерзает" в состоянии с меньшей видимой высотой — футер
       и кнопка уезжают за экран, виден только верх кнопки без иконки.
       --mvh проставляется в JS из window.visualViewport.height и
       обновляется в реальном времени (см. inline-script в header.php) — не
       зависит от того, пересчитывает ли конкретный WebView fixed-элементы
       сам. Там, где JS не отработал (переменная не задана), var() падает
       обратно на прежний calc(100dvh - 35px). */
    .menu-open .mMenu {
        height: var(--mvh, calc(100dvh - 35px)) !important;
        bottom: auto !important;
    }

    /* flex-grow:0 (не 1) — блок ссылок занимает только свою естественную
       высоту и не растягивается, выталкивая кнопку вниз с пустым зазором.
       Кнопка всегда идёт СРАЗУ за списком: если список короткий — кнопка
       высоко, под ней пусто; если длинный (раскрыты подменю) — до кнопки
       нужно проскроллить, как и должно быть. */
    .mMenu__body {
        height: auto !important;
        padding-bottom: 120px !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 1 auto !important;
        flex: 0 1 auto !important;
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important;
    }

    /* ВАЖНО: <a> с кнопкой .mMenu__btn лежит ВНУТРИ .mMenu__footer (не
       рядом с .mMenu__body!) — реальная вложенность:
       .mMenu > .mMenu__footer > a > button.mMenu__btn.
       Все правила order/flex-shrink на самой <a>, рассчитанные на то, что
       она — прямой flex-ребёнок .mMenu, были бесполезны (order работает
       только относительно ПРЯМОГО flex-родителя, а он тут — footer).
       Из-за этого несколько попыток фикса только всё портили. Актуальная
       версия: футер — в потоке (order:3 внутри .mMenu, как и было),
       кнопка остаётся как в оригинале — position:absolute;right:0;bottom:0
       без relative на обёртке, поэтому она сознательно "торчит" вверх над
       тонкой полосой футера (188px кнопки против 94px футера) и
       позиционируется относительно всей fixed-панели .mMenu. Проблема
       была не в этом, а в том, что копирайт-текст в футере занимал всю
       ширину и оказывался ПОД кнопкой — даём ему отступ справа под кнопку. */
    .mMenu__footer {
        position: static !important;
        -webkit-box-ordinal-group: 4 !important;
        -ms-flex-order: 3 !important;
        order: 3 !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 94px !important;
        flex: 0 0 94px !important;
        height: 94px !important;
        min-height: 94px !important;
        /* 187.5px (ширина кнопки) + 20px запаса — копирайт-текст слева
           теперь не заезжает под плавающую справа кнопку. */
        padding-right: 210px !important;
        box-sizing: border-box !important;
    }

    /* .mMenu__btn — position:absolute;bottom:0 в style.css считается от
       .mMenu (fixed-панель на 100dvh, см. выше), а не от .mMenu__footer.
       С viewport-fit=cover эта высота включает и safe-area снизу (полоску
       home indicator на iPhone без кнопки), так что bottom:0 сажает кнопку
       вплотную к физическому краю экрана, под неё заезжает системная
       зона свайпа. Поднимаем кнопку на env(safe-area-inset-bottom) —
       она остаётся "прижатой к низу", но уже над safe area, а не под ней. */
    .mMenu__btn {
        bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .guests__item {
        justify-content: space-around !important;
    }

    .resume__img_14 {
        background-position: center !important;
        filter: grayscale(1);
    }

    .resume__img_14 .service__slider-label {
        display: none;
    }

    .resume__bio .resume__header {
        font-family: CoFoPeshka;
        font-size: 55px !important;
        line-height: .93;
        letter-spacing: .005em;
        text-transform: uppercase;
        font-weight: 400;
    }

    .resume__bio .resume__read {
        width: 50vw !important;
        height: 50vw !important;
        left: 50vw;
        display: flex;
        flex-direction: column;
        padding: 25px !important;
    }

    .resume__bio .resume__read > .middle {
        font-family: CoFoPeshka;
        font-size: 35px;
        font-weight: 400;
    }

    .resume__bio .resume__read a {
        font-size: 13px;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .resume__bio .resume__read:before {
        display: none;
    }

    .resume__bio .resume__read:after {
        display: none;
    }

    .resume__prof {
        margin-top: 0 !important;
        width: 100vw !important;
        padding: 30px 20px !important;
    }

    .resume__pub {
        width: 100vw !important;
        padding: 30px 20px !important;
    }

    .resume__pub .resume__section:first-child {
        padding-top: 0 !important;
    }

    .work-steps .work-steps__item_slider {
        margin-top: 50vw;
    }

    section.guests {
        margin-top: -150vw;
    }

    a.guests__item_red {
        margin-top: 0vw;
        margin-bottom: 100vw;
    }

    .portfolio__label-in {
        width: 100%;
        height: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .work-steps__container {
        display: flex !important;
        flex-direction: column;
    }

    .resume__me_slider .bx-viewport {
        height: 100vw !important;
    }
}

html::-webkit-scrollbar {
    display: none;
}

.guests__item_2x2 {
    z-index: 0;
    /*filter: grayscale(1);*/
}

.guests__item_2x2 .portfolio-4x4__wrapper {
    filter: grayscale(1);
}

/**/
.portfolio__slider_pagination {
    display: none;
}

.contacts_new__invite-text .button_start a svg {
    display: none;
}

@media screen and (max-width: 600px) {
    .portfolio__slide-footer {
        height: auto !important;
        padding-bottom: 40px !important;
    }

    .portfolio__slider_pagination {
        display: flex;
        gap: 5px;
        position: absolute;
        bottom: 20px;
        z-index: 1;
        width: 100%;
        padding: 0 20px;
    }

    .portfolio__slider_pagination span {
        width: 100%;
        height: 2px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
    }

    .portfolio__slider_pagination span.swiper-pagination-bullet-active {
        background: rgba(255, 255, 255, 1);
    }

    .contacts_new__top-banner-image {
        height: auto;
    }

    .contacts_new__top-banner-image img {
        width: 100%;
        aspect-ratio: 375 / 470;
    }

    .contacts_new__invite-content {
        position: initial;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 0;
    }

    .contacts_new__invite-content .contacts_new__top-banner-header {
        height: 50vw;
        display: flex;
        align-items: center;
        background: #e8684b;
        padding: 0 25px;
        width: 100%;
        padding-right: 50vw;
        text-align: left;
        font-weight: 500;
    }

    .contacts_new__invite-content .contacts_new__invite-text {
        margin-top: 0;
    }

    .contacts_new__invite-text-txt {
        padding: 45px 25px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        text-align: left;
        font-weight: 400;
        background: #e8684b;
        height: 50vw;
    }

    .contacts_new__invite-text .button_start {
        position: initial;
        width: 100%;
        height: auto;
        margin: 0;
        border: none;
        background: #e5e5e5;
        display: flex;
        justify-content: flex-end;
    }

    .contacts_new__invite-text .button_start a {
        background: #e8684b;
        width: 50vw;
        height: 50vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;

        font-family: CoFoPeshka;
        font-size: 35px !important;
        line-height: .93;
        letter-spacing: .005em;
        text-transform: uppercase;
        font-weight: 400;
        color: #fff;
        text-align: left;
        padding: 25px;
    }

    .contacts_new__invite-text .button_start a svg {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    html:has(.contacts_new) .header__contacts,
    html:has(.resume) .header__contacts {
        box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.2);
    }

    html:has(.contacts_new) .subheader__nav,
    html:has(.resume) .subheader__nav,
    .subheader__nav {
        padding: 27.5px 25px !important;
        background: #fff;
        display: flex;
        gap: 30px !important;
        height: auto !important;
    }

    html:has(.contacts_new) .subheader__nav-item,
    html:has(.resume) .subheader__nav-item,
    .subheader__nav-item {
        font-size: 10px !important;
        padding: 4px 0px !important;
    }

    html:has(.contacts_new) .subheader__nav-item.active,
    html:has(.resume) .subheader__nav-item.active,
    .subheader__nav-item.active {
        border-bottom: 2px solid #000 !important;
    }

    html:has(.contacts_new) .subheader__nav-item span,
    html:has(.resume) .subheader__nav-item span,
    .subheader__nav-item span {
        color: rgba(0, 0, 0, 0.5);
        padding: 0;
    }

    html:has(.contacts_new) .subheader__nav-item.active span,
    html:has(.resume) .subheader__nav-item.active span,
    .subheader__nav-item.active span {
        border-bottom: none !important;
        color: rgba(0, 0, 0, 1);
    }
}

.portfolio__item {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.resume__about_new > div {
    max-width: 100%;
    width: 100%;
}

.resume__about_new .introduce__image-wrapper {
    max-width: 100%;
}

.resume__header h1 {

}

.resume .resume__help,
.resume .resume__help,
.resume .resume__help,
    /*.resume .resume__news_item_block_4_white,*/
.resume .resume__help {
    padding: 45px 50px;
}

.resume__read {
    padding: 45px 50px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

.resume__read:before, .resume__read:after {
    display: none !important;
}

.resume__read a {

}

.padding-history-center .resume__text p {
    padding-bottom: 15px;
}

/* На old.aaba.ru эти подзаголовки ("Дедушка по материнской линии", "Мама"...)
   не отдельным блоком, а слитно в начале абзаца через тире ("Дедушка ... –
   Михаил Васильевич – руководил..."). У нас это разметка по h4 в CMS-поле,
   переписать сам текст через файлы шаблона нельзя — только сблизить с
   соседним абзацем визуально: убираем отступ снизу у h4 и у p сразу после
   него, чтобы заголовок и текст не выглядели двумя разнесёнными блоками. */
.padding-history-center .resume__text h4 {
    font-weight: bold;
    padding-bottom: 0;
    margin-bottom: 2px;
}

.padding-history-center .resume__text h4 + p {
    margin-top: 0;
}

.padding-history-center .resume__text {
    font-size: 14px !important;
    line-height: 21px !important;
}

@media screen and (max-width: 600px) {
    .resume__about_new {

    }

    .resume__photo_new {
        aspect-ratio: 375 / 470;
    }

    .resume__info_new {
        background: #2E2E2E;
    }

    .resume__text {
        font-size: 14px !important;
    }

    .padding-history-center .resume__text {
        font-size: 13px !important;
        line-height: 20px !important;
    }

    .padding-history-center .resume__text p {
        padding-bottom: 20px;
    }

    .padding-history-center .resume__text h4 {
        font-weight: bold;
        padding-bottom: 20px;
    }

    .image-mobile-small .resume__img_new {
        max-height: 188px;
        display: flex;
        justify-content: center; /* По горизонтали */
        align-items: center;
        overflow: hidden;
    }

    .slider-yellow-button .featuresSlider .bx-controls .bx-prev,
    .slider-yellow-button .featuresSlider .bx-controls .bx-next,
    .yellow-block {
        background: #FFEC55 !important;
    }
}

.workshop__bottom_new {
    background: #fff;
    padding: 45px 50px
}

.workshop_new__center-left-top-orange .workshop__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.workshop_new__center-left-top-orange .workshop__text a {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    text-decoration: underline;
    border-bottom: 0;
}

@media screen and (max-width: 600px) {
    .workshop__bottom_new {
        padding: 25px
    }

    .workshop__text {
        font-size: 14px !important;
    }
}

.partners__logos .partners__text p {
    margin: 0;
}

.mobile-block {
    display: none !important;
}

/*.menu__submenu.services_sub.active {*/
/*    position: fixed!important;*/
/*    width: 100% !important;*/
/*    height: 100% !important;*/
/*}*/
@media screen and (max-width: 600px) {
    .project__text p {
        font-size: 14px !important;
    }

    .footer_bottom_copy-social a svg {
        width: 35px;
        height: 35px;
    }

    .resume__blocks_fixed_right-bottom {
        width: 100vw !important;
        height: 100vw !important;
    }

    .resume__news_item_block_2_slider .resume__slider_3 {
        width: 100vw !important;
        height: 100vw !important;
    }

    .resume__news_item_block_3_left .resume__slider_4 {
        width: 100vw !important;
        height: 100vw !important;
    }

    .fancybox-inner {
        background-color: #fff !important;
    }

    .desctop-block {
        display: none !important;
    }

    .mobile-block {
        display: block !important;
    }

    .mobile-block.flex-contacts-block {
        display: flex !important;
    }

    .flex-contacts-block div {
        width: 50%;
        display: flex !important;
        align-items: flex-start;
        justify-content: center;
        gap: 15px;
        flex-direction: column;
        height: 50vw;
        padding: 0 25px;
    }

    .flex-contacts-block__left {
        background: #2E2E2E;
        color: #fff;
    }

    .flex-contacts-block__right {
        background: #fff;
        color: #000;
    }

    .flex-contacts-block__header {
        font-weight: 700;
        font-size: 13px;
        line-height: 15px;
    }

    .flex-contacts-block__text {
        font-size: 13px;
        line-height: 20px;
    }

    .mobile-block.flex-social-block {
        display: flex !important;
    }

    /* каждая иконка — ровно 25% ширины: границы ячеек ложатся на 25/50/75%,
       поэтому правый край max-иконки совпадает с концом «Заказать проект» (50%).
       3 иконки = 75% (тёмные), последние 25% — серый фон страницы. */
    .mobile-block.flex-social-block a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: #2E2E2E;
        transition: all 0.5s ease;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 25% !important;
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        height: 25vw;
    }

    .mobile-block.flex-social-block a:hover {
        background: #000;
        transition: all 0.5s ease;
    }

    .contacts_new__top-banner-left {
        padding: 21px 25px !important;
        height: 50vw !important;
        font-size: 13px !important;
        line-height: 20px !important;
    }

    .contacts_new__top-banner-left .contacts_new__top-banner-header {
        padding-bottom: 22px !important;
    }

    .contacts_new__top-banner-left a {
        padding-top: 10px;
        display: block;
        color: rgba(0, 0, 0, 0.5)
    }

    .contacts_new__top-banner-text-in p {
        padding-bottom: 20px;
    }

    .contacts_new__top-banner-address {
        width: 50vw !important;
        height: 50vw !important;
        background: rgba(255, 255, 255, 0.5) !important;
        font-size: 13px;
        line-height: 20px;
        padding: 23px 25px !important;
        color: #000 !important;
        text-transform: unset !important;
        text-align: left !important;
    }

    .contacts_new__top-banner-address h4 span {
        margin: 0 !important;
        display: unset;
        font-size: 14px !important;
    }

    .contacts_new__top-banner-address h4 {
        padding-bottom: 15px !important;
    }

    .contacts_new__top-banner-address p {
        color: rgba(0, 0, 0, 0.5) !important;
    }

    .contacts_new__squares_banner {
        width: 100vw !important;
        height: 100vw !important;
        background-color: #000;
    }

    .contacts_new__top-banner-map-block {
        display: block !important;
        height: 50vw;
        width: 100vw;
    }

    .footer__showreel-inner {
        width: 100vw !important;
        height: 100vw !important;
    }

    /*.slider__label {*/
    /*    top: 20% !important;*/
    /*}*/
    /*.text_container.slider__label {*/
    /*    top: unset!important;*/
    /*    bottom: 0px!important;*/
    /*}*/
    /*.servicesSlider1 {*/
    /*    position: unset!important;*/
    /*}*/
    .contacts_new__top-banner-text {
        padding: 20px 25px !important;
        height: 100vw !important;
        width: 100vw !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .contacts_new__top-banner-text-in {
        font-size: 13px !important;
        line-height: 20px !important;
    }

    .subheader.subheader_publications.subheader_workshop {
        z-index: 1;
    }

    .subheader__nav {

    }

    .header__contacts {
        box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.2);
    }
}

/* менюшка */
#dopa {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 104px;
    z-index: 30;
    width: 100%;
    height: 100%;
    padding-bottom: 100px;
    background: #000;
}

#dopa {
    top: 0 !important;
    overflow-y: scroll !important;
}

#close-drop-new {
    display: none;
    position: fixed;
    top: 0;
    right: 15px;
    z-index: 9999999;
}

#dopa ul li.nav__submenu-item_calc {
    right: 15px !important;
}

#close-drop-new {
    top: 75px !important;
}

#dopa.open {
    display: block;
}

#dopa .content {
    overflow: hidden;
    width: 1500px;
    min-height: 100vh;
    margin: 0 auto;
    /* padding-bottom: 70px; */
}

#dopa .content {
    min-height: 100vh !important;
}

#dopa ul {
    width: 20%;
    padding: 0;
    float: left;
}

#dopa ul li {
    line-height: 1.2;
    margin-bottom: 14px;
}

#dopa ul li.zaga {
    padding-bottom: 20px;
}

#dopa ul li.zaga img {
    padding-bottom: 5px;
}

#dopa ul li a {
    width: 80%;
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #828282;
    -webkit-transition: color .1s linear 0;
    -moz-transition: color .1s linear 0s;
    -o-transition: color .1s linear 0;
    transition: color .1s linear 0s;
    -webkit-backface-visibility: hidden;
}

#dopa ul li.zaga a {
    font-family: 'ProximaNova';
    line-height: 1.2em;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}

#dopa ul:nth-child(3), #dopa ul:nth-child(4), #dopa ul:nth-child(5) {
    width: 50%;
    margin-bottom: 30px;
}

#dopa ul li a:hover {
    color: #5cb862;
}


/* ==========================================================================
   Главная — hero-слайдер (#portfolio): при смене слайда сначала должна
   появиться картинка, и только потом — текст (категория/название/подзаголовок).
   Swiper (effect:"fade", crossFade:true) сразу перекрёстно проявляет и
   картинку, и текст одновременно — .portfolio__slide-head отдельно
   не анимировался. Добавляем свою фейд-анимацию с задержкой поверх:
   .swiper-slide-active ставится Swiper'ом сразу в начале перехода слайда
   (не по завершении), поэтому transition-delay здесь отсчитывается именно
   от начала смены слайда, как и нужно.
   Десктоп: 1с. Мобилка (≤600px): 2с — см. @media ниже. */
#portfolio .portfolio__slide-head {
    opacity: 0;
    transition: opacity 2s ease-out;
    transition-delay: 0s;
}

#portfolio .swiper-slide-active .portfolio__slide-head {
    opacity: 1;
    /* Задержка 1с — по замыслу (см. комментарий выше: «спустя 1с — текст»).
       Было 2с: заголовок слайда (крупнейший текст hero-блока, до 150px)
       не отрисовывался до инициализации Swiper + 2с и становился поздним
       LCP-кандидатом (~3.5-4с на медленных сетях). */
    transition-delay: 2s;
}


/* ==========================================================================
   Главная — мобильный hero-слайдер (#portfolio). Аккуратно (структуру слайда
   и swiper не трогаем): картинка занимает 100vh МИНУС высоту зелёного блока,
   зелёный блок (footer, авто-высоты) — под картинкой, текст слева внизу,
   пагинация — над зелёным блоком.
   --portfolio-footer-h задаётся из JS компонента (высота зелёного блока
   активного слайда); запасное значение 30vh.
   ========================================================================== */
@media screen and (max-width: 600px) {
    /* [data-fullscreen] задаёт min-height:100vh — и на #portfolio, и на КАЖДОМ
       .portfolio__slide (атрибут стоит на обоих в шаблоне). Без переопределения
       обоих активный слайд всегда растягивался на весь экран, даже когда
       реальный контент (картинка 75vh + авто-высота зелёного блока) короче,
       оставляя пустую серую полосу снизу перед следующим блоком страницы. */
    #portfolio.portfolio {
        min-height: auto !important;
        height: auto !important;
    }

    /* Картинка всегда фиксированной высоты 75vh — не зависит от длины текста,
       поэтому ничего не «прыгает» при смене слайда. Зелёный блок — сразу под
       картинкой (в потоке), авто-высота: сколько текста, столько и высота. */
    #portfolio .portfolio__slide {
        min-height: auto !important;
        height: auto !important;
    }

    /* position:relative обязателен — иначе ::after (наш градиент под текстом)
       якорится не на этот блок, а на дальнего позиционированного предка,
       и просто не совпадает с картинкой. background тут не работает: сама
       картинка — дочерний <img>, который рисуется поверх фона враппера
       и полностью его перекрывает, поэтому градиент делаем через ::after
       отдельным слоем НАД картинкой (см. ниже). */
    #portfolio .portfolio__slide-wrapper-img {
        height: 75vh !important;
        width: 100% !important;
        position: relative !important;
    }

    /* градиент-подложка под белый текст названия: тёмный от нижнего левого
       угла (там начало текста), под 30° от вертикали, к прозрачному.
       z-index не трогаем: .portfolio__slide-head идёт позже в DOM и остаётся
       выше по обычному порядку отрисовки. */
    #portfolio .portfolio__slide-wrapper-img::after {
        background: linear-gradient(30deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%) !important;
    }

    #portfolio .portfolio__slide-img {
        height: 75vh !important;
    }

    .workshop__bottom-slider.new_wbs .workshop__master {
        order: 1 !important;
    }

    .workshop__bottom-slider.new_wbs .featuresSlider_workshop-img {
        order: 0 !important;
    }
    
    .guests__text {
        display: block !important;
    }

    /* зелёный блок — в потоке под картинкой, авто-высота, весь текст виден */
    #portfolio .portfolio__slide-footer {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
    }

    /* текст слайда (категория+название) — слева внизу картинки (у нижнего края 75vh) */
    #portfolio .portfolio__slide-head {
        left: 0 !important;
        right: auto !important;
        top: 75vh !important;
        bottom: auto !important;
        transform: translateY(-100%) !important;
        -webkit-transform: translateY(-100%) !important;
        width: 100% !important;
        text-align: left !important;
        align-items: flex-start !important;
        padding: 0 20px 26px !important;
    }

    /* Текст (категория / portfolio__slide-title / подзаголовок) — через 2с
       после начала смены слайда. Отдельно от задержки пана картинки
       (PAN_START_DELAY в template.php). Только первый слайд при загрузке
       показывает текст сразу (.portfolio__slide-head--initial в шаблоне). */
    #portfolio .swiper-slide-active .portfolio__slide-head {
        transition-delay: 3s;
    }

    #portfolio .swiper-slide-active .portfolio__slide-head--initial {
        transition-delay: 0s;
    }

    #portfolio .portfolio__slide-category,
    #portfolio .portfolio__slide-title,
    #portfolio .portfolio__slide-subtitle {
        text-align: left !important;
    }

    /* пагинация — у нижнего края картинки, над зелёным блоком */
    #portfolio .portfolio__slider_pagination {
        top: calc(75vh - 17px) !important;
        bottom: auto !important;
    }

    .contacts__scheme-img {
        height: 100vw !important;
        width: 100vw !important;
        bottom: 0 !important;
        top: auto !important;
        position: relative !important;
        order: 2 !important;
    }

    .contacts__scheme-address {
        height: 50vw !important;
        width: 50vw !important;
        padding: 30px 0 0 !important;
        z-index: 1;
        position: relative !important;
        order: 0 !important;
    }

    .workshop__map {
        height: 50vw !important;
        width: 100vw !important;
        left: 0 !important;
        top: 0 !important;
        position: relative !important;
        order: 1 !important;
    }

    .workshop__contacts {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .popup__prev, 
    .popup__next {
        bottom: 5px !important;
    }
}

/* ==========================================================================
   Задача 2: мобильный hero-слайдер (#portfolio) — пауза перед и после
   движения картинки на первом экране по 0,5с.
   Цикл 10с = 1,5с стоп (левый край) + 7с движение + 1,5с стоп (правый край).
   (1,5с = 15% от 10с; движение 15%–85%.)
   Пан идёт по ВСЕЙ ширине картинки: от левого края (translateX 0) до правого
   (translateX = 100vw − ширина картинки). Картинка на мобиле width:auto, т.е.
   шире экрана, поэтому calc(100vw - 100%) ставит её правый край к правому краю
   экрана. Тайминг смены слайда задаёт .portfolio__progress-fill (11,5с, ниже —
   10с самого пана + 1,5с задержки перед его стартом). */
@-webkit-keyframes image-moving-delayed {
    0%, 10% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    90%, 100% {
        -webkit-transform: translate(calc(100vw - 100%), 0);
        transform: translate(calc(100vw - 100%), 0);
    }
}

@keyframes image-moving-delayed {
    0%, 10% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    90%, 100% {
        -webkit-transform: translate(calc(100vw - 100%), 0);
        transform: translate(calc(100vw - 100%), 0);
    }
}

@media screen and (max-width: 600px) {
    #portfolio .swiper-slide-active .portfolio__slide-img {
        -webkit-animation-name: image-moving-delayed !important;
        animation-name: image-moving-delayed !important;
        -webkit-animation-duration: 10s !important;
        animation-duration: 10s !important;
        -webkit-animation-timing-function: linear !important;
        animation-timing-function: linear !important;
        -webkit-animation-iteration-count: infinite !important;
        animation-iteration-count: infinite !important;
    }

    /* Реальный тайминг смены слайда задаёт анимация полоски прогресса:
       app.min.js по её animationend вызывает slideNext(). На десктопе 4с
       (база). На мобиле пан стартует не сразу, а с задержкой 1,5с после
       смены слайда (PAN_START_DELAY в template.php слайдера) и затем идёт
       свои 10с — поэтому полоска должна успевать заполняться дольше, иначе
       слайд переключается раньше, чем пан доехал до конца. 1,5с (задержка)
       + 10с (пан) = 11,5с. */
    #portfolio .portfolio__progress-fill {
        -webkit-animation-duration: 12.5s !important;
        animation-duration: 12.5s !important;
    }
}

/* ==========================================================================
   Просмотр картинок (галерея fancybox): усиленное затемнение фона за картинкой.
   1) сам оверлей плотнее (страница проекта по бокам);
   2) хедер/меню висит поверх оверлея — затемняем его фильтром, пока галерея
      открыта (html:is(.fancybox-lock, .gallery-open)).
   ========================================================================== */
.fancybox-overlay {
    background: rgb(255 255 255) !important;
}

html:is(.fancybox-lock, .gallery-open) .header {
    -webkit-filter: brightness(0.25) !important;
    filter: brightness(0.25) !important;
    pointer-events: none !important;
}

/* Стрелки листания в галерее проекта (.i-gallery, popups.js): у этой галереи
   свой шаблон fancybox с tpl.next/tpl.prev = "" — вместо стандартных
   .fancybox-nav используются свои элементы .popup__prev/.popup__next
   (+ .i-gallery__prev/-next). Для .popup__close стили в style.css есть,
   а для .popup__prev/.popup__next — нет и никогда не было в актуальной
   вёрстке (остались только в старом _style_old.css) — стрелки были
   невидимы (без display/фона/иконки) на всех устройствах, не только
   на iPhone. Рисуем их в текущем стиле сайта, как .slider-prev/-next
   (белая кнопка 50x50 с шевроном на границах). */
.popup__prev,
.popup__next {
    position: fixed;
    z-index: 8060;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: #fff;
    /* flex-центровка иконки-шеврона; !important — т.к. style_old.min.css
       задаёт этим же кнопкам display:block той же специфичностью и грузится
       позже, иначе центровка ломается. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.popup__prev {
    right: 50px;
}

.popup__next {
    right: 0;
}

/* Иконка-стрелка: чистый тонкий шеврon из двух border-линий (как на остальных
   слайдерах сайта, .slider-prev/-next). style_old.min.css рисует на этих же
   ::before старую стрелку из спрайта (sprite.png) + absolute-позиционирование
   — при наложении получалась «двойная»/хвостатая стрелка. Полностью гасим
   спрайт и абсолют (!important), оставляя только свой шеврон. */
.popup__prev::before,
.popup__next::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    background: none !important;
    transform: rotate(45deg);
    transition: 0.3s ease-in-out;
}

.popup__prev::before {
    border-top: none !important;
    border-right: none !important;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.3) !important;
    border-left: 1.5px solid rgba(0, 0, 0, 0.3) !important;
}

.popup__next::before {
    border-bottom: none !important;
    border-left: none !important;
    border-top: 1.5px solid rgba(0, 0, 0, 0.3) !important;
    border-right: 1.5px solid rgba(0, 0, 0, 0.3) !important;
}

/* hover только на устройствах, где реально есть курсор — иначе на тачскрине
   после тапа кнопка "залипает" в зелёном hover-состоянии до следующего тапа
   в другое место (мобильный Safari эмулирует :hover при касании и не снимает
   его, пока не сработает фокус на другом элементе). */
@media (hover: hover) {
    .popup__prev:hover,
    .popup__next:hover {
        background: #5EBC64;
    }

    .popup__prev:hover::before,
    .popup__next:hover::before {
        border-color: #000;
    }
}

/* Вторая ветка (landscape + малая высота) — телефон в горизонтальном
   положении: по ширине (812–932px у iPhone) он в max-width:600px не
   попадает, а панель Safari внизу никуда не девается. */
@media screen and (max-width: 600px),
       screen and (orientation: landscape) and (max-height: 600px) {
    /* На телефоне кнопки нижним краем упираются в панель адреса Safari —
       поднимаем их существенно выше неё (сама safe-area тут недостаточна,
       т.к. адресная строка занимает место ПОВЕРХ safe-area). */
    .popup__prev,
    .popup__next {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
        width: 44px;
        height: 44px;
    }

    .popup__prev {
        left: 0 !important;
    }

    .popup__prev::before,
    .popup__next::before {
        border-color: rgba(0, 0, 0, 0.5) !important;
    }
}

/* Только горизонтальная ориентация: экран низкий, а +70px от низа (запас
   под адресную строку в портрете) съедает слишком много — кнопки оказываются
   у самого края и частично не видны. Ставим обе стрелки рядом в правый
   нижний угол (а не по разным углам экрана) и приподнимаем повыше от низа. */
@media screen and (orientation: landscape) and (max-height: 600px) {
    .popup__prev,
    .popup__next {
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
        left: auto !important;
        width: 40px;
        height: 40px;
    }

    .popup__next {
        right: 15px !important;
    }

    .fancybox-title-over-wrap {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
        right: 62px !important;
        
    }

    .popup__prev {
        right: 105px !important;
    }

    .popup__close {
        right: 65px !important;
    }
}

/* iPhone + fancybox: белые safe-area зоны (JS в header.php рисует
   #fancybox-safe-area-fix поверх чёрного theme-color Safari). */
#fancybox-safe-area-fix {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147483647;
}

#fancybox-safe-area-fix > div {
    position: fixed;
    /* Белые: подложка галереи белая, поэтому полоса safe-area сливается с ней
       и чёрной линии не видно. */
    background: #fff;
    pointer-events: none;
}

#fancybox-safe-area-fix .fsaf-top {
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
}

#fancybox-safe-area-fix .fsaf-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    /* стартовое значение; точную высоту в px выставляет JS в header.php */
    height: env(safe-area-inset-bottom, 0px);
}

html:is(.fancybox-lock, .gallery-open) .fancybox-overlay,
html:is(.fancybox-lock, .gallery-open) .fancybox-wrap {
    background: #fff !important;
}

#fancybox-safe-area-fix .fsaf-left {
    top: 0;
    bottom: 0;
    left: 0;
    width: env(safe-area-inset-left, 0px);
}

#fancybox-safe-area-fix .fsaf-right {
    top: 0;
    bottom: 0;
    right: 0;
    width: env(safe-area-inset-right, 0px);
}

/* iPhone landscape: полноэкранный просмотр фото в fancybox. */
@supports (-webkit-touch-callout: none) {
    @media screen and (orientation: landscape) and (max-height: 600px) {
        html:is(.fancybox-lock, .gallery-open) .header {
            display: none !important;
            visibility: hidden !important;
            -webkit-filter: none !important;
            filter: none !important;
            pointer-events: none !important;
        }

        html:is(.fancybox-lock, .gallery-open),
        html:is(.fancybox-lock, .gallery-open) body {
            background: #fff !important;
        }

        html:is(.fancybox-lock, .gallery-open) .fancybox-overlay {
            position: fixed !important;
            inset: 0 !important;
            width: auto !important;
            height: auto !important;
            min-height: 100dvh !important;
            background: #fff !important;
        }

        html:is(.fancybox-lock, .gallery-open) .fancybox-wrap {
            position: fixed !important;
            inset: 0 !important;
            width: auto !important;
            height: auto !important;
            max-width: none !important;
            max-height: none !important;
        }

        html:is(.fancybox-lock, .gallery-open) .galleryPopup .header__share {
            display: none !important;
        }
    }
}

/* Огромный скролл страницы за галереей (иногда ~4000px, как высота
   исходной фотографии): .fancybox-image{width:100%;height:100%} требует,
   чтобы у .fancybox-inner была ЯВНАЯ высота — её выставляет инлайном JS
   (_setDimension()) уже ПОСЛЕ загрузки картинки. Если это не успевает/не
   срабатывает (на iOS — не всегда), height:100% превращается в auto, и
   <img> рендерится в НАТУРАЛЬНОМ пикселном размере фото. .fancybox-wrap
   при этом position:absolute (не fixed), поэтому такая гигантская картинка
   раздувает высоту всей страницы, а не просто вылезает за экран.
   Жёсткий max-height здесь не зависит от того, отработал JS-расчёт или
   нет — картинка гарантированно не может быть выше вьюпорта. */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner {
    max-height: 100dvh !important;
    max-width: 100vw !important;
}

.fancybox-image {
    object-fit: contain;
}

/* На мобиле max-height (потолок) оказалось недостаточно: бывает и
   обратная картина — JS считает картинку МАЛЕНЬКОЙ (например читает
   размер ещё не догрузившегося превью), контейнер получается меньше
   экрана, а вокруг остаётся пустое место, из-за которого страница
   всё равно скроллится. Вместо потолка на мобиле фиксируем ТОЧНЫЙ
   размер (=экран) на .fancybox-wrap независимо от JS-расчёта — сама
   картинка (.fancybox-image, object-fit:contain) просто аккуратно
   вписывается в этот гарантированно-верный размер, не растягиваясь
   и не обрезаясь, будь она хоть маленькой, хоть огромной. */
/* Две ветки медиазапроса:
   1) max-width:768px — телефон в портрете (и мелкие телефоны в landscape,
      например iPhone SE — 667px);
   2) landscape + max-height:600px — телефон в ГОРИЗОНТАЛЬНОМ положении.
      У современных iPhone landscape-ширина 812–932px (iPhone 11 — 896,
      14/15 — 852, Pro Max — 932) — по ширине они выглядят как планшет и
      в первую ветку не попадают. Зато высота у любого телефона в landscape
      ≤ ~440px, а у планшетов (iPad mini landscape) — от 744px, поэтому
      малая высота однозначно означает телефон боком. */
@media screen and (max-width: 768px),
       screen and (orientation: landscape) and (max-height: 600px) {
    .fancybox-wrap {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
    }

    .fancybox-skin,
    .fancybox-outer,
    .fancybox-inner {
        width: 100% !important;
        height: 100% !important;
    }

    /* Стрелки листания (.fancybox-nav span) по умолчанию показываются
       только по :hover — на телефоне наводить курсором нечем, поэтому
       их не видно вообще (сама кликабельная зона 40% ширины при этом
       работает, просто невидимо). Показываем иконки стрелок всегда. */
    .fancybox-nav span {
        visibility: visible !important;
    }

    /* Белый фон под картинкой (.i-media попапы) — раньше стоял только в
       портретной ветке (max-width:600px), в landscape не применялся. */
    .fancybox-inner {
        background-color: #fff !important;
    }
}

/* Блок "12 Преимуществ" на главной (мобильная версия, .advantages-list._mobile):
   .advantages-list__item_main (жёлтая карточка "12 Преимуществ") — flex-item
   рядом с .advantages__wrapper (Swiper-обёртка первого слайда, "подглядывание"
   следующей карточки). На iOS рядом с жёлтой карточкой стабильно виден серый
   прямоугольник неправильной ширины — независимо от того, успел Swiper
   проинициализироваться или нет (пробовал условный фикс через
   :not(.swiper-initialized) — не помогло, значит дело не только в тайминге
   инициализации). Не трогая сам Swiper (JS), убираем "подглядывание"
   полностью и навсегда: жёлтая карточка всегда занимает весь экран
   (flex-shrink:0 + 100vw), а всё, что вылезает за пределы этой ширины
   (недоинициализированный/неверно посчитанный сосед), обрезается
   overflow:hidden на самом ряду — серый прямоугольник физически не может
   быть виден, в какой бы момент/состоянии ни находился Swiper. */
@media screen and (max-width: 600px) {
    .advantages-list._mobile .advantages__slider {
        overflow: hidden !important;
    }

    .advantages-list._mobile .advantages-list__item_main {
        flex-shrink: inherit !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: auto !important;
    }

    .advantages-list__item {
        overflow: visible !important;
        z-index: 2;
        justify-content: flex-start !important;
    }

    .advantages-list__item.swiper-slide {
        padding-top: 60px !important;
    }
}

/* ==========================================================================
   Первый экран страницы ПРОЕКТА (portfolio/<проект>) на мобиле — как hero
   на главной: картинка ФИКСИРОВАННОЙ высоты 75vh (не зависит от длины текста,
   ничего не «прыгает» и не перекрывается), зелёный блок (SLIDE_TEXT =
   .text_container) идёт СРАЗУ ПОСЛЕ картинки, своей авто-высотой — общая
   высота контейнера = 75vh + высота зелёного блока (может быть > 100vh,
   и это нормально, как на главной). Та же анимация image-moving-delayed.
   Шаг 1 (без пагинации).
   Контейнер: .header__slider_fixed (компонент catalog.element).
   ========================================================================== */
@media screen and (max-width: 600px) {
    /* контейнер: высота = картинка (75vh) + реальная высота зелёного блока
       активного слайда (--portfolio-footer-h считает custom.js в render()).
       Раньше здесь было height:100vh — из-за этого зелёный блок втискивался
       в оставшиеся от экрана пиксели и наезжал на картинку. */
    .header__slider_fixed {
        height: calc(75vh + var(--portfolio-footer-h, 0px)) !important;
        overflow: hidden !important;
    }

    .header__slider_fixed .swiper-wrapper {
        position: relative !important;
        height: calc(75vh + var(--portfolio-footer-h, 0px)) !important;
        display: block !important;
        -webkit-transform: none !important;
        transform: none !important;
    }

    /* Все слайды стопкой (абсолют), скрыты через opacity — картинки всегда
       отрисованы и загружены. Активный показывается классом hero-active.
       На этой же разметке параллельно инициализирован настоящий Swiper
       (script.js, автоплей 5с) — его fade-модуль пишет opacity инлайн-стилем
       по СВОЕМУ индексу слайда, независимому от hero-active. Инлайн-стиль без
       !important бьёт обычные правила, поэтому opacity/visibility здесь —
       принудительно !important, чтобы на мобиле активным всегда был именно
       слайд с hero-active, а не тот, что считает активным Swiper. */
    .header__slider_fixed .slider__item {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(75vh + var(--portfolio-footer-h, 0px)) !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
        flex-direction: column !important;
        float: none !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 1;
        pointer-events: none;
        /* Плавный fade — тот же тайминг (3000мс = speed в script.js), что и у
           настоящего Swiper на десктопе для этого же слайдера, чтобы мобилка
           выглядела так же аккуратно, а не резким блоком. visibility анимируем
           вместе с opacity: при появлении (hidden→visible) браузер применяет
           visibility:visible сразу же, а при скрытии (visible→hidden) — только
           по завершении transition, поэтому уходящий слайд успевает погаснуть,
           прежде чем перестанет отрисовываться. */
        transition: opacity 3s ease, visibility 3s !important;
    }

    .header__slider_fixed .slider__item.hero-active {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2;
        pointer-events: auto;
    }

    /* до срабатывания JS (нет активного слайда) — показываем первый */
    .header__slider_fixed:not(:has(.hero-active)) .slider__item:first-child {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2;
    }

    /* картинка — фиксированные 75vh, не зависит от длины текста в зелёном
       блоке (раньше была flex:1 1 auto и делила экран пополам с текстом —
       из-за этого сжималась и текст наезжал на неё). */
    .header__slider_fixed .new-style-img {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 75vh !important;
        flex: 0 0 75vh !important;
        position: relative !important;
        width: 100% !important;
        height: 75vh !important;
        overflow: hidden !important;
    }

    .menu-open .header__logo {
        display: none;
    }

    /* градиент-подложка под белый текст названия (.label-mobile-top,
       z-index:4 !important — остаётся выше и без явного z-index здесь):
       тёмный от нижнего левого угла, под 30° от вертикали, к прозрачному. */
    .header__slider_fixed .new-style-img::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(30deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    }

    /* left:0 — якорь строго на истинном левом крае картинки. Было left:50%,
       из-за чего окно панорамы уезжало на середину: в начале цикла видна
       только правая половина кадра (левая половина — пустой фон, «белое»),
       а до правого края картинки анимация вообще не докручивалась. */
    .header__slider_fixed .new-style-img img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Пан включается/перезапускается JS-классом .pan-play (см. render() в
       custom.js), а не через inline animation:none/'' — !important здесь
       всё равно перебивает любой inline-сброс, так что JS-трюк "снять и
       вернуть animation инлайном" реально ничего не перезапускал.
       iteration:1 + forwards + delay:1.5s — картинка 1,5с спокойно стоит на
       месте, потом один раз проезжает и замирает у правого края; никакого
       infinite-зацикливания, которое давало видимый скачок обратно в начало
       посреди перехода к следующему слайду. Подтверждено рабочим именно для
       этого слайдера (.header__slider_fixed) — на #portfolio на главной эта
       же схема не прижилась, там не трогаем. */
    .header__slider_fixed .new-style-img img.pan-play {
        -webkit-animation: image-moving-delayed 8s linear 1 forwards !important;
        animation: image-moving-delayed 8s linear 1 forwards !important;
    }

    /* текст (рубрика/название/подзаголовок) — слева внизу картинки */
    .header__slider_fixed .slider__label.label-mobile-top {
        -ms-flex-order: 1 !important;
        order: 1 !important;
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: var(--portfolio-footer-h, 0px) !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 20px 24px !important;
        text-align: left !important;
        opacity: 1 !important;
        z-index: 4 !important;
    }

    .header__slider_fixed .label-mobile-top .slider__item-header,
    .header__slider_fixed .label-mobile-top .slider__item-name,
    .header__slider_fixed .label-mobile-top .slider__item-author {
        text-align: left !important;
    }

    /* зелёный блок (SLIDE_TEXT) — в потоке под картинкой, авто-высота.
       margin:0 обязателен: у .slider__label (один из классов text_container)
       в style_old.min.css есть старое правило margin:-85px 0 0 — без сброса
       оно утягивало зелёный блок на 85px вверх, наезжая на картинку. */
    .header__slider_fixed .text_container {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important;
        position: static !important;
        margin: 0 !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        background-color: #5ebc64 !important;
        overflow: visible !important;
    }

    /* затемняющий оверлей не нужен поверх — пусть не мешает */
    .header__slider_fixed .slider__overlay {
        display: none !important;
    }
}

/* Стрелки и пагинация первого экрана проекта — только мобайл (шаг 3).
   Показываются кастомным слайдером из custom.js. */
.project-hero-nav,
.project-hero-pagination {
    display: none;
}

@media screen and (max-width: 600px) {
    /* position:relative нужен как якорь для стрелок/пагинации, но тогда
       срабатывает top:49px из _styles_ и сдвигает блок вниз — обнуляем. */
    /* z-index:1 — отдельный контекст наложения ниже мобильного меню (.mMenu z-index:2),
       чтобы стрелки/пагинация первого экрана не налезали на открытое меню,
       но при этом оставались над слайдом внутри hero. */
    .header__slider_fixed {
        position: relative !important;
        top: 0 !important;
        z-index: 1 !important;
    }

    /* пагинация — «чёрточки» над зелёным блоком (как на главной) */
    .project-hero-pagination {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 5px;
        position: absolute;
        left: 0;
        bottom: calc(var(--portfolio-footer-h, 0px) + 8px);
        z-index: 5;
        width: 100%;
        padding: 0 20px;
    }

    .project-hero-dot {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
        flex: 1 1 0;
        height: 2px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
        cursor: pointer;
    }

    .project-hero-dot.active {
        background: #fff;
    }

    /* стрелки по бокам */
    .project-hero-nav {
        display: block;
        position: absolute;
        top: 38%;
        z-index: 6;
        width: 44px;
        height: 44px;
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .slider__label .slider__item-header {
        line-height: 125% !important;
    }

    .project-hero-prev {
        left: 2px;
    }

    .project-hero-next {
        right: 2px;
    }

    .project-hero-nav::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }

    .workshop_new__center-left-top-orange {
        height: 100vw !important;
        width: 100vw !important;
    }

    .project-hero-prev::before {
        -webkit-transform: translate(-30%, -50%) rotate(-135deg);
        transform: translate(-30%, -50%) rotate(-135deg);
    }

    .project-hero-next::before {
        -webkit-transform: translate(-70%, -50%) rotate(45deg);
        transform: translate(-70%, -50%) rotate(45deg);
    }
}

/* Первый экран проекта: на скрытых слайдах текст/зелёный блок остаются
   opacity:0 (smooth-showing-animation не «раскрывается» через data-watch,
   т.к. слайд display:none). Принудительно показываем их на мобиле. */
@media screen and (max-width: 600px) {
    .header__slider_fixed .slider__item .smooth-showing-animation,
    .header__slider_fixed .slider__label,
    .header__slider_fixed .label-mobile-top,
    .header__slider_fixed .text_container {
        opacity: 1 !important;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Блоки скидок (section.guests: 30/25/100%) — линия-разделитель ровно по
   центру блока, делит его на 2 равные половины: сверху число (.guests__num),
   снизу текст (.guests__text). Каждая половина — flex-контейнер с
   вертикальным центрированием своего содержимого. Работает на всех
   брейкпоинтах, поэтому старый мобильный хак с ::after-линией (см. git
   history) больше не нужен и заменён этим.
   ========================================================================== */


section.guests .guests__item_yellow .guests__num,
section.guests .guests__item_green .guests__num,
section.guests .guests__item_white .guests__num {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

section.guests .guests__item_green .guests__num {
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

section.guests .guests__item_yellow .guests__num svg,
section.guests .guests__item_green .guests__num svg,
section.guests .guests__item_white .guests__num svg {
    position: static;
    margin-left: 5px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

@media screen and (max-width: 600px) {
    .services-arch__item_title,
    .services-design__item_title,
    .services-consult__item_title {
        font-size: 35px !important;
    }

    /* .popup__next/.popup__prev раньше тоже стояли в этом селекторе и
       получали bottom:10px!important — это перебивало наш реальный фикс
       позиции стрелок (bottom: safe-area + 70px, см. ниже по файлу), из-за
       чего в портретной ориентации кнопки съезжали вниз под панель адреса
       Safari. Эта строка про другой (более старый, несвязанный) попап —
       .popup__prev/.popup__next больше сюда не относятся. */
    .popup .fancybox-title-over-wrap {
        bottom: 10px !important;
    }

    /* Блок ровно квадратный (было 112vw — лишняя полоса под картинкой). */
    .publications__slider {
        width: 100vw !important;
        height: 100vw !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* bxSlider ставит инлайновый width:auto на .featuresSlider__list,
       из-за чего список слайдов сжимается до нативных пикселей первой
       картинки (например 314px) вместо ширины экрана — картинка и текст
       вылезали за пределы блока. Перебиваем инлайн-стиль. */
    .publications__slider .featuresSlider,
    .publications__slider .featuresSlider__list {
        width: 100% !important;
        height: 100% !important;
    }

    .publications__slider .features__slider-item_pub,
    .publications__slider .features__slider-item-in {
        width: 100vw !important;
        height: 100% !important;
    }

    /* object-fit:contain вписывал картинку целиком и оставлял серые поля по
       краям (картинки неквадратные). cover заполняет весь квадрат 100vw x 100vw
       и обрезает лишнее — полей нет ни при каких пропорциях исходника. */
    .publications__slider .features__slider-item_pub img {
        width: 100vw !important;
        height: 100vw !important;
        object-fit: cover !important;
        display: block !important;
    }

    .publications__label {
        padding: 0 !important;
        width: 100vw !important;
        height: 100vw !important;
        overflow: hidden !important;
    }

    /* Обложка проекта под публикацией — тоже во весь квадрат, без полей. */
    .publications__label .service-main__item-img,
    .publications__label .block_square {
        width: 100vw !important;
        height: 100vw !important;
        padding: 0 !important;
    }

    .publications__label img {
        width: 100vw !important;
        height: 100vw !important;
        object-fit: cover !important;
        display: block !important;
    }

    .publications__item .portfolio__label {
        width: 100vw !important;
        height: 100vw !important;
    }

    .start__invite {
        width: 100vw !important;
        height: 100vw !important;
    }

    .service__about .start__invite {
        width: 100vw !important;
        height: 100vw !important;
    }

    .service__about .start__invite img {
        width: 100vw !important;
        height: 100vw !important;
    }

    .service__about ._item-9 {
        width: 100vw !important;
        height: 100vw !important;
    }

    .service__about ._item-10 {
        width: 100vw !important;
        height: 35vw !important;
    }

    .service__about ._item-11 {
        width: 100vw !important;
        height: 65vw !important;
    }

    .advantages-list__item {
        overflow: visible !important;
    }

    .advantages-list__num { 
        line-height: 140px;
    }

    .guests__item_yellow,
    .guests__item_green,
    .guests__item_white {
        padding: 25px 25px 13px 25px !important;
    }

    .guests__item_yellow .guests__num,
    .guests__item_green .guests__num,
    .guests__item_white .guests__num {
        padding-bottom: 7vw !important;
        display: flex;
    }

    .guests__item_white .guests__num  {
        padding-bottom: 6vw !important;
    }

    .guests__item_green .guests__num {
        padding-bottom: 8vw !important;
    }

    .guests__item_yellow .guests__num {
        padding-bottom: 6.8vw !important;
    }

    .featuresSlider .features__slider-item {
        
    }
}

/* ==========================================================================
   Мастерская (workshop_new) — адаптив 1200–1500px (контейнер .wrap = 1200px).
   Верхний ряд (статистика 600 + зелёный 600) уже влезает. Реколоним центр:
   ряд1: фото-люди 300 | соцссылки 300 | оранжевый 300 | фото 300;
   ряд2: синий FB 600 | белый «Мастерская» 600;
   ряд3: нижнее фото 600.
   Промежуточные обёртки расплющиваем через display:contents, листовые блоки
   раскладываем во flex-wrap с order/шириной.
   ========================================================================== */
/* Обёртка вокруг __top + __center-flex. По умолчанию прозрачна (не влияет на
   десктоп и 1200–1500); на 601–1199 становится общей flex-сеткой. */
.workshop_new__grid {
    display: contents;
}

@media screen and (min-width: 1200px) and (max-width: 1500px) {
    .workshop_new__center-flex {
        flex-wrap: wrap;
        width: 100%;
    }

    .workshop_new__center-left,
    .workshop_new__center-right,
    .workshop_new__center-left-top,
    .workshop_new__center-left-social,
    .workshop_new__center-left-social-images {
        display: contents;
    }

    .workshop_new__center-left-social-banner-small {
        width: 300px;
        height: 300px;
        order: 1;
    }

    .workshop_new__center-left-social-links {
        width: 300px;
        height: 300px;
        align-content: flex-start;
        order: 2;
    }

    .workshop_new__center-left-top-orange {
        width: 300px;
        height: 300px;
        order: 3;
    }

    .workshop_new__center-left-top-image {
        width: 300px;
        height: 300px;
        order: 4;
    }

    .workshop_new__center-left-social-banner {
        width: 600px;
        height: 800px;
        order: 5;
    }

    .workshop_new__center-right-white {
        width: 600px;
        height: 800px;
        order: 6;
    }

    .workshop_new__center-right-image {
        width: 600px;
        height: 300px;
        order: 7;
        margin-left: auto;
    }
}

/* ==========================================================================
   Мастерская (workshop_new) — адаптив 601–1199px (контейнер .wrap = 900px).
   Обёртку __grid делаем общей flex-сеткой и расплющиваем оба контейнера
   (__top и __center-flex) с под-обёртками, чтобы переставлять блоки между ними:
   ряд1: статистика 600 | фото 300;
   ряд2: оранжевый 300 | зелёный 600;
   ряд3: широкое фото (100%);
   ряд4: белый «Мастерская» (100%);
   ряд5: синий FB (100%) — фото людей в правом-верхнем углу, соц-иконки полосой снизу.
   ========================================================================== */
@media screen and (min-width: 603px) and (max-width: 1199px) {
    .workshop_new__grid {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        align-items: flex-start;
        align-content: flex-start;
    }

    /* расплющиваем контейнеры и промежуточные обёртки */
    .workshop_new__top,
    .workshop_new__center-flex,
    .workshop_new__center-left,
    .workshop_new__center-right,
    .workshop_new__center-left-top,
    .workshop_new__center-left-social-images {
        display: contents;
    }

    /* ряд1: статистика + фото */
    .workshop_new__top-left {
        width: 600px;
        height: auto;
        min-height: 300px;
        order: 1;
    }

    .workshop_new__center-left-top-image {
        width: 300px;
        height: 300px;
        order: 2;
    }

    /* ряд2: оранжевый + зелёный */
    .workshop_new__center-left-top-orange {
        width: 300px;
        height: 300px;
        order: 3;
    }

    .workshop_new__top-right {
        width: 600px;
        height: auto;
        min-height: 300px;
        order: 4;
    }

    /* ряд3: широкое фото */
    .workshop_new__center-right-image {
        width: 100%;
        height: 400px;
        order: 5;
    }

    /* ряд4: белый «Мастерская» */
    .workshop_new__center-right-white {
        width: 100%;
        height: auto;
        order: 6;
        padding: 45px 50px;
    }

    /* ряд5: синий FB на всю ширину; фото людей — в правом верхнем углу; иконки — полосой снизу */
    .workshop_new__center-left-social {
        width: 100%;
        order: 7;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .workshop_new__center-left-social-banner-small {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 300px;
        z-index: 2;
        order: 0;
    }

    .workshop_new__center-left-social-banner {
        width: 100%;
        height: auto;
        min-height: 600px;
        order: 1;
    }

    .workshop_new__center-left-social-links {
        align-self: flex-start;
        height: 150px;
        background: #000;
        order: 2;
    }

    /* иконка f + компактный заголовок (как на старой версии сайта), текст —
       ниже фото людей (300px), а не под ним внахлёст */
    .workshop_new__center-left-social-icon {
        display: block;
        width: 44px;
        height: 84px;
        object-fit: cover;
        margin: 0 0 24px;
    }

    .workshop_new__center-left-social-banner .title-h1 {
        text-transform: none;
        font-family: "ProximaNova";
        font-weight: 700;
        font-size: 30px;
        line-height: 1.3;
        margin: 0 0 16px;
    }

    .workshop_new__center-left-social-banner .workshop__text {
        margin-top: 180px;
    }
}

/* ==========================================================================
   Резюме (about/resume/) — фикс наезжания блоков при ширине > 1500px.
   Причина: текстовые ячейки имеют жёсткую height, а на >1500 заголовки
   крупнее (title-h1 70px) — контент не влезает и вылезает поверх соседних
   секций. Меняем height -> min-height, чтобы ячейки росли под контент,
   а flex-секции раздвигались.
   ========================================================================== */
/* На странице резюме блоки появления (.smooth-showing-animation) «залипают»
   со сдвигом translateY: watcher не добавляет ._watcher-view и не сбрасывает
   transform. Из-за этого контент внутри ячеек фиксированной высоты смещён
   вниз (~45–130px) и наезжает на соседние секции. Сбрасываем сдвиг —
   блоки встают на свои места, наезда нет. (.desctop-block виден только >600). */
.desctop-block .smooth-showing-animation {
    -webkit-transform: none !important;
    transform: none !important;
}

/* Резюме на 1200–1500: контейнер .wrap здесь = 1200px, а мозаика свёрстана
   под 1500px — из-за этого flex-колонки ужимались и текст мельчал/наезжал.
   Раньше рендерили десктопную мозаику в натуральных 1500px и масштабировали
   через zoom — это ломало позиционирование слайдеров (featuresSlider меряет
   реальные px через JS, а zoom их подменяет) и подписи на фото наезжали друг
   на друга. Теперь просто уменьшаем все фикс-ширины/высоты блоков мозаики
   в 0.8 раза (1200/1500) настоящим CSS — те же пропорции, без zoom и без
   поломки слайдеров. Десктоп (>1500) не затрагивается. */
@media screen and (min-width: 1200px) and (max-width: 1500px) {
    .desctop-block .resume {
        width: 1200px;
    }

    /* Легаси-правило .resume .features__slider-item{width:600px} (style_old.min.css)
       не завязано на брейкпоинт и всегда рисует внутренний слайд карусели на 600px,
       из-за чего он вылезал за пределы уменьшенной обёртки слайдера прямо на
       соседнюю текстовую колонку. Слайд должен просто занимать 100% обёртки. */
    .desctop-block .resume .features__slider-item,
    .desctop-block .resume__slider {
        width: 100% !important;
    }

    /* about (шапка "Юрий Логинов"): реально рендерится через .introduce__image-wrapper/
       .introduce__content, а не .resume__photo_new/.resume__info_new напрямую (те —
       скрытый дубль, display:none). Эта пара уже корректно уходит в 600/600 через
       готовое правило style.css: @media(max-width:1500px) .introduce__image-wrapper,
       .introduce__content{max-width:600px} — совпадает с old.aaba.ru (50/50), трогать
       не нужно. Оставляем только margin-top на всякий случай в масштабе 0.8. */
    .resume__about_new {
        margin-top: 150px;
    }

    /* история: как на старом сайте это 2 колонки 50/50 (фото/жёлтый блок | текст),
       а не 3 — маленькое фото (resume__history_new-right) там не отдельная колонка,
       а вставка поверх нижнего угла левой колонки. Повторяем: левая колонка
       становится position:relative, правая — position:absolute внутри неё. */
    /* Точные координаты сняты через getBoundingClientRect() с old.aaba.ru —
       у старого сайта холст .resume__history ровно 1200px, то есть 1:1 с нашим
       .resume на этом брейкпоинте. Значения ниже не масштабированы — это
       буквально те же px, что и на эталоне (где элемент у нас есть). */
    /* min-height 1200 = высота колонок (900) + высота абсолютной вставки-фото
       (300). Абсолютные элементы не увеличивают высоту родителя сами — без
       этого следующий блок (resume__blocks_fixed) начинался на 300px раньше
       и наезжал на нижнюю треть вставки.
       align-items:flex-start (не унаследованный flex-end из базового CSS) —
       иначе колонки короче 1200 (они по 900) прижимались к низу строки,
       оставляя пустые 300px сверху. flex-end был нужен только пока вставка
       позиционировалась через bottom:0; сейчас у неё top:900px, так что
       выравнивание строки по низу больше не требуется. */
    .resume__history_new {
        position: relative;
        min-height: 1200px;
        align-items: flex-start;
    }

    .resume__history_new-left {
        width: 600px;
        position: relative;
        z-index: 1;
    }

    .resume__read {
        top: 365px !important;
    }

    .resume__bio {
        height: 665px !important;
    }

    .resume__img {
        height: 365px !important;
    }

    .resume__me_new {
        height: auto;
        min-height: 300px;
        padding: 0 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .resume__me_slider {
        height: 600px;
    }

    .resume__history_new-center {
        width: 600px;
        min-height: 900px;
        padding: 0 52px;
        margin-top: 300px;
    }

    .resume__img_news_new:nth-child(3) {
        display: none;
    }

    .resume__history_new-right {
        /* old: resume__img_1 (nebula) x=300 y=900 — ровно там, где заканчивается
           левая колонка (me 300 + slider 600 = 900), а не наложение поверх фото. */
        position: absolute;
        left: 300px;
        top: 900px;
        width: 300px;
        z-index: 2;
    }

    .resume__img_new {
        width: 300px;
        height: 300px;
    }

    /* блоки fixed: old-канвас (x0-1200,y1200-2400) — kids-фото 300x300 (col1,row1),
       "Основа роста" 600x600 (col2-3,row1-2), "Красный диплом" 600x600 (col1-2,row3-4),
       фото 600x600 (col3-4,row3-4). Это НЕ два ровных флекс-столбца (кол-во и высота
       элементов слева/справа разные по рядам) — переводим на CSS grid 4×300px,
       через display:contents "распрямляя" обёртки left/right/right-top до прямых
       детей грида (тот же приём, что уже применён для .workshop_new__grid выше). */
    .resume__blocks_fixed {
        display: grid;
        grid-template-columns: repeat(4, 300px);
        /* minmax(300px, auto), а не голые 300px — если текст в "Основа роста"
           не помещается в 300*2=600px (колонка у'же, чем на old-сайте, из-за
           padding), строка грида должна вырасти сама и сдвинуть "Красный
           диплом" ниже, а не резать/наезжать на него. Было зафиксировано
           реальное наложение на 182px при фикс. 300px. */
        grid-auto-rows: minmax(300px, auto);
    }

    /* display:contents на right-top ломало покраску вложенного текста в этом
       Chrome (заголовок "Основа роста" переставал рендериться в скриншоте —
       воспроизводимо, даже с принудительным жёлтым фоном). Вместо "распрямления"
       делаем right-top отдельным вложенным гридом 300px+600px и просто
       позиционируем САМ right-top как один элемент внешнего грида.
       grid-column должен быть 1/4 (col1-3: кидс-фото в первых 300px + "Основа
       роста" в остальных 600px) — раньше было по ошибке 2/4 (col2-3), из-за
       чего кидс-фото уезжало в col2, а весь col1 оставался пустым серым
       провалом слева (наглядно видно на скриншотах — фото "Люминесцентные
       технологии" и фото с детьми стояли в одну и ту же колонку вместо
       лесенки, как на old.aaba.ru). Сверено 1:1 с old.aaba.ru:
       resume__img_2 (кидс-фото) там стоит ровно в (x:0,y:1200) — то есть
       именно col1,row1 канвы блоков, а не col2. */
    .resume__blocks_fixed_left,
    .resume__blocks_fixed_right {
        display: contents;
    }

    .resume__blocks_fixed_right-top {
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-column: 1 / 4;
        grid-row: 1 / 3;
    }

    .resume__img_new-top {
        width: 100%;
        height: 300px;
    }

    .resume__blocks_fixed_right-content-white {
        width: 100%;
        height: 100%;
        padding: 0 52px;
        box-sizing: border-box;
    }

    .resume__blocks_fixed_left_white {
        grid-column: 1 / 3;
        grid-row: 3 / 5;
        width: 100%;
        height: 100%;
        margin-top: 0;
        padding: 0 52px;
        box-sizing: border-box;
    }

    .resume__blocks_fixed_right-bottom {
        grid-column: 3 / 5;
        grid-row: 3 / 5;
        width: 100%;
        height: 100%;
    }

    /* карточка "история" 600x300 -> сама по себе (600+300=900) уже помещается
       в 1200 без сжатия — не трогаем ширину, только даём тексту расти.
       height:auto обязателен: в базовом правиле (custom.css выше) высота
       задана как height:300px (фикс, не min-height) — один min-height здесь
       её не перебивает (height и min-height — разные свойства, min-height
       просто выставляет пол, а used height всё равно = height:300px), текст
       "Профессиональный опыт" не помещается в 300px и вылезал вверх, наезжая
       на слайдер фото над блоком. */
    .resume__history-item_new {
        height: auto;
        min-height: 300px;
        padding: 0 52px;
    }

    /* news_item_block_1: белый(900)+фото(300)=1200 по умолчанию — уже точно
       влезает в контейнер, сжимать не нужно (иначе появляется пустой хвост).
       height:auto — та же причина, что и у history-item_new выше (базовое
       правило задаёт фикс. height:300px, который один min-height не отменяет). */
    .resume__news_item_block_1_white {
        height: auto;
        min-height: 300px;
        padding: 0 52px;
    }

    /* news_item_block_2: слайдер(600)+белый(600)=1200 по умолчанию — как есть. */
    /* news_item_block_3 = old "Построил свою мастерскую". Прошлый фикс тут был
       неверен (перепроверено через getBoundingClientRect() на old.aaba.ru,
       canvas .resume__history даёт координаты в пикселях 1:1 на этом брейкпоинте):
       1) На old текст ("Построил свою мастерскую") стоит СЛЕВА (x:0,y:0,600x600),
          фото — СПРАВА (x:600,y:0,600x600) — у нас DOM/CSS собирает наоборот
          (_left = фото, _right = текст). Визуально меняем местами через order,
          ничего в разметке не трогая (order живёт только в этом медиа-запросе).
       2) Нижние два фото ("Приходите в гости..." + фото пары) на old
          ДЕЙСТВИТЕЛЬНО есть (это не выдумка, старый комментарий здесь ошибочно
          утверждал обратное) — img_7 (x:300,y:600,w:600,h:300) + img_8
          (x:900,y:600,w:300,h:300): ряд 900 шириной, НАЧИНАЕТСЯ НИЖЕ обеих
          600-высоких колонок (y:600), не встык под текстом (y:300) — иначе
          ряд наезжает на фото-колонку по вертикали и весь блок теряет 300px
          высоты, которые есть на old. Поэтому ряд — absolute от самого
          news_item_block_3 (position:relative), а не nested внутри _right. */
    .resume__news_item_block_3 {
        position: relative;
        min-height: 900px;
    }

    .resume__news_item_block_3_left {
        order: 2;
    }

    .resume__news_item_block_3_right {
        width: 600px;
        order: 1;
    }

    .resume__news_item_block_3_right-top {
        height: auto;
        min-height: 600px;
        padding: 0 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .resume__news_item_block_3_right-bottom {
        position: absolute;
        left: 300px;
        top: 600px;
        width: 900px;
        height: 300px;
    }

    .resume__news_item_block_3_right-bottom_1 {
        width: 600px;
        height: 300px;
    }

    .resume__news_item_block_3_right-bottom_2 {
        width: 300px;
        height: 300px;
    }

    /* news_item_block_4 на 1200-1500: canvas old.aaba.ru здесь = 1200 (не 1500),
       поэтому "Пишу для FORBES Russia"(600) + фото(300) + "Люблю жизнь"(600) =
       1500 уже не помещаются в одну строку — на old это ДВЕ строки:
       ряд1 = пустое поле(600) + "Люблю жизнь"(600) = 1200 (встык);
       ряд2 = фото(300) + "Пишу для FORBES Russia"(600) = 900 (координаты сняты
       через getBoundingClientRect() на old.aaba.ru на этом брейкпоинте).
       Спейсер здесь ПОКАЗЫВАЕМ (в отличие от базового правила выше по файлу,
       где он display:none) и через flex-wrap + order разводим 4 элемента по
       двум рядам в нужном порядке: spacer+love встык заполняют ровно 1200px
       (сама переносит остаток на следующую строку), photo+text идут дальше. */
    .resume__news_item_block_4 {
        flex-wrap: wrap;
    }

    .resume__news_item_block_4_white {
        height: auto;
        min-height: 300px;
    }

    .resume__news_item_block_4_spacer {
        display: block;
        order: 1;
        background: none;
    }

    .resume__news_item_block_4_love-text {
        order: 2;
    }

    .resume__news_item_block_4_img {
        order: 3;
    }

    .resume__news_item_block_4_forbes-text {
        order: 4;
    }

    /* news_item_block_5: по умолчанию 900+600=1500 — на 300 больше контейнера,
       ужимаем текстовую (более широкую) колонку до 600, как и везде выше. */
    .resume__news_item_block_5_left {
        width: 600px;
        height: auto;
        min-height: 480px;
        padding: 0 52px;
    }
}

/* Главная, блок «Начало работы над проектом» (work-steps), десктоп >1500.
   В style.min.css сетка задана 4 колонками и битыми grid-позициями (X/X —
   нулевая ширина), из-за чего 01–05 и слайдер вставали неправильно. Задаём
   корректную 5-колоночную раскладку как в макете: ряд1 — заголовок(1-2),01,02,03;
   ряд2 — слайдер(1-2, на 2 ряда), 04, 05. */
@media screen and (min-width: 1501px) {
    /* custom.css грузится раньше style.min.css, поэтому нужен !important,
       чтобы перебить битые grid-позиции (3/3, 4/4) из style.min.css. */
    .work-steps__container {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .work-steps__item._item-1 {
        grid-column: 1/3 !important;
        grid-row: 1/2 !important;
    }

    .work-steps__item._item-2 {
        grid-column: 3/4 !important;
        grid-row: 1/2 !important;
    }

    .work-steps__item._item-4 {
        grid-column: 4/5 !important;
        grid-row: 1/2 !important;
    }

    .work-steps__item._item-5 {
        grid-column: 5/6 !important;
        grid-row: 1/2 !important;
    }

    .work-steps__item_slider {
        grid-column: 2/4 !important;
        grid-row: 2/4 !important;
    }

    .work-steps__item._item-6 {
        grid-column: 4/5 !important;
        grid-row: 2/3 !important;
    }

    .work-steps__item._item-7 {
        grid-column: 5/6 !important;
        grid-row: 2/3 !important;
    }

    .work-steps__item._item-3 {
        display: none !important;
    }

    /* нижний этаж (блок гостей с %) поднимаем на 1 секцию (было -300px) */
    .guests__container {
        margin-top: -600px !important;
    }
}

/* Блок «Приходите в гости»: текстовый слайдер (.guests__slider) без Swiper
   показывал 3 одинаковых слайда в ряд. Swiper на главной не подключаем
   (ломает hero), а текст во всех слайдах идентичный — показываем один.
   Только этот слайдер; картиночные слайдеры не трогаем. */
.guests__slider .guests__wrapper {
    display: block !important;
}

.guests__slider .guests__slide:not(:first-child) {
    display: none !important;
}

/* Карта на странице проекта (Яндекс.Карты): делаем плитки ч/б, а флажок-метку
   оставляем цветной. Плитки рисуются на canvas внутри .ymaps-layers-pane,
   метка лежит в соседнем .ymaps-overlay-stepwise-pane — фильтр на плитки
   не затрагивает метку. */
.project__map-container .ymaps-layers-pane {
    filter: grayscale(1);
}

.guests__slider .guests__slide:first-child {
    width: 100% !important;
}

@media (min-width: 1200px) {
    .popup__close:hover.popup__close::after {
        background-color: #5ebc64 !important;
    }

    .popup__close:hover.popup__close::before {
        background-color: #5ebc64 !important;
    }

    .popup .fancybox-title-over-wrap {
        background-color: #000 !important;
        color: #fff !important;
    }

    .popup__prev::before {
        border-bottom: 1.5px solid rgba(255, 255, 255) !important;
        border-left: 1.5px solid rgba(255, 255, 255) !important;
    }

    .popup__next::before {
        border-top: 1.5px solid rgba(255, 255, 255) !important;
        border-right: 1.5px solid rgba(255, 255, 255) !important;
    }

    .popup__next, .popup__prev {
        background-color: #000 !important;
    }

    .popup__prev {
        right: 100px !important;
    }

    .popup .fancybox-title-over-wrap {
        right: 50px !important;
    }

    .popup__next:hover, .popup__prev:hover {
        background-color: #5ebc64 !important;
    }
}

.portfolio__slide-title,
.slider__item-name {
    /* смещение/блюр подобраны под масштаб заголовка (font-size 150px
       десктоп / ~60-90px мобиле) — прежние 3px/6px терялись на фоне
       фото при такой высоте букв. */
    text-shadow: 0 4px 5px rgba(0, 0, 0, 0.8) !important;
}

html.menu-open .header__contacts {
    display: none !important;
}

.mMenu {
    top: 0 !important;
}

html.menu-open .icon-menu::after, html.menu-open .icon-menu::before{
    background-color: #fff !important;
}

#dopa .content{
    display: flex;
}
#dopa .content .menu-col{
    display: flex;
    flex-direction: column;
    width: 25%;
    align-content: center;
}
#dopa ul{
    width: auto !important;
}

#dopa .content .menu-col ul li.zaga svg{
    width: 32px;
    height: 32px;
    scale: 0.9;
}

#dopa .content .menu-col ul li.zaga a{
    margin-top: 10px;
}

#dopa ul li.zaga {
    padding-bottom: 5px !important;
}
#dopa ul li {
    margin-bottom: 12px !important;
}

/* Мобильное меню: раскрытие подразделов (перенесено из top_mob, О-3) */
        .mMenu__link.submenu_button {
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .mMenu__link.submenu_button.active {
            color: #fff;
        }

        .menu-mob__submenu-list {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding-left: 15px;
        }

        .menu-mob__submenu-list.open {
            max-height: 5000px; /* Достаточно большое значение чтобы вместить все пункты */
            margin-left: 30px;
        }

        .mMenu__2lvl ul,
        .mMenu__2lvl li,
        .menu-mob__submenu-list,
        .menu-mob__submenu-list li {
            list-style: none;
            margin: 0 10px;
            padding: 0;
        }

    

/* О-2: id="a-pk*" в описаниях повторялись; заменены на классы в App::sanitizeContentIds(). */
.a-pk {
    display: inline;
    border: 0;
    text-decoration: underline;
}
.a-pk-black {
    color: black;
    display: inline;
    border: 0;
    text-decoration: underline;
}
.a-pk-black a:hover {
    color: #5ebc64;
}
.a-pk-white {
    color: white;
    display: inline;
    border: 0;
    text-decoration: underline;
}

/* Прелоадер главной (перенесено из header.php, О-3/Р-1). */
.pre-loader {
    background-color: #fff;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .35s ease;
}
.pre-loader_hide {
    opacity: 0;
}


/* Карточка проекта: fancybox-попап (перенесено из element.php, О-3). */
.fancybox-wrap.popup { visibility: visible; pointer-events: auto; }

/* Hero-слайдер: секция — flex-элемент .wrapper. Без явной ширины
   Swiper мог измерить min-content и раздуть слайды до 3.3e7px.
   Фиксируем ширину по контейнеру (как на production). */
#portfolio.portfolio__slider {
    width: 100%;
    min-width: 0;
}


/* Общие стили изображений слайдера (перенесено из шаблонов карточек, чтобы не дублировать <style> в цикле). */
.new-style-img {
    position: relative;
}
.new-style-img img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
}
@media (max-width: 600px) {
    .new-style-img img {
        width: unset;
    }
}

/* ==========================================================================
   В-1. Кадрирование изображений в первых экранах слайдеров.

   Правило одно на все слайдеры: картинка заполняет окно показа враспор по
   своему минимальному габариту. Для альбомного кадра ограничителем служит
   высота окна, для вертикального — ширина. Достигается object-fit: cover:
   масштаб ровно такой, чтобы покрыть окно, без пустых полей, без искажения
   пропорций и без дополнительного приближения. Новые загрузки любого
   разрешения подчиняются тому же правилу — размеры картинки в разметке не
   задаются.

   Что было не так:
   1) базовый .portfolio__slide-img стартовал с transform: scale(1.1) — кадр
      был на 10% крупнее окна и обрезался сильнее, чем нужно;
   2) на мобиле .portfolio__slide-img имел width:auto при фиксированной
      высоте: альбомный кадр покрывал окно, а вертикальный вставал уже окна,
      и по бокам оставались пустые поля (в ТЗ — «сильно меньше»);
   3) на странице проекта и на страницах услуг картинка первого экрана
      выводилась с object-fit: fill, то есть растягивалась под пропорции окна.

   Границы окна на мобиле по ТЗ: сверху — низ чёрного квадрата с логотипом
   (высота шапки), снизу — зелёное поле текста. Зелёное поле в мобильной
   схеме стоит в потоке под картинкой, поэтому окно = оставшаяся высота.
   ========================================================================== */

/* 1. Никакого дополнительного приближения: масштаб задаёт только cover. */
#portfolio .portfolio__slide-img {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

/* 2–3. Единый способ вписывания для всех первых экранов: главная, разделы
   портфолио, «Бюро», страница проекта, страницы услуг. */
#portfolio .portfolio__slide-img,
.header__slider_fixed .new-style-img img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

/* Мобильная и планшетная ширина: вертикальный кадр не должен вставать уже
   окна. Ширина растягивается минимум до окна, лишнее срезает cover.
   Альбомный кадр остаётся шире окна — на нём работает панорама. */
@media screen and (max-width: 767.98px) {
    #portfolio .portfolio__slide-img,
    .header__slider_fixed .new-style-img img {
        width: auto !important;
        min-width: 100% !important;
        max-width: none !important;
    }
}

/* Верхняя граница окна по ТЗ — низ чёрного квадрата с логотипом. Шапка
   непрозрачная и стоит над картинкой, поэтому верхние 56px (десктоп 75px)
   кадра и так не видны: видимое окно начинается ровно под шапкой, а нижняя
   граница — зелёное поле текста, которое идёт следом в потоке. Отдельно
   сдвигать картинку не нужно — это ломало бы страницы, где слайдер стоит
   не в самом верху (например, «Бюро» под подменю раздела). */

/* ==========================================================================
   В-6. Главная: три колонки услуг и карта.
   1) В диапазоне 1024–1200 px у блока услуг размер шрифта задавался на
      ячейке (.services-*__item { font-size: 13px }) и перебивал .title-h2,
      из-за чего заголовки «Архитектурное проектирование», «Дизайн
      интерьера» и «Консалтинг» становились 13 px. В макете Figma они
      50 px во всех вариантах — возвращаем.
   2) Карта в ячейке 300×300 была шире ячейки (600×300) и обрезалась по
      overflow:hidden — видна была только половина. Расширяем ячейку на две
      колонки и поднимаем блок контактов над картой слоем выше.
   ========================================================================== */
@media screen and (min-width: 901px) {
    .services-arch__item_title.title-h2,
    .services-design__item_title.title-h2,
    .services-consult__item_title.title-h2 {
        font-size: 50px;
        line-height: 0.9;
    }
}

/* Карта никогда не шире своей ячейки: иначе overflow:hidden срезает
   половину и видно только часть схемы (на мобиле и планшете). */
.contact__item_map #clientsMap {
    width: 100% !important;
    height: 100% !important;
}

/* Только там, где мозаика собрана сеткой 4×300 (десктоп). Ниже 1200px
   раскладка блока контактов задаётся относительными смещениями в style.css,
   и расширение ячейки карты её ломает. */
@media screen and (min-width: 1201px) {
    .contact__item_map {
        grid-column: span 2;
        width: 600px;
        height: 300px;
        z-index: 1;
    }

    /* Контакты — поверх карты, полупрозрачной плашкой, как в макете.
       Селектор с контейнером: базовое правило .contact__item { position:
       relative } из подключаемого позже style.css иначе перебивает. */
    .contact__container .contact__item_contact {
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        height: 300px;
        z-index: 2;
    }
}

/* ==========================================================================
   В-14. Проекты. Линия сопряжения текстовых блоков.
   На странице проекта два текстовых блока (краткое описание и подробное)
   стоят рядом, но белые подложки заканчивались на разной высоте — нижняя
   граница «рваная». По схеме заказчика блоки должны сходиться по одной
   линии. Переводим ряд в flex: блоки тянутся до высоты самого высокого,
   поэтому верх и низ совпадают, а текст остаётся сверху.
   ========================================================================== */
.project__row:has(> .project__desc) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.project__row > .project__desc {
    float: none;
}

/* На узких экранах блоки идут друг под другом во всю ширину — выравнивание
   по высоте там не нужно. */
@media screen and (max-width: 900px) {
    .project__row > .project__desc {
        width: 100%;
    }
}

/* ==========================================================================
   В-12. Резюме: три колонки.
   По ТЗ страница резюме должна быть в три колонки. В макете Figma отдельного
   экрана резюме нет, на old.aaba.ru страница собрана из двух колонок по
   600 px, поэтому раскладка сделана по трём равным колонкам 400 px на той же
   канве 1200 px:
     1) фотография,
     2) имя, подпись и список регалий,
     3) логотип AABA ARCHITECTS.
   Правая часть раньше пустовала — теперь она занята третьей колонкой.
   Мозаику блоков ниже не трогаем: она собрана из абсолютно позиционированных
   картинок-слайдеров, и перекладывать её без утверждённого макета рискованно.
   ========================================================================== */
@media screen and (min-width: 1025px) {
    .resume .introduce__container {
        display: grid;
        grid-template-columns: repeat(3, 400px);
        align-items: stretch;
    }

    .resume .introduce__image-wrapper {
        grid-column: 1;
        grid-row: 1;
        width: 400px;
        max-width: none;
        min-height: 400px;
        height: auto;
    }

    .resume .resume__photo_new-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .resume .introduce__content {
        grid-column: 2 / span 2;
        grid-row: 1;
        width: 800px;
        max-width: 800px;
    }

    .resume .introduce__head {
        grid-template-columns: 1fr 1fr;
    }
}

/* В-6: мозаика блока «Контакты» на 905–1200px.
   В этом диапазоне в style.css элементы расставлены относительными
   смещениями под фиксированную канву, из-за чего карточка контактов
   уезжала за правый край (x ≈ 1350 при окне 1200) и не была видна.
   Собираем блок заново обычной сеткой 4 колонки — раскладка совпадает с
   десктопной: 2×2 слева, карта справа, контакты под картой, слайдер и
   «Рассчитать стоимость» в нижнем ряду. */
@media screen and (min-width: 901px) and (max-width: 1200px) {
    .contact__container {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-rows: 300px;
        height: auto !important;
    }

    .contact__item {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: auto !important;
        height: 300px !important;
    }

    .contact__item_2x2 {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
        height: 600px !important;
    }

    .contact__item_map {
        grid-column: span 2 !important;
    }

    .contact__item_contact {
        grid-column: span 2 !important;
    }

    .contact__item_slider {
        grid-column: span 2 !important;
    }

    .contact__item_calc {
        grid-column: span 2 !important;
    }
}

/* ==========================================================================
   В-3, В-4. Бюро: «Приходите в гости» и «О мастерской», публикации.

   1) Заголовок первого блока «Приходите в гости» (тёмная фотоплашка) был
      набран обычной гарнитурой 28 px. По ТЗ — фирменный крупный кегль.
   2) Второй блок повторял тот же заголовок; в шаблоне он переименован в
      «О мастерской» (у старого сайта текст правильный).
   3) В публикациях на мобиле подпись проекта (раздел + название) появлялась
      только по тапу, а обложка проекта была квадратной 100vw × 100vw.
      По ТЗ подпись должна быть видна сразу, а иконка проекта — 2:1.
   ========================================================================== */
.start__invite-header {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    font-size: 50px;
    line-height: 0.9;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

@media screen and (max-width: 600px) {
    .start__invite-header {
        font-size: 34px;
    }

    /* Обложка проекта под публикацией — пропорция 2:1. */
    .publications__label,
    .publications__label .service-main__item-img,
    .publications__label .block_square,
    .publications__item .portfolio__label,
    .publications__label img {
        width: 100vw !important;
        height: 50vw !important;
    }

    /* Подпись проекта видна сразу, а не только по тапу. */
    .publications__item .portfolio__label {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .publications__item .portfolio__label-in {
        opacity: 1 !important;
    }
}

/* В-3: зелёный блок рекомендаций — как на главной.
   Имя рекомендателя набираем фирменным шрифтом, добавляем кавычки
   (на главной это SVG-кавычки в углу блока), проект рекомендателя
   остаётся ссылкой на карточку проекта. */
.thanks__reviews .reviews__name-header {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.thanks__reviews .reviews__quote {
    position: relative;
}

.thanks__reviews .reviews__quote-text:before {
    display: block;
    content: '\201C';
    font-family: "CoFoPeshka", sans-serif;
    font-size: 70px;
    line-height: 0.7;
    color: #fff;
    opacity: 0.55;
    margin-bottom: 6px;
}

@media screen and (max-width: 600px) {
    .thanks__reviews .reviews__name-header {
        font-size: 30px;
    }

    /* Фото рекомендателя и обложка проекта не должны прятаться на мобиле. */
    .thanks__reviews .reviews__image,
    .thanks__reviews .reviews__author_big {
        display: block !important;
    }
}

/* В-3: логотипы рекомендаций и партнёров.
   Карусель была шириной 800px при блоке 600px, поэтому правая колонка
   логотипов (СБЕР БАНК, ЦИАН и т.п.) уходила под overflow и обрезалась.
   Вписываем карусель в блок масштабом — пропорции логотипов сохраняются,
   ничего не режется. */
.thanks__logos .reviewsCarousel,
.partners__carousel .reviewsCarousel {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    transform-origin: left top;
}

@media screen and (max-width: 600px) {
    /* На мобиле логотипы идут своей сеткой, масштабирование не нужно. */
    .thanks__logos .reviewsCarousel,
    .partners__carousel .reviewsCarousel {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}

/* В-3: мобильная вёрстка «Рекомендаций» и «Партнёров».
   Слайдер мастерской был фиксированной ширины 600px и вылезал за экран
   телефона, оставляя справа пустое поле; логотипы в карусели 800px тоже
   обрезались. Вписываем слайдер в ширину экрана, карусель логотипов
   масштабируем. */
@media screen and (max-width: 600px) {
    .service__about-slider,
    .service__about-slider .portfolio-4x4__slider,
    .service__about-slider .swiper,
    .service__about-slider .swiper-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .thanks__logos {
        height: auto !important;
        padding-bottom: 0 !important;
    }

    .thanks__logos .reviewsCarousel,
    .partners__carousel .reviewsCarousel {
        -webkit-transform: scale(0.4875);
        -ms-transform: scale(0.4875);
        transform: scale(0.4875);
        transform-origin: left top;
    }
}

/* ==========================================================================
   В-7. Видео открывается на весь экран сразу по клику.
   Раньше видео открывалось карточкой 80vw с серой подложкой и отступами:
   сначала появлялся промежуточный экран, и только потом подгружался плеер.
   Для видео-попапов (.popup_fullscreen) убираем карточку и отступы, тянем
   плеер на весь экран, фон — чёрный. Пропорции видео сохраняет сам плеер.
   ========================================================================== */
.popup_fullscreen {
    background: #000;
}

.popup_fullscreen .popup__wrapper {
    padding: 0;
    min-height: 100%;
    max-height: none;
}

.popup_fullscreen .popup__content,
.popup_fullscreen > .popup__wrapper > div {
    width: 100vw;
    height: 100vh;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: #000;
    transform: none;
}

.popup_fullscreen .popup__text,
.popup_fullscreen .responsiveVideo {
    width: 100%;
    height: 100%;
    padding: 0;
    background: #000;
}

/* .responsiveVideo в базовых стилях держит пропорцию через padding-bottom —
   на весь экран это даёт лишнюю полосу, поэтому обнуляем. */
.popup_fullscreen .responsiveVideo {
    position: static;
}

.popup_fullscreen .responsiveVideo iframe,
.popup_fullscreen .responsiveVideo video,
.popup_fullscreen .popup__text iframe {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Кнопка закрытия — поверх видео, светлая, в правом верхнем углу. */
.popup_fullscreen .popup__close {
    top: 20px !important;
    right: 20px !important;
    z-index: 10;
}

.popup_fullscreen .popup__close::before,
.popup_fullscreen .popup__close::after {
    background-color: #fff;
}

@media screen and (max-width: 600px) {
    .popup_fullscreen .popup__close {
        top: 12px;
        right: 12px;
    }
}

/* ==========================================================================
   В-10. Контакты: фирменные шрифты в заголовках и крупных цифрах,
   вёрстка блока «Просим направлять…» на «Вакансиях» и «Практике».
   Текст в жёлтом блоке вырос (в него добавили строку про обработку
   персональных данных) и при кегле 24px перестал помещаться в квадрат
   300×300 — вылезал за границы и накрывался соседним фото. Уменьшаем
   кегль до 15px и приводим отступы к прежним.
   ========================================================================== */
.vacancy_new__flex-bottom-yellow {
    font-size: 15px;
    line-height: 22px;
    padding: 45px 30px 0 40px;
    height: 300px;
    overflow: hidden;
    font-weight: 600;
}

/* Крупные цифры и заголовки в блоках «Поставщикам…» — фирменным шрифтом. */
.supply__number-value {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    font-size: 54px;
    line-height: 0.9;
}

.supply__number-header {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

.vacancy__chars-header {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

@media screen and (max-width: 600px) {
    .vacancy_new__flex-bottom-yellow {
        height: auto;
        min-height: 300px;
        font-size: 14px;
        line-height: 20px;
        padding: 30px 24px;
        overflow: visible;
    }
}

/* ==========================================================================
   Доводка мобильной вёрстки после В-3/В-10.
   1) «Рекомендации»: блоки .thanks__faces и .thanks__reviews на мобиле
      схлопывались — фото-сетка и зелёный блок отзывов были не видны, а
      между секциями оставались пустые области. Причина: мозаика собрана
      абсолютным позиционированием, а bxSlider ставит .bx-viewport высоту 0
      при инициализации, потому что все слайды абсолютные. На телефоне
      раскладываем блок в поток: сетка фото 2 колонки, отзыв — колонкой.
   2) «Вакансии»/«Практика»: контейнер слайдера мастерской выше самой
      картинки, из-за чего под ним оставалась белая полоса.
   ========================================================================== */
@media screen and (max-width: 900px) {
    .thanks {
        height: auto !important;
    }

    .thanks__logos {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .thanks__faces {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
    }

    .thanks__face {
        position: static !important;
        width: auto !important;
        height: 180px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .thanks__reviews {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: flow-root;
    }

    .thanks__reviews .reviewsSlider {
        position: static !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
    }

    .thanks__reviews .bx-wrapper,
    .thanks__reviews .bx-viewport,
    .thanks__reviews .reviewsSlider__list {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
    }

    .thanks__reviews .reviews__slide {
        position: static !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
    }

    .thanks__reviews .reviews__author,
    .thanks__reviews .reviews__image,
    .thanks__reviews .reviews__name,
    .thanks__reviews .reviews__quote {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
    }

    .thanks__reviews .reviews__author img,
    .thanks__reviews .reviews__image img {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 600px) {
    .vacancy_new__flex-slider,
    .vacancy_new__flex-slider .about__slider {
        height: 600px !important;
    }

    .vacancy_new__flex-slider .portfolio-4x4__slider {
        height: 600px !important;
    }

    .vacancy_new__flex-slider img {
        width: 100% !important;
        height: 600px !important;
        object-fit: cover;
    }
}

/* ==========================================================================
   В-8. Safari на iPhone: кнопка меню в пропорции 2:3.
   Была плашкой 30×9 без фона — на белой шапке и под панелью Safari терялась.
   Делаем вертикальную плашку 40×60 с белым фоном и знаком «=» по центру;
   в открытом состоянии те же линии превращаются в крестик.
   ========================================================================== */
@media screen and (max-width: 767.98px) {
    .icon-menu {
        width: 40px !important;
        height: 60px !important;
        right: 10px !important;
        top: 0 !important;
        background: #fff;
    }

    .icon-menu::before,
    .icon-menu::after {
        left: 11px !important;
        right: auto !important;
        width: 18px !important;
        height: 2px !important;
    }

    .icon-menu::before {
        top: 25px !important;
    }

    .icon-menu::after {
        top: 33px !important;
        bottom: auto !important;
    }

    html.menu-open .icon-menu::before,
    html.menu-open .icon-menu::after {
        top: 29px !important;
    }
}

/* ==========================================================================
   В-11. Услуги: фирменный стиль «скидок %» и «12 преимуществ», картинки
   слайдеров враспор кадра по высоте.
   ========================================================================== */
.start__procent-value {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.service__features-label,
.service__features-label span {
    font-family: "CoFoPeshka", sans-serif;
    font-weight: 500;
    letter-spacing: 0.005em;
}

/* Слайды услуг: любая загрузка заполняет кадр по высоте без искажений. */
.service__project-slider img,
.features__slider-item img,
.featuresSlider .features__slider-item_pub img {
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   В-3, 17.7. Мобильные логотипы «Партнёров» и «Рекомендаций».
   Карусель логотипов собрана под широкий блок (800px) и на телефоне либо
   обрезалась, либо (после масштабирования) становилась нечитаемой.
   На мобиле bxSlider отключаем и показываем логотипы горизонтальной
   прокручиваемой лентой — все логотипы видны и читаемы.
   ========================================================================== */
@media screen and (max-width: 600px) {
    .partners__carousel .reviewsCarousel,
    .thanks__logos .reviewsCarousel {
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 10px 0 0 !important;
        overflow: visible !important;
        box-sizing: border-box;
    }

    .partners__carousel .bx-wrapper,
    .partners__carousel .bx-viewport,
    .thanks__logos .bx-wrapper,
    .thanks__logos .bx-viewport {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .partners__carousel .bx-clone,
    .thanks__logos .bx-clone,
    .partners__carousel .bx-controls,
    .thanks__logos .bx-controls {
        display: none !important;
    }

    .partners__carousel .reviewsCarousel__list,
    .thanks__logos .reviewsCarousel__list {
        display: flex !important;
        width: auto !important;
        overflow-x: auto !important;
        gap: 10px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .partners__carousel .reviews__carousel-slide,
    .thanks__logos .reviews__carousel-slide {
        display: contents !important;
    }

    .partners__carousel .reviews__carousel-img,
    .thanks__logos .reviews__carousel-img {
        flex: 0 0 120px !important;
        width: 120px !important;
        height: 80px !important;
        line-height: 80px !important;
    }

    .partners__carousel .reviews__carousel-img img,
    .thanks__logos .reviews__carousel-img img {
        max-width: 100% !important;
        max-height: 60px !important;
    }
}

/* ==========================================================================
   В-12. Резюме: три колонки в блоке «Моя история».
   Блок был собран из двух колонок по 600px (фото/текст) с плавающей
   картинкой; по ТЗ — три колонки. Раскладываем на сетку 3×400:
   слева «Моя история» и фото, центр+правая — текст (2 колонки), под фото
   встаёт картинка-небула. Текст получает ширину 800px и читается ровно.
   ========================================================================== */
@media screen and (min-width: 1025px) {
    .resume__history_new {
        display: grid;
        grid-template-columns: repeat(3, 400px);
        height: auto;
        align-items: start;
    }

    .resume__history_new-left {
        grid-column: 1;
        grid-row: 1;
        position: static;
        width: 400px;
        height: auto;
    }

    .resume__history_new-center {
        grid-column: 2 / span 2;
        grid-row: 1;
        position: static;
        width: 800px;
        height: auto;
    }

    .resume__history_new-right {
        grid-column: 1;
        grid-row: 2;
        position: static;
        width: 400px;
        height: auto;
    }

    .resume__history_new-center,
    .resume__history_new_white,
    .resume__history_new_white .resume__about_flex {
        width: 100%;
        height: auto;
        padding: 60px 65px;
        box-sizing: border-box;
    }

    .resume__history_new-right,
    .resume__history_new-right-img {
        width: 400px;
        height: 400px;
        object-fit: cover;
    }

    .resume__me_new {
        width: 400px;
        height: 300px;
    }

    .resume__me_slider,
    .resume__me_slider .resume__slider,
    .resume__me_slider .swiper {
        width: 400px;
        height: 400px;
    }

    .resume__me_slider img {
        width: 400px;
        height: 400px;
        object-fit: cover;
    }
}

/* End */


/* Start:/local/templates/NewDesign/components/bitrix/menu/top/style.css?1794214558541*/
.rach
{
display:none;
}
.header .menu__submenu.services_sub {
    grid-template-columns: repeat(3,1fr)!important;
    width: auto!important;
    min-width: 750px;
}
.menu__submenu.services_sub {
    height: 100%;
    min-height: calc(100vh - 100px);
    overflow-y: auto;
}
.calc-menu-services {
    position: relative;
    display: flex;
    width: 300%;
}

.header .menu__submenu-block {
    padding-bottom: 50px!important;
}
.calc-menu-services .menu__submenu-block {
    position: relative!important;
    padding-bottom: 0px!important;
}
/* End */


/* Start:/local/templates/NewDesign/components/bitrix/menu/top_mob/style.css?179421455823*/
.rach
{
display:none;
}
/* End */


/* Start:/local/templates/NewDesign/template_styles.css?179421455813636*/
/*.fancybox-wrap.popup {
	visibility: visible;
}*/
/*.popup {
	position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.8s;
}*/
/*.header__slider {
	position: absolute;
}
.popup {
	display: none;
}
.popup_show {
	display: block !important;
}*/
.slider {
    background: #000;
    width: 100%;
    height: 100%;
    position: absolute;
}
.footer__main-link:hover {
    color: #5ebc64;
}
.footer__item_1x2 {
 height: auto!important;
}
@media (min-width: 1501px) {
    .footer__container {
        height: 700px!important;
    }
    .footer__item._portfolio {
        height: 400px!important;
    }
    .footer__item.footer__item_showreel {
        height: 400px!important;
    }
}
.footer__item {
    overflow: visible!important;
}
@media (min-width: 600px) {

}
@media screen and (max-width: 600px) {
    .slider {
        height:calc(100vh - 50px)!important;
    }
    .service__info-type {
        width: 100%!important;
        left: 0;
        top: 0;
        padding-left: 20px!important;
        padding-right: 20px!important;
    }
    .wrap {
        width: 100%!important;
        min-width: 100%!important;
    }
    .mainServices {
        margin-top: 0px !important;
    }
    .service__info-names,
    .service__nav-header,
    .service__nav-inner,
    .service__arch-info,
    .service__desc-info,
    .service__project-info,
    .service__ext-label,
    .service__ext-item_long,
    .workshop__years,
    .workshop__green
    {
        width: 100%!important;
        padding-left: 20px!important;
        padding-right: 20px!important;
    }
    .service__nav-item,.service__nav-item {
        width: 100%!important;
    }
    .service__arch-photo img,
    .service__features-label,
    .service__arch-photo,
    .service__arch-text
    {
        width: 100%!important;
    }
    .service__arch, .service__arch-photo, .service__features {
        height: auto!important;
        min-height: auto!important;
    }
    .service__features-item {
        position: unset!important;
        width: 100%!important;
        height: auto!important;
        padding: 90px 20px 0!important;
    }
    .service__features-item_12 {
        padding-bottom: 40px!important;
    }
    .service__project-slider {
        width: 100% !important;
        height: auto!important;
    }
    .service__project {
        padding-top: unset!important;
    }
    .service__project-info {
        height: auto!important;
        min-height: unset!important;
        padding-top: 40px!important;
    }
    .service__project-slider {
        position: unset!important;
    }
    .service__start .start__label, .block_square {
        width: 100%!important;
    }
    .service__start {
        height: auto!important;
    }
    .start__label.block, .start__label img {
        position: unset!important;
    }
    .service__start .start__label img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    .service__start .start__item {
        position: unset!important;
    }
    .service__arch-photo img {
        margin-left: 0!important;
    }
    .service__start .start__label {
        padding-top: 0!important;
    }
    .service__start .features__calc {
        width: 100%!important;
        top: unset!important;
    }
    .features__calc.block {
        position: unset!important;
    }
    .block_rectangle {
        height: auto!important;
    }
    .features__calc-button {
        position: unset!important;
        margin: 20px auto!important;
    }
    .slider__list .slider__item, .slider__list .slider__item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        max-height: 100vh;
    }
    .service__about {
        height: auto!important;
    }
    .service__about .start__invite {
        width: 100vw !important;
        height: 100vw !important;
        position: unset!important;
    }
    .service__about-slider {
        height: auto!important;
        position: unset!important;
    }
    .service__about-map {
        width: 100%!important;
        height: auto!important;
    }
    .service__about .start__invite-text {
        width: 100vw !important;
        height: 100vw !important;
    }
    .start__invite-text {
        padding-bottom: 20px!important;
    }
    .start__invite-text {
        padding-top: 35px!important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left !important;
    }

    .start__invite-header {
        font-family: CoFoPeshka;
        line-height: .93;
        letter-spacing: 1px;
        font-size: 38px;
    }
    .slider .bx-viewport {
        min-width: 100%!important;
    }
    .main {
        margin-top: 0!important;
    }
    .header__menu.menu {
        width: 100%!important;
    }
    .header__slider {
        width: 100%!important;
        min-width: 100%!important;
        max-width: 100%!important;
    }
    .subheader_publications {
        min-width: 100%!important;
    }
    .subheader__nav {
        min-width: 100%!important;
        display: flex!important;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px!important;
        height: 100%;
    }
    .subheader_workshop .subheader__nav-item {
        line-height: normal!important;
        height: auto!important;
    }
    .workshop__target, .workshop__img, .workshop__years, .workshop__green {
        position: unset!important;
        width: 100% !important;
    }
    .workshop__info, .workshop__kids, .workshop__lab, .workshop__master {
        position: unset!important;
        width: 100%!important;
        padding-left: 20px!important;
        padding-right: 20px!important;
        padding-bottom: 30px!important;
    }
    .workshop__info {
        padding-top: 30px!important;
        height: auto!important;
    }
    .workshop__soc {
        width: 100%!important;
        height: auto!important;
        position: unset!important;
    }
    .workshop__top {
        height: auto!important;
    }
    .service__slider-info {
        width: 100%!important;
        padding-left: 20px!important;
        padding-right: 20px!important;
        margin-left: 0!important;
    }
    .workshop__bottom-slider .features__slider-item::before, .featuresSlider_workshop-img {
        width: 100%!important;
    }
    .workshop__master {
        height: 75vw !important;
        width: 100vw !important;
    }
    .workshop__bottom .features__slider-item, .featuresSlider_workshop {
        width: 100%!important;
    }
    .workshop__bottom-slider.new_wbs .featuresSlider__list, .workshop__bottom-slider.new_wbs .featuresSlider .features__slider-item {
        height: auto!important;
    }
    .header__slider_fixed .text_container {
        overflow: visible!important;
    }
    .header__slider_fixed .text_container {
        bottom: 0!important;
    }
    .workshop__master {
        padding-top: 30px!important;
    }
    .workshop__bottom .features__slider-item, .workshop__bottom-slider, .resume__photo, .resume .features__slider-item, .thanks__faces, .resume__img, .resume__slider, .publications__slider {
        width: 100%!important;
    }
    .workshop__text {
        /*max-width: 350px!important;*/
    }
    .featuresSlider_workshop, .workshop__bottom-slider.new_wbs, .workshop__bottom, .workshop__bottom-slider, .bx-viewport:not(.workshop__slider .bx-viewport) {
        height: auto!important;
        position: relative;
    }
    .workshop__bottom-slider, .features__slider-item {
        position: unset!important;
    }
    .workshop__bottom-slider.new_wbs .features__slider-item::before {
        display: none!important;
    }
    .resume {
        top: 0!important;
    }
    .resume__about {
        margin-top: 0!important;
    }
    .resume__photo {
        background-position: center!important;
    }
    .resume__info, .resume__history-item, .resume__help {
        width: 100%!important;
        padding-left: 20px!important;
        padding-right: 20px!important;
    }
    .resume__history-item {
        height: auto;
        padding-top: 30px!important;
    }
    .resume__slider, .resume__bio {
        height: auto!important;
    }
    .resume__history, .resume__about, .publications__text, .subheader__nav-item, .thanks__reviews .reviews__slider, .thanks__reviews .reviewsSlider {
        height: auto!important;
    }
    .resume__history-item, .resume__slider, .resume__img {
        position: unset!important;
    }
    .resume__history-item, .resume__img {
        top: unset!important;
    }
    .header .menu {
        box-shadow: none!important;
    }
    .publications__text, .publications__item:first-child .publications__text, .partners__info, .reviewsCarousel, .partners__logos {
        width: 100%!important;
        padding-left: 20px!important;
        padding-right: 20px!important;
    }
    .thanks__logos, .partners__info, .thanks__logos .partners__carousel, .thanks__reviews {
        width: 100%!important;
        height: auto!important;
        position: unset!important;
    }
    .partners__info {
        padding-top: 35px!important;
        padding-bottom: 35px!important;
    }
    .thanks__faces, .thanks__face {
        position: unset!important;
    }
    .thanks__face, .contacts__squares {
        height: auto!important;
    }
    .thanks__faces {
        display: flex;
        flex-wrap: wrap;
        height: auto!important;
    }
    .partners__carousel{
         width: 100% !important;
        margin-left: 0px!important;
    }
    .partners__teams {
        width: 100%!important;
        padding: 30px 20px!important;
        height: auto!important;
    }
    .partners__env-inner, .supply__info-warning {
        padding-left: 20px!important;
        padding-right: 20px!important;
        width: 100%!important;
    }
    .partners__env-info, .partners__env, .contacts__invite, .contacts__squares {
        width: 100%!important;
    }
    .contacts__invite-label {
        width: 50%!important;
    }
    .contacts__invite-button {
        width: 50%!important;
        left: 50%!important;
    }
    .contacts__square {
        position: unset!important;
        width: 100%!important;
    }
    .contacts__info {
        width: 100%!important;
        height: auto!important;
        position: unset!important;
    }
    .contacts {
        height: auto!important;
    }
    .contacts__info {
        /*margin-top: 300px!important;*/
        padding-bottom: 30px;
    }
    .contacts__invite {
        position: unset!important;
        height: auto!important;
    }
    .contacts__social {
        width: 100% !important;
        height: auto!important;
    }
    .contacts__social-items {
        position: unset!important;
    }
    .contacts__social-item {

    }
    .supply__info {
      width: 100% !important;
    }
    .supply__info-textб .supply__numbers, .supply__numbers {
        width: 100% !important;
    }
    .supply__number{
        position: unset!important;
        width: 100%!important;

    }
    .contacts__scheme-more {
        position: relative!important;
        width: 100%!important;
        left: unset!important;
    }
    .vacancy__exp, .vacancy__chars, .vacancy__text, .vacancy__warning {
        width: 100%!important;
        padding: 30px 20px!important;
        position: unset!important;
        height: unset!important;
    }
    .contacts__scheme-more-img {
        position: unset!important;
        margin: unset!important;
    }
    .contacts__scheme-more-img {

    }
    .service__project-info {
        left: unset!important;
    }
    .prInternship .vacancy {
        min-height: unset!important;
    }
    .prInternship .vacancy .contacts__scheme-more {
        top: unset!important;
    }
}
.body.body_mobile {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
.header .menu__submenu-link, .header .menu__submenu-item {
    line-height: 15px!important;
}

@media (min-width: 601px){
    .footer__showreel-inner {
        height: 300px!important;
    }
    .footer__item._portfolio {
        height: 300px!important;
    }
    .footer__item_showreel {
        max-height: 300px!important;
    }
    .footer__item_empty-black, .footer__item_white {
        height:428px!important;
    }
    .footer__container {
        background: #fff;
    }
    .footer._watcher-view:after {
        height: 400px!important;
    }
    .footer__item_white-last {
        height: 380px!important;
        margin-top: -83px!important;
    }
    .footer._watcher-view:before {
        height: 100%!important;
    }
}
.subnavigation-column {
    flex-direction: unset!important;
    gap: 50px;
    flex-wrap: wrap;
}
.subnavigation-columns {
    display: unset!important;
}
#subnavigation-wrapper {
    display: block flex;
    justify-content: flex-end;
}
.subnavigation__item {
    font-weight: 700;
}
.bx-controls.bx-has-pager {
   display: none!important;
}
.header .menu__submenu-list {
    padding: 0 20px!important;
}
@media (max-width: 768px) {
    .submenu .subnavigation {
        width: 100%;
    }
    .subnavigation-column {
        gap: 0px;
        column-gap: 20px;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: none;
        -ms-overflow-style: none;
        scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .submenu .subnavigation__item {
        color: #000;
        padding: 0;
    }
    .contact__item_slider {
        height: auto!important;
    }
}


/* End */
/* /local/templates/NewDesign/css/custom.css?1794244820215660 */
/* /local/templates/NewDesign/components/bitrix/menu/top/style.css?1794214558541 */
/* /local/templates/NewDesign/components/bitrix/menu/top_mob/style.css?179421455823 */
/* /local/templates/NewDesign/template_styles.css?179421455813636 */