/* Шрифт заголовков лежит у нас, а не у Google.

   Прежде страница тянула его с fonts.gstatic.com, и каждый посетитель без
   спроса отдавал свой адрес третьей стороне. Для сайта с политикой
   приватности это обещание, которое мы сами же нарушали, а отвечать
   пришлось бы клиенту: в ЕС по такому поводу уже выносили решения.

   Заодно уходит внешнее соединение и одна зависимость при переезде.
   font-display: swap оставлен: пока файл идёт, заголовки видны системным
   шрифтом, а не пустым местом. Кириллицы в наборе нет, украинский и
   русский текст показывается запасным шрифтом, так было и раньше. */
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(shrift/QGYvz_MVcBeNP4NJuktqQ4E.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(shrift/QGYvz_MVcBeNP4NJtEtq.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;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(shrift/QGYvz_MVcBeNP4NJuktqQ4E.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(shrift/QGYvz_MVcBeNP4NJtEtq.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;
}

/* Onest: шрифт заголовков украинской версии. У Outfit нет кириллицы, и
   украинские заголовки шли запасным шрифтом. Файлы у нас, скачаны
   23.09.2026 с fonts.gstatic.com, лицензия OFL. */
@font-face{font-family:'Onest';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(shrift/onest-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(shrift/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:600 800;font-display:swap;
  src:url(shrift/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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:600 800;font-display:swap;
  src:url(shrift/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}

/* Общий стиль сайта WNR Group. Один файл на все страницы: правка цвета
   или отступа не размножается по копиям. */
:root{
  --bg:#ffffff; --surface:#f4f7f8; --surface-2:#e7eef0; --card:#ffffff;
  --line:#dde5e8; --line-strong:#bbc7cc;
  --ink:#1b232a; --ink-soft:#495663; --ink-faint:#5f6c77;
  --accent:#0d7377; --accent-hover:#0a5c5f; --accent-wash:#eefafa;
  --accent-border:#a6e5e6; --accent-glow:rgba(13,115,119,.18);
  --jasny:#60dddf;            /* светлая бирюза знака: только на тёмном */
  --cieply:#be185d; --cieply-wash:#fff1f5;
  --slab:#222b33; --on-slab:#e8eef2; --on-slab-soft:#a3aaaf;
  --ok:#15803d; --ok-wash:#f0fdf4;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-full:9999px;
  --shadow:0 3px 16px -3px rgba(18,58,58,.1);
  --shadow-lift:0 16px 36px -14px rgba(18,58,58,.24);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --font-head:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t:.18s cubic-bezier(.2,.8,.3,1);
}
/* Украинская версия: заголовки целиком Onest, латиница в них тоже, чтобы в
   одной строке не сходились два шрифта. Перевод ставит lang="uk". */
html:lang(uk){--font-head:'Onest',system-ui,-apple-system,"Segoe UI",sans-serif}

/* Говорим браузеру, что страница светлая. Без этого объявления мобильные
   браузеры с включённой тёмной темой выворачивают цвета сами, и делают это
   как умеют: серый текст на сером фоне, поля формы тёмные с тёмными
   буквами. Своей тёмной темы у сайта нет, и заявлять её нечестно. */
:root{color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Липкая шапка не должна съедать заголовок раздела при переходе по якорю */
[id]{scroll-margin-top:96px}
@media(max-width:760px){[id]{scroll-margin-top:150px}}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em;margin:0;font-family:var(--font-head);font-weight:800}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.band{padding:76px 0}
.band--surface{background:var(--surface)}
.band--slab{background:var(--slab);color:var(--on-slab)}

/* шапка */
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:14px;min-height:70px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo__img{display:block;height:48px;width:auto}
.top nav{display:flex;align-items:center;gap:0;margin-left:auto;flex-wrap:wrap}
.top nav a{padding:8px 7px;text-decoration:none;color:var(--ink-soft);
  font-size:.8rem;font-weight:600;letter-spacing:.01em;text-transform:uppercase;
  transition:var(--t);white-space:nowrap}
.top nav a:hover{color:var(--accent-hover)}
.tel{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:var(--r-full);
  background:var(--accent);color:#fff;font-weight:700;text-decoration:none;font-size:.95rem;
  transition:var(--t);white-space:nowrap}
.tel:hover{background:var(--accent-hover)}
.langs{display:flex;gap:1px;background:var(--surface-2);padding:3px;border-radius:var(--r-full)}
/* С 23.09.2026 переключатель языков — ссылки на отдельные адреса /ua/ и
   /en/, а не кнопки скрипта: поиск должен видеть каждую версию по своему
   адресу. Правила пишутся на оба вида, чтобы кнопка, если где-то осталась,
   выглядела так же. Текущий язык у ссылки помечен aria-current. */
.langs :is(button,a){border:0;background:none;font:700 .8rem var(--font);color:var(--ink-soft);
  padding:7px 11px;cursor:pointer;transition:var(--t);min-height:34px;text-transform:uppercase}
.langs a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border-radius:var(--r-full)}
.langs :is(button,a):hover{color:var(--ink)}
.langs :is(button[aria-pressed="true"],a[aria-current]){background:#fff;color:var(--accent-hover);box-shadow:var(--shadow)}
.langs :is(button[aria-pressed="true"],a[aria-current]):hover{background:var(--accent-wash)}
/* Подсказка для браузера на украинском или русском на польской странице:
   строка со ссылкой под шапкой, не всплывающее окно. */
.jezyk-podskazka{margin:0;padding:8px 16px;text-align:center;font-size:.9rem;
  background:var(--accent-wash);border-bottom:1px solid var(--line, rgba(0,0,0,.08))}
.jezyk-podskazka a{color:var(--accent-hover);font-weight:700}

/* С 23.09.2026 широкий экран держит шапку в два яруса: меню отдельной
   строкой под знаком и телефоном (блок «меню по пункту 26 ТЗ» в конце
   файла). Запрет переноса у самого меню сняли ещё 22.09.2026: при
   увеличении шрифта до 200 процентов — так делают люди с ослабленным
   зрением — пункты не помещались в строку, и последний уходил за край,
   давая горизонтальную прокрутку на 151 px. Ширина окна при этом обычная,
   поэтому проверка на узких экранах беду не показывала. Пункты при
   нехватке места переносятся и теперь. */
/* Шапка перестраивается раньше: на 768 ряд ссылок вылезал за край. */
@media(max-width:1200px){
  .top__in{flex-wrap:wrap;min-height:auto;padding-top:10px;padding-bottom:10px;gap:10px}
  .top nav{order:3;width:100%;margin-left:0;gap:0;flex-wrap:wrap}
  .top nav a{padding:7px 8px;font-size:.8rem}
  .tel{margin-left:auto}
}

/* кнопка меню: только на узком экране */
.menu-knopka{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-strong);
  border-radius:var(--r-md);background:var(--card);cursor:pointer;padding:11px 10px;
  flex-direction:column;justify-content:space-between;transition:var(--t)}
.menu-knopka span{display:block;height:2px;background:var(--ink);border-radius:2px}
.menu-knopka:hover{border-color:var(--accent);background:var(--accent-wash)}
@media(max-width:1200px){
  .menu-knopka{display:flex}
  .top nav{display:none}
  .top nav.nav--otwarte{display:flex;flex-direction:column;align-items:flex-start;
    order:4;width:100%;gap:0;padding-top:6px;border-top:1px solid var(--line)}
  .top nav.nav--otwarte a{width:100%;padding:12px 4px;font-size:.92rem;
    border-bottom:1px solid var(--line)}
  .top nav.nav--otwarte a:last-child{border-bottom:0}
}

/* первый экран */
.hero{padding:64px 0 0;background:var(--slab);color:var(--on-slab)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:start}
.eyebrow{display:inline-block;padding:6px 12px;border:1px solid rgba(255,255,255,.28);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jasny)}
h1{font-size:clamp(2.3rem,4vw,3.5rem);margin:20px 0 0;max-width:15ch;color:#fff}
.hero__lede{margin-top:18px;font-size:1.1rem;color:#c8ccd2;max-width:54ch}
.hero__claim{margin-top:14px;font:800 1.05rem var(--font-head);color:var(--jasny);letter-spacing:-.01em}
.gates{display:grid;gap:12px;margin-top:8px}
.gate{display:block;text-decoration:none;padding:26px 24px;transition:var(--t);
  background:#fff;color:var(--ink);border-radius:var(--r-lg);border-left:5px solid var(--accent)}
.gate:hover{transform:translateX(3px)}
.gate__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint)}
.gate h2{font-size:1.5rem;margin-top:7px}
.gate p{margin-top:9px;color:var(--ink-soft);font-size:.96rem}
.gate__go{margin-top:16px;display:inline-block;font-weight:700;color:var(--accent-hover)}
.hero__quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px;padding-bottom:26px}
.hero__quick a{padding:9px 16px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.26);text-decoration:none;
  font-size:.9rem;font-weight:600;color:#e6e8eb;transition:var(--t)}
.hero__quick a:hover{border-color:var(--jasny);color:var(--jasny)}

/* Снимок стоит в сетке с 23.09.2026. Прежде он шёл лентой от края до края
   окна (16:6, не выше 380 px): на ноутбуке 1425×380, на телефоне 375×141,
   и на ленте ничего не разобрать. Острых углов вне сетки на сайте больше
   не было ни у чего. Теперь края снимка совпадают с краями текста, углы
   скруглены, как у карточек. Раскладка по ширинам описана в блоке
   «снимки в сетке» в конце файла. */
.shot{margin:0;padding:0}
.shot img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r-lg);aspect-ratio:4/3}

/* полоса направлений */
.kier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kier__i{background:var(--card);padding:26px 22px}
.kier__i b{display:block;font:800 1.08rem var(--font-head);letter-spacing:-.01em}
.kier__i span{display:block;margin-top:6px;font-size:.93rem;color:var(--ink-soft)}

.kier__i b{color:var(--accent-hover)}

h2.section{font-size:clamp(1.7rem,2.8vw,2.3rem)}
.sub{margin-top:12px;color:var(--ink-soft);max-width:64ch}

/* две аудитории */
.audy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin-top:34px}
.aud{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px}
.aud h3{font-size:1.35rem}
.aud p{margin-top:12px;color:var(--ink-soft)}
.aud ul{margin:16px 0 0;padding-left:20px;color:var(--ink-soft);font-size:.97rem}
.aud li{margin:6px 0}
.btn{display:inline-block;margin-top:22px;padding:14px 28px;border-radius:var(--r-full);background:var(--accent);
  color:#fff;text-decoration:none;font-weight:700;transition:var(--t);cursor:pointer;
  font-size:1rem;font-family:var(--font);line-height:1.4;text-align:center;
  /* Рамка прозрачная, но есть: у кнопки с обводкой она видимая, и без
     этого залитая кнопка рядом с ней выходила на 2 px ниже. */
  border:1px solid transparent}
.btn:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn--ghost:hover{background:var(--surface-2);color:var(--ink)}

/* почему мы */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:34px}
.why__i b{display:block;font:800 1.12rem var(--font-head);color:var(--ink)}
.why__i span{display:block;margin-top:8px;color:var(--ink-soft);font-size:.96rem}
.why__i{border-top:3px solid var(--cieply);padding-top:16px}

/* шаги */
.kroki{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:34px}
.krok h3{font-size:1.15rem;margin-bottom:16px}
.krok ol{margin:0;padding-left:22px;color:var(--ink-soft)}
.krok li{margin:9px 0}
.krok li b{color:var(--ink)}

/* дополнительные услуги */
.uslugi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:30px}
.usluga{background:var(--card);padding:24px 22px}
.usluga b{display:block;font:800 1.04rem var(--font-head)}
.usluga span{display:block;margin-top:7px;color:var(--ink-soft);font-size:.94rem}

/* калькулятор заработка: слева поля, справа итог крупно */
.kalk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;margin-top:30px;align-items:start}
.kalk__pola{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.kalk__wynik{background:var(--slab);color:var(--on-slab);border-radius:var(--r-lg);padding:30px 28px}
.kalk__brutto{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.16)}
.kalk__brutto span{color:#b7c7cc;font-size:.94rem}
.kalk__brutto b{font:700 1.2rem var(--font-head)}
.kalk__netto{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}
.kalk__netto span{color:var(--jasny);font-size:1rem;font-weight:600}
.kalk__netto b{font:800 2.1rem var(--font-head);color:#fff;letter-spacing:-.02em}
.kalk__rozbicie{margin-top:16px;color:#9fb3b9;font-size:.88rem;line-height:1.7}
@media(max-width:860px){.kalk{grid-template-columns:1fr}}

/* вакансии */
.oferty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.oferta{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;border-top:4px solid var(--accent);display:flex;flex-direction:column}
/* Заголовку даём высоту двух строк. Названия вакансий пишет клиент, и
   первое же длинное разводит ряд лесенкой: ставка, список и всё под ними
   встают на разной высоте. Кнопка прижата к низу и не страдает, а середина
   карточки расходилась на 20 px. Проверено подстановкой длинного названия:
   с этим правилом ряд остаётся ровным. */
.oferta h3{font-size:1.18rem}
.oferta__stawka{margin-top:12px;font:800 1.5rem var(--font-head);color:var(--cieply)}
.oferta__stawka span{font:600 .84rem var(--font);color:var(--ink-faint);display:block}
/* Сумма на руки. Ставка в объявлении и деньги в кошельке расходятся на
   четверть, и человек, который считает, уходит считать на сторонний сайт.
   Поэтому цифра стоит прямо под ставкой — спокойнее её по размеру, но
   различима: это ответ на главный вопрос кандидата. */
/* Уведомление под быстрой формой: закон требует сказать, что будет с
   номером, но говорить это надо тихо — крупная плашка о данных пугает
   сильнее, чем успокаивает. */
/* Цвет тихого текста НА ТЁМНОЙ подложке. Здесь стоял --ink-faint —
   приглушённый цвет светлой темы, и на тёмном блоке .szybko он давал
   контраст 2,67 при норме 4,5: сноска о персональных данных читалась
   хуже всего остального на странице. Тот же род ошибки, что с заливкой
   полосы цветом текста. */
.szybko__rodo{margin:10px 0 0;font-size:.82rem;line-height:1.45;
  color:var(--on-slab-soft)}
.szybko__rodo a{color:inherit;text-decoration:underline;
  text-underline-offset:2px}
/* Дата размещения. Обещание «список меняется каждую неделю» нечем было
   подтвердить: кандидат, видевший мёртвые доски объявлений, не верит на
   слово. Ставим тихо — это подпись, а не заголовок. */
.oferta__data{margin-top:4px;font-size:.8rem;color:var(--ink-faint)}
.oferta__data:empty{display:none}
.oferta__netto{margin-top:6px;font-size:.95rem;color:var(--ink-soft);
  line-height:1.45}
.oferta__netto:empty{display:none}
.oferta__netto b{font-weight:700;color:var(--ink)}
.oferta__netto span{color:var(--ink-faint)}
.oferta__netto a{color:var(--cieply);text-decoration:underline;
  text-underline-offset:2px}
.oferta ul{margin:16px 0 0;padding-left:18px;color:var(--ink-soft);font-size:.95rem}
.oferta li{margin:5px 0}
.oferta .btn{margin-top:auto;align-self:flex-start}
.oferta--pusta{border-top-color:var(--cieply);background:var(--cieply-wash)}
.oferta--pusta p{margin-top:12px;color:var(--ink-soft);font-size:.95rem}
/* Фильтры вакансий: панель строит filtry.js, и только когда карточек
   больше пяти. Карточка, не прошедшая фильтр, получает hidden — а у
   .oferta свой display:flex, который атрибут hidden перебивал бы. */
.oferta[hidden]{display:none}
.filtry{margin-top:28px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px 22px}
.filtry__przelacz{display:none}
.filtry__pola{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px}
.filtry__pole{display:block;font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.filtry__pole select{min-height:44px;margin-top:6px;padding:9px 11px;font-size:.95rem}
.filtry__dol{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.filtry__wynik{margin:0;font-weight:700;color:var(--ink)}
.filtry__reset{min-height:44px;padding:0 16px;border:1px solid var(--line-strong);
  border-radius:var(--r-full);background:var(--card);color:var(--ink);font:600 .92rem var(--font);
  cursor:pointer}
.filtry__reset:hover:not(:disabled){background:var(--surface-2)}
.filtry__reset:disabled{opacity:.55;cursor:default}
.filtry + .filtry__nic{margin-top:18px}
.filtry__nic{margin:18px 0 0;padding:14px 16px;border-radius:var(--r-md, 10px);
  background:var(--cieply-wash);color:var(--ink)}
.filtry ~ .oferty{margin-top:22px}
@media(max-width:980px){.filtry__pola{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Телефон: восемь полей над списком заслонили бы сами вакансии, поэтому
   панель свёрнута под одну кнопку и раскрывается по нажатию. */
@media(max-width:620px){
  .filtry{padding:0;border:0;background:none}
  .filtry__przelacz{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;
    border:1px solid var(--line-strong);border-radius:var(--r-full);background:var(--card);
    color:var(--ink);font:700 1rem var(--font);cursor:pointer}
  .filtry__przelacz::after{content:"";width:8px;height:8px;margin-left:10px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
  .filtry--otwarte .filtry__przelacz::after{transform:translateY(2px) rotate(-135deg)}
  .filtry__panel{display:none;margin-top:12px;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:16px}
  .filtry--otwarte .filtry__panel{display:block}
  .filtry__pola{grid-template-columns:1fr}
}

/* команда */
.zespol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:30px;max-width:840px}
.osoba{display:flex;gap:16px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.osoba__foto{width:60px;height:60px;flex:0 0 auto;border-radius:var(--r-full);
  background:var(--accent-wash);color:var(--accent-hover);border:2px solid var(--accent-border);
  display:grid;place-items:center;font:700 1.5rem var(--font-head)}
.osoba b{display:block;font:800 1.06rem var(--font-head)}
.osoba span{display:block;margin-top:4px;color:var(--ink-soft);font-size:.92rem}
@media(max-width:980px){.oferty{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.zespol{grid-template-columns:1fr}}
@media(max-width:620px){.oferty{grid-template-columns:1fr}}

/* правила работы: четыре плитки на тёмной полосе */
.zasady{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:28px}
.zas{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:22px 24px}
.zas b{display:block;font:800 1.04rem var(--font-head);color:#fff}
.zas span{display:block;margin-top:8px;color:#cfe0dd;font-size:.95rem}
@media(max-width:820px){.zasady{grid-template-columns:1fr}}

/* доверие */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
@media(max-width:1100px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.trust{grid-template-columns:1fr}}
.trust__co{display:block;font-size:.84rem;color:var(--ink-faint);margin-bottom:6px}
.trust__plat{margin-top:26px;padding:18px 22px;border-radius:0 var(--r-lg) var(--r-lg) 0;
  background:rgba(255,255,255,.06);border-left:3px solid var(--jasny);
  color:#fff;font-size:1rem;max-width:74ch}
.trust div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.trust b{display:block;font:800 1.18rem var(--font-head);color:var(--ink)}


/* контакт и формы */
.kontakt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;margin-top:30px}
.tabs{display:flex;gap:1px;background:var(--line);border:1px solid var(--line)}
.tabs button{flex:1;border:0;background:var(--surface);padding:15px 12px;cursor:pointer;
  font:700 .98rem var(--font);color:var(--ink-soft);transition:var(--t);min-height:52px}
.tabs button:hover{background:var(--surface-2);color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--card);color:var(--cieply);
  box-shadow:inset 0 -3px 0 var(--cieply)}
.tabs button[aria-selected="true"]:hover{background:var(--card);color:var(--accent)}
.form{background:var(--card);border:1px solid var(--line);border-top:0;padding:26px}
label{display:block;font-weight:700;font-size:.88rem;margin-top:15px}
input,select,textarea{width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line-strong);
  font:inherit;background:#fff;color:var(--ink);min-height:46px;border-radius:var(--r-sm)}
textarea{min-height:92px;resize:vertical}
.zgoda{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:.86rem;
  color:var(--ink-soft)}
.zgoda input{width:22px;height:22px;min-height:22px;margin:2px 0 0;flex:0 0 auto}
/* Подсказка под полем «Dokumenty do legalnej pracy» (разбор 23.09.2026) */
.pole-opis{margin:6px 0 0;font-size:.84rem;line-height:1.45;color:var(--ink-soft)}
/* Ссылка на uodo.gov.pl в тёмном блоке политики: цвет текста блока, подчёркнута */
.zas .zas__link{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Ссылка «Sprawdź dojazd» на странице вакансии: цвет ссылок-стрелок сайта */
.oferta-dojazd{margin:10px 0 0}
.oferta-dojazd a{font-weight:700;color:var(--accent-hover);text-underline-offset:3px}
button.send{margin-top:20px;width:100%;padding:16px;border:0;border-radius:var(--r-full);background:var(--accent);
  color:#fff;font:700 1.02rem var(--font);cursor:pointer;transition:var(--t);min-height:54px}
button.send:hover{background:var(--accent-hover)}
.dane{display:grid;gap:18px;align-content:start}
.dane div b{display:block;font:800 1rem var(--font-head)}
.dane div span,.dane div a{color:var(--ink-soft);text-decoration:none}
.dane div a:hover{color:var(--accent-hover)}
.msgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
/* Ссылка в мессенджер выглядела пустым полем ввода: прямые углы и серый
   текст в тонкой рамке, а всё вокруг скруглено. Человек видел строку
   «Komunikatory» и под ней будто бы поле, которое нечем заполнить.
   Скругление и цвет возвращают ей вид кнопки. */
.msgs a{padding:9px 16px;border:1px solid var(--accent);border-radius:var(--r-full);
  text-decoration:none;color:var(--accent-hover);
  font-weight:600;font-size:.9rem;transition:var(--t);min-height:40px;display:inline-flex;
  align-items:center}
.msgs a:hover{background:var(--accent);color:#fff}

footer{background:var(--slab);color:#a7adb5;padding:36px 0 44px;font-size:.9rem}
.foot{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline}
.foot b{color:#e6e8eb}
.foot__legal{margin-top:14px;max-width:80ch;line-height:1.6}


/* липкая полоса действий на телефоне: аудитория звонит и пишет, а не читает */
.pin{display:none}
@media(max-width:760px){
  .pin{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;gap:8px;padding:9px 12px;
    background:rgba(255,255,255,.97);border-top:1px solid var(--line);
    box-shadow:0 -4px 18px -8px rgba(22,24,29,.3)}
  .pin a{flex:1;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
    gap:8px;text-decoration:none;font-weight:700;font-size:.92rem}
  .pin__tel{background:var(--accent);color:#fff;border-radius:var(--r-full)}
  .pin__wa{background:#0e7a4f;color:#fff;border-radius:var(--r-full)}
  .pin__form{background:var(--cieply);color:#fff;border-radius:var(--r-full)}
  body{padding-bottom:86px}
  .hero{padding-bottom:12px}
}

@media(max-width:980px){
  .hero__grid,.audy,.kontakt,.kroki{grid-template-columns:1fr}
  .kier,.why{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .uslugi{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:760px){
  /* Вертикальные отступы задаём порознь. Сокращённая запись padding:10px 0
     стирала боковые поля обёртки: элемент несёт классы wrap и top__in
     разом, и второе правило перебивало первое. В полосе от 621 до 760 px
     логотип и телефон стояли вплотную к краям экрана на всех десяти
     страницах. Прокрутки при этом нет, ничего не обрезано, и проверка на
     привычных 768 и 375 беду не показывала: она живёт между ними. */
  .top__in{flex-wrap:wrap;min-height:auto;padding-top:10px;padding-bottom:10px;gap:10px}
  .top nav{order:3;width:100%;margin-left:0;gap:0}
  .top nav a{padding:7px 8px;font-size:.8rem}
  /* прятать пункты нельзя: с телефона переставал открываться раздел контактов */
  .tel{margin-left:auto}
}
@media(max-width:620px){
  body{font-size:16px}
  .band{padding:52px 0}
  .hero{padding:40px 0 0}
  .wrap{padding:0 16px}
  h1{font-size:2.15rem;max-width:none}
  .kier,.why,.uslugi{grid-template-columns:1fr}
  .langs :is(button,a){padding:7px 9px;font-size:.76rem}
}

/* Текущая страница в меню: подчёркивание акцентом, а не жирность —
   жирный пункт прыгает по ширине и сдвигает соседей. */
#glowneMenu a.menu--tu {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Ссылка на политику рядом с согласием: мелко, но кликабельно —
   палец на телефоне промахивается по строчному тексту. */
.zgoda__link {
  display: inline-block;
  margin-left: .35rem;
  padding: .15rem 0;
  font-size: .85rem;
  color: var(--muted);
  text-decoration: underline;
}
.zgoda__link:hover { color: var(--accent); }

/* Примечание под сеткой: не продолжение текста, а отдельная оговорка.
   Полоса слева отделяет её от карточек, иначе абзац висит хвостом. */
.nota{
  margin-top:34px;
  padding:16px 20px;
  border-left:3px solid var(--accent);
  background:var(--surface);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink-soft);
  font-size:.97rem;
  max-width:none;
}
.band--slab .nota{background:rgba(255,255,255,.06);border-left-color:var(--jasny);color:var(--on-slab)}
/* Приглушённый текст на тёмной полосе брал светло-серый цвет и терялся. */
.band--slab .sub{color:var(--on-slab)}

/* Карточка-ссылка в сетке услуг: отклик на наведение обязателен, иначе
   человек не догадается, что плитка кликается. */
.usluga--link{display:block;text-decoration:none;color:inherit;transition:background .18s ease,border-color .18s ease}
.usluga--link b::after{content:" →";color:var(--accent);opacity:0;transition:opacity .18s ease}
.usluga--link:hover{background:var(--surface)}
.usluga--link:hover b::after{opacity:1}
.usluga--link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* кнопка у нижнего края карточки */
.aud,.oferta{display:flex;flex-direction:column}
.aud .btn,.oferta .btn,.aud .send,.oferta .send{margin-top:auto;align-self:flex-start}
.aud > :last-child,.oferta > :last-child{margin-bottom:0}
/* У самой высокой карточки ряда свободного места нет, и margin-top:auto
   давал ноль: кнопка прилипала к тексту, а в соседнем языке, где карточка
   ниже, отступ был. Наименьший отступ держит текст перед первой кнопкой. */
.aud > :not(.btn):has(+ .btn),.oferta > :not(.btn):has(+ .btn){margin-bottom:22px}
/* Вторая кнопка стоит под первой вплотную по ритму, а не делит с ней
   свободное место карточки. */
.aud .btn + .btn,.oferta .btn + .btn{margin-top:12px}
/* На телефоне кнопки в карточке во всю ширину: одного размера при любой
   длине надписи, и короткая «Zgłoś się» не выглядит овалом. */
@media(max-width:560px){
  /* Поля уже, чем на ноутбуке: во всю ширину они не нужны, а при 28 px
     «How we work with companies →» переносилась, и кнопка вырастала до 75 px. */
  .aud .btn,.oferta .btn{align-self:stretch;padding-left:16px;padding-right:16px}
}

/* Шапка раздела: заголовок слева, вводный абзац справа.
   Прежде абзац висел под заголовком узкой колонкой, и правая половина
   полосы пустовала — на широком экране это бросалось в глаза первым.

   Выравнивание по нижней линии, стоявшее здесь до 22.09.2026, эту беду
   сменило на другую: заголовок в две строки выше абзаца, и при общем низе
   абзац всплывал на 41 px выше заголовка. Читались они как два несвязанных
   куска, и владелец назвал кривыми пять полос подряд.

   Теперь выравниваем по первой строке. Одного общего верха мало: заголовок
   набран крупно с плотной строкой (36,8/40,5), абзац мельче и просторнее
   (17/27,2), и базовые линии расходятся на 13 px. Отступ считаем той же
   формулой, что и кегль заголовка, иначе на средних ширинах он разъедется
   снова. */
.shapka{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:10px 52px;
  align-items:start;
}
.shapka .sub{max-width:58ch;margin-top:clamp(4px,.9vw,13px)}
@media(max-width:1000px){
  .shapka{grid-template-columns:1fr;gap:12px;align-items:start}
  .shapka .sub{max-width:64ch;margin-top:0}
}

/* Над формой видно, на какую вакансию откликаются: без этого человек
   заполняет поля и не понимает, дошло ли, что он выбрал. */
.wybrana{
  margin:0 0 4px;padding:12px 16px;
  background:var(--surface);border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.95rem;
}
.wybrana b{font-family:var(--font-head)}

.zgoda{flex-wrap:wrap;align-items:flex-start}
.zgoda__link{flex-basis:100%;margin-left:0;padding-left:1.9rem}

/* Вопросы и ответы. Без стилей браузер рисует голый список с треугольником:
   владелец увидел одни заголовки и спросил, где ответы. Значит вид должен
   сам говорить, что строка раскрывается. */
.qa{display:grid;gap:12px;margin-top:30px}
.qa details{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .18s ease;
}
.qa details:hover{border-color:#c3d2d7}
.qa details[open]{border-color:var(--accent)}
.qa summary{
  cursor:pointer;
  list-style:none;
  padding:18px 58px 18px 22px;
  font:600 1.05rem/1.45 var(--font-head);
  color:var(--ink);
  position:relative;
}
.qa summary::-webkit-details-marker{display:none}
/* Знак справа: плюс у закрытого вопроса, минус у раскрытого. */
.qa summary::after{
  content:"";
  position:absolute;right:22px;top:50%;
  width:14px;height:2px;background:var(--accent);
  transform:translateY(-50%);
}
.qa summary::before{
  content:"";
  position:absolute;right:28px;top:50%;
  width:2px;height:14px;background:var(--accent);
  transform:translateY(-50%);
  transition:opacity .18s ease,transform .18s ease;
}
.qa details[open] summary::before{opacity:0;transform:translateY(-50%) rotate(90deg)}
.qa summary:hover{background:var(--surface)}
.qa summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.qa details[open] summary{border-bottom:1px solid var(--line)}
.qa details p{margin:0;padding:18px 22px 22px;color:var(--ink-soft);line-height:1.62}
.band--slab .qa details{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
.band--slab .qa summary{color:var(--on-slab)}
.band--slab .qa details p{color:#c9d6dd}
@media(max-width:560px){
  .qa summary{padding:16px 48px 16px 16px;font-size:1rem}
  .qa details p{padding:14px 16px 18px}
}

/* Логотип не сжимается меню. Восемь пунктов в шапке отбирали место у знака:
   на польском он ужимался до 67 px, на английском до 32, на украинском
   пропадал совсем. Знак фирмы исчезать не имеет права. */
.logo{flex:0 0 auto}
.logo__img{flex-shrink:0}
#glowneMenu{min-width:0}

/* Нечётная последняя карточка в сетке из двух колонок занимает весь ряд:
   иначе тройка карточек на планшете даёт висячую третью. */
@media(min-width:561px) and (max-width:1000px){
  .uslugi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .uslugi > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media(min-width:621px) and (max-width:980px){
  .oferty > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media(max-width:560px){
  .uslugi{grid-template-columns:1fr}
}

/* Четыре карточки в три колонки дают одинокую четвёртую во втором ряду.
   Раскладываем их по две: два ровных ряда вместо трёх плюс сирота. */
@media(min-width:1001px){
  .uslugi:has(> :nth-child(4):last-child),
  .oferty:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Быстрый отклик: два поля в строку. Кандидату со смены проще оставить
   номер, чем искать файл резюме в телефоне. */
.szybko{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:22px 32px;align-items:center;
  margin-top:26px;padding:24px 26px;
  background:var(--slab);color:var(--on-slab);border-radius:var(--r-lg);
}
.szybko__tekst b{display:block;font:800 1.22rem var(--font-head);margin-bottom:6px}
.szybko__tekst span{color:#c9d6dd;font-size:.98rem}
.szybko__form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.szybko__pole{display:block;font-size:.8rem;color:#c9d6dd}
.szybko__pole span{display:block;margin-bottom:6px}
.szybko__pole input{
  width:100%;padding:13px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);
  color:#fff;font:inherit;
}
.szybko__pole input::placeholder{color:#8fa3ad}
.szybko__pole input:focus-visible{outline:2px solid var(--jasny);outline-offset:1px}
.szybko__form .send{height:47px;white-space:nowrap}
/* Критик 23.09.2026, № 2: строка-пояснение звёздочки вставляется перед
   кнопкой (formularz.js), а szybko__form — сетка в три колонки на широком
   экране (1280–1440); без этого правила нота вставала третьей колонкой в
   первой строке сетки и сталкивала саму кнопку на отдельную строку.
   Тот же приём, что уже стоит у .send на узком экране: во всю ширину. */
.szybko__form .pole-wymagane-nota{grid-column:1 / -1}
@media(max-width:900px){
  .szybko{grid-template-columns:1fr;gap:18px}
  .szybko__form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .szybko__form .send{grid-column:1 / -1}
}
@media(max-width:520px){.szybko__form{grid-template-columns:1fr}}

/* Примечание на светлой полосе: когда полоса сама светлая, плашка того же
   цвета исчезает. Даём ей белый фон и тонкую рамку. */
.band--surface .nota{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent)}
.band .nota{border:1px solid var(--line);border-left:3px solid var(--accent)}
.band--slab .nota{border-color:rgba(255,255,255,.18);border-left-color:var(--jasny)}

/* Полоса направлений: та же обёртка, что у прочих разделов, но без большого
   воздуха сверху и снизу. На главной она идёт сразу за первым экраном, и с
   23.09 (круг 4) панорама Варшавы стоит в ней справа от фразы клиента:
   тогда сверху поле обычной полосы. Прежде снимок шёл над фразой, и без
   отступа фраза читалась подписью к нему (владелец, 23.09). */
.band--tight{padding-top:0;padding-bottom:0}
.band--tight .kier{margin:0}
.band--tight:has(.shapka--foto){padding-top:76px}
@media(max-width:620px){.band--tight:has(.shapka--foto){padding-top:52px}}
@media(max-width:900px){.kier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.kier{grid-template-columns:1fr}}

/* Шаги в ряд: номер в кружке, порядок читается слева направо. */
.kroki--rzad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:34px}
.krok-k{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 20px;
}
.krok-k__nr{
  display:grid;place-items:center;width:34px;height:34px;
  border-radius:var(--r-full);background:var(--accent);color:#fff;
  font:800 1rem var(--font-head);
}
.krok-k b{display:block;font-family:var(--font-head);margin-bottom:5px}
.krok-k span{color:var(--ink-soft);font-size:.95rem;line-height:1.55}
@media(max-width:1000px){.kroki--rzad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kroki--rzad{grid-template-columns:1fr}}

/* Поле выбора файла: системная кнопка внутри рамки выглядела чужой.
   Прячем её вид и рисуем свою. */
.form input[type="file"]{
  padding:9px 12px;font-size:.92rem;color:var(--ink-soft);
}
.form input[type="file"]::file-selector-button{
  margin-right:12px;padding:8px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
  font:600 .88rem var(--font);cursor:pointer;
}
.form input[type="file"]::file-selector-button:hover{background:var(--card);border-color:var(--accent)}

/* Своя кнопка выбора файла CV (критик, пункт «Потом» дописан 23.09.2026).
   Правило выше красит СИСТЕМНУЮ кнопку файла, но не может изменить её
   надпись: браузер пишет «Przeglądaj…»/«Choose File» на своём языке, а не
   на языке сайта. Здесь input не показан (opacity:0, во всю область), а
   кнопку и имя файла рисуют два span; вид — тот же приём (рамка, скругление,
   серый фон), что и у ::file-selector-button выше, чтобы поле не сменило
   облик. Правило выше можно будет снять, когда вёрстка сверит остальные
   поля с этим видом — не убираю его сам без спроса. */
.cv-pole{position:relative;display:flex;align-items:center;gap:12px;
  margin-top:6px;min-height:48px;padding:11px 12px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff}
.cv-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  opacity:0;cursor:pointer}
.cv-btn{flex:0 0 auto;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:600 .88rem var(--font)}
.cv-nazwa{color:var(--ink-soft);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cv-pole:hover .cv-btn{background:var(--card);border-color:var(--accent)}

/* Поля одной формы обязаны быть одной высоты: телефон был на 4 px выше
   из-за подсказки внутри. */
.form input, .form select, .form textarea{min-height:48px}
.form textarea{min-height:120px}

/* Карточки с крупной ценой: у третьей числа нет, и она смотрелась чужой.
   Выравниваем заголовки по одной линии. */
.oferta h3{min-height:2.6em}
@media(max-width:620px){.oferta h3{min-height:0}}

/* Меню плотнее: семь пунктов на украинском длиннее польских на четверть,
   и при прежнем кегле они заезжали под переключатель языков. С 23.09
   кегль и поля пунктов на широком экране задаёт блок «меню по пункту 26
   ТЗ»; здесь остаётся раскрытое меню узкого экрана. */
#glowneMenu a{font-size:.83rem;padding-left:9px;padding-right:9px;letter-spacing:-.01em}
@media(min-width:1201px){
  .top__in{gap:10px}
}

/* --- пакет правок критика вида, 22.09.2026 --- */

/* 3. Согласие: галочка и подпись в одну строку, ссылка следом. */
.zgoda{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.zgoda > label{flex:1 1 240px}
.zgoda__link{flex-basis:auto;margin-left:0;padding-left:0}

/* 4. Две карточки не должны стоять в сетке на три колонки. На узком экране
   по-прежнему одна: две туда не влезают и дают горизонтальную прокрутку. */
.zespol{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
@media(max-width:760px){.zespol{grid-template-columns:1fr}}

/* 6. Плашка на тёмной полосе во всю ширину, как соседние. */
.trust__plat{max-width:none}

/* 8. Карточки не растягиваются до общей высоты: в короткой зияла пустота. */


/* 13. Ключевое число в карточке везде одного вида. */
.oferta__stawka{font:800 1.75rem var(--font-head);color:var(--cieply);line-height:1.15}
.oferta__stawka span{display:block;font:400 .9rem var(--font);color:var(--ink-soft);margin-top:4px}

/* 23. Обводка фокуса в цвете сайта, а не системная чёрная. */
:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:2px solid var(--accent-hover);outline-offset:2px;border-radius:var(--r-sm);
}

/* 24. Один радиус у карточек и у блоков вопросов. */
.qa details{border-radius:var(--r-lg)}

/* 25. Один просвет у сеток из четырёх. */
.why,.kier{gap:22px}
.kier{gap:1px}

/* 10–11. Шапка на узком экране: кнопка и языки к правому краю, у открытого
   меню такое же поле, как у остального содержимого. */
@media(max-width:1200px){
  .menu-knopka{order:2}
  .langs{order:3;margin-left:auto}
  .tel{order:4}
  .top nav.nav--otwarte a{padding-left:0;padding-right:0}
}

/* 16. Разрыв списка шагов на телефоне: один просвет на весь список. */
@media(max-width:560px){.kroki--rzad{gap:14px}}

/* Открытое меню: три полоски складываются в крестик. */
.menu-knopka span{transition:transform .18s ease,opacity .18s ease}
.menu-knopka--x span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-knopka--x span:nth-child(2){opacity:0}
.menu-knopka--x span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.menu-knopka--x{border-color:var(--accent)}

/* Цифра в кружке шага: общее правило «.krok-k span» красило её в серый,
   и белая по замыслу цифра оказалась графитовой на бирюзовом фоне. */
.krok-k .krok-k__nr{color:#fff;font-size:1.05rem}

/* Переключатель языков: белая подложка активного вылезала за края плашки,
   а кнопки были мельче, чем палец на телефоне. */
.langs{padding:4px;align-items:stretch}
.langs :is(button,a){min-width:44px;min-height:40px;border-radius:calc(var(--r-full) - 2px)}
@media(max-width:560px){
  .langs :is(button,a){min-width:46px;min-height:44px}
}

/* Телефон и почта в блоке контактов: цель для пальца была высотой 21 px. */
@media(max-width:700px){
  .dane a{display:inline-block;padding:9px 0;min-height:44px}
}

/* --- круг 16 критика --- */

/* 4. Сетка команды растягивается на всю обёртку: справа зияло 253 px. */
.zespol{max-width:none}

/* 8. Пустой низ карточек там, где он остался. */


/* 13. Число в третьей карточке набиралось мелким серым рядом с крупными. */
.oferta .oferta__stawka{font:800 1.75rem var(--font-head);color:var(--cieply)}
.oferta .oferta__stawka span{font:400 .9rem var(--font);color:var(--ink-soft)}

/* 14. Плитки полосы имели свой внутренний отступ поверх поля обёртки. */
/* Крайние ячейки прижимаем к краям обёртки, чтобы полоса читалась заодно
   с заголовком раздела, а внутренним оставляем воздух с обеих сторон.
   Прежде левый отступ был снят у всех четырёх, и текст второй, третьей и
   четвёртой стоял вплотную к разделителю: линия, сразу за ней буква.
   Владелец назвал полосу кривой, и правильно. */
.kier__i{padding-left:22px;padding-right:22px}
.kier__i:first-child{padding-left:0}
.kier__i:last-child{padding-right:0}
@media(max-width:900px){
  /* по две колонки в ряд: у левой нет отступа слева, у правой справа */
  .kier__i{padding-left:18px;padding-right:18px}
  .kier__i:nth-child(odd){padding-left:0}
  .kier__i:nth-child(even){padding-right:0}
}
@media(max-width:520px){.kier__i{padding-left:0;padding-right:0}}

/* 21–22. Поле выбора файла было выше прочих и несло системную подпись. */
.form input[type="file"]{min-height:48px;padding-top:11px;padding-bottom:11px}
.form input[type="file"]::file-selector-button{padding:7px 13px;margin-right:10px}

/* 25. Один просвет у всех четырёхколоночных сеток. */
.why,.kroki--rzad{gap:22px}
.trust{gap:22px}

/* Круг 15: белая подложка активного языка вылезала за круглую плашку. */
.langs :is(button[aria-pressed="true"],a[aria-current]){border-radius:var(--r-full);margin:0}
/* Между кнопками языков на телефоне нужен просвет: они по 46 px, а зазор
   в два пикселя палец не различает. Человек метит в UA и попадает в EN,
   страница меняет язык не на тот, и он решает, что переключатель сломан.
   Восемь пикселей достаточно, плашка при этом остаётся в строке шапки. */
.langs{gap:8px}

/* Карточки с рамкой и фоном стоят одной высотой: ряд с разными низами
   выглядит хуже, чем пустое место внутри карточки. Проверено замером:
   разброс низов доходил до 197 px. */
.oferty,.uslugi,.audy,.zasady,.kroki--rzad,.trust,.why,.zespol{align-items:stretch}

/* Знак на широком экране чуть ниже. Меню здесь прежде ужималось, чтобы не
   заходить под плашку языков; с 23.09 оно стоит своим ярусом под ними,
   и сжимать его незачем. */
@media(min-width:1201px){
  .logo__img{height:44px}
}

/* --- круги 24 и 25 критика --- */

/* 24-2. Общее правило высоты полей раздуло галочку согласия до 48 px. */
.zgoda input[type="checkbox"]{min-height:22px;height:22px;width:22px}

/* 24-3. И оно же сняло отступ у ссылки под согласием: на телефоне она
   прилипала к краю. Возвращаем выравнивание по тексту согласия. */
.zgoda__link{padding-left:2rem}
@media(min-width:561px){.zgoda__link{padding-left:0;margin-left:.4rem;flex-basis:auto}}

/* 24-5. Резерв высоты заголовка возвращён 22.09.2026. Снимали его потому,
   что на нынешних коротких названиях он ничего не выравнивал и давал пустоту.
   Но названия вакансий пишет клиент, и первое же длинное разводит ряд:
   проверено подстановкой двухстрочного названия — ставка, список и всё под
   ними расходятся на 20 px. Само правило и его отмена на узких экранах
   стоят выше, здесь ничего не переопределяем. */

/* 25-1. Рамки полей на графитовой плашке были почти не видны (2,32). */
.szybko__pole input{border-color:rgba(255,255,255,.55)}
.szybko__pole input:hover{border-color:rgba(255,255,255,.75)}

/* 25-2. В итоге калькулятора подпись и сумма теснились в строку. */
.kalk__netto,.kalk__brutto{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.kalk__netto b,.kalk__brutto b{margin-left:auto}
@media(max-width:560px){
  .kalk__netto,.kalk__brutto{flex-direction:column;align-items:flex-start}
  .kalk__netto b,.kalk__brutto b{margin-left:0}
}

/* 25-3. Разбивка рвалась посреди названия взноса: каждое слагаемое строкой. */
.kalk__rozbicie{display:grid;gap:4px;line-height:1.5}

/* Число в карточке, когда оно лежит в отдельном узле ради перевода:
   вид тот же, что у прямого текста рядом. */
.oferta .oferta__stawka .oferta__liczba,
.oferta__stawka .oferta__liczba{
  display:inline;
  font:800 1.75rem var(--font-head);
  color:var(--cieply);
  margin:0;
}

/* Ссылка в обход меню: человек с клавиатуры иначе проходит логотип, семь
   пунктов, три кнопки языка и телефон на каждой странице. Глазами её не
   видно, она появляется только когда получает фокус. */
.obejscie{position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--accent);color:#fff;font-weight:700;
  text-decoration:none;border-radius:0 0 var(--r-md) 0}
.obejscie:focus{left:0}

/* Главный блок принимает фокус только для ссылки в обход меню: рамку вокруг
   половины страницы рисовать незачем. */
main:focus{outline:none}

/* ---------- печать ----------
   Кандидат распечатывает список документов, работодатель — сроки
   уведомлений и штрафы: это то, что держат под рукой на бумаге. Без своих
   правил на лист уходили тёмные полосы первого экрана и подвала, шапка с
   меню и пустая форма на целую страницу.

   Проверено 22.09.2026 выводом в PDF. */
@media print{
  /* Экранное: в руках у человека уже есть бумага, ему нужен текст. */
  header.top, .pin, .langs, .menu-knopka,
  form, .btn, .tabs, .obejscie, .kalk, .szybko{display:none !important}

  /* Тёмные полосы на бумаге либо съедают тонер, либо печатаются белым
     провалом с невидимым текстом. Выворачиваем их обратно. */
  body, .hero, .band--slab, footer{
    background:#fff !important}

  /* Цвет задаём всему подряд. Первая попытка выворачивала только тёмные
     полосы, и на листе оставались бирюзовые надписи первого экрана,
     подписи карточек и ссылки: на белой бумаге они выцветают почти до
     невидимости. Приглушённое оставляем серым, но читаемым. */
  *{color:#000 !important;background-image:none !important}
  .sub, .nota, .eyebrow, .gate__eyebrow, .kier__i span, .usluga span,
  .oferta li, .aud p, .aud li{color:#333 !important}

  /* Фотографии на бумаге не нужны: половина листа и весь тонер. */
  .shot, .hero img, figure, picture{display:none !important}

  /* Якоря первого экрана это навигация, на бумаге по ним не перейти. */
  .hero__quick{display:none !important}

  body{font-size:11.5pt;line-height:1.45}
  .wrap{max-width:100%;padding:0}
  .band{padding:12pt 0}

  /* Карточку и вопрос с ответом не рвём между листами. */
  .aud, .krok, .oferta, .usluga, .kier__i, .qa details, .zas{
    break-inside:avoid;page-break-inside:avoid}
  h1, h2, h3{break-after:avoid;page-break-after:avoid}

  /* Раскрываем все ответы: на бумаге ничего не нажать. */
  details{display:block !important}
  details > div, details > p{display:block !important}

  /* Адрес ссылки виден только на бумаге: на экране он мешает. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  a[href^="#"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after{
    content:""}
}

/* Строка о том, что счёт идёт по зажатому числу: появляется только когда
   введённое выходит за предел, иначе её нет вовсе. */
.kalk__uwaga{margin:10px 0 0;font-size:.88rem;line-height:1.45;
  color:var(--grafit-60,#5a6670);border-left:3px solid var(--biruza,#12a3a8);
  padding-left:10px}

/* Имя сотрудницы ведёт в её профиль LinkedIn. Подчёркивание появляется
   при наведении: в карточке команды постоянная линия под именем читается
   как ошибка набора, а не как ссылка. */
.osoba__lin{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.osoba__lin:hover,.osoba__lin:focus-visible{border-bottom-style:solid}

/* Пункт 26 ТЗ клиента: заметный вход для кандидата справа в шапке.
   Обводка, а не заливка: залитый телефон рядом остаётся главной кнопкой,
   две одинаковые спорили бы за внимание. */
.cta-top{display:inline-flex;align-items:center;padding:10px 16px;
  border-radius:var(--r-full);border:2px solid var(--accent);color:var(--accent-hover);
  font-weight:700;font-size:.82rem;text-decoration:none;text-transform:uppercase;
  letter-spacing:.02em;transition:var(--t);white-space:nowrap}
.cta-top:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Ниже 1200 шапка переносится в две строки, и кнопка уходит к телефону. */
@media(max-width:1200px){ .cta-top{order:2;font-size:.78rem;padding:9px 13px} }
/* На телефоне рядом с логотипом и кнопкой меню места нет: вход к вакансиям
   там даёт первый экран, поэтому кнопку в шапке прячем. */
@media(max-width:560px){ .cta-top{display:none} }

/* Пункт 7.7 ТЗ: призыв под перечнем услуг. */
.uslugi__cta{text-align:center}

/* ─── страница одной вакансии ───────────────────────────────────────
   Собирается инструментом страницы_вакансий_wnr.py по образцу /praca/.
   Классы ниже нужны ей одной: на прочих страницах их нет. */

/* Путь наверх. Google ждёт его видимым, а не только в разметке:
   «Breadcrumbs ... should reflect the page hierarchy shown to users». */
.okruchy{padding:18px 0 0;font-size:.88rem;color:var(--ink-faint)}
.okruchy a{color:var(--ink-soft);text-decoration:none}
.okruchy a:hover{color:var(--accent-hover);text-decoration:underline}

/* Шапка вакансии. Заголовок перебивает общее правило h1: оно красит
   его белым, потому что на всех прочих страницах h1 стоит на тёмном
   первом экране. Здесь фон светлый, и белым он пропадал совсем. */
.oferta-top{padding:22px 0 34px;background:var(--surface);
  border-bottom:1px solid var(--line)}
.oferta-top h1{color:var(--ink);max-width:22ch;font-size:clamp(1.9rem,3.2vw,2.7rem)}
.oferta-top .oferta__stawka{margin:18px 0 0}
.oferta-top .btn{margin-top:22px}

/* Разделы вакансии идут подряд, поэтому отступы у них меньше обычных
   76 px полосы: иначе страница из шести коротких блоков растягивается
   на три экрана пустоты. */
.oferta-blok{padding:40px 0}
.oferta-blok + .oferta-blok{padding-top:0}
.oferta-blok .section{font-size:1.45rem}
.oferta-blok .sub{margin-top:12px;max-width:62ch}

.oferta-lista{margin:14px 0 0;padding-left:22px;max-width:62ch;
  color:var(--ink-soft);line-height:1.65}
.oferta-lista li{margin-top:7px}
.oferta-lista li::marker{color:var(--accent)}

/* Ссылка с карточки списка на страницу вакансии. Ведёт к подробностям,
   поэтому набрана сдержаннее кнопки отклика: отклик остаётся главным
   действием карточки. */
.oferta__wiecej{display:inline-block;margin-top:12px;font-weight:700;
  font-size:.92rem;color:var(--accent-hover);text-decoration:none;
  transition:var(--t)}
.oferta__wiecej:hover{text-decoration:underline;color:var(--accent)}

/* Плашки «Wersja robocza» на сайте больше нет: поручение владельца 23.09,
   клиент видит сайт таким, каким он будет. Её стили сняты. */

/* Пункт 26 ТЗ: на телефоне «Szukam pracy» и «Szukam pracowników» стоят
   первыми в раскрытом меню. Шапка липкая, поэтому оба входа в одном касании
   с любого места страницы. На широком экране кнопки скрыты: вход к
   вакансиям там даёт кнопка справа в шапке. */
.top nav .nav-cta{display:none}
@media(max-width:1200px){
  .top nav.nav--otwarte .nav-cta{display:flex;justify-content:center;width:100%;
    margin:4px 0;padding:12px 16px;border-radius:var(--r-full);border:2px solid var(--accent);
    font-weight:700;font-size:.86rem;text-transform:uppercase;letter-spacing:.02em;
    text-decoration:none;color:var(--accent-hover);background:var(--card)}
  .top nav.nav--otwarte .nav-cta--praca{background:var(--accent);color:#fff;margin-top:8px}
  .top nav.nav--otwarte .nav-cta--firma{margin-bottom:10px}
}
/* Пункт 7.2 задания: фраза клиента над четырьмя направлениями. Это
   заголовок блока, а не подпись к снимку над ним: серым мелким шрифтом
   владелец 23.09 прочёл её именно подписью. */
.kier__lead{max-width:900px;margin:0 0 30px;color:var(--ink);font-family:var(--font-head);
  font-weight:800;font-size:clamp(1.4rem,1.05rem + 1.2vw,1.95rem);line-height:1.2;
  letter-spacing:-.015em;text-wrap:balance}

/* Языки сотрудницы под должностью: мельче должности, чтобы не спорить с ней. */
.osoba .osoba__jez{margin-top:2px;font-size:.82rem;color:var(--ink-soft)}

/* На планшете «Szukam pracy» уже стоит в шапке рядом с кнопкой меню. */
@media(min-width:561px) and (max-width:1200px){
  .top nav.nav--otwarte .nav-cta--praca{display:none}
}

/* --- вёрстка 22.09, находки критика вида, круг 2 --- */

/* Розовая карточка «Nie ma Twojego kierunku?» тянулась по высоте соседей
   с вилкой ставки, и между тремя строками текста и кнопкой оставалось
   305–329 px пустого розового поля. Карточка без ставки и списка — это
   приписка к ряду, а не третья вакансия: она занимает высоту своего
   текста, кнопка стоит в 22 px под ним. На телефоне карточки идут
   столбиком, там ничего не меняется. */
.oferty > .oferta--pusta{align-self:start}

/* «jak liczymy» рвалась посередине: «jak» в конце строки, «liczymy» под
   ним. Ссылка из двух слов переносится только целиком. */
.oferta__netto a{white-space:nowrap}

/* Герой без двух входных карточек (политика, 404) кончался на последней
   строке абзаца: 0 px нижнего поля, текст лежал на кромке тёмной полосы.
   У страниц с карточками под текстом 68–97 px, берём середину. */
.hero:not(:has(.hero__grid)){padding-bottom:72px}
@media(max-width:620px){.hero:not(:has(.hero__grid)){padding-bottom:52px}}
/* На 404 под героем сразу плитки, и их верхнее поле 30 px (оно для
   отступа от заголовка) добавлялось к полю полосы: 106 px вместо 76. */
.hero:not(:has(.hero__grid)) + .band > .wrap > :first-child{margin-top:0}

/* «Sprawdź nas»: значения прижимались к низу плитки, и двухстрочное
   «polski · українська · English» начиналось на 25 px выше соседних.
   Теперь значения стоят сразу под подписью, а подпись занимает две
   строки всегда: верх всех значений на одной линии, как бы ни ломался
   текст. В один столбец подписи идут друг под другом, запас не нужен. */
.trust div{justify-content:flex-start}
.trust__co{min-height:2.9em;line-height:1.45}
@media(max-width:560px){.trust__co{min-height:0}}

/* Калькулятор для фирм: низ тёмной панели итога был на 8 px ниже белой
   панели ввода. Панели одной строки одной высоты. На /praca/ итог короче
   формы по содержанию, там выравнивание по верху оставлено. */
#kalkulator-firmy .kalk{align-items:stretch}

/* Пилюля WhatsApp на телефоне: правило для пальца `.dane a` (padding
   9px 0) перебивало поля кнопки, и буквы упирались в рамку. */
.dane .msgs a{padding:9px 16px}

/* Подвал: реквизиты и четыре ссылки делили одну строку, и «LinkedIn
   firmy» падала одна на следующую. Реквизиты занимают первую строку
   целиком, ссылки идут второй строкой вместе на всех страницах. Основа
   «вся строка минус 8rem» оставляет место только названию фирмы слева
   (82 px и зазор 20 px), любой ссылке рядом места уже нет. */
@media(min-width:701px){.foot > span:nth-child(2){flex:1 1 calc(100% - 8rem)}}

/* «Kogo dobieramy»: две кнопки столбиком были разной ширины (244 и 260 px
   по-польски, 169 и 301 по-английски), правый край шёл ступенькой.
   В карточке с двумя кнопками обе одной ширины. */
@media(min-width:561px){
  .aud:has(> .btn + .btn) > .btn{align-self:stretch;max-width:22rem;
    justify-content:center;text-align:center}
}

/* --- меню по пункту 26 ТЗ, 23.09: семь пунктов, «Legalizacja» с подменю --- */

/* Пункт с подменю сделан кнопкой: ссылкой он вёл бы на страницу, которой нет.
   Стрелка нарисована стилем, а не знаком в тексте: перевод меняет текст
   пункта целиком и стёр бы вложенный знак. */
.nav-grupa > button{font:inherit;background:none;border:0;cursor:pointer;
  color:var(--ink-soft);text-transform:uppercase;font-weight:600;white-space:nowrap}
.nav-grupa > button::after{content:"";display:inline-block;width:6px;height:6px;
  margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .18s ease}
.nav-grupa > button[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
/* Подсветка наведением только там, где есть мышь: на телефоне она
   залипает после касания, и пункт горел бы как текущий. */
@media(hover:hover){.nav-grupa > button:hover{color:var(--accent-hover)}}
/* Текущая страница лежит внутри группы: отмечен и сам пункт группы,
   иначе на /karta-pobytu/ в меню не горело бы ничего. */
.nav-grupa:has(a.menu--tu) > button{color:var(--accent)}
.podmenu{display:none}
.nav-grupa > button[aria-expanded="true"] + .podmenu{display:block}

/* Широкий экран: шапка в два яруса. Наверху знак, языки, «Szukam pracy»
   и телефон, как было. Ниже меню одной строкой. В один ярус семь пунктов
   не входили: при 1280 на меню оставалось 424 px, а пункты занимают
   607 px по-польски, 650 по-украински и 717 по-английски. Во втором ярусе
   им отдана вся ширина обёртки, 1112 px, запас больше трети.
   Перенос пунктов не запрещаем: при крупном шрифте в браузере строке
   лучше переломиться, чем уехать за край. */
@media(min-width:1201px){
  .top__in{flex-wrap:wrap;row-gap:0}
  /* Только шапка с меню: у страницы 404 меню нет, и её шапка остаётся
     прежней, в один ярус высотой 70 px. */
  .top__in:has(> #glowneMenu){min-height:0;padding-top:10px}
  .top__in:has(> #glowneMenu) > .logo{margin-right:auto}
  /* Минус 12 px слева: буква первого пункта стоит на одной линии со знаком. */
  #glowneMenu{order:5;flex:1 0 100%;margin:8px 0 0 -12px;position:relative;gap:2px}
  /* Черта между ярусами во всю ширину окна, как нижняя граница шапки.
     Тень вместо широкого блока: она не даёт прокрутки вбок. */
  #glowneMenu::before{content:"";position:absolute;left:12px;right:0;top:0;height:1px;
    background:var(--line);box-shadow:0 0 0 100vmax var(--line);clip-path:inset(0 -100vmax)}
  #glowneMenu > a,#glowneMenu > .nav-grupa > button{padding:12px 12px 11px;font-size:.84rem;
    letter-spacing:.01em;line-height:1.45}
  /* Текущий раздел подчёркнут у нижней кромки шапки, как у ссылок. */
  .nav-grupa:has(a.menu--tu) > button{box-shadow:inset 0 -2px 0 var(--accent)}
  .nav-grupa{position:relative}
  .podmenu{position:absolute;top:100%;left:0;z-index:5;min-width:250px;padding:8px;
    background:var(--card);border:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md);
    box-shadow:var(--shadow-lift)}
  #glowneMenu .podmenu a{display:block;padding:10px 14px;border-radius:var(--r-sm);
    font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
  #glowneMenu .podmenu a:hover{background:var(--accent-wash);color:var(--accent-hover)}
  #glowneMenu .podmenu a.menu--tu{box-shadow:inset 3px 0 0 var(--accent);color:var(--accent-hover)}
  /* Шапка стала выше на ярус меню: заголовок раздела после перехода по
     якорю не должен уходить под неё. */
  [id]{scroll-margin-top:128px}
}
/* Мышью подменю открывается и наведением. Касание и клавиатура открывают
   его кнопкой. */
@media(min-width:1201px) and (hover:hover){
  .nav-grupa:hover > .podmenu{display:block}
  .nav-grupa:hover > button::after{transform:translateY(1px) rotate(-135deg)}
}

/* Узкий экран: пункт группы в раскрытом меню выглядит как соседние пункты
   (кегль и поля сняты замером с них), а три страницы легализации
   раскрываются под ним с отступом. */
@media(max-width:1200px){
  /* Раскрытое меню идёт под всей шапкой: телефон остаётся рядом с языками,
     а не прыгает вниз под список. Список длиннее экрана прокручивается
     сам: шапка липкая, и её низ иначе был бы недостижим. Перенос запрещён:
     столбец с предельной высотой иначе уводит нижние пункты во второй
     столбец за правый край, и на экране 375×667 четыре пункта пропадали. */
  .top nav.nav--otwarte{order:5;max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px);
    overflow-y:auto;overscroll-behavior:contain;flex-wrap:nowrap}
  /* Тень у кромки списка, за которой есть ещё пункты. Без неё список,
     обрезанный ровно по границе пункта, выглядел законченным, и «Kontakt»
     под ним никто бы не искал. Белые заливки едут вместе со списком и
     закрывают тень, когда прокручивать дальше некуда. */
  .top nav.nav--otwarte{
    background:
      linear-gradient(var(--card) 30%,rgba(255,255,255,0)) top/100% 28px no-repeat local,
      linear-gradient(rgba(255,255,255,0),var(--card) 70%) bottom/100% 28px no-repeat local,
      radial-gradient(farthest-side at 50% 0,rgba(18,58,58,.2),transparent) top/100% 12px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%,rgba(18,58,58,.2),transparent) bottom/100% 12px no-repeat scroll}
  .top nav.nav--otwarte .nav-grupa{width:100%}
  #glowneMenu.nav--otwarte .nav-grupa > button{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:12px 9px;font-size:.83rem;line-height:1.6;letter-spacing:-.01em;text-align:left;
    border-bottom:1px solid var(--line)}
  #glowneMenu.nav--otwarte .podmenu a{display:block;width:100%;padding:11px 9px 11px 25px;
    text-transform:none;font-size:.95rem;letter-spacing:0;border-bottom:1px solid var(--line)}
}
/* На телефоне внизу липкая полоса «Zadzwoń · WhatsApp · Zgłoś się»:
   последний пункт меню не должен прятаться под ней. */
@media(max-width:760px){
  .top nav.nav--otwarte{max-height:calc(100vh - 250px);max-height:calc(100dvh - 250px)}
}

/* --- снимки в сетке, отклик на наведение, плитки прав: 23.09, круг 3 --- */

/* Снимок стоит в шапке раздела (.shapka--foto): на узком экране под
   заголовком и вводным абзацем, от 900 px справа от них. С круга 4 так
   стоят все девять: панорама Варшавы и первый день на /praca/ прежде
   шли отдельной полосой во всю ширину сетки, критик сайта (находка 10)
   попросил их рядом с заголовком, как остальные. */
/* Под вводным абзацем, а не над заголовком: заголовок сразу под снимком
   владелец уже раз прочёл подписью к фото. */
.shapka--foto > .shot{margin-top:14px}
/* Телефон: 4:3 на ширину колонки. Планшет: на всю колонку, но не выше
   360 px, иначе при 4:3 снимок занял бы 540 px из 1024. */
@media(min-width:621px){
  .shot img{aspect-ratio:auto;height:clamp(240px,45vw,360px)}
}
/* От 900 px снимок в шапке раздела стоит справа, 3:2, чуть меньше
   половины ширины: 477 px из 1112 на ноутбуке. Заголовок и абзац слева
   встают по середине высоты снимка. */
@media(min-width:900px){
  .shapka--foto{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:52px;row-gap:0;
    align-items:center}
  .shapka--foto > h2{grid-column:1;grid-row:1;align-self:end}
  .shapka--foto > .sub{grid-column:1;grid-row:2;align-self:start;margin-top:14px}
  .shapka--foto > .shot{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .shapka--foto > .shot img{height:auto;aspect-ratio:3/2}
}

/* Полоса направлений на главной: после неё раздел «Szukasz pracy» стал
   серым (фон полос чередуется), и плитки без нижнего поля легли бы
   вплотную на серый край. */
.band--tight:has(+ .band--surface){padding-bottom:clamp(44px,5.5vw,68px)}

/* Пять плиток прав в политике: при двух колонках «Skarga» стояла одна в
   третьем ряду. Три плитки в первом ряду и две пошире во втором, оба ряда
   полные: сетка на шесть долей, первые три плитки по две доли, последние
   две по три. Правило срабатывает только при пяти плитках. */
@media(min-width:821px){
  .zasady:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .zasady:has(> :nth-child(5):last-child) > *{grid-column:span 2}
  .zasady:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}
}

/* Отклик на наведение. Пункт «Legalizacja» на страницах своей группы
   горит цветом текущего раздела, и прежнее правило наведения его не
   перебивало: на трёх страницах аудит видел мёртвую кнопку (94 из 100).
   У кнопок языка наведение меняло только оттенок серого, глазом почти
   незаметно: теперь светлая подложка и цвет сайта. */
@media(hover:hover){
  .nav-grupa:has(a.menu--tu) > button:hover{color:var(--accent-hover)}
  .langs :is(button:not([aria-pressed="true"]),a:not([aria-current])):hover{background:rgba(255,255,255,.8);color:var(--accent-hover)}
}

/* --- находки критика сайта (отчёт kritik_sayta_1), 23.09, круг 4 --- */

/* 1. Первый экран на телефоне. Под заголовком стояли три кнопки-услуги,
   и карточки двух аудиторий уезжали вниз: «Szukam pracy» начиналась на
   y=684 под нижней полосой, «Szukam pracowników» целиком ниже экрана
   (375×812). До 620 px карточки идут сразу за текстом, кнопки-услуги под
   ними: их просил клиент, но главное действие первое. Колонка текста
   раскрыта в общий столбец, чтобы кнопки встали после карточек. Карточки
   на телефоне плотнее: поля 18 px вместо 26. */
@media(max-width:620px){
  .hero{padding-top:30px}
  .hero__grid{display:flex;flex-direction:column;gap:0}
  .hero__grid > div:first-child{display:contents}
  .hero__grid > div:first-child > .eyebrow{align-self:flex-start}
  .hero__grid h1{margin-top:16px}
  .hero__grid .hero__lede{margin-top:14px}
  .hero__grid .hero__claim{margin-top:10px}
  .hero__grid > .gates{order:1;margin-top:18px;gap:10px}
  .hero__grid .hero__quick{order:2;margin-top:20px}
  .gate{padding:16px 16px 16px 18px}
  .gate h2{font-size:1.3rem;margin-top:4px}
  .gate p{margin-top:6px;font-size:.93rem;line-height:1.45}
  .gate__go{margin-top:8px}
}

/* 2. Шапка 621–1200 px одной строкой. Телефон уходил во второй ряд один
   (768: высота шапки 125 px). Теперь знак слева, справа языки, телефон
   значком 44×44 и кнопка меню последней. «Szukam pracy» до 1200 px живёт
   в раскрытом меню первой кнопкой, как на телефоне. Номер в ссылке
   остаётся текстом для чтения с экрана, глазу виден значок трубки. */
@media(max-width:1200px){
  .cta-top{display:none}
  .top nav.nav--otwarte .nav-cta--praca{display:flex}
}
@media(min-width:621px) and (max-width:1200px){
  .langs{order:2;margin-left:auto}
  .tel{order:3;margin-left:0;width:44px;height:44px;padding:0;gap:0;justify-content:center;font-size:0}
  .tel::before{content:"";width:20px;height:20px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
  .menu-knopka{order:4;margin-left:0}
}

/* 3. Первый экран с карточками кончался на нижней кромке карточек: 0 px
   снизу при 64 сверху. Поле снизу равно верхнему; кнопки-услуги своего
   нижнего поля больше не держат. Страницы без карточек (политика, 404)
   свои 72 и 52 px сохраняют: у их правила выше вес. */
.hero{padding-bottom:64px}
.hero__quick{padding-bottom:0}
@media(max-width:620px){.hero{padding-bottom:48px}}

/* 4. Ровный перенос в заголовках и вводных: одно слово на последней
   строке было на 375 px 46 раз по-польски и 61 по-украински. Неразрывные
   пробелы после однобуквенных слов ставит исполнитель кода. */
h1,h2,h3,.sub,.hero p{text-wrap:balance}

/* 5. Строка о данных в форме: галочки согласия больше нет, а ссылка на
   политику держала её отступ и висела на 30 px правее текста. Ссылка
   идёт в той же строке следом за «Szczegóły:». Подпись без поля теперь
   span, а не label. Строка с галочкой (CV) остаётся гибкой. */
.zgoda:not(:has(input[type="checkbox"])){display:block}
.zgoda__tekst{display:inline}
.zgoda:not(:has(input[type="checkbox"])) .zgoda__link{display:inline;margin-left:0;padding:0}

/* 9. Плашка над заголовком первого экрана была с острыми углами среди
   скруглённых карточек, кнопок и снимков. */
.eyebrow{border-radius:var(--r-full)}

/* 10. Шапка раздела со снимком, где рядом только заголовок (направления
   на главной, «Co jest potrzebne» на /praca/): заголовок по середине
   высоты снимка, а не у верхней половины. */
@media(min-width:900px){
  .shapka--foto:not(:has(> .sub)) > h2{grid-row:1 / span 2;align-self:center}
}
.shapka--foto > .kier__lead{margin-bottom:0}
.shapka--foto + .kier{margin-top:32px}

/* 12. Ответы в раскрытых вопросах шли строкой до 134 знаков. */
.qa details p{max-width:68ch}

/* 13, часть. Шрифт заголовков Outfit без кириллицы: украинские заголовки
   идут системным шрифтом, и сжатие букв −0,02em, подобранное под Outfit,
   делает их тесными. Для украинского сжатие снято. Шрифт с кириллицей
   ждёт файла: скачивание требует слова владельца. */
:lang(uk) :is(h1,h2,h3,.kier__lead,.hero__claim,.kier__i b){letter-spacing:0}

/* Ссылки подвала и крошек были высотой 20 и 19 px: пальцу нужно 24. */
.foot a,.okruchy a{display:inline-block;padding:3px 0}

/* --- дополнение 4, 23.09, круг 5 --- */

/* Карточка вакансии под заголовком: ставка, договор, часы, место, число
   мест. Прежде до кнопки отклика шли место, ставка и дата, а договор и
   часы человек находил только в «Warunki» ниже описания. Строка карточки:
   подпись слева, значение справа; ставка первой строкой и крупно, под
   подписью, потому что рядом с ней ещё строка «на руки». От 900 px
   карточка стоит справа от заголовка и кнопки. */
.fakty{margin:20px 0 0;padding:2px 20px;max-width:560px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.fakty__i{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);gap:2px 16px;
  padding:12px 0;border-top:1px solid var(--line)}
.fakty__i:first-child{border-top:0}
.fakty dt{font-size:.86rem;line-height:1.5;color:var(--ink-faint);padding-top:1px}
.fakty dd{margin:0;font-weight:600;line-height:1.45;color:var(--ink)}
.fakty__i--stawka{grid-template-columns:minmax(0,1fr)}
.fakty .oferta__stawka{margin:0;line-height:1.2}
.fakty .oferta__netto{font-weight:400}
@media(max-width:620px){.fakty{padding:2px 16px}}
@media(min-width:900px){
  .oferta-top .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
    grid-template-rows:auto auto auto 1fr;column-gap:56px;align-items:start}
  .oferta-top .wrap > *{grid-column:1}
  .oferta-top .wrap > .btn{justify-self:start}
  .oferta-top .wrap > .fakty{grid-column:2;grid-row:1 / span 4;max-width:none}
}

/* Первый экран телефона на внутренних страницах (375×812). Второй
   заголовок карточки стоял на 7–109 px ниже верха нижней полосы: у этих
   страниц заголовок и вводный абзац длиннее, чем на главной, а строка
   обещания длиной в предложение. Строка обещания идёт после карточек,
   перед кнопками разделов; заголовок 1,9 rem вместо 2,15; вводный абзац
   16 px, как основной текст. Итог замера: 27 из 27 (9 страниц, 3 языка),
   самый тесный запас 6 px (ksiegowosc-jdg по-польски). Главная не
   меняется: там строка обещания в три слова и всё уже помещалось. */
@media(max-width:620px){
  .hero:not(.hero--glowna) .hero__grid h1{font-size:1.9rem}
  .hero:not(.hero--glowna) .hero__grid .hero__lede{font-size:1rem;line-height:1.5}
  .hero:not(.hero--glowna) .hero__grid .hero__claim{order:2;margin-top:20px}
  .hero:not(.hero--glowna) .hero__grid .hero__quick{order:3}
}

/* --- разбор третьего круга критики (kritik_sayta_3), 23.09 --- */

/* 1. Строка доводов под вводной героя: только факты, которые уже стоят на
   сайте. Мелко, но светлым, а не серым: серая строка читалась бы
   подписью. Пункты не рвутся посередине, перенос только между ними. */
.hero__fakty{margin-top:14px;display:flex;flex-wrap:wrap;gap:2px 0;
  font-size:.86rem;line-height:1.45;font-weight:600;color:var(--on-slab);max-width:none;
  /* Точка стоит перед каждым пунктом, а строка сдвинута влево на её ширину
     и срезана по левому краю: точка в начале перенесённой строки уходит
     под срез, и строка не начинается с «·». */
  margin-left:-1.2em;clip-path:inset(0 0 0 1.2em)}
.hero__fakty span{white-space:nowrap}
.hero__fakty span::before{content:"·";display:inline-block;width:1.2em;text-align:center;color:var(--jasny)}
@media(max-width:620px){
  .hero__grid .hero__fakty{margin-top:10px;font-size:.8rem}
}

/* 2. Главное действие героя залито цветом сайта, остальные пилюли
   прозрачные. На главной это кнопки двух входных карточек. */
.hero__quick a.hero__cta{background:var(--accent);border-color:var(--accent);color:#fff}
.hero__quick a.hero__cta:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.hero--glowna .gate__go{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;
  border-radius:var(--r-full);background:var(--accent);color:#fff;transition:var(--t)}
.hero--glowna .gate:hover .gate__go{background:var(--accent-hover)}

/* 3. Шапка телефона в один ряд: знак, переключатель языков, меню. Было
   111 px в два ряда (телефон уходил вниз), с нижней панелью 176 из 812.
   Звонок остаётся в нижней панели, в шапке кнопка телефона не нужна.
   Кнопки языков 36 px высотой: это прочие цели, им хватает 24; кнопка
   меню 44×44 как главная. */
@media(max-width:620px){
  .top__in{padding-top:9px;padding-bottom:9px;gap:8px}
  .logo__img{height:36px}
  .top .tel{display:none}
  .langs{order:2;margin-left:auto;gap:2px;padding:3px}
  .langs :is(button,a){min-width:36px;min-height:36px;padding:0 6px;font-size:.74rem}
  .menu-knopka{order:3;margin-left:0}
  [id]{scroll-margin-top:84px}
  .top nav.nav--otwarte{max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px)}
  /* 1+3. Главная: под строкой доводов обе карточки должны встать выше
     нижней панели. Абзац карточки на телефоне уступает место кнопке: то же
     самое сказано в разделах ниже, а до них человек дойдёт прокруткой. */
  .hero--glowna{padding-top:16px}
  .hero--glowna .hero__grid > .gates{margin-top:14px;align-self:stretch;width:100%}
  .hero--glowna .gate p{display:none}
  .hero--glowna .gate__go{margin-top:10px}
  .hero--glowna .gate{padding-top:14px;padding-bottom:14px}
}

/* 4. /praca/: вакансии сразу под героем. Вход «Masz dokumenty / Nie masz
   dokumentów» ушёл ниже списка, герой стал в одну колонку. */
.hero__grid--jedna{grid-template-columns:minmax(0,1fr)}
/* На широком экране правая половина героя без карточек пустовала, а сам
   герой отодвигал вакансии вниз: заголовок слева, вводная, доводы и
   кнопки справа от него. */
@media(min-width:981px){
  .hero__grid--jedna > div{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:52px;align-items:start;
    grid-template-areas:"brow brow" "h1 lede" "h1 fakty" "h1 quick"}
  .hero__grid--jedna > div > .eyebrow{grid-area:brow;justify-self:start}
  .hero__grid--jedna > div > h1{grid-area:h1}
  .hero__grid--jedna > div > .hero__lede{grid-area:lede;margin-top:24px}
  .hero__grid--jedna > div > .hero__fakty{grid-area:fakty}
  .hero__grid--jedna > div > .hero__quick{grid-area:quick}
}
.hero + #oferty{padding-top:44px}
@media(max-width:620px){.hero + #oferty{padding-top:32px}}
.gates--rzad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:0}
.gates--rzad .gate{border:1px solid var(--line);border-left:5px solid var(--accent)}
@media(max-width:760px){.gates--rzad{grid-template-columns:1fr}}

/* 5. Подсказка к ссылке на реестр: он открывается на поиске, записи по
   прямой ссылке нет. */
.trust__rada{display:block;margin-top:6px;font-size:.82rem;line-height:1.45;color:var(--ink-soft)}
.foot__rada{flex-basis:100%;font-size:.82rem}

/* 7. «Jak to wygląda»: два ряда по четыре шага, у каждого своя подпись. */
.kroki__podpis{margin-top:30px;font:800 .78rem var(--font);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-hover)}
.kroki__podpis + .kroki--rzad{margin-top:14px}
.kroki--rzad + .kroki__podpis{margin-top:40px}

/* 10. Команда: имя без подчёркивания, у кого есть профиль, рядом значок
   LinkedIn. Прежде два имени из четырёх были подчёркнуты пунктиром. */
.osoba__lin{border-bottom:0;display:inline-flex;align-items:center;gap:8px;min-height:24px}
.osoba__lin::after{content:"";flex:0 0 auto;width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230A66C2' d='M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.osoba__lin:hover,.osoba__lin:focus-visible{color:var(--accent-hover)}

/* 11. Форма отклика: e-mail и город свёрнуты, поле «Jakiej pracy szukasz»
   прячется, когда вакансия уже выбрана. Свёрнутые поля остаются в форме
   и уходят, если заполнены. */
.form label[hidden]{display:none}
.wiecej-pol{margin-top:14px}
.wiecej-pol > summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;
  font-weight:700;color:var(--accent-hover);list-style:none}
.wiecej-pol > summary::-webkit-details-marker{display:none}
.wiecej-pol > summary::before{content:"+";display:inline-block;width:1.2em;font-size:1.2em}
.wiecej-pol[open] > summary::before{content:"−"}

/* 12. Подпись в нижней панели бывает в два слова: переносится по центру. */
.pin a{text-align:center;line-height:1.2}

/* 13. Реквизиты spółki z o.o. в подвале (art. 206 § 1 KSH): отдельной
   строкой под номерами. */
.foot__firma{flex-basis:100%;line-height:1.55}

/* 14. Снимок в полосе статьи: текст слева, снимок справа 3:2 шириной
   480 px от 900 px экрана; уже 900 px снимок встаёт под текст на всю
   ширину колонки. Слот проверен на витрине конкурса 23.09.2026. */
.hero-foto{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center}
.okruszki + .hero-foto{margin-top:18px}
.hero-foto__tekst > :first-child{margin-top:0}
.hero-foto__slot{margin:0}
.hero-foto__slot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);background:rgba(255,255,255,.06)}
@media(min-width:900px){
  .hero-foto{grid-template-columns:minmax(0,1fr) 480px;gap:48px}
}