/* Сторінка /vacancies. Розміри у vw від 1440 (ПК) і 390 (моб), як решта сайту */
.vac-page {
    --vac-dim: rgba(17, 18, 20, .62);
    --vac-line: rgba(17, 18, 20, .16);
    --vac-accent: #e8433a;
    color: var(--color-black);
    font-family: 'IBMPlexMono', sans-serif;
    font-size: 1.0417vw;
    line-height: 1.6;
}
.vac-page *, .vac-page *::before, .vac-page *::after { box-sizing: border-box; }
/* Глобальне правило «*» сайту задає розмір і інтервал кожному елементу, тут вони успадковуються */
.vac-page * { font-size: inherit; line-height: inherit; }
.vac-page a { color: inherit; }
.vac-page [hidden] { display: none !important; }
.vac-page [id] { scroll-margin-top: 4.1667vw; }

.vac-display {
    font-family: 'Bicubik', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.08;
    letter-spacing: .01em;
}

.vac-eyebrow {
    display: flex;
    align-items: center;
    gap: .6944vw;
    margin-bottom: 1.25vw;
    color: var(--vac-dim);
    font-size: .8333vw;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.vac-eyebrow::before { content: ""; width: 1.3889vw; height: 1px; background: currentColor; }

.vac-title { margin: 0; font-size: 2.9167vw; }
.vac-text { margin: 1.25vw 0 0; color: var(--vac-dim); max-width: 34vw; }
.vac-narrow { max-width: 32vw; }

.vac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5556vw;
    padding: 1.0417vw 1.9444vw;
    border: 1px solid var(--color-black);
    background: transparent;
    color: var(--color-black);
    font-family: 'Bicubik', sans-serif;
    font-size: .8333vw;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s, color .3s, border-color .3s;
}
.vac-page a.vac-btn { color: var(--color-black); }
.vac-btn:hover, .vac-page a.vac-btn:hover { background: var(--color-black); color: var(--color-white); }
.vac-btn-dark, .vac-page a.vac-btn-dark { background: var(--color-black); color: var(--color-white); }
.vac-btn-dark:hover, .vac-page a.vac-btn-dark:hover { background: var(--color-white); color: var(--color-black); }
.vac-btn-light, .vac-page a.vac-btn-light { border-color: var(--color-white); color: var(--color-white); }
.vac-btn-light:hover, .vac-page a.vac-btn-light:hover { background: var(--color-white); color: var(--color-black); }
.vac-btn[disabled] { opacity: .5; cursor: wait; }

.vac-hero { padding: 7.6389vw 1.3889vw 6.25vw; }
.vac-hero-title { margin: 1.3889vw 0 1.8056vw; font-size: 5.5556vw; max-width: 80vw; }
.vac-lede { margin: 0 0 2.5vw; max-width: 40vw; color: var(--vac-dim); font-size: 1.1111vw; }

.vac-section { padding: 7.6389vw 1.3889vw; border-top: 1px solid var(--color-black); }

.vac-about { display: grid; grid-template-columns: 1fr 1fr; gap: 4.4444vw; align-items: center; }
.vac-about-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--vac-line); }

.vac-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 3.0556vw;
    background: var(--color-black);
    border: 1px solid var(--color-black);
}
.vac-why-card { padding: 2.7778vw 2.2222vw; background: var(--color-white); }
.vac-why-num { font-family: 'Bicubik', sans-serif; font-size: 2.6389vw; line-height: 1; color: var(--vac-dim); }
.vac-why-card h3 { margin: 1.1111vw 0 .6944vw; font-size: 1.1806vw; font-weight: 600; line-height: 1.35; }
.vac-why-card p { margin: 0; color: var(--vac-dim); font-size: 1.0069vw; }

.vac-future { display: flex; align-items: flex-start; gap: 1.9444vw; margin-top: 2.7778vw; }
.vac-future div { min-width: 8.3333vw; color: var(--vac-dim); font-size: .8333vw; }
.vac-future strong { display: block; margin-bottom: .2778vw; color: var(--color-black); font-size: 1.3889vw; }
.vac-future-arrow { color: var(--vac-accent); font-size: 1.6667vw; line-height: 1; }

.vac-dark { background: var(--color-black); color: var(--color-white); border-top-color: var(--color-black); }
.vac-dark .vac-eyebrow { color: rgba(255, 255, 255, .6); }
.vac-dark .vac-title, .vac-final h2 { color: var(--color-white); }
.vac-traits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 4.1667vw; margin-top: 2.7778vw; max-width: 56.9444vw; }
.vac-trait { display: flex; gap: .9722vw; padding: 1.3889vw 0; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 1.25vw; font-weight: 600; }
.vac-dot { flex: none; width: .4861vw; height: .4861vw; margin-top: .6944vw; border-radius: 50%; background: var(--vac-accent); }

.vac-pos-top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.3889vw; }
.vac-pos-count { color: var(--vac-dim); font-size: .9028vw; }
.vac-pos-list { margin-top: 2.5vw; border-top: 1px solid var(--color-black); }
.vac-pos { border-bottom: 1px solid var(--color-black); }
.vac-pos-head {
    display: flex;
    align-items: center;
    gap: 1.6667vw;
    width: 100%;
    padding: 1.9444vw 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.vac-pos-code { min-width: 2.5vw; color: var(--vac-dim); font-size: .9028vw; }
.vac-pos-title { flex: 1; font-size: 1.7361vw; }
.vac-pos-dept { color: var(--vac-dim); font-size: .8333vw; text-transform: uppercase; letter-spacing: .08em; }
.vac-pos-plus { position: relative; flex: none; width: 2.2222vw; height: 2.2222vw; border: 1px solid var(--vac-line); transition: background-color .25s, border-color .25s; }
.vac-pos-plus::before, .vac-pos-plus::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--color-black); transform: translate(-50%, -50%); }
.vac-pos-plus::before { width: .8333vw; height: 1px; }
.vac-pos-plus::after { width: 1px; height: .8333vw; transition: opacity .2s; }
.vac-pos-head:hover .vac-pos-plus { border-color: var(--color-black); }
.vac-pos.is-open .vac-pos-plus { border-color: var(--color-black); }
.vac-pos.is-open .vac-pos-plus::after { opacity: 0; }
.vac-pos-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.vac-pos-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.7778vw; padding: 0 0 2.7778vw 4.1667vw; }
.vac-pos-intro { margin: 0 0 1.5278vw; max-width: 42vw; color: var(--vac-dim); }
.vac-pos-body h4 { margin: 0 0 .8333vw; color: var(--color-black); font-family: 'Bicubik', sans-serif; font-size: .8333vw; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.vac-pos-body ul { margin: 0 0 1.5278vw; padding: 0; list-style: none; }
.vac-pos-body li { position: relative; margin-bottom: .5556vw; padding-left: 1.1111vw; color: var(--vac-dim); }
.vac-pos-body li::before { content: "—"; position: absolute; left: 0; }
.vac-pos-side { padding-left: 2.5vw; border-left: 1px solid var(--vac-line); }
.vac-pos-side .vac-btn { width: 100%; }
.vac-pos-meta { margin-top: 1.25vw; color: var(--vac-dim); font-size: .9028vw; }
.vac-pos-meta div { display: flex; justify-content: space-between; gap: .8333vw; padding: .5556vw 0; border-bottom: 1px solid var(--vac-line); }
.vac-pos-meta b { color: var(--color-black); font-weight: 600; }
.vac-no-match { margin: 2.2222vw 0 0; color: var(--vac-dim); }
.vac-no-match-empty { margin-top: 2.5vw; padding: 2.2222vw; border: 1px solid var(--color-black); max-width: 52vw; }
.vac-no-match a { color: var(--color-black); border-bottom: 1px solid var(--color-black); text-decoration: none; }

.vac-final { padding: 9.0278vw 1.3889vw; background: var(--color-black); color: var(--color-white); text-align: center; }
.vac-final .vac-eyebrow { justify-content: center; color: rgba(255, 255, 255, .6); }
.vac-final .vac-eyebrow::before { display: none; }
.vac-final h2 { margin: 1.25vw auto 1.5278vw; font-size: 4.4444vw; }
.vac-final p { margin: 0 auto 2.5vw; max-width: 34vw; color: rgba(255, 255, 255, .65); }

.vac-apply { display: grid; grid-template-columns: 1fr 1fr; gap: 3.8889vw; border-top: 0; }
.vac-apply-note .vac-text { max-width: 28vw; }
.vac-form { display: grid; gap: 1.1111vw; }
.vac-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1111vw; }
.vac-field { min-width: 0; }
.vac-field label, .vac-label {
    display: block;
    margin-bottom: .5556vw;
    color: var(--vac-dim);
    font-size: .7639vw;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.vac-field input, .vac-field select, .vac-field textarea {
    display: block;
    width: 100%;
    padding: .9028vw .9722vw;
    border: 1px solid var(--color-black);
    border-radius: 0;
    background: var(--color-white);
    color: var(--color-black);
    font-family: 'IBMPlexMono', sans-serif;
    font-size: 1.0069vw;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}
.vac-field select {
    padding-right: 2.7778vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111214' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9722vw center;
    background-size: .8333vw auto;
    cursor: pointer;
}
.vac-field textarea { min-height: 7.6389vw; resize: vertical; }
.vac-field input::placeholder, .vac-field textarea::placeholder { color: var(--color-grey); }
.vac-field input:focus, .vac-field select:focus, .vac-field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--color-black); }
.vac-field.has-error input, .vac-field.has-error select, .vac-field.has-error textarea, .vac-field.has-error .vac-upload { border-color: var(--vac-accent); box-shadow: inset 0 0 0 1px var(--vac-accent); }
.vac-error { margin-top: .4167vw; color: var(--vac-accent); font-size: .8333vw; }
.vac-error:empty { display: none; }
.vac-counter { margin-top: .3472vw; color: var(--color-grey); font-size: .7639vw; text-align: right; }
.vac-page .vac-counter span, .vac-page .vac-upload-size { color: var(--color-grey); }

.vac-upload {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 4.8611vw;
    margin: 0 !important;
    padding: 1.1111vw;
    border: 1px dashed var(--color-black);
    color: var(--color-black) !important;
    font-size: .9028vw !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s;
}
.vac-upload:hover, .vac-upload.is-drag { background: rgba(17, 18, 20, .04); }
.vac-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vac-upload-file { display: none; gap: .8333vw; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.vac-upload-name { font-weight: 600; word-break: break-all; }
.vac-upload-size { color: var(--vac-dim); }
.vac-upload.has-file { border-style: solid; }
.vac-upload.has-file .vac-upload-empty { display: none; }
.vac-upload.has-file .vac-upload-file { display: flex; }
.vac-upload-remove { display: none; margin-top: .5556vw; padding: 0; border: 0; background: none; color: var(--vac-dim); font: inherit; font-size: .8333vw; cursor: pointer; }
.vac-upload-remove:hover { color: var(--color-black); }
.vac-upload.has-file ~ .vac-upload-remove { display: inline-block; }
.vac-hint { margin-top: .4167vw; color: var(--color-grey); font-size: .7639vw; }

.vac-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25vw; margin-top: .2778vw; }
.vac-submit-row .vac-hint { margin: 0; }
.vac-form-error { color: var(--vac-accent); font-size: .9028vw; }
.vac-form-error:empty { display: none; }
.vac-consent { margin: 0; color: var(--color-grey); font-size: .7639vw; }
.vac-consent a { text-decoration: underline; }
.vac-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vac-success { padding: 2.7778vw; border: 1px solid var(--color-black); }
.vac-success-title { font-size: 1.9444vw; }
.vac-success .vac-text { max-width: none; margin-bottom: 1.9444vw; }

@media only screen and (max-width: 768px) {
    .vac-page { font-size: 3.5897vw; }
    .vac-page [id] { scroll-margin-top: 14.1026vw; }
    .vac-eyebrow { gap: 2.5641vw; margin-bottom: 3.5897vw; font-size: 2.8205vw; }
    .vac-eyebrow::before { width: 5.1282vw; }
    .vac-title { font-size: 6.6667vw; }
    .vac-text, .vac-narrow, .vac-apply-note .vac-text { max-width: none; margin-top: 3.5897vw; }

    .vac-btn { padding: 4.1026vw 6.1538vw; gap: 2.0513vw; font-size: 3.0769vw; }

    .vac-hero { padding: 12.3077vw 4.1026vw 14.1026vw; }
    .vac-hero-title { margin: 3.5897vw 0 5.1282vw; font-size: 7.6923vw; max-width: none; }
    .vac-lede { max-width: none; margin-bottom: 7.1795vw; font-size: 3.7179vw; }

    .vac-section { padding: 15.3846vw 4.1026vw; }
    .vac-about { grid-template-columns: 1fr; gap: 8.2051vw; }

    .vac-why { grid-template-columns: 1fr; margin-top: 7.1795vw; }
    .vac-why-card { padding: 7.1795vw 5.1282vw; }
    .vac-why-num { font-size: 8.2051vw; }
    .vac-why-card h3 { margin: 3.5897vw 0 2.0513vw; font-size: 4.1026vw; }
    .vac-why-card p { font-size: 3.5897vw; }

    .vac-future { flex-direction: column; gap: 2.5641vw; margin-top: 7.1795vw; }
    .vac-future div { font-size: 3.0769vw; }
    .vac-future strong { margin-bottom: 1.0256vw; font-size: 5.641vw; }
    .vac-future-arrow { padding-left: 1.0256vw; font-size: 6.1538vw; transform: rotate(90deg); }

    .vac-traits { grid-template-columns: 1fr; max-width: none; margin-top: 7.1795vw; }
    .vac-trait { gap: 3.5897vw; padding: 4.6154vw 0; font-size: 4.1026vw; }
    .vac-dot { width: 1.7949vw; height: 1.7949vw; margin-top: 2.0513vw; }

    .vac-pos-top { gap: 3.5897vw; }
    .vac-pos-count { font-size: 3.0769vw; }
    .vac-pos-list { margin-top: 7.1795vw; }
    .vac-pos-head { gap: 3.5897vw; padding: 5.641vw 0; }
    .vac-pos-code { min-width: 7.6923vw; font-size: 3.0769vw; }
    .vac-pos-title { font-size: 4.6154vw; }
    .vac-pos-dept { display: none; }
    .vac-pos-plus { width: 8.2051vw; height: 8.2051vw; }
    .vac-pos-plus::before { width: 3.0769vw; }
    .vac-pos-plus::after { height: 3.0769vw; }
    .vac-pos-inner { grid-template-columns: 1fr; gap: 5.1282vw; padding: 0 0 7.1795vw; }
    .vac-pos-intro { max-width: none; margin-bottom: 5.1282vw; }
    .vac-pos-body h4 { margin-bottom: 2.5641vw; font-size: 3.0769vw; }
    .vac-pos-body ul { margin-bottom: 5.1282vw; }
    .vac-pos-body li { margin-bottom: 2.0513vw; padding-left: 4.6154vw; }
    .vac-pos-side { padding: 5.1282vw 0 0; border-left: 0; border-top: 1px solid var(--vac-line); }
    .vac-pos-meta { margin-top: 4.1026vw; font-size: 3.3333vw; }
    .vac-pos-meta div { gap: 3.0769vw; padding: 2.5641vw 0; }
    .vac-no-match { margin-top: 7.1795vw; }
    .vac-no-match-empty { max-width: none; padding: 5.1282vw; }

    .vac-final { padding: 20.5128vw 4.1026vw; }
    .vac-final h2 { margin: 3.5897vw auto 5.1282vw; font-size: 7.6923vw; }
    .vac-final p { max-width: none; margin-bottom: 7.1795vw; }

    .vac-apply { grid-template-columns: 1fr; gap: 8.2051vw; }
    .vac-form { gap: 4.6154vw; }
    .vac-row { grid-template-columns: 1fr; gap: 4.6154vw; }
    .vac-field label, .vac-label { margin-bottom: 2.0513vw; font-size: 2.8205vw; }
    .vac-field input, .vac-field select, .vac-field textarea { padding: 3.3333vw 3.5897vw; font-size: 4.1026vw; }
    .vac-field select { padding-right: 10.2564vw; background-position: right 3.5897vw center; background-size: 3.0769vw auto; }
    .vac-field textarea { min-height: 28.2051vw; }
    .vac-error { margin-top: 1.5385vw; font-size: 3.0769vw; }
    .vac-counter, .vac-hint, .vac-consent { font-size: 2.8205vw; }
    .vac-upload { min-height: 17.9487vw; padding: 4.1026vw; font-size: 3.3333vw !important; }
    .vac-upload-file { gap: 3.0769vw; }
    .vac-upload-remove { margin-top: 2.0513vw; font-size: 3.0769vw; }
    .vac-hint { margin-top: 1.5385vw; }
    .vac-submit-row { gap: 4.1026vw; }
    .vac-submit-row .vac-btn { width: 100%; }
    .vac-form-error { font-size: 3.3333vw; }
    .vac-success { padding: 7.1795vw 5.1282vw; }
    .vac-success-title { font-size: 6.1538vw; }
    .vac-success .vac-text { margin-bottom: 6.1538vw; }
}