/* =========================================================================
   FX — темний аркуш «Перевезення».

   Мова взята з референсів, які обрав замовник:
     • Truck'N Roll — чорне тло, величезний вузький шрифт капсом,
       заголовок, розірваний повноекранною фотографією, підписи в дужках;
     • Special One — вирізаний тягач, що виходить за край кадру;
     • USKO — дія просто в головному кадрі: обрати кузов і піти до заявки;
     • Lodisna — нумеровані блоки 01–03 і велика смуга цифр.

   Усе, що стосується тільки цієї сторінки, живе тут, щоб не роздувати
   kt.css, який уже обслуговує головну.
   ========================================================================= */

.night,.day{background:var(--nx);color:var(--nt)}

/* Темний набір — аркуш «Перевезення». */
.night{
  --nx:#0A0C0E;          /* тло сторінки */
  --nx-2:#121619;        /* піднята поверхня: форма, картки */
  --nx-3:#1B2025;
  --nl:rgba(242,241,237,.13);   /* лінія */
  --nl-2:rgba(242,241,237,.07);
  --nt:#F2F1ED;          /* заголовки */
  --nb:#A8B0B8;          /* основний текст */
  --nm:#8B939C;          /* службовий, мономовний */
  --red-hi:#E4102F;      /* червоний для заливок */
  --red-tx:#FF1F3C       /* червоний для дрібного тексту: на чорному
                            #E4102F дає лише 4.1 замість потрібних 4.5 */
}

/* Світлий набір — аркуш «Кар'єра». Ті самі імена змінних, тож усі
   блоки .fx-* працюють на обох сторінках без дублювання правил. */
.day{
  --nx:#F2F1ED;
  --nx-2:#FFFFFF;
  --nx-3:#E9E7E1;
  --nl:rgba(16,19,23,.14);
  --nl-2:rgba(16,19,23,.07);
  --nt:#101317;
  --nb:#4A5058;
  --nm:#5B6068;
  --red-hi:#C8102E;
  --red-tx:#C8102E   /* на папері фірмовий червоний дає 5.2 — вистачає */
}

/* ─── шапка на темному ──────────────────────────────────────────────── */
.night .nav{background:rgba(10,12,14,.78);border-bottom-color:transparent}
.night .nav.stuck{border-bottom-color:var(--nl)}
.night .nav .brand span{color:#9AA2AA;border-left-color:var(--nl)}
.night .nav menu a{color:#C7CDD3}
.night .nav menu a:hover,
.night .nav menu a[aria-current]{color:var(--red-tx)}
.night .nav .brand span i{color:var(--red-tx)}
.night .nav .go{background:var(--red-hi)}
.night .nav .go:hover{background:#fff;color:#101317!important}
.night .burger span{background:var(--nt)}
/* Меню-накладка успадковувала світлий папір, а колір тексту — від .night,
   тож на темній сторінці посилання були майже невидимі. */
.night .mob{background:var(--nx)}
.night .mob a{color:var(--nt);border-bottom-color:var(--nl-2)}
.night .mob .cl{color:var(--nm)}

/* ─── спільні дрібниці сторінки ─────────────────────────────────────── */
.fx-lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--red-tx);margin-bottom:clamp(14px,1.8vw,26px)}
.fx-sec{max-width:1560px;margin:0 auto;padding:clamp(56px,7.4vw,112px) clamp(20px,4vw,72px)}
.fx-sec-tight{padding-block:clamp(44px,5.6vw,84px)}
.fx-head{margin-bottom:clamp(28px,3.4vw,54px)}
.fx-head h2{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.4vw,70px);line-height:1.02;letter-spacing:-.035em;
  color:var(--nt);text-wrap:balance}
.fx-head h2 em{font-style:normal;color:var(--red-hi)}
.fx-link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-tx);text-decoration:none;
  border-bottom:1px solid rgba(228,16,47,.38);padding-bottom:4px;
  transition:border-color .35s var(--e),color .35s var(--e)}
.fx-link::after{content:'→';transition:transform .35s var(--e)}
.fx-link:hover{border-bottom-color:var(--red-tx);color:var(--nt)}
.fx-link:hover::after{transform:translateX(5px)}

/* ═══ ГОЛОВНИЙ КАДР ═══════════════════════════════════════════════════
   Чистий шрифт на чорному, у рядок вставлений кадр, а праворуч із-за
   краю виїжджає тягач. Текст і машина не сперечаються: машина займає
   праву половину й обрізається краєм екрана.                           */
.fx-hero{position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:clip;padding:calc(var(--nav) + 7vh) 0 clamp(28px,4vh,56px)}
.fx-in{position:relative;z-index:2;width:100%;max-width:1560px;margin:0 auto;
  padding:0 clamp(20px,4vw,72px)}

.fx-kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--red-tx);margin-bottom:clamp(16px,2.6vh,32px)}

/* Заголовок тримає всю ширину — у цьому вся сила прийому. Тому машина
   не стоїть поруч із ним, а живе нижче, у правій колонці, і виходить
   за край кадру. Текст і машина ніде не перетинаються.                 */
.fx-title{margin:0;font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 70,'wght' 800;
  text-transform:uppercase;letter-spacing:-.022em;line-height:1.08;color:var(--nt)}
.fx-line{display:flex;align-items:center;gap:clamp(8px,1vw,20px);flex-wrap:nowrap}
.fx-w{font-size:clamp(34px,7.9vw,138px);white-space:nowrap}
.fx-w em{font-style:normal;color:var(--red-hi)}

.fx-m{flex:0 0 auto;position:relative;display:block;overflow:hidden;
  height:.66em;width:1.4em;border-radius:clamp(3px,.35vw,7px);background:var(--nx-3)}
.fx-m img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.fx-m::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(242,241,237,.18)}

.fx-base{margin-top:clamp(26px,4vh,56px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(20px,3vw,56px);align-items:end}
.fx-base-l{min-width:0;padding-bottom:clamp(0px,2vh,28px)}

.fx-lead{margin:0;max-width:44ch;
  font-size:clamp(14px,1.05vw,16px);line-height:1.66;color:var(--nb)}

/* дія одразу в кадрі (прийом USKO) */
.fx-quick{margin-top:clamp(20px,2.8vh,34px);max-width:540px}
.fx-quick-l{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--nm);margin-bottom:10px}
.fx-quick-row{display:flex;gap:10px;flex-wrap:wrap}
.fx-quick select{flex:1 1 200px;min-width:0;appearance:none;cursor:pointer;
  background:var(--nx-2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238B939C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center;
  border:1px solid var(--nl);color:var(--nt);
  font-family:var(--sans);font-size:14px;padding:15px 44px 15px 18px;
  transition:border-color .3s var(--e)}
.fx-quick select:hover,.fx-quick select:focus{border-color:var(--red-hi);outline:none}
.fx-quick select option{background:var(--nx-2);color:var(--nt)}
.fx-quick-go{flex:0 0 auto;cursor:pointer;border:0;
  background:var(--red-hi);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;padding:15px 26px;
  transition:background .35s var(--e),color .35s var(--e)}
/* тло тут завжди біле, тож колір напису задаємо явно:
   var(--nx) на світлому аркуші — це папір, і кнопка ставала порожньою */
.fx-quick-go:hover{background:#fff;color:#101317}

/* машина виходить за правий і нижній край кадру */
.fx-rig{position:relative;margin:0 calc(clamp(20px,4vw,72px) * -1 - 3vw) calc(clamp(28px,4vh,56px) * -1) 0;
  align-self:end;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 88%,transparent 100%)}
.fx-rig img{display:block;width:100%;height:auto}

@media(max-width:900px){
  .fx-hero{min-height:auto;align-items:flex-start}
  .fx-base{grid-template-columns:minmax(0,1fr)}
  .fx-rig{margin:18px -9vw -6vh -9vw;width:118%}
  .fx-quick-go{flex:1 1 100%}
}
/* На вузькому рядок мусить переноситись: nowrap тут обрізав би заголовок
   краєм екрана, бо кадр має overflow:clip. */
@media(max-width:760px){
  .fx-line{flex-wrap:wrap;gap:4px 8px}
  .fx-w{white-space:normal}
  .fx-m{height:.62em;width:1.3em}
}

/* ═══ ЗАГОЛОВОК, РОЗІРВАНИЙ ФОТОГРАФІЄЮ ═══════════════════════════════
   Прийом Truck'N Roll: речення починається над кадром і закінчується
   під ним, тож фотографія не ілюстрація збоку, а частина фрази.        */
.fx-split{padding:clamp(40px,7vw,110px) 0 clamp(64px,9vw,140px);overflow:clip}
.fx-split-a,.fx-split-b{margin:0;max-width:1560px;
  padding-inline:clamp(20px,4vw,72px);margin-inline:auto;
  font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 72,'wght' 800;
  text-transform:uppercase;letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(42px,9.4vw,170px);color:var(--nt)}
.fx-split-img{margin:clamp(10px,1.4vw,22px) 0;width:100%;
  aspect-ratio:21/8;overflow:hidden;background:var(--nx-3)}
.fx-split-img img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block}
.fx-split-note{max-width:1560px;margin:clamp(26px,3.4vw,52px) auto 0;
  padding-inline:clamp(20px,4vw,72px);
  font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.72;color:var(--nb);
  max-width:min(74ch,1560px)}
@media(max-width:760px){ .fx-split-img{aspect-ratio:4/3} }

/* ═══ ЩО В ПАРКУ ══════════════════════════════════════════════════════
   Замовник просив типи транспорту не виділяти, а просто вказати —
   тож це перелік із трьох рядків, а не три великі блоки з рендерами.  */
.fx-fleet{list-style:none;margin:0;padding:0;border-top:1px solid var(--nl)}
.fx-fleet li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,44px);align-items:baseline;
  padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--nl-2)}
.fx-fleet b{font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.7vw,26px);letter-spacing:-.022em;color:var(--nt)}
.fx-fleet-w{font-size:clamp(13px,1vw,14.5px);line-height:1.6;color:var(--nb)}
.fx-fleet-s{display:flex;gap:clamp(10px,1.4vw,24px);flex-wrap:wrap;justify-content:flex-end}
.fx-fleet-s i{font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--nm);white-space:nowrap}
.fx-fleet-s i:first-child{color:var(--nt)}
.fx-fleet-note{margin:clamp(20px,2.4vw,32px) 0 0;max-width:62ch;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:1.8;
  text-transform:uppercase;color:var(--nm)}
@media(max-width:860px){
  .fx-fleet li{grid-template-columns:minmax(0,1fr);gap:8px}
  .fx-fleet-s{justify-content:flex-start;margin-top:4px}
}

/* ═══ ТІЛЬКИ ТЯГАЧ ════════════════════════════════════════════════════ */
.fx-only{max-width:1560px;margin:0 auto;padding:clamp(56px,8vw,132px) clamp(20px,4vw,72px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,80px);align-items:center}
.fx-only-art{margin:0;min-width:0}
.fx-only-art img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 88%,transparent 100%)}
.fx-only-txt h2{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.6vw,56px);line-height:1.04;letter-spacing:-.032em;color:var(--nt)}
.fx-only-txt h2 em{font-style:normal;color:var(--red-hi)}
.fx-only-txt p{margin:20px 0 0;font-size:clamp(14px,1.05vw,16px);line-height:1.7;
  color:var(--nb);max-width:48ch}
@media(max-width:900px){ .fx-only{grid-template-columns:minmax(0,1fr)} }

/* ═══ ЦИФРИ ═══════════════════════════════════════════════════════════
   Та сама мова, що й у графі 02 на головній: велике червоне число,
   під ним мономовний підпис. Тут — на чорному.                         */
.fx-nums{max-width:1560px;margin:0 auto;padding:0 clamp(20px,4vw,72px)}
.fx-nums-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--nl);border-bottom:1px solid var(--nl);
  padding-block:clamp(30px,4vw,58px)}
.fx-n{padding-right:clamp(14px,2vw,34px);border-right:1px solid var(--nl-2)}
.fx-n:last-child{border-right:0}
.fx-n b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(44px,6.4vw,104px);line-height:1;letter-spacing:-.045em;
  color:var(--red-hi);font-variant-numeric:tabular-nums}
.fx-n b i{font-style:normal;font-size:.26em;font-weight:700;letter-spacing:.02em;
  color:var(--nt);padding-left:.3em;vertical-align:.52em;text-transform:uppercase}
.fx-n span{display:block;margin-top:clamp(12px,1.4vw,20px);font-family:var(--mono);
  font-size:11px;letter-spacing:.15em;line-height:1.5;text-transform:uppercase;
  color:var(--nm);max-width:20ch}
@media(max-width:820px){
  .fx-nums-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-n{border-right:0;padding:18px 0;border-bottom:1px solid var(--nl-2)}
  .fx-n:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:420px){ .fx-n b{font-size:52px} }

/* ═══ КРОКИ ═══════════════════════════════════════════════════════════ */
.fx-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--nl-2)}
/* кроків буває три — тоді й колонок три, інакше лишається порожня сіра
   комірка. auto-fit тут не годиться: на широкому він дає шість. */
.fx-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-steps li{background:var(--nx);padding:clamp(24px,2.6vw,40px) clamp(18px,2vw,32px)}
.fx-steps b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--red-tx)}
.fx-steps h3{margin:clamp(16px,2vw,28px) 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.5vw,23px);letter-spacing:-.02em;color:var(--nt)}
.fx-steps p{margin:10px 0 0;font-size:13.5px;line-height:1.65;color:var(--nb)}
@media(max-width:900px){ .fx-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .fx-steps{grid-template-columns:minmax(0,1fr)} }

/* ═══ ВАНТАЖІ ═════════════════════════════════════════════════════════ */
.fx-cargo{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--nl-2)}
.fx-cargo li{background:var(--nx);padding:clamp(22px,2.4vw,34px);
  transition:background .4s var(--e)}
.fx-cargo li:hover{background:var(--nx-2)}
.fx-cargo b{display:block;font-family:var(--display);font-weight:700;font-size:16px;
  color:var(--nt)}
.fx-cargo span{display:block;margin-top:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--nm)}
@media(max-width:900px){ .fx-cargo{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .fx-cargo{grid-template-columns:minmax(0,1fr)} }

/* ═══ ЗАЯВКА ══════════════════════════════════════════════════════════ */
.fx-form{border-top:1px solid var(--nl);background:var(--nx)}
.fx-form-in{max-width:1560px;margin:0 auto;
  padding:clamp(64px,9vw,140px) clamp(20px,4vw,72px);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(30px,5vw,96px);align-items:start}
.fx-form-l h2{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.2vw,64px);line-height:1.02;letter-spacing:-.035em;color:var(--nt)}
.fx-form-l h2 em{font-style:normal;color:var(--red-hi)}
.fx-form-l>p{margin:20px 0 0;font-size:clamp(14px,1.05vw,16px);line-height:1.7;
  color:var(--nb);max-width:42ch}
.fx-form-meta{margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--nl)}
.fx-form-meta>div{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:15px 0;border-bottom:1px solid var(--nl-2)}
.fx-form-meta span{font-family:var(--mono);font-size:11px;letter-spacing:.17em;color:var(--nm)}
.fx-form-meta b,.fx-form-meta a{font-family:var(--display);font-weight:700;font-size:14.5px;
  color:var(--nt);text-decoration:none;text-align:right}
.fx-form-meta a:hover{color:var(--red-tx)}

.fx-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px)}
.fx-f{min-width:0;display:flex;flex-direction:column}
.fx-f-wide{grid-column:1 / -1}
.fx-f label{font-family:var(--mono);font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--nm);margin-bottom:9px}
.fx-f input{background:var(--nx-2);border:1px solid var(--nl);color:var(--nt);
  font-family:var(--sans);font-size:15px;padding:15px 16px;
  transition:border-color .3s var(--e),background .3s var(--e)}
.fx-f input::placeholder{color:var(--nm);opacity:1}
.fx-f input:focus{outline:none;border-color:var(--red-hi);background:var(--nx-3)}
.fx-f input.bad{border-color:var(--red-hi)}
.fx-f-send{margin-top:6px}
.fx-f-send .btn-p{background:var(--red-hi)}
.fx-f-send .btn-p:hover{background:#fff;color:#101317}
.night .formout{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  line-height:1.6;color:var(--nm)}
.night .formout.err{color:var(--red-hi)}
.night .formout.ok{color:#6FD08C}
@media(max-width:900px){
  .fx-form-in{grid-template-columns:minmax(0,1fr)}
  .fx-fields{grid-template-columns:minmax(0,1fr)}
}

/* ═══ ПОЯВА ═══════════════════════════════════════════════════════════
   Вмикається лише коли є скрипт: без нього все просто видно.           */
.fx-motion [data-fx]{opacity:0;transform:translateY(16px)}
.fx-motion [data-fx].in{opacity:1;transform:none;
  transition:opacity .6s var(--e) var(--fd,0ms),transform .75s var(--e) var(--fd,0ms)}
@media (prefers-reduced-motion:reduce){
  .fx-motion [data-fx]{opacity:1;transform:none;transition:none}
}

/* =========================================================================
   КАР'ЄРА — блоки, яких немає на аркуші «Перевезення».
   Решту (кадр, розрив фотографією, цифри, форма) беремо ті самі:
   вони вже прив'язані до токенів, тож на світлому працюють без змін.
   ========================================================================= */

/* ─── чому ми ───────────────────────────────────────────────────────── */
.fx-vals{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--nl-2)}
.fx-vals li{background:var(--nx);padding:clamp(24px,2.6vw,40px) clamp(18px,2vw,32px)}
.fx-vals b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--red-tx)}
.fx-vals h3{margin:clamp(16px,2vw,28px) 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.5vw,23px);letter-spacing:-.02em;color:var(--nt)}
.fx-vals p{margin:10px 0 0;font-size:13.5px;line-height:1.65;color:var(--nb)}
@media(max-width:900px){ .fx-vals{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .fx-vals{grid-template-columns:minmax(0,1fr)} }

/* ─── відкриті позиції ──────────────────────────────────────────────
   Дві картки, а не перелік: у кожної свій обовʼязок, свої вимоги
   і своя кнопка, яка одразу підставляє позицію в анкету.             */
.fx-jobs{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.fx-job{background:var(--nx-2);border:1px solid var(--nl);
  padding:clamp(26px,3vw,48px);display:flex;flex-direction:column}
.fx-job-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid var(--nl-2)}
.fx-job h3{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(21px,2.1vw,32px);line-height:1.1;letter-spacing:-.025em;color:var(--nt)}
.fx-job-where{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-tx);white-space:nowrap}
.fx-job-lead{margin:clamp(18px,2vw,26px) 0 0;font-size:clamp(14px,1.05vw,15.5px);
  line-height:1.68;color:var(--nb)}
.fx-job .fx-job-go{margin-top:auto;padding-top:clamp(20px,2.4vw,30px)}
.fx-job-btn{display:inline-flex;align-items:center;gap:12px;cursor:pointer;border:0;
  background:var(--red-hi);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;padding:15px 24px;
  text-decoration:none;transition:background .35s var(--e),color .35s var(--e)}
.fx-job-btn::after{content:'→';transition:transform .35s var(--e)}
.fx-job-btn:hover{background:var(--nt);color:var(--nx)}
.fx-job-btn:hover::after{transform:translateX(4px)}
@media(max-width:880px){ .fx-jobs{grid-template-columns:minmax(0,1fr)} }

/* ─── кадри з роботи ────────────────────────────────────────────────── */
.fx-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--nl-2)}
.fx-strip figure{margin:0;position:relative;background:var(--nx-3)}
.fx-strip img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.fx-strip figcaption{position:absolute;left:0;bottom:0;right:0;
  padding:clamp(14px,1.6vw,22px);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(8,10,12,.82);backdrop-filter:blur(3px)}
@media(max-width:760px){ .fx-strip{grid-template-columns:minmax(0,1fr)} }

/* ─── поле вибору в анкеті ──────────────────────────────────────────── */
.fx-f select{appearance:none;cursor:pointer;
  background:var(--nx-2) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238B939C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1px solid var(--nl);color:var(--nt);
  font-family:var(--sans);font-size:15px;padding:15px 42px 15px 16px;
  transition:border-color .3s var(--e)}
.fx-f select:focus{outline:none;border-color:var(--red-hi)}
.fx-f textarea{background:var(--nx-2);border:1px solid var(--nl);color:var(--nt);
  font-family:var(--sans);font-size:15px;line-height:1.6;padding:15px 16px;resize:vertical;
  transition:border-color .3s var(--e)}
.fx-f textarea::placeholder{color:var(--nm);opacity:1}
.fx-f textarea:focus{outline:none;border-color:var(--red-hi);background:var(--nx-3)}
.day .formout{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  line-height:1.6;color:var(--nm)}
.day .formout.err{color:var(--red-hi)}
.day .formout.ok{color:#1F7A3D}

/* ─── цифри як справжня графа, а не смужка ─────────────────────────── */
.fx-nums .fx-head{margin-bottom:clamp(22px,2.6vw,38px)}

/* =========================================================================
   FAQ — відповіді, які водночас є відповіддю на «чому ми».
   Рідний <details>: працює без скрипта і доступний із клавіатури.
   ========================================================================= */
.fx-faq{border-top:1px solid var(--nl)}
.fx-faq details{border-bottom:1px solid var(--nl-2)}
.fx-faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  justify-content:space-between;gap:20px;
  padding:clamp(20px,2.2vw,30px) 0;
  font-family:var(--display);font-weight:700;
  font-size:clamp(16px,1.5vw,22px);letter-spacing:-.018em;color:var(--nt);
  transition:color .3s var(--e)}
.fx-faq summary::-webkit-details-marker{display:none}
.fx-faq summary:hover{color:var(--red-tx)}
.fx-faq summary::after{content:'+';flex:0 0 auto;font-family:var(--mono);
  font-size:20px;line-height:1;color:var(--red-tx);
  transition:transform .35s var(--e)}
.fx-faq details[open] summary::after{transform:rotate(45deg)}
.fx-faq details[open] summary{color:var(--red-tx)}
.fx-faq-a{padding:0 0 clamp(22px,2.4vw,32px);max-width:70ch;
  font-size:clamp(14px,1.05vw,15.5px);line-height:1.72;color:var(--nb)}
.fx-faq-a strong{color:var(--nt);font-weight:700}

/* ─── вирізана деталь, що виходить із-за краю блоку ────────────────── */
.fx-has-detail{position:relative;overflow:clip}
.fx-detail{position:absolute;pointer-events:none;z-index:0;
  width:min(17%,230px);opacity:.85}
.fx-detail img{display:block;width:100%;height:auto}
.fx-detail-r{right:-4%;bottom:-9%}
/* праворуч угорі — там, де заголовок лишає порожнє поле */
.fx-detail-tr{right:1%;top:-4%}
.fx-detail-l{left:-5%;bottom:-9%}
@media(max-width:900px){ .fx-detail{display:none} }

/* ─── широка смуга-контекст усередині графи ────────────────────────── */
.fx-band{margin:0 0 clamp(26px,3.4vw,52px);width:100%;
  aspect-ratio:21/8;overflow:hidden;background:var(--nx-3)}
.fx-band img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){ .fx-band{aspect-ratio:3/2} }

/* ─── картка вакансії: пари «мітка — значення» ──────────────────────
   Прийом Special One: не маркований список, а щільні рядки, де ліворуч
   службова мітка, праворуч суть, а найважливіше в рядку — червоним.
   Унизу курсивом один рядок «кому підійде»: людина впізнає себе
   швидше, ніж прочитає весь перелік.                                 */
.fx-job-rows{margin:clamp(18px,2.2vw,28px) 0 0}
.fx-job-rows>div{display:flex;gap:clamp(12px,1.4vw,22px);
  padding:clamp(10px,1.1vw,14px) 0;border-bottom:1px solid var(--nl-2)}
.fx-job-rows dt{flex:0 0 clamp(78px,8vw,104px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nm);padding-top:3px}
.fx-job-rows dd{margin:0;min-width:0;font-size:clamp(13.5px,1vw,15px);line-height:1.55;
  color:var(--nt)}
.fx-job-rows em{font-style:normal;font-weight:700;color:var(--red-tx)}
.fx-job-who{margin:clamp(18px,2vw,26px) 0 0;max-width:40ch;
  font-size:13.5px;line-height:1.62;font-style:italic;color:var(--nm)}

/* ─── культура: одне фото і чотири твердження (форма Allure) ───────── */
.fx-cult{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px,4vw,76px);align-items:center}
.fx-cult-ph{margin:0;min-width:0}
.fx-cult-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  background:var(--nx-3)}
.fx-cult-txt{min-width:0}
.fx-cult-txt h2{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(28px,3.8vw,58px);line-height:1.02;letter-spacing:-.034em;color:var(--nt)}
.fx-cult-txt h2 em{font-style:normal;color:var(--red-tx)}
.fx-cult ul{list-style:none;margin:clamp(26px,3vw,42px) 0 0;padding:0}
.fx-cult li{position:relative;padding:0 0 clamp(18px,2vw,26px) 36px;
  font-size:clamp(14px,1.05vw,15.5px);line-height:1.66;color:var(--nb)}
.fx-cult li:last-child{padding-bottom:0}
/* галочка намальована рамкою — без іконкового шрифту */
.fx-cult li::before{content:'';position:absolute;left:2px;top:.34em;
  width:13px;height:7px;border-left:2px solid var(--red-tx);border-bottom:2px solid var(--red-tx);
  transform:rotate(-45deg)}
.fx-cult li b{color:var(--nt);font-weight:700}
@media(max-width:900px){
  .fx-cult{grid-template-columns:minmax(0,1fr)}
  .fx-cult-ph img{aspect-ratio:3/2}
}
@media(max-width:560px){
  .fx-job-rows>div{flex-direction:column;gap:5px}
  .fx-job-rows dt{flex:none;padding-top:0}
}

/* ─── кого шукаємо ───────────────────────────────────────────────────
   Прийом 37signals: сторінка відповідає не лише «чому ми», а й «кого
   ми шукаємо» — звичайною мовою, без фото й без прикрас. Тихий блок
   між двома щільними, щоб сторінка дихала.                           */
.fx-who{border-top:1px solid var(--nl);border-bottom:1px solid var(--nl)}
.fx-who-in{max-width:62ch}
.fx-who-lead{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2.3vw,34px);line-height:1.34;letter-spacing:-.02em;
  color:var(--nt);text-wrap:balance}
.fx-who-lead em{font-style:normal;color:var(--red-tx)}
.fx-who-sub{margin:clamp(20px,2.4vw,32px) 0 0;
  font-size:clamp(14px,1.05vw,16px);line-height:1.7;color:var(--nb)}

/* ─── у кадрі кар'єри праворуч стоїть людина, а не машина ─────────── */
.fx-rig-ph{-webkit-mask-image:none;mask-image:none;margin:0}
.fx-rig-ph img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 44%;
  background:var(--nx-3)}
.fx-rig-ph figcaption{margin-top:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nm)}
@media(max-width:900px){ .fx-rig-ph{margin:22px 0 0;width:100%} }

/* ─── кадр кар'єри: текст стоїть одразу під заголовком ───────────────
   Нижній ряд тримає лише дію і фото, тож абзац більше не висить
   у порожнечі між заголовком і низом екрана.                         */
.fx-hero .fx-title + .fx-lead{margin-top:clamp(20px,2.6vh,34px);max-width:52ch}
.fx-base-top{align-items:start}
.fx-base-top .fx-base-l{padding-bottom:0;padding-top:clamp(4px,1.4vh,18px)}
.fx-base-top .fx-quick{margin-top:0}

/* =========================================================================
   ТИПИ ТРАНСПОРТУ — світла панель усередині чорного аркуша.
   Рендери зроблені під світле тло: на чорному в них вилазить сіра
   підкладка. Тому панель світла — і заодно дає сторінці ритм.
   ========================================================================= */
.fx-types{background:#F2F1ED;color:#101317;
  --nx:#F2F1ED;--nx-2:#fff;--nx-3:#E9E7E1;
  --nl:rgba(16,19,23,.14);--nl-2:rgba(16,19,23,.07);
  --nt:#101317;--nb:#4A5058;--nm:#5B6068;--red-hi:#C8102E;--red-tx:#C8102E}
.fx-types-in{max-width:1560px;margin:0 auto;
  padding:clamp(56px,7.4vw,112px) clamp(20px,4vw,72px)}
.fx-tl{list-style:none;margin:0;padding:0;border-top:1px solid var(--nl)}
.fx-tl>li{display:grid;grid-template-columns:auto minmax(0,1.06fr) minmax(0,.84fr);
  gap:clamp(18px,3vw,56px);align-items:center;
  padding:clamp(30px,4vw,64px) 0;border-bottom:1px solid var(--nl-2)}
.fx-tl-no{align-self:start;padding-top:6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;color:var(--red-tx)}
.fx-tl figure{margin:0;min-width:0}
.fx-tl figure img{display:block;width:100%;height:auto;max-height:26vh;
  object-fit:contain;object-position:left center}
.fx-tl-txt{min-width:0}
.fx-tl-txt h3{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.8vw,28px);letter-spacing:-.022em;color:var(--nt)}
.fx-tl-txt>p{margin:11px 0 0;font-size:clamp(13.5px,1vw,15px);line-height:1.64;color:var(--nb)}
.fx-tl-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:clamp(18px,2.2vw,28px) 0 0;border-top:1px solid var(--nl-2)}
.fx-tl-spec>div{padding:13px 10px 0 0}
.fx-tl-spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nm)}
.fx-tl-spec dd{margin:6px 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(15px,1.4vw,21px);letter-spacing:-.02em;color:var(--nt)}
/* одиниця не менша за 11 px: нижче вона просто не читається */
.fx-tl-spec dd i{font-style:normal;font-size:max(11px,.58em);font-weight:600;
  color:var(--nm);padding-left:.2em}
.fx-tl-car{margin:16px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  line-height:1.7;text-transform:uppercase;color:var(--nm)}
.fx-tl-note{margin:clamp(22px,2.6vw,36px) 0 0;max-width:64ch;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;line-height:1.8;
  text-transform:uppercase;color:var(--nm)}
@media(max-width:1000px){
  .fx-tl>li{grid-template-columns:auto minmax(0,1fr);gap:14px 18px}
  .fx-tl figure{grid-column:1/-1;order:2}
  .fx-tl-txt{grid-column:1/-1;order:3}
  .fx-tl-no{order:1}
  .fx-tl figure img{max-height:22vh;object-position:center}
}
@media(max-width:560px){ .fx-tl-spec{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* =========================================================================
   ГЕОГРАФІЯ — власна карта з маршрутами.
   SVG згенерований із реальних кордонів, підсвічені саме ті країни, де
   працюємо, лінії виходять із Перемишлян. Малюються при прокрутці:
   stroke-dashoffset від повної довжини до нуля, з затримкою по --i.
   ========================================================================= */
.fx-geo{background:var(--nx)}
.fx-geo-in{max-width:1560px;margin:0 auto;
  padding:clamp(56px,7.4vw,112px) clamp(20px,4vw,72px)}
.fx-map{margin:0;position:relative}
/* overflow:hidden обов'язковий: viewBox тепер вирізає кадр із більшої
   карти, і без цього Скандинавія вилазить на сусідню секцію. */
.m-svg{width:100%;height:auto;display:block;overflow:hidden}
.m-ctx{fill:#14171A;stroke:#20252A;stroke-width:.8}
.m-work{fill:#2C343B;stroke:#4A5760;stroke-width:.9}
.m-home{fill:#434E58;stroke:#6B7883;stroke-width:1.1}
.m-route{fill:none;stroke-width:1.7;stroke-linecap:round}
.m-route-ua{stroke:#FF1F3C;opacity:.9}
.m-route-eu{stroke:#E4102F;opacity:.55}
.m-dot{fill:#F2F1ED}
.m-lb{fill:#9AA2AA;font-family:var(--mono);font-size:14px;letter-spacing:.06em}
.m-base-ring{fill:none;stroke:#FF1F3C;stroke-width:1;opacity:.3}
.m-base-ring2{fill:none;stroke:#FF1F3C;stroke-width:1.5;opacity:.65}
.m-base-dot{fill:#FF1F3C}
.m-base-lb{fill:#F2F1ED;font-family:var(--mono);font-size:14px;letter-spacing:.2em;font-weight:700}
.fx-map figcaption{margin-top:clamp(14px,1.6vw,22px);font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--nm)}

/* малювання ліній при появі */
.fx-motion .m-route{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
.fx-motion .m-dot,.fx-motion .m-lb{opacity:0}
.fx-motion [data-map].in .m-route{
  transition:stroke-dashoffset 1.15s cubic-bezier(.22,.7,.2,1);
  transition-delay:calc(var(--i) * 58ms);stroke-dashoffset:0}
.fx-motion [data-map].in .m-dot,
.fx-motion [data-map].in .m-lb{
  transition:opacity .5s var(--e);transition-delay:calc(var(--i) * 58ms + 640ms);opacity:1}
.fx-motion [data-map].in .m-lb{opacity:1}
@media (prefers-reduced-motion:reduce){
  .fx-motion .m-route{stroke-dasharray:none;stroke-dashoffset:0}
  .fx-motion .m-dot,.fx-motion .m-lb{opacity:1}
}

.fx-geo-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,56px);margin-top:clamp(32px,4vw,60px);
  border-top:1px solid var(--nl);padding-top:clamp(24px,3vw,40px)}
.fx-geo-cols h3{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--red-tx)}
.fx-geo-cols p{margin:14px 0 0;font-size:clamp(13.5px,1vw,15px);line-height:1.66;color:var(--nb)}
.fx-geo-cols ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.fx-geo-cols li{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:7px 11px;border:1px solid var(--nl);color:var(--nt)}
@media(max-width:860px){ .fx-geo-cols{grid-template-columns:minmax(0,1fr)} }

/* На вузькому екрані карта стискається до ~320px, і підписи міст стають
   заввишки 4px — нечитабельні. Ховаємо їх: назви міст усе одно
   перелічені в колонках під картою. Лишається схема плечей і база. */
@media(max-width:760px){
  .m-lb{display:none}
  .m-base-lb{font-size:30px;letter-spacing:.12em}
  .m-dot{r:7}
  .m-route{stroke-width:4}
  .m-base-ring{r:46;stroke-width:3}
  .m-base-ring2{r:26;stroke-width:4}
  .m-base-dot{r:12}
  .fx-map figcaption{margin-top:14px}
}

/* =========================================================================
   КОНТАКТИ
   ========================================================================= */
/* -------------------------------------------------------------------------
   НОМЕР ЗАМІСТЬ ЗАГОЛОВКА
   Слогана тут немає навмисно: єдине, по що приходять на цю сторінку, —
   це номер, тому він і працює заголовком. Код країни приглушений,
   щоб око бралось одразу за ту частину, яку справді набирають.
   ------------------------------------------------------------------------- */
/* Слово «КОНТАКТИ» довше за «КАР'ЄРА», тому трохи стриманіший кегль:
   інакше на середніх ширинах воно ламається на два рядки. */
.kt-hero .kr-word{font-size:clamp(52px,13.6vw,232px)}

/* Ліворуч дзвінок, праворуч одна картка з рештою: фото, пошта, графік
   і кнопка. Коли ці чотири речі стояли окремо, кадр розсипався. */
.kt-answer{margin-top:clamp(22px,2.8vw,44px);display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,78px);align-items:start}
.kt-answer-l{min-width:0}
.kt-answer-l .kt-sec{margin-top:clamp(22px,2.8vw,36px)}

.kt-card{min-width:0;border:1px solid var(--nl);background:var(--nx-2);
  padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;
  gap:clamp(18px,2vw,26px)}
.kt-face{margin:0;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px)}
.kt-face img{flex:none;display:block;width:clamp(88px,8vw,116px);aspect-ratio:4/5;
  object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.05)}
.kt-face b{display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.2vw,19px);letter-spacing:-.015em;color:var(--nt)}
.kt-face span{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red-tx)}

.kt-card-dl{margin:0;border-top:1px solid var(--nl-2)}
.kt-card-dl > div{display:flex;gap:clamp(14px,1.8vw,26px);
  padding:13px 0;border-bottom:1px solid var(--nl-2)}
.kt-card-dl dt{flex:0 0 clamp(72px,7vw,96px);font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nm);padding-top:2px}
.kt-card-dl dd{margin:0;min-width:0;font-size:14px;line-height:1.6;color:var(--nt);
  overflow-wrap:anywhere}
.kt-card-dl a{color:var(--nt);text-decoration:none;
  border-bottom:1px solid var(--nl);transition:border-color .3s var(--e)}
.kt-card-dl a:hover{border-color:var(--red-tx)}
.kt-card-go{margin-top:0;align-self:flex-start}
@media(max-width:860px){
  .kt-answer{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,34px)}
}

/* База окремою смугою: кадр нарешті має ширину, а не залишок колонки */
.kt-band{margin:0;position:relative}
.kt-band img{display:block;width:100%;aspect-ratio:21/8;object-fit:cover;
  object-position:50% 56%}
.kt-band figcaption{max-width:1560px;margin:0 auto;
  padding:14px clamp(20px,4vw,72px) 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--nm)}
@media(max-width:700px){ .kt-band img{aspect-ratio:16/10} }
.kt-dial{display:inline-block;text-decoration:none;color:inherit}
.kt-dial-row{display:flex;align-items:baseline;gap:clamp(10px,1.5vw,26px);
  line-height:.86}
/* Відступи знизу компенсуємо відʼємним полем: рядок має бути достатньо
   високим для хвостів цифр, але візуально вони мусять стояти впритул. */
.kt-dial-row + .kt-dial-row{margin-top:calc(clamp(2px,.4vw,8px) - .08em)}
.kt-dial b{display:block;font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 72,'wght' 800;
  font-size:clamp(44px,7.4vw,124px);letter-spacing:-.035em;
  color:var(--nt);padding-bottom:.14em;
  transition:color .35s var(--e),transform .35s var(--e)}
.kt-dial-cc{color:var(--nm) !important}
.kt-dial:hover b,.kt-dial:focus-visible b{color:var(--red-tx)}
.kt-dial:hover .kt-dial-cc{color:var(--red-tx) !important}
.kt-dial-go{display:inline-block;margin-top:clamp(10px,1.4vw,18px);
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;color:var(--nm);
  border-bottom:1px solid var(--nl);padding-bottom:4px;
  transition:color .3s var(--e),border-color .3s var(--e)}
.kt-dial:hover .kt-dial-go,.kt-dial:focus-visible .kt-dial-go{
  color:var(--nt);border-color:var(--red-tx)}

/* Цифри набігають групами, як набраний номер. Анімація, а не перехід:
   кадр і так на початку сторінки, спостерігач тут зайвий. */
@keyframes kt-dial-in{from{opacity:0;transform:translateY(.16em)}to{opacity:1;transform:none}}
.fx-motion .kt-dial b{opacity:0;
  animation:kt-dial-in .55s var(--e) calc(240ms + var(--i) * 85ms) both}
@media (prefers-reduced-motion:reduce){
  .fx-motion .kt-dial b{opacity:1;animation:none}
}

/* стан офісу: не слова про «живу людину», а годинник і факт */
.kt-live{display:flex;width:max-content;max-width:100%;align-items:center;gap:10px;
  margin:clamp(18px,2.4vh,30px) 0 0;padding:9px 14px;
  border:1px solid var(--nl);border-radius:2px;background:var(--nx-2);
  /* Рядок читається як речення, тому без великих літер і без розрядки:
     у капсі «офіс зачинено, диспетчер у рейсі» розбирається важко. */
  font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;
  line-height:1.5;color:var(--nb)}
.kt-live-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#5FD08A}
/* без min-width:0 рядок не переноситься і на телефоні вилазить за край */
.kt-live-t{min-width:0}
/* У кадрі кар'єри всі <p> мають max-width:46ch — для плашки це більше
   за колонку, і на телефоні вона вилазила за край. */
.kr-hero p.kt-live{max-width:100%}
.kt-live[data-state="off"] .kt-live-dot{background:#FFB65C}
.kt-live b{font-weight:700;color:var(--nt)}

.kt-sec{margin:clamp(22px,3vh,38px) 0 0;max-width:46ch;
  font-size:clamp(13.5px,1vw,15.5px);line-height:1.7;color:var(--nb)}
/* пошта стоїть усередині речення, тому розрядка мінімальна */
.kt-now-alt{font-family:var(--mono);font-size:13px;letter-spacing:.01em;
  color:var(--nm);text-decoration:none;border-bottom:1px solid var(--nl);
  padding-bottom:3px;transition:color .3s var(--e)}
.kt-now-alt:hover{color:var(--nt)}

/* три шляхи — кожен веде у свою форму */
.kt-routes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.kt-routes>li{background:var(--nx-2);border:1px solid var(--nl);
  padding:clamp(24px,2.8vw,42px);display:flex;flex-direction:column}
.kt-routes-no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--red-tx)}
.kt-routes h3{margin:clamp(16px,2vw,26px) 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(18px,1.7vw,25px);letter-spacing:-.022em;color:var(--nt)}
.kt-routes p{margin:12px 0 clamp(22px,2.6vw,34px);font-size:clamp(13.5px,1vw,15px);
  line-height:1.64;color:var(--nb)}
.kt-routes .fx-job-btn{margin-top:auto;align-self:flex-start}
@media(max-width:900px){ .kt-routes{grid-template-columns:minmax(0,1fr)} }

/* де ми */
.kt-where{background:var(--nx-3)}
.kt-where-in{max-width:1560px;margin:0 auto;
  padding:clamp(56px,7.4vw,112px) clamp(20px,4vw,72px)}
.kt-where-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,4vw,72px);align-items:center}
.kt-map{margin:0;min-width:0}
.r-svg{width:100%;height:auto;display:block}
.r-ctx{fill:#DBD8D0;stroke:#C2BEB4;stroke-width:1}
.r-home{fill:#C7C3B8;stroke:#A9A498;stroke-width:1.3}
.r-link{stroke:var(--red-tx);stroke-width:1.4;opacity:.45;stroke-dasharray:4 5}
.r-dot{fill:#101317}
.r-dot-x{fill:none;stroke:#101317;stroke-width:2}
.r-lb{fill:#4A5058;font-family:var(--mono);font-size:15px;letter-spacing:.06em}
.r-ring{fill:none;stroke:var(--red-tx);stroke-width:1.2;opacity:.3}
.r-ring2{fill:none;stroke:var(--red-tx);stroke-width:1.6;opacity:.6}
.r-bdot{fill:var(--red-tx)}
.r-blb{fill:#101317;font-family:var(--mono);font-size:15px;letter-spacing:.18em;font-weight:700}
.kt-map figcaption{margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--nm)}
@media(max-width:860px){
  .kt-where-grid{grid-template-columns:minmax(0,1fr)}
  .r-lb{display:none}
  .r-blb{font-size:30px;letter-spacing:.1em}
  .r-dot,.r-dot-x{r:9}
  .r-ring{r:46}.r-ring2{r:26}.r-bdot{r:12}
  .r-link{stroke-width:3.5;stroke-dasharray:9 10}
}

/* списки «мітка — значення» на контактах */
.kt-dl,.kt-legal{margin:0;border-top:1px solid var(--nl)}
.kt-dl>div,.kt-legal>div{display:flex;gap:clamp(14px,2vw,32px);
  padding:clamp(12px,1.4vw,18px) 0;border-bottom:1px solid var(--nl-2)}
.kt-dl dt,.kt-legal dt{flex:0 0 clamp(96px,11vw,168px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nm);padding-top:3px}
.kt-dl dd,.kt-legal dd{margin:0;min-width:0;font-size:clamp(14px,1.05vw,16px);
  line-height:1.56;color:var(--nt)}
/* Це речення, а не мітка: у капсі з розрядкою воно читалось найгірше
   на всій сторінці. Лишаємо моноширинний набір, але звичайним регістром. */
.kt-legal-note{margin:clamp(20px,2.4vw,30px) 0 0;max-width:62ch;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;line-height:1.72;
  color:var(--nm)}
@media(max-width:560px){
  .kt-dl>div,.kt-legal>div{flex-direction:column;gap:6px}
  .kt-dl dt,.kt-legal dt{flex:none;padding-top:0}
}
.kt-now-note{margin:clamp(14px,1.8vh,22px) 0 0;font-family:var(--mono);font-size:12px;
  letter-spacing:.02em;color:var(--nm)}
@media(max-width:760px){
  .kt-now-alt{display:inline-flex;align-items:center;min-height:44px}
}


/* ═══════════════════════════════════════════════════════════════════════
   ПЕРЕВЕЗЕННЯ, ПЕРЕБУДОВА v90
   Сторінка починається з «ВОЗИМО», далі цифри, типи, географія, кроки,
   карусель фото. Усе нове лежить тут, щоб не чіпати старі блоки.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── «ВОЗИМО» як перший екран ────────────────────────────────────────
   Той самий розірваний заголовок, але він тепер відкриває сторінку,
   тому згори треба відступ під шапку, а знизу — одразу дія.          */
.fx-split-open{padding-top:clamp(104px,13vh,190px)}
.fx-split-kick{display:block;max-width:1560px;margin:0 auto clamp(18px,2.4vw,34px);
  padding-inline:clamp(20px,4vw,72px);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-tx)}
.fx-split-foot{max-width:1560px;margin:clamp(30px,3.6vw,54px) auto 0;
  padding-inline:clamp(20px,4vw,72px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,56px);align-items:end}
.fx-split-foot p{margin:0;max-width:56ch;
  font-size:clamp(14px,1.05vw,16px);line-height:1.72;color:var(--nb)}
@media(max-width:860px){
  .fx-split-foot{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* ─── бігаюча стрічка ─────────────────────────────────────────────────
   Два однакові треки їдуть поруч: коли перший повністю виходить за
   край, другий уже стоїть на його місці — шва не видно.              */
.tick{border-top:1px solid var(--nl);border-bottom:1px solid var(--nl);
  overflow:hidden;background:var(--nx);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tick-in{display:flex;width:max-content}
.tick-tr{display:flex;align-items:center;flex:none;
  padding:clamp(13px,1.5vw,20px) 0;
  animation:tick-run 46s linear infinite}
.tick:hover .tick-tr{animation-play-state:paused}
.tick-tr span{flex:none;padding:0 clamp(16px,2vw,30px);
  font-family:var(--mono);font-size:clamp(11px,.92vw,13px);letter-spacing:.17em;
  text-transform:uppercase;color:var(--nb);white-space:nowrap}
.tick-tr i{flex:none;font-style:normal;color:var(--red-tx);font-size:9px;line-height:1}
@keyframes tick-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@media(prefers-reduced-motion:reduce){ .tick-tr{animation:none} }

/* ─── цифри ───────────────────────────────────────────────────────────
   Цифра — головний елемент блоку: велика, червона, з блідим контуром
   того самого числа позаду і рискою, що дотягується під час підрахунку. */
.pn{background:var(--nx-2);border-top:1px solid var(--nl);border-bottom:1px solid var(--nl)}
.pn-in{max-width:1560px;margin:0 auto;padding:clamp(34px,4.4vw,72px) clamp(20px,4vw,72px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--nl-2)}
.pn-c{position:relative;background:var(--nx-2);
  padding:clamp(18px,2.2vw,34px) clamp(14px,1.8vw,30px) clamp(20px,2.4vw,34px)}
.pn-c:first-child{padding-left:0}
.pn-c:last-child{padding-right:0}
.pn-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--nm)}
.pn-v{display:block;position:relative;margin-top:clamp(12px,1.6vw,22px);
  font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 68,'wght' 800;
  font-size:clamp(56px,7.4vw,132px);line-height:.98;letter-spacing:-.03em;
  color:var(--red-tx)}
.pn-v i{font-style:normal;font-size:.24em;font-weight:700;letter-spacing:.04em;
  font-variation-settings:'wdth' 100,'wght' 700;color:var(--nb);
  margin-left:.22em;vertical-align:.55em}
.pn-r{display:block;height:2px;margin-top:clamp(16px,2vw,26px);background:var(--nl)}
.pn-r::after{content:"";display:block;height:100%;width:0;background:var(--red-hi);
  transition:width 1.15s cubic-bezier(.17,.84,.44,1)}
.pn.in .pn-r::after{width:100%}
.pn-c:nth-child(2) .pn-r::after{transition-delay:.1s}
.pn-c:nth-child(3) .pn-r::after{transition-delay:.2s}
.pn-c:nth-child(4) .pn-r::after{transition-delay:.3s}
.pn-t{display:block;margin-top:clamp(12px,1.4vw,18px);
  font-size:13px;line-height:1.6;color:var(--nb)}
@media(max-width:900px){
  .pn-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-c,.pn-c:first-child,.pn-c:last-child{padding:clamp(18px,4vw,26px) 0}
  .pn-c:nth-child(odd){padding-right:clamp(14px,4vw,24px)}
  .pn-c:nth-child(even){padding-left:clamp(14px,4vw,24px)}
}
@media(max-width:420px){ .pn-v{font-size:52px} }

/* ─── чотири кроки, рядком з наскрізною лінією ────────────────────────
   Квадратні картки читались як чотири окремі думки. Тут одна лінія
   проходить крізь усі номери — видно, що це один шлях.                */
.wst{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,40px)}
.wst::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;
  background:var(--nl)}
.wst li{position:relative;padding-top:52px}
.wst li::before{content:"";position:absolute;left:0;top:0;width:38px;height:38px;
  border:1px solid var(--nl);border-radius:50%;background:var(--nx)}
.wst li::after{content:"";position:absolute;left:17px;top:17px;width:5px;height:5px;
  border-radius:50%;background:var(--red-hi);
  transform:scale(0);transition:transform .5s cubic-bezier(.2,.9,.3,1) var(--fd,0ms)}
.wst li.in::after{transform:scale(1)}
.wst b{position:absolute;left:38px;top:9px;padding:0 12px;background:var(--nx);
  font-family:var(--mono);font-size:11px;line-height:21px;letter-spacing:.18em;color:var(--red-tx)}
.wst h3{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.5vw,22px);letter-spacing:-.01em;color:var(--nt)}
.wst p{margin:10px 0 0;font-size:13.5px;line-height:1.68;color:var(--nb)}
@media(max-width:900px){
  .wst{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(28px,5vw,44px)}
  .wst::before{display:none}
}
@media(max-width:520px){ .wst{grid-template-columns:minmax(0,1fr)} }

/* ─── карусель фото вантажів ──────────────────────────────────────────
   Колесо миші навмисно не перехоплюємо: смуга їде сама, а пальцем і
   трекпадом її можна гортати звичайним горизонтальним прокручуванням. */
.crg{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.crg-in{display:flex;width:max-content}
.crg-tr{display:flex;flex:none;gap:clamp(10px,1.2vw,20px);
  padding-right:clamp(10px,1.2vw,20px);
  animation:crg-run 58s linear infinite}
.crg:hover .crg-tr{animation-play-state:paused}
.crg figure{flex:none;margin:0;width:clamp(260px,30vw,470px);
  aspect-ratio:3/2;overflow:hidden;background:var(--nx-3)}
.crg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.03)}
@keyframes crg-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
@media(prefers-reduced-motion:reduce){
  .crg{mask-image:none;-webkit-mask-image:none}
  .crg-in{width:auto;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch}
  .crg-tr{animation:none}
  .crg-tr+.crg-tr{display:none}
  .crg figure{scroll-snap-align:start}
}
.crg-note{margin:clamp(16px,2vw,26px) auto 0;max-width:1560px;
  padding-inline:clamp(20px,4vw,72px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nm)}

/* заголовок перед каруселлю не повинен відштовхувати її на пів-екрана */
.fx-sec-lead{padding-bottom:clamp(20px,2.4vw,34px)}

/* на телефоні підписи міст сховані, тож карта працює силуетом —
   даємо їй усю ширину екрана, інакше смужка в 180 px ні про що */
@media(max-width:760px){
  .fx-geo .fx-map{margin-inline:calc(clamp(20px,4vw,72px) * -1);width:auto}
}


/* ═══════════════════════════════════════════════════════════════════════
   КАР'ЄРА v92 — повна перебудова
   Прийоми взяті з Truck'N Roll (розкидані фото, крупні твердження)
   і Allure (великі заголовки, червоний акцент). Вакансії — головне
   на сторінці, тому вони єдині на суцільному червоному.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── перший екран: одне слово і перелік, ким тут можна стати ───────── */
.kr-hero{position:relative;overflow:clip;
  padding:clamp(104px,14vh,200px) 0 clamp(54px,7vw,104px)}
.kr-hero-in{max-width:1560px;margin:0 auto;padding-inline:clamp(20px,4vw,72px)}
.kr-kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-tx)}
.kr-word{margin:clamp(14px,2vw,28px) 0 0;font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 68,'wght' 800;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.9;
  padding-bottom:.13em;font-size:clamp(68px,17.5vw,300px);color:var(--nt)}

/* рядок, у якому міняються професії: висота фіксована, слова їдуть угору */
.kr-be{margin:clamp(22px,3vw,44px) 0 0;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.3em;font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2.9vw,46px);letter-spacing:-.015em;color:var(--nt);line-height:1.32}
.kr-roll{display:inline-block;height:1.32em;overflow:hidden;vertical-align:bottom}
.kr-roll ul{list-style:none;margin:0;padding:0;animation:kr-roll 9.6s steps(1,end) infinite}
.kr-roll li{height:1.32em;line-height:1.32em;color:var(--red-tx);white-space:nowrap}
@keyframes kr-roll{
  0%,22%{transform:translateY(0)}
  25%,47%{transform:translateY(-1.32em)}
  50%,72%{transform:translateY(-2.64em)}
  75%,97%{transform:translateY(-3.96em)}
  100%{transform:translateY(-5.28em)}
}
@media(prefers-reduced-motion:reduce){
  .kr-roll{height:auto}
  .kr-roll ul{animation:none}
  .kr-roll li{display:inline}
  .kr-roll li+li::before{content:" · "}
}
.kr-hero p{margin:clamp(20px,2.6vw,34px) 0 0;max-width:46ch;
  font-size:clamp(15px,1.15vw,18px);line-height:1.7;color:var(--nb)}
.kr-hero-go{display:inline-flex;align-items:center;gap:14px;min-height:52px;
  margin-top:clamp(22px,3vw,38px);padding:0 clamp(22px,2.6vw,34px);
  background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  transition:background .25s var(--e),transform .25s var(--e)}
.kr-hero-go:hover{background:#A50D26;transform:translateY(-2px)}
.kr-hero-go i{font-style:normal;transition:transform .3s var(--e)}
.kr-hero-go:hover i{transform:translateX(5px)}

/* ─── розкидані фото з твердженнями між ними ────────────────────────
   Звичайна сітка тут не годиться: розріджене автозаповнення ставить
   кожен елемент у свій рядок, і під низькими блоками лишаються
   порожнечі в пів-екрана. Колонковий потік складає все щільно, а
   «хаос» дають різні ширини й зсуви кожного кадру.                  */
.kr-sc{max-width:1560px;margin:0 auto;
  padding:clamp(40px,6vw,96px) clamp(20px,4vw,72px);
  columns:2;column-gap:clamp(22px,3.4vw,64px)}
.kr-sc > *{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 clamp(22px,3.2vw,56px)}
.kr-sc figure{overflow:hidden;background:var(--nx-3);border-radius:5px;position:relative;z-index:2}
.kr-sc img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08)}
.kr-sc .s{margin:0;font-family:var(--display);font-weight:800;
  letter-spacing:-.022em;line-height:1.1;color:var(--nt);
  font-size:clamp(24px,3.6vw,58px)}
.kr-sc .s em{font-style:normal;color:var(--red-tx)}
.kr-sc .n{margin:14px 0 0;font-size:clamp(14px,1.02vw,16px);line-height:1.7;
  color:var(--nb);max-width:44ch}
/* ширини й зсуви підібрані вручну: саме нерівність дає потрібний ритм */
.kr-f1{width:92%;aspect-ratio:4/5}
.kr-t1{width:88%;margin-left:12%;padding-top:clamp(8px,1.6vw,30px)}
.kr-f2{width:72%;margin-left:24%;aspect-ratio:3/2}
.kr-f3{width:84%;aspect-ratio:4/5}
.kr-f4{width:64%;margin-left:30%;aspect-ratio:3/2}
.kr-t2{width:90%;margin-left:6%;padding-top:clamp(8px,1.6vw,30px)}
.kr-f5{width:96%;aspect-ratio:3/2}
.kr-f6{width:70%;margin-left:22%;aspect-ratio:4/5}
@media(max-width:760px){
  .kr-sc{columns:1}
  .kr-f1,.kr-f3,.kr-f5{width:100%;margin-left:0}
  .kr-t1,.kr-t2{width:100%;margin-left:0}
  .kr-f2{width:84%;margin-left:16%}
  .kr-f4{width:88%;margin-left:12%}
  .kr-f6{width:76%;margin-left:24%}
}

/* ─── ВАКАНСІЇ: єдина суцільно червона секція на сайті ──────────────── */
.vac{background:var(--nx);color:var(--nt);overflow:clip}
.vac-in{max-width:1560px;margin:0 auto;padding:clamp(54px,8vw,130px) clamp(20px,4vw,72px)}
/* нижче .86 білий на червоному не дотягує до 4.5:1 */
.vac-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-tx)}
.vac-h{margin:clamp(14px,2vw,26px) 0 clamp(30px,4.4vw,64px);
  font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 70,'wght' 800;
  text-transform:uppercase;letter-spacing:-.028em;line-height:.94;
  padding-bottom:.08em;font-size:clamp(42px,9vw,150px);color:var(--nt)}

/* три картки поруч, суцільно червоні й з відчутним обʼємом:
   жорстка зміщена тінь працює як друкована плашка, а не як розмиття. */
.vac-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,40px)}
.vcard{position:relative;display:flex;flex-direction:column;
  background:#15191D;border:1px solid rgba(255,255,255,.14);
  border-radius:6px;overflow:hidden;
  box-shadow:10px 10px 0 rgba(0,0,0,.55);
  transition:transform .45s cubic-bezier(.2,.9,.25,1),
             box-shadow .45s cubic-bezier(.2,.9,.25,1),
             border-color .45s var(--e)}
.vcard:hover{transform:translate(-5px,-5px);border-color:rgba(255,255,255,.26);
  box-shadow:17px 17px 0 rgba(0,0,0,.6)}
/* червоне лишається, але як плашка-заголовок, а не як полотно під текст:
   суцільний червоний із білим набором на всю картку читати важко */
.vcard-head{background:var(--red);padding:clamp(20px,2.3vw,30px) clamp(22px,2.5vw,34px);
  position:relative}
.vcard-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 52%)}
.vcard-body{padding:clamp(22px,2.5vw,34px);display:flex;flex-direction:column;flex:1}
.vcard-no{position:relative;z-index:1;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;color:rgba(255,255,255,.9)}
.vcard h3{position:relative;z-index:1;
  margin:clamp(10px,1.3vw,16px) 0 0;font-family:var(--tech);
  font-weight:800;font-variation-settings:'wdth' 82,'wght' 800;
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.06;
  font-size:clamp(21px,2.1vw,31px);color:#fff}
.vcard dl{margin:0;display:grid;gap:clamp(11px,1.3vw,16px)}
.vcard dl div{display:grid;gap:3px}
.vcard dt{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--nm)}
.vcard dd{margin:0;font-size:14.5px;line-height:1.56;color:var(--nt)}
.vcard dd b{font-weight:600;color:var(--red-tx)}
.vcard-note{margin:clamp(18px,2.2vw,26px) 0 0;padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid var(--nl);
  font-size:13px;line-height:1.6;color:var(--nb)}

.vcard-more{margin-top:clamp(14px,1.8vw,22px)}
.vcard-more>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:9px;min-height:30px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nt)}
.vcard-more>summary::-webkit-details-marker{display:none}
.vcard-more>summary::after{content:"+";font-size:15px;line-height:1;color:var(--red-tx)}
.vcard-more[open]>summary::after{content:"−"}
.vcard-more>summary:hover{opacity:.78}
.vcard-more>summary:focus-visible{outline:2px solid var(--nt);outline-offset:3px}
.vcard-more-in{padding-top:clamp(14px,1.8vw,20px)}
.vcard-more h4{margin:0 0 9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nm)}
.vcard-more h4+ul{margin:0 0 clamp(14px,1.8vw,20px)}
.vcard-more ul{list-style:none;padding:0}
.vcard-more li{position:relative;padding-left:16px;margin-bottom:7px;
  font-size:13.5px;line-height:1.58;color:var(--nb)}
.vcard-more li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--red-tx)}

.vcard-foot{margin-top:auto;padding-top:clamp(20px,2.4vw,30px);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.vcard-go{display:inline-flex;align-items:center;gap:10px;min-height:46px;
  padding:0 clamp(18px,2vw,26px);background:var(--red-hi);color:#fff;
  border-radius:3px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
  transition:transform .25s var(--e),box-shadow .25s var(--e)}
.vcard-go i{font-style:normal;transition:transform .3s var(--e)}
.vcard-go:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.34)}
.vcard-go:hover i{transform:translateX(5px)}
.vcard-who{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--nm)}
.vcard-who a{color:var(--nt);text-decoration:none;
  border-bottom:1px solid var(--nl)}
.vcard-who a:hover{color:var(--red-tx);border-bottom-color:var(--red-tx)}

/* поява: картка вилітає з-під власної тіні */
.fx-motion .vcard{opacity:0;transform:translateY(34px);box-shadow:0 0 0 rgba(0,0,0,0)}
.fx-motion .vcard.in{opacity:1;transform:none;
  box-shadow:10px 10px 0 rgba(0,0,0,.55);
  transition:opacity .7s var(--e) var(--fd,0ms),
             transform .85s cubic-bezier(.2,.9,.25,1) var(--fd,0ms),
             box-shadow .9s cubic-bezier(.2,.9,.25,1) calc(var(--fd,0ms) + 120ms)}
.fx-motion .vcard.in:hover{box-shadow:17px 17px 0 rgba(0,0,0,.6);
  transition:transform .45s var(--e),box-shadow .45s var(--e)}
.fx-motion .vcard dl div{opacity:0;transform:translateY(10px)}
.fx-motion .vcard.in dl div{opacity:1;transform:none;
  transition:opacity .5s var(--e),transform .5s var(--e)}
.fx-motion .vcard.in dl div:nth-child(1){transition-delay:calc(var(--fd,0ms) + 240ms)}
.fx-motion .vcard.in dl div:nth-child(2){transition-delay:calc(var(--fd,0ms) + 300ms)}
.fx-motion .vcard.in dl div:nth-child(3){transition-delay:calc(var(--fd,0ms) + 360ms)}
.fx-motion .vcard.in dl div:nth-child(4){transition-delay:calc(var(--fd,0ms) + 420ms)}
.fx-motion .vcard.in dl div:nth-child(5){transition-delay:calc(var(--fd,0ms) + 480ms)}
.fx-motion .vcard.in dl div:nth-child(6){transition-delay:calc(var(--fd,0ms) + 540ms)}
@media(prefers-reduced-motion:reduce){
  .fx-motion .vcard,.fx-motion .vcard dl div{opacity:1;transform:none;
    box-shadow:10px 10px 0 rgba(0,0,0,.55)}
  .vcard:hover{transform:none}
}
@media(max-width:1000px){ .vac-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:680px){
  .vac-grid{grid-template-columns:minmax(0,1fr)}
  .vcard{box-shadow:7px 7px 0 rgba(0,0,0,.55)}
}

/* ─── культура: короткі твердження в два стовпці ────────────────────── */
.kr-cult{max-width:1560px;margin:0 auto;padding:clamp(48px,7vw,110px) clamp(20px,4vw,72px)}
.kr-cult-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,54px);margin-top:clamp(28px,4vw,56px)}
.kr-cult-grid div{padding-top:clamp(18px,2.2vw,28px);border-top:1px solid var(--nl)}
.kr-cult-grid h3{margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(18px,1.9vw,27px);letter-spacing:-.015em;color:var(--nt)}
.kr-cult-grid p{margin:12px 0 0;font-size:14.5px;line-height:1.72;color:var(--nb)}
@media(max-width:760px){ .kr-cult-grid{grid-template-columns:minmax(0,1fr)} }

/* ─── що пропонуємо ─────────────────────────────────────────────────── */
.kr-perks{background:var(--nx-2);color:var(--nt);
  border-top:1px solid var(--nl);border-bottom:1px solid var(--nl)}
.kr-perks-in{max-width:1560px;margin:0 auto;padding:clamp(48px,7vw,110px) clamp(20px,4vw,72px)}

.kr-perks h2{margin:clamp(14px,2vw,24px) 0 clamp(28px,4vw,56px);
  font-family:var(--display);font-weight:800;letter-spacing:-.022em;line-height:1.06;
  font-size:clamp(28px,4.2vw,64px);color:var(--nt)}
.kr-perks h2 em{font-style:normal;color:var(--red-tx)}
.kr-perks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--nl)}
.kr-perks-grid div{background:var(--nx-2);padding:clamp(22px,2.6vw,36px) clamp(18px,2vw,30px)}
.kr-perks-grid b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-tx)}
.kr-perks-grid span{display:block;margin-top:12px;font-size:14.5px;line-height:1.66;
  color:var(--nb)}
@media(max-width:900px){ .kr-perks-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .kr-perks-grid{grid-template-columns:minmax(0,1fr)} }

/* ═══ КАР'ЄРА v93 · назва компанії растром за кадрами ══════════════════
   Прийом Truck'N Roll: величезне слово, набране крапками, лежить під
   фотографіями, і вони його частково перекривають. Градієнт тут не
   декор поверхні, а сама літера — інакше розтр не зробити.          */
.kr-wrap{position:relative;overflow:clip}

/* Назва компанії за кадрами: два рядки, бо одним вона не вміщалася і
   лізла за краї. Обʼєм дає не важка екструзія (вона з'їдала фото), а
   контур літери поверх растру — край читається, середина лишається
   прозорою, і кадри зверху нічого не глушать.                        */
.kr-ghost{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;user-select:none;text-align:center;
  font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 70,'wght' 800;
  text-transform:uppercase;letter-spacing:-.01em;line-height:.82;
  font-size:clamp(108px,23vw,400px)}
.kr-ghost span{display:block;position:relative;white-space:nowrap}
/* растр — усередині літери */
.kr-ghost span{background-image:radial-gradient(circle at center,
    rgba(242,241,237,.26) 1.5px, transparent 1.7px);
  background-size:11px 11px;
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* контур — поверх, тонкою світлою лінією */
.kr-ghost span::after{content:attr(data-t);position:absolute;left:0;top:0;
  -webkit-text-stroke:1.5px rgba(242,241,237,.17);
  color:transparent;background:none}
@media(max-width:760px){
  .kr-ghost{font-size:clamp(74px,27vw,190px)}
  .kr-ghost span{background-size:8px 8px}
  .kr-ghost span::after{-webkit-text-stroke-width:1px}
}

/* велике твердження на всю ширину — як «( THE ELITE )» у них */
.kr-claim{position:relative;z-index:2;
  max-width:1560px;margin:0 auto;
  padding:clamp(40px,7vw,120px) clamp(20px,4vw,72px);text-align:center}
.kr-claim p{margin:0;font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 72,'wght' 800;
  text-transform:uppercase;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(34px,7.6vw,128px);color:var(--nt);
  padding-bottom:.1em}
.kr-claim p em{font-style:normal;color:var(--red-tx)}
.kr-claim span{display:block;margin-top:clamp(18px,2.4vw,34px);
  font-size:clamp(14px,1.08vw,17px);line-height:1.74;color:var(--nb);
  max-width:56ch;margin-inline:auto}
.kr-claim-go{display:inline-flex;align-items:center;gap:13px;min-height:52px;
  margin-top:clamp(24px,3vw,40px);padding:0 clamp(24px,2.8vw,38px);
  background:var(--red-hi);color:#fff;text-decoration:none;border-radius:3px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  box-shadow:0 4px 0 rgba(0,0,0,.45);
  transition:transform .25s var(--e),box-shadow .25s var(--e)}
.kr-claim-go i{font-style:normal;transition:transform .3s var(--e)}
.kr-claim-go:hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(0,0,0,.5)}
.kr-claim-go:hover i{transform:translateX(5px)}


/* ═══════════════════════════════════════════════════════════════════════
   КОМПАНІЯ v94 — переведено на спільну систему решти аркушів
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── історія: один рельс, роки великим планом ───────────────────────── */
.ko-time{position:relative;max-width:1560px;margin:0 auto;
  padding:0 clamp(20px,4vw,72px)}
.ko-rail{list-style:none;margin:0;padding:0;position:relative}
/* рельс тягнеться рівно до останньої крапки, а не до низу блоку */
.ko-rail::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;
  background:var(--line);transform-origin:top;transform:scaleY(0);
  transition:transform 1.4s cubic-bezier(.22,.7,.2,1)}
.ko-rail.in::before{transform:scaleY(1)}
.ko-rail li{position:relative;padding:clamp(22px,3vw,40px) 0 clamp(22px,3vw,40px)
  clamp(34px,5vw,86px);
}
.ko-rail li::before{content:"";position:absolute;left:-4px;top:clamp(30px,3.6vw,52px);
  width:9px;height:9px;border-radius:50%;background:var(--red);
  transform:scale(0);transition:transform .55s cubic-bezier(.2,.9,.3,1) var(--fd,0ms)}
.ko-rail li.in::before{transform:scale(1)}
.ko-y{display:block;font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 72,'wght' 800;
  font-size:clamp(34px,5.4vw,86px);line-height:.96;letter-spacing:-.025em;
  padding-bottom:.08em;
  color:var(--red)}
.ko-rail h3{margin:clamp(10px,1.4vw,18px) 0 0;font-family:var(--display);
  font-weight:800;letter-spacing:-.016em;line-height:1.14;
  font-size:clamp(18px,1.9vw,28px);color:var(--ink)}
.ko-rail p{margin:10px 0 0;max-width:62ch;
  font-size:clamp(14px,1.02vw,16px);line-height:1.72;color:var(--muted)}
.ko-rail li:last-child .ko-y{color:var(--ink)}
.ko-rail li:last-child::before{background:var(--ink)}
.ko-soon{display:inline-block;margin-left:.5em;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);vertical-align:middle}

/* ─── сімейні цінності ──────────────────────────────────────────────── */
.ko-vals{list-style:none;margin:clamp(28px,4vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.8vw,48px)}
.ko-vals li{padding-top:clamp(18px,2.2vw,28px);border-top:1px solid var(--line)}
.ko-vals b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.7vw,24px);letter-spacing:-.014em;color:var(--ink)}
.ko-vals span{display:block;margin-top:11px;font-size:14.5px;line-height:1.72;
  color:var(--muted)}
@media(max-width:860px){ .ko-vals{grid-template-columns:minmax(0,1fr)} }

/* ─── команда: бейджі ────────────────────────────────────────────────
   Картка зроблена як перепустка: стрічка, кліпса, фото, під ним роль
   і імʼя. При появі бейдж падає згори й гойдається на стрічці —
   маятник загасає, а не просто зупиняється.                          */
.ko-people{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.6vw,26px);margin-top:clamp(40px,5vw,78px);
  align-items:start}
.bdg{margin:0;position:relative;padding-top:34px;
  transform-origin:50% 6px;will-change:transform}
/* стрічка й кліпса */
.bdg::before{content:"";position:absolute;left:50%;top:0;width:11px;height:30px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#1B2026 0 35%,#2A323A 35% 65%,#1B2026 65%);
  border-radius:2px}
.bdg::after{content:"";position:absolute;left:50%;top:26px;width:30px;height:12px;
  transform:translateX(-50%);border:2px solid #2A323A;border-radius:3px;
  background:var(--paper-2)}
.bdg-card{position:relative;z-index:1;overflow:hidden;border-radius:7px;
  background:#101418;border:1px solid rgba(16,19,23,.18);
  box-shadow:0 10px 26px rgba(16,19,23,.2);
  transition:box-shadow .5s var(--e)}
/* отвір під кліпсу */
.bdg-card::before{content:"";position:absolute;left:50%;top:9px;z-index:3;
  width:34px;height:7px;transform:translateX(-50%);
  background:var(--paper);border-radius:4px}
.bdg img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.06);
  transition:transform .9s var(--e),filter .5s var(--e)}
.bdg-cap{padding:clamp(13px,1.4vw,18px) clamp(12px,1.2vw,16px) clamp(15px,1.6vw,20px);
  border-top:1px solid rgba(242,241,237,.14)}
.bdg-cap b{display:block;font-family:var(--mono);font-size:clamp(10.5px,.86vw,12px);
  letter-spacing:.13em;text-transform:uppercase;color:#FF5F72;line-height:1.35}
.bdg-cap span{display:block;margin-top:7px;font-family:var(--display);
  font-weight:700;font-size:clamp(14px,1.15vw,18px);letter-spacing:-.01em;
  color:var(--paper);line-height:1.2}
.bdg-no{display:block;margin-top:clamp(11px,1.2vw,15px);
  padding-top:clamp(9px,1vw,12px);border-top:1px solid rgba(242,241,237,.1);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  font-style:normal;color:#8B939C}
.bdg:hover .bdg-card{box-shadow:0 18px 40px rgba(16,19,23,.3)}
.bdg:hover img{transform:scale(1.035);filter:grayscale(.12) contrast(1.02)}

/* гойдання при появі — маятник, що загасає */
@keyframes bdg-swing{
   0%{transform:translateY(-26px) rotate(-7deg)}
  28%{transform:translateY(0)     rotate(5.5deg)}
  50%{transform:rotate(-3.4deg)}
  70%{transform:rotate(2deg)}
  85%{transform:rotate(-1deg)}
 100%{transform:rotate(0)}
}
.fx-motion .bdg{opacity:0}
.fx-motion .bdg.in{opacity:1;
  animation:bdg-swing 1.5s cubic-bezier(.33,.9,.4,1) var(--fd,0ms) both;
  transition:opacity .4s var(--e) var(--fd,0ms)}
/* курсор підштовхує бейдж — він знову коротко гойдається */
.bdg:hover{animation:bdg-swing 1.1s cubic-bezier(.33,.9,.4,1)}
@media(prefers-reduced-motion:reduce){
  .fx-motion .bdg,.fx-motion .bdg.in{opacity:1;animation:none}
  .bdg:hover{animation:none}
}
@media(max-width:1000px){ .ko-people{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Два стовпці на телефоні; невеликий відступ з боків — бейдж гойдається
   навколо верхньої точки, і без запасу його кут виходить за край сторінки. */
@media(max-width:560px){ .ko-people{grid-template-columns:repeat(2,minmax(0,1fr));
  padding-inline:10px} }
.ko-people-note{margin:clamp(20px,2.6vw,32px) 0 0;max-width:56ch;
  font-size:clamp(14px,1.02vw,16px);line-height:1.74;color:var(--muted)}

/* ═══ ЦИФРИ · КОМПАНІЯ ════════════════════════════════════════════════
   Ні сітка з чотирьох колонок, ні стовпчик рядків не тримали увагу.
   Тут цифри лежать просто на кадрі дороги — одна смуга на всю ширину,
   під суцільним затемненням, щоб контраст не залежав від фотографії.  */
.kn{position:relative;overflow:clip;background:#0A0C0E;color:var(--paper);
  isolation:isolate}
.kn-bg{position:absolute;inset:0;z-index:0}
.kn-bg img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.06)}
.kn-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,10,.82) 0%,rgba(6,8,10,.9) 100%)}
.kn-in{position:relative;z-index:1;max-width:1560px;margin:0 auto;
  padding:clamp(54px,8vw,130px) clamp(20px,4vw,72px)}
.kn-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#FF5F72}
.kn-h{margin:clamp(14px,2vw,24px) 0 clamp(34px,5vw,72px);
  font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 72,'wght' 800;
  text-transform:uppercase;letter-spacing:-.026em;line-height:.96;
  padding-bottom:.08em;
  font-size:clamp(34px,6.6vw,110px);color:var(--paper)}
.kn-h em{font-style:normal;color:#FF5F72}

.kn-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border-top:1px solid rgba(242,241,237,.26)}
.kn-row > div{position:relative;
  padding:clamp(24px,3vw,44px) clamp(14px,2vw,34px) clamp(22px,2.6vw,36px) 0}
.kn-row > div + div{padding-left:clamp(14px,2vw,34px)}
/* волосини між колонками тягнемо псевдоелементом: border лишав подвійні */
.kn-row > div + div::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:1px;background:rgba(242,241,237,.2)}
.kn-fig{display:block;overflow:hidden}
.kn-fig b{display:block;font-family:var(--tech);font-weight:800;
  font-variation-settings:'wdth' 66,'wght' 800;
  font-size:clamp(50px,7.2vw,124px);line-height:.9;letter-spacing:-.035em;
  /* line-height .9 ріже хвости у «Р» і «Д»: лишаємо запас знизу,
     інакше .kn-fig{overflow:hidden} зрізає їх по-справжньому */
  color:var(--paper);padding-bottom:.14em;white-space:nowrap}
.kn-fig b i{font-style:normal;font-size:max(12px,.26em);font-weight:700;letter-spacing:.04em;
  font-variation-settings:'wdth' 100,'wght' 700;
  color:#FF5F72;margin-left:.16em;vertical-align:.62em}
.kn-lab{display:block;margin-top:clamp(14px,1.8vw,24px);
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:#FF5F72}
.kn-txt{display:block;margin-top:10px;font-size:13.5px;line-height:1.66;
  color:#D2D6DA}
@media(max-width:900px){
  .kn-row{grid-template-columns:minmax(0,1fr)}
  .kn-row > div + div{padding-left:0;border-top:1px solid rgba(242,241,237,.2)}
  .kn-row > div + div::before{display:none}
}
@media(max-width:520px){
  .kn-row{grid-template-columns:minmax(0,1fr)}
  .kn-row > div + div{padding-left:0;border-top:1px solid rgba(242,241,237,.2)}
  .kn-row > div + div::before{display:none}
}
/* поява: цифра виїжджає з-під маски, підпис слідом */
.fx-motion .kn-fig b{transform:translateY(106%);
  transition:transform .85s cubic-bezier(.2,.9,.25,1) var(--fd,0ms)}
.fx-motion .kn-row > div.in .kn-fig b{transform:none}
.fx-motion .kn-lab,.fx-motion .kn-txt{opacity:0}
.fx-motion .kn-row > div.in .kn-lab,
.fx-motion .kn-row > div.in .kn-txt{opacity:1;
  transition:opacity .6s var(--e) calc(var(--fd,0ms) + 240ms)}
@media(prefers-reduced-motion:reduce){
  .fx-motion .kn-fig b{transform:none}
  .fx-motion .kn-lab,.fx-motion .kn-txt{opacity:1}
}