/* Шрифти (змінні, лежать на сайті — нічого не вантажиться з інтернету). */
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/geologica-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/geologica-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geologica';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/geologica-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Акцентний колір (жовто-зелене виділення). Змінити можна тут. */
:root { --accent: #D8F650; }

/* Плавна прокрутка при переходах по сторінці (вимкнена, якщо в системі стоїть "зменшити анімації"). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Нижня панель .mbar (до 960 px) не повинна закривати елемент у фокусі (клавіатура, VoiceOver, TalkBack): браузер прокручує до нього з запасом внизу = висота панелі 73px + 15px. */
@media (max-width: 960px) { html { scroll-padding-bottom: 88px; } }

/* Приховані елементи (форма/«дякую», повідомлення «вакансій немає»). */
[hidden] { display: none !important; }

/* ===== Дизайн сайту (як у Claude Design) ===== */
body{margin:0}
a{color:#1D3FE0}a:hover{color:#1632B8}
.r8 *{box-sizing:border-box}
.r8 button,.r8 input,.r8 select,.r8 textarea{font-family:inherit}
.r8 section{scroll-margin-top:96px}
.r8 .btn{transition:filter .15s ease}
.r8 .btn:hover{filter:brightness(.93)}
.r8 .btn:focus-visible,.r8 .chip:focus-visible{outline:3px solid #0A1433;outline-offset:3px}
.r8 .nav{display:flex}
.r8 .nav a{color:#0A1433}.r8 .nav a:hover{color:#1D3FE0}
.r8 .head-cta{display:inline-flex}
.r8 .head-num{display:inline}
.r8 .chips{display:flex;flex-wrap:wrap;gap:10px}
.r8 .chip{background:#fff;color:#0A1433;border:1px solid #D3DDF2}
.r8 .chip:hover{border-color:#0A1433}
.r8 .chip[aria-pressed="true"]{background:#0A1433;color:#fff;border-color:#0A1433}
.r8 .fld{border:1px solid #CBD7EE;background:#F7F9FE;color:#0A1433}
.r8 .fld:focus{outline:2px solid #1D3FE0;outline-offset:0;border-color:#1D3FE0;background:#fff}
.r8 .fld::placeholder{color:#56617D;opacity:1}   /* контраст підказки не нижче 4.5:1 (стандартна була ~4.3:1) */
.r8 .opt{position:relative;display:flex}
.r8 .opt input{position:absolute;opacity:0;width:1px;height:1px}
.r8 .opt span{background:#F7F9FE;color:#0A1433;border:1px solid #CBD7EE}
.r8 .opt:hover span{border-color:#1D3FE0}
.r8 .opt input:checked + span{background:#1D3FE0;color:#fff;border-color:#1D3FE0}
.r8 .opt input:focus-visible + span{outline:3px solid #0A1433;outline-offset:2px}
.r8 .step{display:flex;flex-direction:column;gap:14px}
.r8 .hero-photo{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 66%,transparent 100%),linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 66%,transparent 100%),linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}
.r8 .hero-sec{padding:clamp(32px, 4.6cqw, 72px) clamp(20px, 5cqw, 80px) clamp(56px, 7cqw, 104px)}
@media (max-width: 900px){.r8 .hero-sec{padding-bottom:16px}}   /* фото з карткою — останній блок hero: великий відступ перед «Актуальні вакансії» лишається лише на десктопі */
.r8 .seo-link{font-weight:500;text-decoration-thickness:1px;text-decoration-color:rgba(29, 63, 224, .45);text-wrap:balance}   /* посилання на /robota-v-chekhii під заголовком «Актуальні вакансії» */
.r8 .mbar{display:none}
@container r8 (max-width: 760px){
.r8 .nav{display:none}
.r8 .head-cta{display:none}
.r8 .head-num{display:none}
.r8 .step > span:first-child{min-width:44px}
.r8 .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
.r8 .chips::-webkit-scrollbar{display:none}
.r8 .step{flex-direction:row;align-items:baseline;gap:18px}
.r8 .mbar{display:flex}
}

/* ===== Планшети: мобільна шапка до 960 px =====
   У дизайні шапка перемикалась на мобільну лише до 760 px, а між 761 і 955 px
   меню, телефон і кнопка не вміщалися (з'являлась горизонтальна прокрутка).
   Тепер до 960 px показується мобільна шапка + нижня панель «Зв’язатися».
   Решта дизайну не змінена. */
@container r8 (max-width: 960px) {
.r8 .nav{display:none}
.r8 .head-cta{display:none}
.r8 .head-num{display:none}
.r8 .mbar{display:flex}
}

/* Кнопка «Надіслати заявку» під час відправки (щоб не натиснули двічі). */
.r8 button:disabled { opacity: .6; cursor: default !important; }

/* Вікно вибору способу зв'язку (кнопки «Зв’язатися» / «Уточнити деталі») має власні стилі всередині assets/js/contact-picker.js. */

/* Нижня панель на телефоні: коротко й спокійно з'являється/зникає (див. watchBar у contact-picker.js). Поки панель видима, її місце в потоці не змінюється. */
.r8 .mbar { transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s; }
.r8 .mbar.mbar-off { opacity: 0; transform: translateY(10px); visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  /* Схована панель лежить у потоці після футера (sticky) і лишала під ним білу смугу: тепер піднімаємо її на власну висоту (10+52+10+1 = 73px + safe-area) і ще 10px зсуву translateY; видима панель не змінюється. */
  margin-top: calc(-83px - env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .r8 .mbar, .r8 .mbar.mbar-off { transition: none; transform: none; } }

/* Дві кнопки вгорі сторінки вакансії: «Написати» і «Залишити заявку» (поруч; на дуже вузькому екрані переносяться одна під одну; поки вони видні, нижня панель схована). */
.r8 .vac-cta { display: flex; flex-wrap: wrap; gap: 10px; }
@container r8 (max-width: 640px) { .r8 .vac-cta a { flex: 1 1 140px; padding: 0 12px; } }

/* Необов'язкова згода на Meta Conversions API (окремо від згоди з Політикою): звичайний прапорець, не вибраний за замовчуванням. */
.r8 .capi { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 13px; line-height: 1.45; color: #56617D; cursor: pointer; }
.r8 .capi input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #1D3FE0; cursor: pointer; }
.r8 .capi input:focus-visible { outline: 3px solid #0A1433; outline-offset: 2px; }
.r8 .capi a { text-underline-offset: 2px; }

/* ===== Форма першого контакту: помилки біля полів ===== */
.r8 .ferr { font-size: 14px; line-height: 1.35; font-weight: 600; color: #B42318; }
.r8 .fld[aria-invalid="true"] { border-color: #B42318; }
.r8 .fld[aria-invalid="true"]:focus { outline-color: #B42318; }
.r8 fieldset[aria-invalid="true"] .opt span { border-color: #B42318; }

/* Форма першого контакту: висота полів і заголовок на телефоні (на комп'ютері й планшеті без змін).
   Поле 40 px + підпис над ним (він теж натискається) = зручна зона дотику; шрифт у полі лишається 16px (Safari не наближає).
   !important потрібен лише для заголовка: його розмір задано в розмітці. */
.r8 #application-form .fld { height: 52px; }
@container r8 (max-width: 640px) {
.r8 #application-form .fld { height: 40px; }
.r8 #apply h2 { font-size: 25px !important; }
}

/* ===== Картки вакансій (головна й /robota-v-chekhii; розмітку дає assets/js/vacancy-card.js) =====
   Порядок: місто → назва → ставка → до 3 переваг → кнопки. Спокійно: біла картка, тонка межа, один акцент (жовто-зелене підкреслення ставки). */
.r8 .vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: clamp(14px, 1.6cqw, 20px); }
/* рівно 4 вакансії — сітка 2×2, а не 3+1 */
.r8 .vc-grid[data-n="4"] { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); }
.r8 .vc { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid #DFE7F7; border-radius: 20px; padding: clamp(20px, 2.2cqw, 26px); }
.r8 .vc-loc { display: flex; align-items: flex-start; gap: 6px; color: #44506E; font-size: 14px; font-weight: 500; line-height: 1.35; }
.r8 .vc-pin { flex: none; margin-top: 2px; color: #1D3FE0; }
.r8 .vc-c { white-space: nowrap; }
.r8 .vc-sep { color: #9AA6C2; }
.r8 .vc-more-c { color: #56617D; white-space: nowrap; }
.r8 .vc-title { margin: 0; font-family: 'Geologica', system-ui, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.22; letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: pretty; }
.r8 .vc-title a { color: inherit; text-decoration: none; }
.r8 .vc-pay { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: #0A1433; }
.r8 .vc-pre { font-size: 15px; color: #56617D; }
.r8 .vc-sum { font-family: 'Geologica', system-ui, sans-serif; font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; padding: 0 3px; margin: 0 -3px; box-shadow: inset 0 -.34em 0 var(--accent); overflow-wrap: anywhere; }
.r8 .vc-unit { font-size: 15px; font-weight: 500; color: #3B4766; }
.r8 .vc-note { font-size: 13px; font-weight: 600; color: #44506E; padding: 1px 9px; border: 1px solid #CBD7EE; border-radius: 999px; align-self: center; }
.r8 .vc-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.r8 .vc-badges li { background: #F3F7FE; color: #1F2A4A; font-size: 14px; font-weight: 500; line-height: 1.3; padding: 6px 11px; border-radius: 10px; }
.r8 .vc-actions { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.r8 .vc-more { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; background: #1D3FE0; color: #fff; border: 0; font-family: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.r8 .vc-more, .r8 .vc-more:hover { filter: none; }   /* filter створив би новий контейнер для ::after і стиснув клікабельну зону картки до розміру кнопки */
.r8 .vc-more { transition: background-color .15s ease; }
.r8 .vc-more:hover { color: #fff; background: #1632B8; }
.r8 .vc-want { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; color: #1D3FE0; font-weight: 600; font-size: 15px; text-decoration: none; text-underline-offset: 3px; }
.r8 .vc-want:hover { text-decoration: underline; }
.r8 .vc-want:focus-visible { outline: 3px solid #0A1433; outline-offset: 2px; border-radius: 6px; }
/* вся картка клікабельна через «Детальніше» (одне посилання, без вкладених) */
.r8 .vc-link .vc-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.r8 .vc-link { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .r8 .vc { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } }
@media (hover: hover) {
  .r8 .vc-link:hover { border-color: #B9C8EA; box-shadow: 0 4px 14px rgba(10, 20, 51, .06); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .r8 .vc-link:hover { transform: translateY(-1px); }
}
.r8 .vc-count { margin: 0; color: #56617D; font-size: 15px; }
/* «Завантажуємо актуальні вакансії…»: короткий рядок без анімації, поки список не прийшов */
.r8 .vc-status { grid-column: 1 / -1; margin: 0; padding: 24px 0; min-height: 96px; color: #56617D; font-size: 16px; }
@container r8 (max-width: 520px) {
  /* телефон: щільніше, щоб швидше гортати кілька вакансій підряд */
  .r8 .vc { padding: 18px 18px 8px; gap: 12px; border-radius: 18px; }
  .r8 .vc-title { font-size: 20px; }
  .r8 .vc-sum { font-size: 24px; box-shadow: inset 0 -.13em 0 var(--accent); border-radius: 1px; }
  .r8 .vc-badges { margin: -2px 0 -4px; }
  .r8 .vc-actions { flex-direction: column; align-items: stretch; gap: 0; padding-top: 0; }
  .r8 .vc-more { width: 100%; min-height: 44px; }
  .r8 .vc-want { justify-content: center; min-height: 40px; }
}

/* ===== Сторінка вакансії /vacancy/<ID> («паспорт вакансії» + розділи; розмітка — functions/_lib/html.js) =====
   Без важких карток: типографіка, тонкі розділювачі. Ставка й акцент ті самі, що в картках списку (.vc-pay / .vc-sum). */
.r8 .vp-article { max-width: 1100px; display: flex; flex-direction: column; gap: 0; }
.r8 .vp-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 14px; color: #1D3FE0; font-size: 15px; font-weight: 600; text-underline-offset: 3px; }
/* Перший екран: зліва (на телефоні зверху) вакансія, справа (на телефоні нижче) вибір способу зв’язку. */
.r8 .vp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 640px; padding-bottom: 8px; }
.r8 .vp-info { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-width: 0; }
.r8 .vp-loc { display: flex; align-items: center; gap: 6px; color: #44506E; font-size: 15px; font-weight: 500; line-height: 1.35; }
.r8 .vp-loc svg { flex: none; color: #1D3FE0; stroke: currentColor; }
.r8 .vp-h1 { margin: 0; font-family: 'Geologica', system-ui, sans-serif; font-weight: 550; font-size: clamp(30px, 8.4cqw, 44px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.r8 .vp-h1-long { font-size: clamp(25px, 6.8cqw, 36px); line-height: 1.14; }
.r8 .vp-h1-main { display: block; }
.r8 .vp-h1-sub { display: block; margin-top: 6px; font-family: 'Onest', system-ui, sans-serif; font-weight: 450; font-size: clamp(17px, 4.6cqw, 21px); line-height: 1.35; letter-spacing: 0; color: #44506E; text-wrap: pretty; }
.r8 .vp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r8 .vp-pay2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.r8 .vp-sum { font-family: 'Geologica', system-ui, sans-serif; font-weight: 600; font-size: clamp(40px, 11cqw, 56px); line-height: 1; letter-spacing: -.03em; color: #1D3FE0; overflow-wrap: anywhere; }
.r8 .vp-sum-long { font-size: clamp(26px, 7cqw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.r8 .vp-pre { font-size: 17px; color: #56617D; }
.r8 .vp-unit { font-size: clamp(17px, 4.6cqw, 20px); font-weight: 500; color: #3B4766; }
.r8 .vp-note { font-size: 13px; font-weight: 600; color: #44506E; padding: 1px 9px; border: 1px solid #CBD7EE; border-radius: 999px; align-self: center; }
.r8 .vp-checks { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 7px; }
.r8 .vp-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; line-height: 1.35; font-weight: 500; color: #1F2A4A; }
.r8 .vp-checks svg { flex: none; margin-top: 2px; }
.r8 .vp-sched { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 15px; line-height: 1.45; color: #0A1433; }
.r8 .vp-k { color: #56617D; }
.r8 .vp-sched-v { font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
/* «Важливо: …» лише коли в повному описі є рядок «Вимога: …»; без нього блоку й відступу немає. */
.r8 .vp-req { margin: 0; display: flex; align-items: flex-start; gap: 9px; padding: 7px 11px; border-radius: 10px; background: #FFF8EB; color: #5B3A06; font-size: 14.5px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.r8 .vp-req svg { flex: none; margin-top: 2px; }
.r8 .vp-contact { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.r8 .vp-contact-lbl { font-size: 15px; font-weight: 600; color: #0A1433; }
.r8 .vp-msg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.r8 .vp-msg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r8 .vp-msg-1 { grid-template-columns: minmax(0, 1fr); }
.r8 .vp-msg-a { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 66px; padding: 8px 4px; border-radius: 16px; background: #F6F8FD; border: 1.5px solid #D5DEF2; color: #0A1433; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; transition: background-color .15s ease; }
.r8 .vp-msg-a:hover { background: #EEF2FB; color: #0A1433; }
.r8 .vp-msg-a:active { background: #E8EEFA; }
.r8 .vp-msg-a:focus-visible { outline: 3px solid #0A1433; outline-offset: 3px; }
.r8 .vp-cta-btn { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 20px; border-radius: 14px; background: #1D3FE0; color: #fff; font-weight: 600; font-size: 17px; text-decoration: none; }
.r8 .vp-cta-btn:hover { color: #fff; }
.r8 .vp-others.vp-others-d { display: none; }
.r8 .vp-others.vp-others-m { align-self: flex-start; }
.r8 .vp-sec { border-top: 1px solid #E6ECF8; padding: 26px 0 8px; }
.r8 .vp-h2 { margin: 0 0 12px; font-family: 'Geologica', system-ui, sans-serif; font-weight: 500; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; }
.r8 .vp-p { margin: 0 0 12px; max-width: 66ch; font-size: 17px; line-height: 1.6; color: #26324F; white-space: pre-line; overflow-wrap: anywhere; }
.r8 .vp-list { margin: 0 0 12px; padding: 0 0 0 20px; max-width: 66ch; display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.5; color: #26324F; }
.r8 .vp-list li::marker { color: #1D3FE0; }
.r8 .vp-end { border-top: 1px solid #E6ECF8; margin-top: 18px; padding: 26px 0 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.r8 .vp-want { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 14px; background: #fff; border: 1.5px solid #1D3FE0; color: #1D3FE0; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.r8 .vp-others { color: #1D3FE0; font-size: 15px; font-weight: 600; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
@container r8 (max-width: 640px) {
  .r8 .vp-back { display: none; }
  .r8 .vp-main { padding-top: 14px !important; }
  .r8 .vp-info { gap: 10px; }
  .r8 .vp-checks { gap: 6px; }
  .r8 .vp-checks li { font-size: 16.5px; }
  .r8 .vp-req { font-size: 14px; }
  /* компактна шапка лише на сторінках вакансій (inline-стилі шапки перебиваються !important) */
  .r8 .hd-vac { padding: 0 16px !important; }
  .r8 .hd-vac > div { min-height: 56px !important; gap: 12px !important; }
  .r8 .hd-vac img { width: 40px !important; height: 40px !important; margin-right: 0 !important; }
  .r8 .hd-vac a[href="/"] { font-size: 14.5px !important; gap: 8px !important; }
  .r8 .vp-sec { padding-top: 22px; }
  .r8 .vp-p, .r8 .vp-list { font-size: 16px; }
  .r8 .vp-end { flex-direction: column; align-items: stretch; gap: 4px; padding-bottom: 16px; }
  /* менший відступ між «Переглянути інші вакансії» і початком блоку форми (inline-padding секцій перебивається !important) */
  .r8 .vp-main { padding-bottom: 24px !important; }
  .r8 .vp-apply { padding-top: 44px !important; }
  .r8 .vp-want { width: 100%; }
  .r8 .vp-others { justify-content: center; text-align: center; }
}

/* Вузькі телефони (360–400 px): перший екран трохи щільніший, щоб при банері cookies три кнопки месенджерів і «Залишити заявку» лишалися над ним. */
@container r8 (max-width: 400px) {
  .r8 .vp-h1 { font-size: clamp(27px, 7.8cqw, 30px); }
  .r8 .vp-h1-long { font-size: clamp(24px, 6.6cqw, 26px); }
  .r8 .vp-h1-sub { margin-top: 4px; font-size: 16px; }
  .r8 .vp-sum { font-size: 38px; }
  .r8 .vp-sum-long { font-size: 26px; }
  .r8 .vp-unit { font-size: 16px; }
  .r8 .vp-info { gap: 8px; }
  .r8 .vp-top { gap: 14px; }
  .r8 .vp-checks { gap: 4px; margin-top: 0; }
  .r8 .vp-checks li { font-size: 16px; line-height: 1.3; }
  .r8 .vp-sched { font-size: 14px; line-height: 1.35; }
  .r8 .vp-req { padding: 6px 10px; font-size: 13.5px; line-height: 1.35; }
  .r8 .vp-contact { gap: 10px; }
  .r8 .vp-msg { gap: 8px; }
  .r8 .vp-msg-a { min-height: 58px; gap: 4px; border-radius: 14px; font-size: 14.5px; }
  .r8 .vp-cta-btn { min-height: 50px; font-size: 16.5px; }
}

/* Компʼютер: інформація зліва, картка зв’язку справа. Картка sticky лише в межах першого блоку (.vp-top), тому нижні розділи вона не перекриває. */
@container r8 (min-width: 900px) {
  .r8 .vp-top { max-width: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 64px; align-items: start; padding-bottom: 12px; }
  .r8 .vp-h1 { font-size: 46px; }
  .r8 .vp-h1-long { font-size: 38px; }
  .r8 .vp-h1-sub { font-size: 21px; }
  .r8 .vp-sum { font-size: 60px; }
  .r8 .vp-sum-long { font-size: 38px; }
  .r8 .vp-info { gap: 12px; }
  .r8 .vp-contact { position: sticky; top: 108px; margin-top: 8px; padding: 24px; background: #fff; border: 1px solid #DFE7F7; border-radius: 22px; box-shadow: 0 8px 28px rgba(10, 20, 51, .06); }
  .r8 .vp-others.vp-others-m { display: none; }
  .r8 .vp-others.vp-others-d { display: inline-flex; margin-top: 6px; }
}

/* ===== Головна: підбір вакансії, «Як відбувається працевлаштування», «Як я допомагаю» (розмітка в index.html) =====
   Спокійніше: блок підбору — світлий, не синій банер; кроки й переваги — компактні рядки без великих карток. */
.r8 .help-sec { padding: clamp(28px, 3.6cqw, 52px) clamp(20px, 5cqw, 80px) 0; }
.r8 .help { max-width: 1200px; margin: 0 auto; background: #F3F7FE; border: 1px solid #DFE7F7; border-radius: clamp(18px, 2cqw, 24px); padding: clamp(20px, 2.2cqw, 28px) clamp(20px, 3cqw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px clamp(24px, 4cqw, 56px); }
.r8 .help-text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.r8 .help-h { margin: 0; font-family: 'Geologica', system-ui, sans-serif; font-weight: 500; font-size: clamp(21px, 2cqw, 26px); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.r8 .help-p { margin: 0; max-width: 560px; color: #44506E; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.r8 .help-cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 14px; background: #1D3FE0; color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.r8 .help-cta:hover { color: #fff; }

.r8 .hw-sec { padding: clamp(40px, 5cqw, 72px) clamp(20px, 5cqw, 80px) clamp(44px, 5.4cqw, 80px); }
.r8 .hw-wrap { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(18px, 2.2cqw, 28px); }
.r8 .hw-h { margin: 0; font-family: 'Geologica', system-ui, sans-serif; font-weight: 500; font-size: clamp(28px, 3.4cqw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.r8 .hw { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2cqw, 28px); }
.r8 .hw .step { border-top: 1px solid #C9D5EE; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.r8 .hw-n { font-family: 'Geologica', system-ui, sans-serif; font-weight: 500; font-size: clamp(26px, 2.6cqw, 34px); line-height: 1; color: #1D3FE0; }
.r8 .hw-t { font-family: 'Geologica', system-ui, sans-serif; font-weight: 500; font-size: clamp(17px, 1.5cqw, 19px); line-height: 1.3; text-wrap: balance; }

.r8 .ab-sec { padding: clamp(40px, 5cqw, 72px) clamp(20px, 5cqw, 80px) clamp(44px, 5.4cqw, 80px); }
.r8 .ab { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(16px, 3cqw, 48px); }
.r8 .ab-head { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.r8 .ab-h { margin: 0; font-family: 'Geologica', system-ui, sans-serif; font-weight: 500; font-size: clamp(26px, 3cqw, 40px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.r8 .ab-name { font-size: 17px; font-weight: 600; color: #0A1433; line-height: 1.35; }
.r8 .ab-role { font-size: 15px; color: #56617D; line-height: 1.4; }
.r8 .ab-list { flex: 1.7 1 480px; min-width: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0 clamp(20px, 2.6cqw, 36px); }
.r8 .ab-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid #DFE7F7; font-size: clamp(16px, 1.3cqw, 18px); line-height: 1.4; }
.r8 .ab-list li span:last-child { text-wrap: pretty; }
.r8 .ab-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #EAF1FF; flex: none; margin-top: 1px; }
@container r8 (max-width: 960px) {
  .r8 .hw { grid-template-columns: repeat(2, 1fr); gap: 4px clamp(20px, 4cqw, 40px); }
  .r8 .hw .step { flex-direction: row; align-items: baseline; gap: 16px; padding: 12px 0; }
  .r8 .hw-n { min-width: 28px; font-size: 26px; }
}
@container r8 (max-width: 640px) {
  .r8 .hw { grid-template-columns: 1fr; gap: 0; }
  .r8 .help { gap: 14px; }
  .r8 .help-cta { flex: 1 1 100%; min-height: 48px; }
  .r8 .ab-head { gap: 8px; }
  .r8 .ab-list li { padding: 12px 0; }
}