.vue-slider-dot {
    position: absolute;
    -webkit-transition: all 0s;
    transition: all 0s;
    z-index: 5
}

.vue-slider-dot:focus {
    outline: none
}

.vue-slider-dot-tooltip {
    position: absolute;
    visibility: hidden
}

.vue-slider-dot-hover:hover .vue-slider-dot-tooltip,
.vue-slider-dot-tooltip-show {
    visibility: visible
}

.vue-slider-dot-tooltip-top {
    top: -10px;
    left: 50%;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%)
}

.vue-slider-dot-tooltip-bottom {
    bottom: -10px;
    left: 50%;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%)
}

.vue-slider-dot-tooltip-left {
    left: -10px;
    top: 50%;
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%)
}

.vue-slider-dot-tooltip-right {
    right: -10px;
    top: 50%;
    -webkit-transform: translate(100%, -50%);
    transform: translate(100%, -50%)
}
.vue-slider-marks {
    position: relative;
    width: 100%;
    height: 100%
}

.vue-slider-mark {
    position: absolute;
    z-index: 1
}

.vue-slider-ltr .vue-slider-mark,
.vue-slider-rtl .vue-slider-mark {
    width: 0;
    height: 100%;
    top: 50%
}

.vue-slider-ltr .vue-slider-mark-step,
.vue-slider-rtl .vue-slider-mark-step {
    top: 0
}

.vue-slider-ltr .vue-slider-mark-label,
.vue-slider-rtl .vue-slider-mark-label {
    top: 100%;
    margin-top: 10px
}

.vue-slider-ltr .vue-slider-mark {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.vue-slider-ltr .vue-slider-mark-step {
    left: 0
}

.vue-slider-ltr .vue-slider-mark-label {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.vue-slider-rtl .vue-slider-mark {
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%)
}

.vue-slider-rtl .vue-slider-mark-step {
    right: 0
}

.vue-slider-rtl .vue-slider-mark-label {
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%)
}

.vue-slider-btt .vue-slider-mark,
.vue-slider-ttb .vue-slider-mark {
    width: 100%;
    height: 0;
    left: 50%
}

.vue-slider-btt .vue-slider-mark-step,
.vue-slider-ttb .vue-slider-mark-step {
    left: 0
}

.vue-slider-btt .vue-slider-mark-label,
.vue-slider-ttb .vue-slider-mark-label {
    left: 100%;
    margin-left: 10px
}

.vue-slider-btt .vue-slider-mark {
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%)
}

.vue-slider-btt .vue-slider-mark-step {
    top: 0
}

.vue-slider-btt .vue-slider-mark-label {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.vue-slider-ttb .vue-slider-mark {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.vue-slider-ttb .vue-slider-mark-step {
    bottom: 0
}

.vue-slider-ttb .vue-slider-mark-label {
    bottom: 50%;
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
}

.vue-slider-mark-label,
.vue-slider-mark-step {
    position: absolute
}

.vue-slider {
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.vue-slider-rail {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transition-property: width, height, left, right, top, bottom;
    transition-property: width, height, left, right, top, bottom
}

.vue-slider-process {
    position: absolute;
    z-index: 1
}

/* =============================================================================
   Вакансии — ручные правки (не править app.css: там сборка/webpack).
   Подключается после app.css в news.php, перекрывает глобальный body p.
   ============================================================================= */
html body .vacancies-page .default-banner__title p.default-banner__tagline {
    font-family: inherit;
    font-size: 33px;
    line-height: 1.2;
    margin: 28px 0 0;
    max-width: none;
    color: #555;
    font-weight: 500;
}

@media (max-width: 743px) {
    html body .vacancies-page .default-banner__title p.default-banner__tagline {
        font-size: 15px;
        line-height: 1.25;
        margin: auto 0 7px;
    }

    html body .vacancies-page .default-banner__title {
        margin-bottom: 12px;
    }
}

.vacancies-page .default-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: auto 0 37px;
    transform: translateY(-10px);
}

/*
 * Кнопки баннера: Bootstrap даёт .btn:focus outline и другой фон.
 * После клика ссылка остаётся в :focus — если задать фон только :focus, он перебивает :hover.
 * Схема: фон по умолчанию бирюза; серый при :hover, :active и при :focus:hover (курсор над кнопкой после клика);
 * :focus:not(:hover) — только фокус с клавиатуры, без наведения — бирюза.
 */
.vacancies-page .default-banner__actions a.default-banner__btn.btn.btn-primary {
    margin: 0;
    text-align: center;
    white-space: normal;
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    border-radius: 14px;
    border: 2px dashed transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: 0 !important;
    outline-style: none !important;
    outline-offset: 0 !important;
    background-color: var(--color-azure) !important;
    color: var(--color-white) !important;
    opacity: 1;
}

.adventages_top {
    background-color: var(--color-grey-1);
    margin: 90px auto 0;
    padding-top: 90px;
    padding-bottom: 80px;
}

.section.clinic-about {
    margin-bottom: 10px;
}

/* Только сброс кольца Bootstrap, без принудительного фона — фон задают блоки ниже */
.vacancies-page .default-banner__actions a.default-banner__btn.btn.btn-primary:focus,
.vacancies-page .default-banner__actions a.default-banner__btn.btn.btn-primary:focus-visible,
.vacancies-page .default-banner__actions a.default-banner__btn.btn.btn-primary.focus {
    outline: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 2px dashed transparent !important;
}

/* Фокус с Tab, курсор не над кнопкой — как покой */
.vacancies-page .default-banner__actions a.default-banner__btn.btn.btn-primary:focus:not(:hover) {
    background-color: var(--color-azure) !important;
    color: var(--color-white) !important;
}

/* Наведение, зажатие и «фокус + курсор на кнопке» (после клика) — одинаковый серый */
.vacancies-page .default-banner__actions a.default-banner__btn.btn.btn-primary:hover,
.vacancies-page .default-banner__actions a.default-banner__btn.btn.btn-primary:active,
.vacancies-page .default-banner__actions a.default-banner__btn.btn.btn-primary:focus:hover {
    background-color: var(--color-grey-4) !important;
    color: var(--color-white) !important;
    opacity: 1 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: 2px dashed transparent !important;
}

@media (max-width: 743px) {
    .vacancies-page .default-banner__actions {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 30px;
        gap: 10px;
    }
}

/* Заголовки секций: перебиваем app.css span { font-weight: 400 }; цвет как у .default-banner__title h1:nth-child(2) — var(--color-azure) */
.vacancies-page .vacancies-page__title {
    font-weight: 700;
    color: var(--color-azure);
    margin-bottom: 40px;
}

@media (max-width: 743px) {
    .vacancies-page .vacancies-page__title {
        margin-bottom: 28px;
    }
}

.vacancies-page .vacancies-page__title span {
    font-weight: 700;
    color: inherit;
}

/* --- Преимущества (сетка фактов, в духе корпоративных career-страниц: крупная цифра/заголовок + спокойный текст) --- */
.vacancies-page .vacancies-advantages.adventages {
    margin-top: 0;
    margin-bottom: 8px;
    row-gap: 28px;
    column-gap: 24px;
    align-items: start;
}

@media (min-width: 744px) {
    .vacancies-page .vacancies-advantages.adventages {
        row-gap: 36px;
        column-gap: 40px;
    }
}

/* Колонка карточки; иконка только в строке заголовка — сразу после текста */
.vacancies-page .vacancies-advantages.adventages .adventage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.vacancies-page .vacancies-advantages .adventage__body {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.vacancies-page .vacancies-advantages .adventage__title-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
}

.vacancies-page .vacancies-advantages .adventage__title-row .adventage__head {
    flex: 0 1 auto;
    min-width: 0;
}

.vacancies-page .vacancies-advantages .adventage__title-row .adventage__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    max-width: 32px;
    color: var(--color-azure);
}

.vacancies-page .vacancies-advantages .adventage__title-row .adventage__svg {
    display: block;
    width: 32px;
    max-width: 32px;
    height: auto;
}

/* Как h2.vacancies-page__title: цвет и начертание из app.css (Gotham + --color-blue) */
.vacancies-page .vacancies-advantages .adventage__head {
    margin: 0;
    padding: 0;
    font-family: "Gotham", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    color: var(--color-blue);
    letter-spacing: -0.02em;
}

@media (max-width: 743px) {
    .vacancies-page .vacancies-advantages .adventage__head {
        font-size: 22px;
        line-height: 1.2;
    }
}

/* Описание: перебивает app.css `.vacancies-page .adventage p:nth-child(2) { font-size: 12px }` */
.vacancies-page .vacancies-advantages.adventages .adventage__body .adventage__text,
.vacancies-page .vacancies-advantages.adventages .adventage .adventage__text,
.vacancies-page .vacancies-advantages.adventages .adventage p:nth-child(2) {
    margin: 12px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--color-grey-2);
    font-size: 17px;
    line-height: 1.5;
    font-weight: 400;
    color: #555;
}

@media (min-width: 744px) {
    .vacancies-page .vacancies-advantages.adventages .adventage__body .adventage__text,
    .vacancies-page .vacancies-advantages.adventages .adventage .adventage__text,
    .vacancies-page .vacancies-advantages.adventages .adventage p:nth-child(2) {
        font-size: 18px;
        padding-top: 16px;
        margin-top: 14px;
    }
}

/* --- Вертикальный ритм: вакансии → забота → ценности → награды → остальные блоки --- */
.vacancies-page .section > .container > .vacancies-advantages.adventages {
    padding-bottom: 64px;
}

.vacancies-page .section > .container > .values-outer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 64px;
    padding-bottom: 64px;
}

/* Подложка на всю ширину вьюпорта; контент — во внутреннем .container.values-outer__inner */
.vacancies-page .section > .container > .values-outer.values-outer--cards,
.vacancies-page .section > .container > .values-outer.values-outer--feel {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    background-color: var(--color-grey-1);
    border-radius: 0;
    box-sizing: border-box;
}

.vacancies-page .values-outer--cards .values-outer__inner.container,
.vacancies-page .values-outer--feel .values-outer__inner.container,
.vacancies-page .values-outer--reviews .values-outer__inner.container {
    margin-left: auto;
    margin-right: auto;
}

/* Подложка блока «Отзывы» (вне первого .container секции, как hardware) */
.vacancies-page .section > .values-outer.values-outer--reviews {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 64px;
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: var(--color-grey-1);
    border-radius: 0;
    box-sizing: border-box;
}

/* «Наши ценности» / «Почувствуй нашу заботу» / «Отзывы»: заголовок слева */
.vacancies-page .values-outer--cards .values-outer__title,
.vacancies-page .values-outer--cards .vacancies-page__title,
.vacancies-page .values-outer--feel .values-outer__title,
.vacancies-page .values-outer--feel .vacancies-page__title,
.vacancies-page .values-outer--reviews .values-outer__title,
.vacancies-page .values-outer--reviews .vacancies-page__title {
    text-align: left;
}

.vacancies-page .values-outer--reviews .reviews__intro {
    max-width: 68rem;
    margin: 0 0 32px;
    font-family: "Gotham", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 600;
    color: var(--color-grey-4);
    letter-spacing: 0.01em;
}

html body .vacancies-page .values-outer--reviews .reviews__intro p {
    margin: 0 0 0.85em;
    font-weight: 400;
    font-size: 18px;
    color: var(--color-grey-4);
}

html body .vacancies-page .values-outer--reviews .reviews__intro p:last-child {
    margin-bottom: 0;
}

html body .vacancies-page .values-outer--reviews .reviews__intro-accent {
    font-weight: 600;
    color: var(--color-blue);
}

.vacancies-page .values-outer--reviews .reviews__outro {
    max-width: 68rem;
    margin-top: 28px;
    font-family: "Gotham", sans-serif;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 600;
    color: var(--color-grey-4);
    letter-spacing: 0.01em;
}

html body .vacancies-page .values-outer--reviews .reviews__outro p {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    color: var(--color-grey-4);
}

@media (min-width: 744px) {
    .vacancies-page .values-outer--reviews .reviews__intro {
        font-size: 20px;
        line-height: 1.72;
    }

    .vacancies-page .values-outer--reviews .reviews__outro {
        font-size: 20px;
        line-height: 1.72;
        margin-top: 32px;
    }
}

/* Статические отзывы: без белой подложки у слайда / текста / фото */
.vacancies-page .values-outer--reviews .reviews-slider--static .swiper-slide,
.vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__descr--static,
.vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__img--static {
    background: transparent;
    box-shadow: none;
}

/* Кнопки под фото (не у нижнего края слайда — без «дёрганья» при смене высоты) */
.vacancies-page .values-outer--reviews .reviews-slider--static {
    position: relative;
}

.vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__buttons-container--under-photo {
    position: absolute;
    z-index: 2;
    left: 0;
    /* Не использовать inset — он сбрасывает top и кнопки оказываются «сверху» на фото */
    top: calc(280px * 5 / 4 + 12px);
    right: auto;
    bottom: auto;
    width: 280px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__buttons-container--under-photo .swiper-buttons-static {
    pointer-events: auto;
}

.vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__buttons-container--under-photo .plug {
    display: none;
}

.vacancies-page .values-outer--reviews .reviews-slider--static .swiper-slide {
    min-height: calc(280px * 5 / 4 + 12px + 44px);
}

.vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__descr--static {
    padding-right: 0;
    padding-bottom: 24px;
}

.vacancies-page .values-outer {
    margin: 36px 0 40px;
    padding-top: 44px;
    padding-bottom: 0;
}

@media (min-width: 744px) {
    .vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__descr--static {
        padding-bottom: 28px;
    }
}

@media (max-width: 743px) {
    .vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__buttons-container--under-photo {
        left: 50%;
        transform: translateX(-50%);
        top: calc(220px * 5 / 4 + 12px);
        width: auto;
    }

    .vacancies-page .values-outer--reviews .reviews-slider--static .swiper-slide {
        min-height: calc(220px * 5 / 4 + 12px + 44px);
    }

    .vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__descr--static {
        padding-top: 48px;
    }
}

/* Фото: одна ширина, скругление, единая «рамка» кадра */
.vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__img--static {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    min-width: 280px;
    height: auto;
    overflow: hidden;
    border-radius: 16px;
}

.vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__img--static img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
}

@media (max-width: 743px) {
    .vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__img--static {
        flex: 0 0 auto;
        width: 220px;
        max-width: 220px !important;
        min-width: 220px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .vacancies-page .values-outer--reviews .reviews-slider--static .reviews-slider__img--static img {
        aspect-ratio: 4 / 5;
    }
}

.vacancies-page .values-outer--reviews .reviews-static__head {
    margin: 0 0 1.1rem;
}

.vacancies-page .values-outer--reviews .reviews-static__name {
    margin: 0 0 0.4em;
    font-family: "Gotham", sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-blue);
}

.vacancies-page .values-outer--reviews .reviews-static__role {
    margin: 0;
    font-family: "Gotham", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.45;
    color: var(--color-grey-4);
}

.vacancies-page .values-outer--reviews .reviews-static__body p {
    margin: 0 0 0.85em;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-grey-4);
}

.vacancies-page .values-outer--reviews .reviews-static__body p:last-child {
    margin-bottom: 0;
}

@media (min-width: 744px) {
    .vacancies-page .values-outer--reviews .reviews-static__body p {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* Блок «О клинике» под баннером: та же сетка и типографика, что у карточки отзыва */
.vacancies-page .clinic-about {
    padding-top: 8px;
    padding-bottom: 8px;
}

@media (min-width: 744px) {
    .vacancies-page .clinic-about {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

.vacancies-page .clinic-about__inner {
    position: relative;
}

.vacancies-page .clinic-about__row {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    background: transparent;
    box-shadow: none;
}

.vacancies-page .clinic-about__figure {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
    min-width: 280px;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
}

.vacancies-page .clinic-about__figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px;
}

.vacancies-page .clinic-about__descr {
    padding-right: 0;
    padding-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.vacancies-page .clinic-about__row--no-photo .clinic-about__descr {
    max-width: none;
    width: 100%;
}

/* Мобилка: все правки блока «О клинике» в одном месте */
@media (max-width: 743px) {
    .vacancies-page .clinic-about__row {
        flex-direction: column;
        gap: 28px;
        align-items: stretch;
    }

    .vacancies-page .clinic-about__figure {
        flex: 0 0 auto;
        align-self: stretch;
        width: 100%;
        max-width: 100% !important;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .vacancies-page .clinic-about__descr {
        padding-top: 0;
        width: 100%;
    }

    html body .vacancies-page .clinic-about__text p {
        max-width: 100%;
    }

    .vacancies-page .clinic-about__figure img {
        aspect-ratio: auto;
    }
}

/* Текст: база 13px (мобилка); с 744px — 22px; лид — цвет преимуществ */
html body .vacancies-page .clinic-about__text {
    font-family: "Gotham", sans-serif;
    color: var(--color-grey-4);
}

html body .vacancies-page .clinic-about__text p {
    margin: 0 0 0.85em;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--color-grey-4);
}

html body .vacancies-page .clinic-about__text p:last-child {
    margin-bottom: 0;
}

html body .vacancies-page .clinic-about__text .clinic-about__lead,
html body .vacancies-page .clinic-about__text strong.clinic-about__lead {
    font-family: "Gotham", sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-blue);
    letter-spacing: -0.02em;
}

@media (min-width: 744px) {
    html body .vacancies-page .clinic-about__text p {
        margin: 0 0 0.75em;
        font-size: 22px;
        line-height: 1.45;
    }

    html body .vacancies-page .clinic-about__text .clinic-about__lead,
    html body .vacancies-page .clinic-about__text strong.clinic-about__lead {
        font-size: 22px;
        line-height: 1.45;
    }
}

.vacancies-page .values-outer--cards .values-cards {
    gap: 20px;
}

@media (min-width: 744px) {
    .vacancies-page .values-outer--cards .values-cards {
        gap: 24px 32px;
    }
}

.vacancies-page .values-outer--cards .value-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    min-height: 0;
    height: auto;
    max-height: none;
    padding: 22px 22px 22px 20px;
    box-sizing: border-box;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey-3);
    border-left-width: 4px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.vacancies-page .values-outer--cards .value-card:nth-child(1) {
    border-left-color: var(--color-azure);
}

.vacancies-page .values-outer--cards .value-card:nth-child(2) {
    border-left-color: var(--color-blue);
}

.vacancies-page .values-outer--cards .value-card:nth-child(3) {
    border-left-color: var(--color-green);
}

.vacancies-page .values-outer--cards .value-card:nth-child(4) {
    border-left-color: var(--color-azure);
}

.vacancies-page .values-outer--cards .value-card__title {
    position: static;
    z-index: auto;
    margin: 0 0 12px;
    padding: 0;
    font-family: "Gotham", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-blue);
}

@media (min-width: 744px) {
    .vacancies-page .values-outer--cards .value-card__title {
        font-size: 20px;
    }
}

.vacancies-page .values-outer--cards .value-card__text {
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--color-grey-4);
}

@media (min-width: 744px) {
    .vacancies-page .values-outer--cards .value-card__text {
        font-size: 16px;
    }
}

.vacancies-page .values-outer--cards .value-card__text p {
    margin: 0;
}

.vacancies-page .values-outer--cards .value-card__text p + p {
    margin-top: 10px;
}

/* Список в табе: свёрнуто — 21 карточка; кнопка только если вакансий > 21 */
.vacancies-page .vacancies-list-outer--collapsed .vacancies.grid.accordion > .vacancy:nth-child(n + 22) {
    display: none !important;
}

.vacancies-page .vacancies-list__toggle-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 4px;
}

.vacancies-page .vacancies-list__toggle {
    margin: 0;
    padding: 11px 22px;
    min-height: 44px;
    font-family: "Gotham", sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--color-white);
    background-color: var(--color-azure);
    border: 2px solid var(--color-azure);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.vacancies-page .vacancies-list__toggle:hover,
.vacancies-page .vacancies-list__toggle:focus-visible {
    color: var(--color-white);
    background-color: var(--color-grey-4);
    border-color: var(--color-grey-4);
    outline: 0;
}

/* Табы вакансий (разделы инфоблока); отступ от h2 задаёт .vacancies-page__title */
.vacancies-page .vacancies-tabs {
    margin-top: 0;
}

.vacancies-page .vacancies-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 22px;
}

/* Как .default-banner__actions a.default-banner__btn.btn-primary: активная — покой баннера (бирюза), неактивная — как :hover баннера (серый) */
.vacancies-page .vacancies-tabs__btn {
    margin: 0;
    padding: 12px 18px;
    font-family: "Gotham", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 14px;
    border: 2px dashed transparent;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 1;
    transition: background-color 0.2s, color 0.2s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    outline: 0;
}

.vacancies-page .vacancies-tabs__btn:hover,
.vacancies-page .vacancies-tabs__btn:active,
.vacancies-page .vacancies-tabs__btn:focus,
.vacancies-page .vacancies-tabs__btn:focus-visible {
    opacity: 1;
}

/* Неактивная: покой — серый как :hover кнопки шапки */
.vacancies-page .vacancies-tabs__btn:not(.is-active) {
    background-color: var(--color-grey-4);
    color: var(--color-white);
}

/* Наведение на неактивную — как активная вкладка (бирюза) */
.vacancies-page .vacancies-tabs__btn:not(.is-active):hover {
    background-color: var(--color-azure);
    color: var(--color-white);
}

.vacancies-page .vacancies-tabs__btn:not(.is-active):active {
    background-color: var(--color-azure);
    color: var(--color-white);
}

.vacancies-page .vacancies-tabs__btn:not(.is-active):focus:not(:hover) {
    background-color: var(--color-grey-4);
    color: var(--color-white);
}

/* Активная: как обычная кнопка шапки (покой) — var(--color-azure) */
.vacancies-page .vacancies-tabs__btn.is-active {
    background-color: var(--color-azure);
    color: var(--color-white);
}

.vacancies-page .vacancies-tabs__btn.is-active:hover,
.vacancies-page .vacancies-tabs__btn.is-active:active,
.vacancies-page .vacancies-tabs__btn.is-active:focus {
    background-color: var(--color-azure);
    color: var(--color-white);
}

/* Отступ сетки карточек от ряда табов (+15px к зазору после nav) */
.vacancies-page .vacancies-tabs__panels {
    padding-top: 15px;
}

.vacancies-page .vacancies-tabs__panel[hidden] {
    display: none;
}

.vacancies-page .vacancies-outer__fallback {
    margin-top: 28px;
}

@media (max-width: 743px) {
    .vacancies-page .vacancies-tabs__btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }
}

/* «Почувствуй нашу заботу»: табы как vacancies-tabs__btn (перебиваем app.css) */
.vacancies-page .values-outer--feel .feel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 22px;
}

.vacancies-page .values-outer--feel .feel__links .tab-link {
    margin: 0;
    padding: 12px 18px;
    font-family: "Gotham", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 14px;
    border: 2px dashed transparent;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 1;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    outline: 0;
    min-width: 0;
    background-color: var(--color-grey-4);
    color: var(--color-white);
}

.vacancies-page .values-outer--feel .feel__links .tab-link:hover,
.vacancies-page .values-outer--feel .feel__links .tab-link:active {
    opacity: 1;
}

.vacancies-page .values-outer--feel .feel__links .tab-link:not(.active):hover {
    background-color: var(--color-azure);
    color: var(--color-white);
}

.vacancies-page .values-outer--feel .feel__links .tab-link:not(.active):active {
    background-color: var(--color-azure);
    color: var(--color-white);
}

.vacancies-page .values-outer--feel .feel__links .tab-link.active {
    background-color: var(--color-azure);
    color: var(--color-white);
}

.vacancies-page .values-outer--feel .feel__links .tab-link.active:hover,
.vacancies-page .values-outer--feel .feel__links .tab-link.active:focus {
    background-color: var(--color-azure);
    color: var(--color-white);
}

@media (max-width: 743px) {
    .vacancies-page .values-outer--feel .feel__links .tab-link {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
    }
}

/* Основной текст табов «Почувствуй нашу заботу» — крупнее */
.vacancies-page .values-outer--feel .feel__content ul {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--color-grey-4);
}

/* Картинка таба «Почувствуй нашу заботу» из данных ИБ */
.vacancies-page .values-outer--feel .feel__image[style*="--feel-image"]::before {
    background-image: var(--feel-image) !important;
    background-size: cover;
    background-position: center;
}

@media (min-width: 744px) {
    .vacancies-page .values-outer--feel .feel__content ul {
        font-size: 17px;
    }
}

/* Блок «Вакансии»: вынос на ширину .container с учётом padding — табы и сетка совпадают по левому краю, карточки шире */
.vacancies-page .section > .container > .vacancies-outer {
    width: calc(100% + 50px);
    max-width: none;
    margin-left: -25px;
    margin-right: -25px;
    padding-top: 64px;
    padding-bottom: 64px;
    box-sizing: border-box;
}

@media (max-width: 743px) {
    .vacancies-page .section > .container > .vacancies-advantages.adventages {
        padding-bottom: 48px;
    }

    .vacancies-page .section > .container > .values-outer {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .vacancies-page .section > .container > .vacancies-outer {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .vacancies-page .feel__image::before {
        margin-left: 0;
    }

    .vacancies-page .resume {
        padding: 48px 15px 0;
    }
}

/* После закрытия .container — отступы между блоками */
.vacancies-page .hardware {
    margin-top: 0;
    padding-top: 70px;
}

/* Навигация слайдера оборудования: под слайдером, справа снизу; символы ← → (не угловые кавычки) */
.vacancies-page .hardware-slider-outer .hardware-slider__nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding: 0 18px 2px 0;
    box-sizing: border-box;
}

.vacancies-page .hardware-slider-outer .hardware-slider__nav .hardware-slider__nav-btn {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.vacancies-page .hardware-slider-outer .hardware-slider__nav .hardware-slider__nav-btn:hover {
    opacity: 0.85;
}

.vacancies-page .hardware-slider-outer .hardware-slider__nav .hardware-slider__nav-btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.vacancies-page .hardware-slider-outer .hardware-slider__nav .hardware-slider__nav-btn::after {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    background-image: none !important;
    font-family: "Gotham", sans-serif;
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
    color: var(--color-azure);
    transform: none !important;
}

.vacancies-page .hardware-slider-outer .hardware-slider__nav .swiper-button-prev::after {
    content: "\2190";
}

.vacancies-page .hardware-slider-outer .hardware-slider__nav .swiper-button-next::after {
    content: "\2192";
}

@media (max-width: 743px) {
    .vacancies-page .hardware-slider-outer .hardware-slider__nav {
        margin-top: 12px;
        gap: 16px;
        padding-right: 14px;
    }

    .vacancies-page .hardware-slider-outer .hardware-slider__nav .hardware-slider__nav-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .vacancies-page .hardware-slider-outer .hardware-slider__nav .hardware-slider__nav-btn::after {
        font-size: 38px;
    }
}

/*
 * Слайдер «Только лучшее оборудование»: карточка с градиентом (бирюза → лиловый),
 * слева текст, справа фото с мягким «врастанием» в градиент (mask).
 */
.vacancies-page .hardware-slider-outer .hardware-slider {
    color: inherit;
}

.vacancies-page .hardware-slider-outer .hardware-slider .swiper-slide {
    height: auto;
}

.vacancies-page .hardware-slider-outer .hardware-slider__card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 280px;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
    /* Снизу — плавный горизонтальный градиент; сверху — мягкий «наплыв» сиреневого справа */
    background:
        radial-gradient(ellipse 90% 130% at 100% 50%, rgba(230, 222, 252, 0.85) 0%, rgba(230, 222, 252, 0.35) 38%, transparent 68%),
        linear-gradient(
            90deg,
            var(--color-azure) 0%,
            #1ca8b0 11%,
            #3d9eb8 24%,
            #6392c4 37%,
            #8a8dd0 50%,
            #aea8dc 63%,
            #cdc0ea 78%,
            #e3dcf5 92%,
            #efe8fb 100%
        );
    cursor: grab;
}

.vacancies-page .hardware-slider-outer .hardware-slider__text {
    position: relative;
    z-index: 2;
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 36px 0 36px 40px;
    box-sizing: border-box;
}

.vacancies-page .hardware-slider-outer .hardware-slider__text p:nth-child(1) {
    margin: 0;
    font-family: "Gotham", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white);
}

.vacancies-page .hardware-slider-outer .hardware-slider__text p:nth-child(2) {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.vacancies-page .hardware-slider-outer .hardware-slider__img {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 28px 20px 8px;
    box-sizing: border-box;
}

.vacancies-page .hardware-slider-outer .hardware-slider__img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
    object-position: right center;
    border-radius: 0;
    /* Слева — врастание в бирюзу; справа — плавное растворение в лиловый градиент фона */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 68%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 68%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

@media (max-width: 743px) {
    .vacancies-page .hardware-slider-outer .hardware-slider__card {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        overflow: visible;
        /* Вертикальный градиент: бирюза сверху (текст) → лиловый снизу (фото) */
        background:
            radial-gradient(ellipse 100% 70% at 50% 100%, rgba(230, 222, 252, 0.55) 0%, rgba(230, 222, 252, 0.2) 42%, transparent 72%),
            linear-gradient(
                180deg,
                var(--color-azure) 0%,
                #1ca8b0 11%,
                #3d9eb8 24%,
                #6392c4 37%,
                #8a8dd0 50%,
                #aea8dc 63%,
                #cdc0ea 78%,
                #e3dcf5 92%,
                #efe8fb 100%
            );
    }

    .vacancies-page .hardware-slider-outer .hardware-slider__text {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
        padding: 28px 22px 16px;
    }

    .vacancies-page .hardware-slider-outer .hardware-slider__text p:nth-child(1) {
        font-size: 16px;
    }

    .vacancies-page .hardware-slider-outer .hardware-slider__text p:nth-child(2) {
        font-size: 14px;
        line-height: 1.45;
    }

    .vacancies-page .hardware-slider-outer .hardware-slider__img {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
        justify-content: center;
        padding: 0 16px 28px;
        box-sizing: border-box;
    }

    .vacancies-page .hardware-slider-outer .hardware-slider__img img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: min(72vh, 520px);
        object-fit: contain;
        object-position: center bottom;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 88%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 88%, transparent 100%);
    }
}

.vacancies-page .life {
    margin-top: 0;
    padding-top: 64px;
}

/* Блок RuTube после LIFE: превью + плей по клику; слайды без выравнивания по высоте (без «пустого» хвоста) */
.vacancies-page .vacancies-rutube {
    margin-top: 48px;
    padding-top: 64px;
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding: 0 18px 2px 0;
    box-sizing: border-box;
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav .vacancies-rutube__nav-btn {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav .vacancies-rutube__nav-btn:hover {
    opacity: 0.85;
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav .vacancies-rutube__nav-btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav .vacancies-rutube__nav-btn::after {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    background-image: none !important;
    font-family: "Gotham", sans-serif;
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
    color: var(--color-azure);
    transform: none !important;
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav .swiper-button-prev::after {
    content: "\2190";
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav .swiper-button-next::after {
    content: "\2192";
}

@media (max-width: 743px) {
    .vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav {
        margin-top: 12px;
        gap: 16px;
        padding-right: 14px;
    }

    .vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav .vacancies-rutube__nav-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .vacancies-page .vacancies-rutube-outer .vacancies-rutube__nav .vacancies-rutube__nav-btn::after {
        font-size: 38px;
    }
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube-slider {
    color: inherit;
}

.vacancies-page .vacancies-rutube-outer .vacancies-rutube-slider .swiper-wrapper {
    align-items: flex-start;
}

/* Ширину слайдов задаёт Swiper (дробный slidesPerView) — не фиксируем px, иначе «дыры» между карточками */
.vacancies-page .vacancies-rutube-outer .vacancies-rutube-slider .swiper-slide {
    height: auto;
    align-self: flex-start;
    box-sizing: border-box;
}

.vacancies-page .vacancies-rutube-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    height: auto;
    border-radius: 14px;
    overflow: hidden;
    background: #eef2f7;
    box-sizing: border-box;
    padding: 0 0 12px;
}

.vacancies-page .vacancies-rutube-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    background: #0d1117;
    overflow: hidden;
}

.vacancies-page .vacancies-rutube-card__iframe {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.vacancies-page .vacancies-rutube-card__media.is-playing .vacancies-rutube-card__iframe {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
}

.vacancies-page .vacancies-rutube-card__facet {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: #0a0f14;
    -webkit-tap-highlight-color: transparent;
}

/* Не тускнить всю обложку: общее правило .vacancies-page button:hover { opacity: 0.7 } */
.vacancies-page .vacancies-rutube-card__facet:hover,
.vacancies-page .vacancies-rutube-card__facet:active {
    opacity: 1;
}

.vacancies-page .vacancies-rutube-card__media.is-playing .vacancies-rutube-card__facet {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.vacancies-page .vacancies-rutube-card__poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.vacancies-page .vacancies-rutube-card__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease;
}

.vacancies-page .vacancies-rutube-card__play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    width: 0;
    height: 0;
    margin: -11px 0 0 -7px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #ffffff;
}

.vacancies-page .vacancies-rutube-card__facet:hover .vacancies-rutube-card__play-icon,
.vacancies-page .vacancies-rutube-card__facet:focus-visible .vacancies-rutube-card__play-icon {
    transform: scale(1.06);
    background: rgba(0, 0, 0, 0.55);
}

.vacancies-page .vacancies-rutube-card__title {
    margin: 8px 14px 0;
    font-family: "Gotham", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-blue);
}

.vacancies-page .vacancies-rutube-card__link {
    margin: 0 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-azure);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.vacancies-page .vacancies-rutube-card__link:hover {
    opacity: 0.88;
}

/* Соцсети: после видео; заголовок как у «Отзывы сотрудников», кнопки — оттенки градиента блока «Оборудование» */
.vacancies-page .vacancies-social {
    margin-top: 48px;
    padding-top: 40px;
    padding-bottom: 8px;
    box-sizing: border-box;
}

@media (max-width: 743px) {
    .vacancies-page .vacancies-social {
        margin-top: 40px;
        padding-top: 32px;
    }
}

/* Заголовок — общие правила .vacancies-page__title (как «ПКМЦ на видео»: var(--color-azure)) */

.vacancies-page .vacancies-social__lead {
    margin: 0 0 28px;
    max-width: 100%;
    font-family: "Gotham", sans-serif;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--color-grey-4);
}

@media (min-width: 744px) {
    .vacancies-page .vacancies-social__lead {
        font-size: 18px;
        margin-bottom: 32px;
        white-space: nowrap;
    }
}

.vacancies-page .vacancies-social__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.vacancies-page .vacancies-social__item {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    min-width: 0;
}

.vacancies-page .vacancies-social__item .vacancies-social__btn {
    width: 100%;
}

@media (min-width: 744px) {
    .vacancies-page .vacancies-social__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (min-width: 1200px) {
    .vacancies-page .vacancies-social__grid {
        gap: 18px;
    }
}

.vacancies-page .vacancies-social__btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-height: 56px;
    padding: 12px 16px 12px 18px;
    border-radius: 14px;
    border: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #ffffff;
    font-family: "Gotham", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    box-shadow: 0 4px 20px rgba(26, 42, 74, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.vacancies-page .vacancies-social__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(26, 42, 74, 0.18);
    filter: brightness(1.03);
}

.vacancies-page .vacancies-social__btn:focus-visible {
    outline: 3px solid rgba(34, 50, 91, 0.35);
    outline-offset: 3px;
}

/* Цвета из градиента карточки «Только лучшее оборудование» */
/* Сплошные цвета из палитры градиента «Оборудование» + узнаваемые оттенки для сетей */
.vacancies-page .vacancies-social__btn--tg {
    background-color: var(--color-azure);
}

.vacancies-page .vacancies-social__btn--max {
    background-color: #8a8dd0;
}

.vacancies-page .vacancies-social__btn--vk {
    background-color: #6392c4;
}

.vacancies-page .vacancies-social__btn-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    opacity: 0.98;
}

.vacancies-page .vacancies-social__btn-ico svg {
    display: block;
    width: 26px;
    height: 26px;
}

/* Самолёт в viewBox 240×240 — много пустого поля; чуть крупнее, чтобы визуально как MAX/VK */
.vacancies-page .vacancies-social__btn-ico--tg svg {
    width: 42px;
    height: 42px;
}

.vacancies-page .vacancies-social__btn-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.vacancies-page .vacancies-social__btn-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.92);
    opacity: 0.9;
}

.vacancies-page .vacancies-social__btn-arrow svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Ссылки-кнопки: не тускнить как .vacancies-page a:hover / button:hover из app */
.vacancies-page .vacancies-social__btn:hover,
.vacancies-page .vacancies-social__btn:active {
    opacity: 1;
    color: #ffffff;
}

.vacancies-page .resume {
    margin-top: 0;
    padding-top: 64px;
}

/* Баннер резюме: контакты — обычный шрифт страницы, без курсива */
html body .vacancies-page .resume .resume-banner__descr .resume-banner__contacts {
    font-family: inherit;
    font-weight: 400;
    font-style: normal;
}

.vacancies-page .resume .resume-banner__descr .resume-banner__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 28rem;
    font-size: 16px;
}

.vacancies-page .resume .resume-banner__descr .resume-banner__contacts-block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.vacancies-page .resume .resume-banner__descr .resume-banner__contacts-block + .resume-banner__contacts-block {
    margin-top: 0.75rem;
}

.vacancies-page .resume .resume-banner__descr .resume-banner__contacts-line {
    margin: 0;
    line-height: 1.45;
    color: #ffffff;
    font-family: inherit;
    font-weight: 400;
    font-style: normal;
}

/* Подписи к блокам контактов — заметный капслок; lead и rest с отступом между ними */
.vacancies-page .resume .resume-banner__descr .resume-banner__contacts-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.65rem;
    row-gap: 0.25rem;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(14px, 1.2vw, 18px);
    letter-spacing: 0.07em;
    line-height: 1.35;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* lead + rest — всегда две строки (не зависит от длины rest) */
.vacancies-page .resume .resume-banner__descr .resume-banner__contacts-label:has(.resume-banner__contacts-label-rest) {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: 0;
    column-gap: 0;
}

.vacancies-page .resume .resume-banner__descr .resume-banner__contacts-label:has(.resume-banner__contacts-label-rest) .resume-banner__contacts-label-lead,
.vacancies-page .resume .resume-banner__descr .resume-banner__contacts-label:has(.resume-banner__contacts-label-rest) .resume-banner__contacts-label-rest {
    display: block;
    width: 100%;
    max-width: 100%;
}

.vacancies-page .resume .resume-banner__descr .resume-banner__contacts-block:first-child .resume-banner__contacts-label-lead {
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 10px;
}

.vacancies-page .resume .resume-banner__descr a.resume-banner__link {
    display: inline;
    width: auto;
    padding: 0 !important;
    border-radius: 0;
    background: none !important;
    background-color: transparent !important;
    font-family: inherit;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(12px, 0.95vw, 15px);
    color: #ffffff !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.vacancies-page .resume .resume-banner__descr a.resume-banner__link:hover,
.vacancies-page .resume .resume-banner__descr a.resume-banner__link:focus-visible {
    color: #fff9e6 !important;
    opacity: 1;
}

@media (min-width: 744px) {
    .vacancies-page .resume .resume-banner__descr .resume-banner__contacts {
        font-size: 17px;
    }
}

/* Кнопка «Отправить резюме»: ширина по тексту, radius 12px, белый фон, hover — серый */
html body .vacancies-page .resume .resume-banner__descr a.resume-banner__send-btn {
    box-sizing: border-box;
    min-height: 0;
    height: auto;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 400;
    font-family: "Gotham", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    width: fit-content;
    max-width: 100%;
    background-color: var(--color-white) !important;
    color: var(--color-blue);
    border: 2px solid transparent;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    outline: 0;
}

html body .vacancies-page .resume .resume-banner__descr a.resume-banner__send-btn:hover,
html body .vacancies-page .resume .resume-banner__descr a.resume-banner__send-btn:active,
html body .vacancies-page .resume .resume-banner__descr a.resume-banner__send-btn:focus:hover {
    background-color: var(--color-grey-4) !important;
    color: var(--color-white) !important;
    opacity: 1;
}

html body .vacancies-page .resume .resume-banner__descr a.resume-banner__send-btn:focus:not(:hover) {
    background-color: var(--color-white) !important;
    color: var(--color-blue);
}

@media (max-width: 743px) {
    /*
     * Баннер «Отправить резюме»: вертикальная колонка (текст → фото), без max-height из app.css.
     */
    html body .vacancies-page .resume .resume-banner.container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        max-height: none !important;
        min-height: 0;
        overflow: hidden;
        border-radius: 20px;
        background-color: var(--color-azure);
    }

    html body .vacancies-page .resume .resume-banner__descr {
        position: relative !important;
        inset: auto !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 22px 18px 18px !important;
        gap: 1rem !important;
        font-size: 14px !important;
        justify-content: flex-start !important;
        flex: 0 0 auto;
        z-index: 2;
    }

    html body .vacancies-page .resume .resume-banner__img {
        position: absolute;
        bottom: -2px;
        right: -84px;
    }

    /* Без cover: весь кадр виден, не «кусок»; выравнивание по верху блока */
    html body .vacancies-page .resume .resume-banner__img img {
        position: relative;
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: min(52vh, 420px);
        margin: 0 auto;
        object-fit: contain;
        object-position: top center;
        opacity: 0.9;
        border-radius: 0 !important;
    }

    html body .vacancies-page .resume .resume-banner__faq-btn {
        display: none !important;
    }

    html body .vacancies-page .resume .resume-banner__descr a.resume-banner__send-btn {
        padding: 10px 16px;
        width: fit-content;
        max-width: 100%;
        box-sizing: border-box;
    }

    .vacancies-page .resume .resume-banner__descr .resume-banner__contacts p:not(.resume-banner__contacts-label) {
        display: block;
    }

    .vacancies-page .resume .resume-banner__descr .resume-banner__contacts-label {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .vacancies-page .resume .resume-banner__descr .resume-banner__contacts-label:has(.resume-banner__contacts-label-rest) .resume-banner__contacts-label-lead,
    .vacancies-page .resume .resume-banner__descr .resume-banner__contacts-label:has(.resume-banner__contacts-label-rest) .resume-banner__contacts-label-rest {
        display: block;
        width: 100%;
    }

    .vacancies-page .resume .resume-banner__descr .resume-banner__contacts {
        font-size: 13px;
        line-height: 1.4;
        gap: 0.4rem;
        max-width: 100%;
    }

    .vacancies-page .resume .resume-banner__descr a.resume-banner__link {
        font-size: clamp(11px, 3.1vw, 14px);
    }

    .vacancies-page .resume .resume-banner__descr .resume-banner__contacts-label {
        font-size: clamp(12px, 3.4vw, 15px);
        letter-spacing: 0.06em;
    }

    .vacancies-page .resume .resume-banner__descr .resume-banner__contacts-block:first-child .resume-banner__contacts-label-lead {
        font-size: inherit;
        margin-bottom: 6px;
    }

    .vacancies-page .hardware,
    .vacancies-page .life,
    .vacancies-page .resume {
        margin-top: 48px;
        padding-top: 48px;
    }

    .vacancies-page .section > .values-outer.values-outer--reviews {
        margin-top: 48px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .vacancies-page .values-outer--reviews .reviews__intro {
        margin-bottom: 24px;
        font-size: 17px;
        line-height: 1.68;
    }

    .vacancies-page .values-outer--reviews .reviews__outro {
        font-size: 17px;
        line-height: 1.68;
        margin-top: 22px;
    }
}

/*
 * Листинг: не используем 12-колоночный .grid (repeat(12,1fr) + cols-md-4 span 4) —
 * перебиваем на явные 1 / 3 колонки и сбрасываем grid-column у .vacancy (иначе в DevTools
 * выглядит как лишние «поля» у ячейки и шире зазоры между плитками).
 */
html body .vacancies-page .vacancies.grid.accordion,
html body .vacancies-page .vacancies-tabs__panel .vacancies.grid,
html body .vacancies-page .vacancies-outer__fallback.grid {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    gap: 40px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    justify-items: stretch;
    /* start: соседние ячейки не растягиваются по высоте открытой карточки */
    align-items: start;
}

html body .vacancies-page .vacancies.grid.accordion > .vacancy,
html body .vacancies-page .vacancies-tabs__panel .vacancies.grid > .vacancy,
html body .vacancies-page .vacancies-outer__fallback.grid > .vacancy {
    grid-column: auto;
    padding: 0;
    min-width: 0;
}

/* --- Листинг вакансий: карточки в духе value-card / career (меньше скругление, тень, акцент) --- */
.vacancies-page .vacancies .vacancy {
    border-radius: 12px;
    overflow: visible;
    min-width: 0;
}

@media (min-width: 744px) {
    html body .vacancies-page .vacancies.grid.accordion,
    html body .vacancies-page .vacancies-tabs__panel .vacancies.grid,
    html body .vacancies-page .vacancies-outer__fallback.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .vacancies-page .vacancies .vacancy {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 260px;
    }

    .vacancies-page .vacancies .vacancy-header {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 260px;
    }

    /* Кнопка прижата к низу карточки: отступ задаётся у секции, не у кнопки */
    .vacancies-page .vacancies .vacancy-header__section--cta {
        margin-top: auto;
        flex-shrink: 0;
    }
}

.vacancies-page .vacancies .vacancy-header {
    padding: 18px 14px 16px 14px;
    border-radius: 12px;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey-3);
    border-left-width: 4px;
    border-left-color: #bbb8b8;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    max-height: none;
    gap: 0;
}

/* Фоновый номер на карточке (перебивает app.css: позиция справа снизу, меньший кегль) */
.vacancies-page .vacancy-header__number {
    position: absolute;
    bottom: 2px;
    right: 1px;
    left: auto;
    color: var(--color-grey-3);
    font-size: 140px;
    line-height: 212px;
    font-weight: 300;
    letter-spacing: 1px;
    z-index: -1;
    user-select: none;
}

@media (max-width: 743px) {
    .vacancies-page .vacancy-header__number,
    .vacancies-page .vacancy-panel__number {
        display: none !important;
    }
}

/* Три зоны: заголовок + свойства (main), кнопка (cta) */
.vacancies-page .vacancies .vacancy-header__main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 0 0 auto;
}

.vacancies-page .vacancies .vacancy-header__section--title {
    flex: 0 0 auto;
    min-width: 0;
}

.vacancies-page .vacancies .vacancy-header__section--props {
    flex: 0 0 auto;
    min-width: 0;
}

@media (min-width: 744px) {
    /* Десктоп: заголовок / свойства в main; свойства по вертикали по центру, строки слева */
    .vacancies-page .vacancies .vacancy-header__main {
        flex: 1 1 auto;
        display: grid;
        grid-template-rows: minmax(0, 36%) 1fr;
        gap: 10px;
        min-height: 0;
        align-content: stretch;
    }

    .vacancies-page .vacancies .vacancy-header__section--title {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .vacancies-page .vacancies .vacancy-header__section--props {
        min-height: 0;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }

    .vacancies-page .vacancies .vacancy-header__section--props .vacancy-header__meta,
    .vacancies-page .vacancies .vacancy-header__section--props .vacancy-header__subtitle {
        width: fit-content;
        max-width: 100%;
        text-align: left;
    }
}

.vacancies-page .vacancies .vacancy-header__section--cta {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
    padding-top: 14px;
    box-sizing: border-box;
}

@media (min-width: 744px) {
    .vacancies-page .vacancies .vacancy-header__section--cta {
        padding-top: 16px;
    }
}

/* p.vacancy-header__title — выше специфичность, чем app.css .vacancy-header p:not(.vacancy-header__number) { font-size:12px } */
.vacancies-page .vacancies .vacancy-header p.vacancy-header__title {
    margin: 0;
    font-family: "Gotham", sans-serif;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
    color: var(--color-blue);
    letter-spacing: -0.02em;
}

.vacancies-page .vacancies .vacancy-header__meta {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
    color: #454545;
}

.vacancies-page .vacancies .vacancy-header__meta-line {
    gap: 0;
    margin-bottom: 8px;
}

/* Превью карточки: галочки как .plan_item_description ul li::before (template_styles); stroke-SVG скрыт */
.vacancies-page .vacancies .vacancy-header__meta-line::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    margin-right: 10px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/local/templates/john/images/icon_check_v2.png');
}

.vacancies-page .vacancies .vacancy-header__meta-icon {
    display: none;
}

.vacancies-page .vacancies .vacancy-header__subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #454545;
    font-weight: 400;
}

/* Подзаголовок fallback; заголовок — только p.vacancy-header__title выше */
.vacancies-page .vacancies .vacancy-header p.vacancy-header__subtitle {
    font-size: 15px;
    line-height: 1.45;
}

/*
 * app.css: .ac.is-active .ac-header { opacity: 0 } — шапка совпадает с .vacancy-header.
 * Всплывающую панель (.ac-panel / .ac-panel__inner) не трогаем — ширина и заход на карточку из app.css.
 */
html body .vacancies-page .ac.is-active .vacancy-header.ac-header {
    opacity: 1;
}

/* Карточка при открытой панели — те же цвета и скругления, что и у закрытой (перебиваем app.css + старые правила) */
html body .vacancies-page .ac.is-active .vacancy-header {
    border-radius: 12px;
    border-color: var(--color-grey-3);
    border-left-color: #bbb8b8;
    border-left-width: 4px;
    background-color: var(--color-white);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

html body .vacancies-page .ac.is-active .vacancy-header p.vacancy-header__title {
    color: var(--color-blue);
}

html body .vacancies-page .ac.is-active .vacancy-header__meta,
html body .vacancies-page .ac.is-active .vacancy-header__subtitle {
    color: #454545;
}

html body .vacancies-page .ac.is-active .vacancy-header__meta-icon {
    color: var(--color-azure);
    opacity: 1;
}

/* Открытая карточка: кнопка не видна, но занимает то же место — без сдвига сетки */
html body .vacancies-page .ac.is-active .vacancy-header__section--cta .vacancy__more-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Кнопка «Подробнее»: зелёная (бирюза), отступ от блока свойств — у .vacancy-header__section--cta */
.vacancies-page .vacancies .vacancy__more-btn {
    transition: opacity 0.35s ease, visibility 0.35s ease;
    margin-top: 0;
    padding: 11px 22px;
    min-height: 44px;
    max-height: none;
    line-height: 1.2;
    font-family: "Gotham", sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-white);
    background-color: var(--color-azure);
    border: 2px solid var(--color-azure);
    border-radius: 12px;
    box-shadow: none;
}

.vacancies-page .vacancies .vacancy__more-btn:hover,
.vacancies-page .vacancies .vacancy__more-btn:focus-visible {
    opacity: 1;
    color: var(--color-white);
    background-color: var(--color-grey-4);
    border-color: var(--color-grey-4);
    box-shadow: none;
}

.vacancies-page .vacancies .vacancy__more-btn:active {
    opacity: 0.92;
}

/* Панель модалки: те же радиусы */
.vacancies-page .vacancy .ac-panel__inner .bg__line-1,
.vacancies-page .vacancy .ac-panel__inner .bg__line-4 {
    border-top-left-radius: 12px;
}

.vacancies-page .vacancy .ac-panel__inner .bg__line-2 {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    z-index: 100;
}

@media (min-width: 744px) {
    .vacancies-page .vacancy .ac-panel__inner .bg {
        position: absolute;
        top: -39px;
        left: 0;
        right: 40px;
    }
}

/* Плавное раскрытие всплывающей панели */
.vacancies-page .vacancies .vacancy .vacancy-panel.ac-panel {
    overflow: hidden;
    transition: height 0.75s cubic-bezier(0.22, 1, 0.36, 1), min-height 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.vacancies-page .vacancy .ac-panel__inner .bg__line-3 {
    border-bottom-left-radius: 12px;
}

.vacancies-page .vacancy .ac-panel__inner .bg__inner {
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.vacancies-page .vacancy.column-2 .bg__inner {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.vacancies-page .vacancy.column-2 .bg__line-1 {
    border-bottom-right-radius: 12px;
}

.vacancies-page .vacancy.column-3 .bg__inner {
    border-top-left-radius: 12px;
    border-top-right-radius: 0px;
    width: calc(100% - 1px);
}

.vacancies-page .vacancy.column-3 .bg__line-1 {
    border-bottom-right-radius: 12px;
}

/*
 * Всплывающая панель: глобальный body p { color:#555 } перебиваем; плюс иерархия
 * (не «всё одним белым»): заголовок вакансии — контрастный; колонки — акцентный оттенок;
 * списки — чуть приглушённые; разделители — мягче, чем solid #fff.
 */
html body .vacancies-page .vacancy-panel p.vacancy-panel__title {
    color: var(--color-white);
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

html body .vacancies-page .vacancy-panel p.vacancy-panel__list-title {
    color: #d2f8fa;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    letter-spacing: 0.02em;
}

html body .vacancies-page .vacancy-panel .vacancy-panel__list-item ul {
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: 0.02em;
}

html body .vacancies-page .vacancy-panel .vacancy-panel__list-item ul li {
    color: #ffffff;
    font-weight: 400;
}

html body .vacancies-page .vacancy-panel .vacancy-panel__list-item p:not(.vacancy-panel__list-title) {
    color: rgba(255, 255, 255, 0.96);
    font-weight: 400;
    line-height: 1.55;
    font-size: clamp(13px, 1.1vw, 15px);
}

/* Форма в панели: скругление 12px; высота полей = кнопке «Откликнуться» (48px) */
html body .vacancies-page .vacancy-panel .input input {
    border-radius: 12px;
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
    line-height: 48px;
    font-size: 14px;
    font-weight: 400;
}

html body .vacancies-page .vacancy-panel .input textarea {
    border-radius: 12px;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 16px;
    line-height: 1.45;
    font-size: 14px;
    font-weight: 400;
}

html body .vacancies-page .vacancy-panel .file-uploader__trigger {
    border-radius: 12px;
    box-sizing: border-box;
    min-height: 48px;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 400;
    font-family: "Gotham", sans-serif !important;
    color: #c7c7c7;
    display: flex;
    align-items: center;
    justify-content: start;
}

html body .vacancies-page .vacancy-panel .vacancy-form__actions-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

html body .vacancies-page .vacancy-panel .vacancy-form__actions-inner .vacancy-form__submit,
html body .vacancies-page .vacancy-panel .vacancy-form__actions-inner .vacancy-form__share {
    width: 100%;
    box-sizing: border-box;
}

/* «Откликнуться» и «Поделиться вакансией» — один стиль: прозрачная кнопка с белой обводкой */
html body .vacancies-page .vacancy-panel .vacancy-form__submit,
html body .vacancies-page .vacancy-panel .vacancy-form__share {
    border-radius: 12px;
    box-sizing: border-box;
    min-height: 48px;
    height: 48px;
    padding: 0 36px;
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
    font-family: "Gotham", sans-serif;
    letter-spacing: 0.02em;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html body .vacancies-page .vacancy-panel .vacancy-form__submit:hover,
html body .vacancies-page .vacancy-panel .vacancy-form__submit:focus-visible,
html body .vacancies-page .vacancy-panel .vacancy-form__share:hover,
html body .vacancies-page .vacancy-panel .vacancy-form__share:focus-visible {
    color: var(--color-azure, #20979e);
    background-color: #ffffff !important;
    border-color: #ffffff;
    outline: 0;
    opacity: 1;
}

html body .vacancies-page .vacancy-panel .vacancy-panel__body-item:not(:last-child) {
    border-right: none;
    padding-right: 0;
}

html body .vacancies-page .vacancy-panel .vacancy-panel__body-item:last-child {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 22px 12px;
    box-sizing: border-box;
}

html body .vacancies-page .vacancy-panel .vacancy-form.grid {
    gap: 0;
    row-gap: 12px;
}

html body .vacancy-modal-form .vacancy-form.grid {
    gap: 0;
    row-gap: 10px;
    margin: 0;
}

html body .vacancy-modal-form .vacancy-form.grid > .cols-12:has(.file-uploader) {
    margin-bottom: 0;
}

html body .vacancies-page .vacancy-panel .vacancy-form.grid > .cols-12,
html body .vacancy-modal-form .vacancy-form.grid > .cols-12 {
    margin: 0;
    min-height: 0;
}

html body .vacancies-page .vacancy-panel .vacancy-form .input,
html body .vacancy-modal-form .vacancy-form .input {
    margin: 0;
}

html body .vacancies-page .vacancy-panel .vacancy-form .input label,
html body .vacancy-modal-form .vacancy-form .input label {
    margin: 0;
}

html body .vacancies-page .vacancy-panel .vacancy-form .input label:empty,
html body .vacancy-modal-form .vacancy-form .input label:empty {
    display: none;
}

html body .vacancies-page .vacancy-panel .vacancy-form .input .input__error,
html body .vacancy-modal-form .vacancy-form .input .input__error {
    display: none;
    margin: 0;
    min-height: 0;
    padding: 0;
}

html body .vacancies-page .vacancy-panel .vacancy-form .input.error-message .input__error,
html body .vacancy-modal-form .vacancy-form .input.error-message .input__error {
    display: block;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    opacity: 1;
    visibility: visible;
}

html body .vacancies-page .vacancy-panel .vacancy-form .file-uploader,
html body .vacancy-modal-form .vacancy-form .file-uploader {
    margin: 0;
}

html body .vacancies-page .vacancy-panel p.vacancy-form__title {
    color: #ffffff;
    font-family: inherit;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    max-width: none;
    text-align: left;
}

html body .vacancies-page .vacancy-panel .vacancy-form__policy {
    margin: 0 0 14px;
    max-width: none;
    text-align: center;
}

html body .vacancies-page .vacancy-panel .vacancy-form__policy-text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    max-width: none;
    font-weight: 400;
}

html body .vacancies-page .vacancy-panel .vacancy-form__policy-text a.vacancy-form__policy-link {
    display: inline;
    color: #ffffff !important;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-shadow: none;
}

html body .vacancies-page .vacancy-panel .vacancy-form__policy-text a.vacancy-form__policy-link:hover,
html body .vacancies-page .vacancy-panel .vacancy-form__policy-text a.vacancy-form__policy-link:focus-visible {
    color: #fff9e6 !important;
    opacity: 1;
    outline: 0;
}

/* Модальная форма «Оставить резюме» — крестик только для этой модалки */
.fancybox-container:has(.vacancy-modal-form) .fancybox-close-small {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    transition: background-color 0.2s ease;
    opacity: 1;
}

.fancybox-container:has(.vacancy-modal-form) .fancybox-close-small:after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L17 17' stroke='%23ffffff' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 17L17 1' stroke='%23ffffff' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position: static;
    top: auto;
    right: auto;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background: none;
    transform: none;
}

.fancybox-container:has(.vacancy-modal-form) .fancybox-close-small:hover,
.fancybox-container:has(.vacancy-modal-form) .fancybox-close-small:focus-visible {
    background-color: #ffffff;
}

.fancybox-container:has(.vacancy-modal-form) .fancybox-close-small:hover:after,
.fancybox-container:has(.vacancy-modal-form) .fancybox-close-small:focus-visible:after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L17 17' stroke='%23777777' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 17L17 1' stroke='%23777777' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html body .vacancy-modal-form.formCallback {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    max-width: 420px;
}

html body .vacancy-modal-form.formCallback form {
    margin-top: 0;
}

html body .vacancy-modal-form.formCallback button {
    margin-bottom: 0;
}

html body .vacancy-modal-form {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding: 28px 28px 20px;
    box-sizing: border-box;
    background: var(--color-azure, #20979e);
    border-radius: 10px;
}

html body .vacancy-modal-form__title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.25rem;
    text-align: center;
}

html body .vacancy-modal-form .input input {
    border-radius: 12px;
    box-sizing: border-box;
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
    line-height: 48px;
    font-size: 14px;
    font-weight: 400;
    font-family: "Gotham", sans-serif;
    width: 100%;
    border: none;
    background: #ffffff;
    color: #333333;
}

html body .vacancy-modal-form .input input::placeholder {
    color: #c7c7c7;
    font-size: 14px;
    font-weight: 400;
    font-family: "Gotham", sans-serif;
    opacity: 1;
}

html body .vacancy-modal-form .file-uploader__trigger {
    border-radius: 12px;
    box-sizing: border-box;
    min-height: 48px;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    font-family: "Gotham", sans-serif !important;
    color: #c7c7c7;
    text-align: left;
}

html body .vacancy-modal-form .vacancy-form__policy {
    margin: 0 0 8px;
    max-width: none;
    text-align: center;
}

html body .vacancy-modal-form .vacancy-form__policy-text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    max-width: none;
    font-weight: 400;
}

html body .vacancy-modal-form .vacancy-form__policy-text a.vacancy-form__policy-link {
    display: inline;
    color: #ffffff !important;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-shadow: none;
}

html body .vacancy-modal-form .vacancy-form__policy-text a.vacancy-form__policy-link:hover,
html body .vacancy-modal-form .vacancy-form__policy-text a.vacancy-form__policy-link:focus-visible {
    color: #fff9e6 !important;
    opacity: 1;
    outline: 0;
}

html body .vacancy-modal-form .vacancy-form__actions-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

html body .vacancy-modal-form .vacancy-form__submit-outer {
    margin: 0;
}

html body .vacancy-modal-form .vacancy-form__submit {
    border-radius: 12px;
    box-sizing: border-box;
    min-height: 48px;
    height: 48px;
    padding: 0 36px;
    line-height: 1;
    font-size: 14px;
    font-weight: 400;
    font-family: "Gotham", sans-serif;
    letter-spacing: 0.02em;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html body .vacancy-modal-form .vacancy-form__submit:hover,
html body .vacancy-modal-form .vacancy-form__submit:focus-visible {
    color: var(--color-azure, #20979e);
    background-color: #ffffff !important;
    border-color: #ffffff;
    outline: 0;
    opacity: 1;
}

html body .vacancy-modal-form .vacancy-modal-share {
    margin: 30px 0 0;
    font-family: "Gotham", sans-serif;
}

html body .vacancy-modal-form .vacancy-modal-share__title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

html body .vacancy-modal-form .vacancy-modal-share .blog-share__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

html body .vacancy-modal-form .vacancy-modal-share .blog-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.14);
    background-image: none;
    filter: none;
    opacity: 0.92;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

html body .vacancy-modal-form .vacancy-modal-share .blog-share__btn-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #ffffff;
    pointer-events: none;
}

html body .vacancy-modal-form .vacancy-modal-share .blog-share__btn-ico svg {
    display: block;
    width: 100%;
    height: 100%;
}

html body .vacancy-modal-form .vacancy-modal-share .blog-share__btn--tg {
    width: 34px;
    height: 34px;
}

html body .vacancy-modal-form .vacancy-modal-share .blog-share__btn--tg .blog-share__btn-ico {
    width: 34px;
    height: 34px;
}

html body .vacancy-modal-form .vacancy-modal-share .blog-share__btn:hover,
html body .vacancy-modal-form .vacancy-modal-share .blog-share__btn:focus-visible {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.72);
    transform: none;
    outline: 0;
}

.blog-share__toast {
    position: fixed;
    z-index: 12000;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%) translateY(12px);
    padding: 12px 20px;
    border-radius: 8px;
    background: rgba(33, 33, 33, 0.92);
    color: #fff;
    font-size: 14px;
    font-family: "Gotham", sans-serif;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.blog-share__toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 743px) {
    html body .vacancies-page .vacancy-panel p.vacancy-panel__list-title {
        font-size: 1.2rem;
    }

    html body .vacancies-page .vacancy-panel .vacancy-panel__body-item:last-child {
        padding: 12px 14px;
    }

    html body .vacancies-page .vacancy-panel .vacancy-form__actions-inner {
        width: 100%;
    }

    html body .vacancies-page .vacancy-panel .vacancy-form__submit,
    html body .vacancies-page .vacancy-panel .vacancy-form__share {
        padding: 0 24px;
        width: 100%;
        box-sizing: border-box;
    }

    /*
     * Всплывающая панель: app.css скрывает .bg_close и снимает скругление/отступы у .bg__inner.
     */
    html body .vacancies-page .ac.is-active .ac-panel {
        margin-top: -60px;
    }

    html body .vacancies-page .vacancy .ac-panel__inner .bg {
        position: relative;
    }

    html body .vacancies-page .vacancy .bg_close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 25;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.14);
        cursor: pointer;
        color: #ffffff;
        appearance: none;
        -webkit-appearance: none;
    }

    html body .vacancies-page .vacancy .bg_close svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    html body .vacancies-page .vacancy .bg_close svg path {
        fill: currentColor;
    }

    html body .vacancies-page .vacancy .bg_close:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    html body .vacancies-page .vacancy .ac-panel__inner .bg__inner {
        padding: 20px 18px 22px 18px !important;
        border-radius: 12px !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
        overflow: hidden;
        box-sizing: border-box;
    }
}

/* Блок «Не нашли вакансию» */
.vacancies-page .vacancy.--no-vacancy .vacancy-header {
    background-color: var(--color-white);
    border-left-color: var(--color-blue);
}

.vacancies-page .vacancy.--no-vacancy .vacancy-header p.vacancy-header__title {
    color: var(--color-blue);
}

.vacancies-page .vacancy.--no-vacancy .vacancy__more-btn {
    color: var(--color-white);
    background-color: var(--color-azure);
    border: 2px solid var(--color-azure);
    font-weight: 400;
    box-shadow: none;
}

.vacancies-page .vacancy.--no-vacancy .vacancy__more-btn:hover {
    opacity: 1;
    background-color: var(--color-grey-4);
    border-color: var(--color-grey-4);
    color: var(--color-white);
}

/*
 * Мобильный листинг вакансий (один @media): зазор 15px между карточками;
 * видимый блок свойств — перебивает app.css (max-height:100px, скрытие meta).
 */
@media (max-width: 743px) {
    html body .vacancies-page .vacancies.grid.accordion,
    html body .vacancies-page .vacancies-tabs__panel .vacancies.grid,
    html body .vacancies-page .vacancies-outer__fallback.grid {
        gap: 15px;
    }

    html body .vacancies-page .vacancies .vacancy-header {
        flex-direction: column !important;
        align-items: stretch;
        justify-content: flex-start;
        gap: 12px;
        max-height: none;
        min-height: 0;
        overflow: visible;
        padding: 14px 14px 14px 20px;
    }

    html body .vacancies-page .vacancies .vacancy-header__main {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    html body .vacancies-page .vacancies .vacancy-header .vacancy-header__meta {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
    }

    html body .vacancies-page .vacancies .vacancy-header .vacancy-header__subtitle {
        display: block !important;
    }

    html body .vacancies-page .vacancies .vacancy-header__section--props {
        overflow: visible;
    }

    html body .vacancies-page .vacancies .vacancy-header__section--cta {
        margin-top: 0;
        padding-top: 12px;
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    html body .vacancies-page .vacancies .vacancy-header p.vacancy-header__title {
        font-size: 20px;
    }

    /* Текст кнопки вместо скрытого label + иконка из app.css */
    html body .vacancies-page .vacancies .vacancy__more-btn {
        flex-shrink: 0;
        min-width: auto;
        width: auto;
        height: auto;
        min-height: 40px;
        padding: 9px 14px;
        text-indent: 0;
        overflow: visible;
        margin: 0;
        border-radius: 10px;
        font-weight: 400;
        box-shadow: none;
    }

    html body .vacancies-page .vacancies .vacancy__more-btn::after {
        display: none !important;
    }
}

/* Виджет Dream Job (конец страницы вакансий) */
.dj-rating {
    margin: 70px 0 0 0;
    box-sizing: border-box;
}

/*
 * ПКМЦ LIFE: фиксируем высоту картинок (чтобы ряд заканчивался на одной плоскости).
 */
@media (min-width: 744px) {
    .vacancies-page .life img {
        height: 450px;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }
}