/* .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(../fonts/CoFoPeshka-Medium.woff2) format("woff2"), url(../fonts/CoFoPeshka-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal
}

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

@font-face {
    font-family: ProximaNova;
    font-display: swap;
    src: url("../fonts/ProximaNova-Regular.woff2") format("woff2"), url("../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(../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(../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(../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;
}