.wid-vacancies{
  --vacancy-ink:#17191d;
  --vacancy-muted:#70757d;
  position:relative;
  display:flex;
  height:100svh;
  min-height:620px;
  flex-direction:column;
  overflow:hidden;
  padding:92px 0 18px;
  /* Сверху — цвет сцены «Почему Дубай», чтобы серая сцена мягко перетекала в белый. */
  background:linear-gradient(#f2f3f4,#fff clamp(56px,7vw,90px));
  color:var(--vacancy-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Onest','Segoe UI',sans-serif;
}
.wid-vacancies:before{content:"";position:absolute;top:15%;left:50%;width:min(1040px,90vw);height:570px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(40,125,242,.065),rgba(255,255,255,0) 70%);pointer-events:none}
.wid-vacancies__intro,.wid-vacancy-showcase{position:relative;z-index:1}
.wid-vacancies__intro{width:min(1080px,calc(100% - 40px));margin:0 auto;text-align:center}
.wid-vacancies h2{margin:0 auto;max-width:18ch;font-size:clamp(34px,3.6vw,50px);font-weight:750;letter-spacing:-.045em;line-height:1.01}
.wid-vacancies__lead{max-width:45ch;margin:13px auto 0;color:var(--vacancy-muted);font-size:clamp(15px,1.35vw,18px);line-height:1.45}
.wid-vacancy-showcase{display:flex;min-height:0;flex:1;flex-direction:column;margin-top:24px}
.wid-vacancy-rail{display:flex;min-height:0;flex:1;gap:18px;width:100%;overflow-x:auto;padding:8px max(24px,calc((100vw - 940px)/2)) 16px;scroll-padding-inline:max(24px,calc((100vw - 940px)/2));scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y}
.wid-vacancy-rail::-webkit-scrollbar{display:none}
.wid-vacancy-rail.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.wid-vacancy-card{flex:0 0 min(880px,78vw);height:100%;min-height:0;scroll-snap-align:center;perspective:1800px;opacity:1;transform:scale(.985);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.wid-vacancy-card.is-active{opacity:1;transform:scale(1)}
.wid-vacancy-card__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.wid-vacancy-card.is-flipped .wid-vacancy-card__inner{transform:rotateY(180deg)}
.wid-vacancy-card__face{position:absolute;inset:0;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr);overflow:hidden;border:1px solid rgba(21,28,39,.045);border-radius:34px;background:#f3f4f6;box-shadow:0 26px 72px rgba(31,40,56,.1),0 2px 8px rgba(31,40,56,.035);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wid-vacancy-card__back{display:block;transform:rotateY(180deg);background:#f5f6f7}
.wid-vacancy-card__copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(34px,4vw,54px)}
.wid-vacancy-card h3{margin:0;max-width:11ch;font-size:clamp(36px,3.8vw,52px);font-weight:750;letter-spacing:-.052em;line-height:.96}
.wid-vacancy-card__copy>p{max-width:31ch;margin:17px 0 0;color:#686e76;font-size:16px;line-height:1.48}
.wid-vacancy-status{display:block;margin-top:20px;color:#176fd7;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.wid-vacancy-status i{display:none}.wid-vacancy-status.is-available,.wid-vacancy-status.is-recruiting{color:#176fd7}.wid-vacancy-status.is-limited{color:#a87415}.wid-vacancy-status.is-closed{color:#7b838e}
.wid-vacancy-card__more{z-index:5;display:inline-flex;width:172px;height:48px;align-items:center;justify-content:center;gap:10px;margin-top:auto;padding:0 20px;border:0;border-radius:999px;background:#1f7ff2;box-shadow:0 10px 24px rgba(31,127,242,.22);color:#fff;font-family:inherit;font-size:14px;font-weight:750;line-height:1;cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background .25s ease}
.wid-vacancy-card__more i{position:relative;display:block;width:18px;height:18px;flex:none;order:-1;color:#fff;font-size:0;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.wid-vacancy-card__more i:before,.wid-vacancy-card__more i:after{content:"";position:absolute;top:50%;left:50%;width:19px;height:2.5px;border-radius:999px;background:currentColor;transform:translate(-50%,-50%)}
.wid-vacancy-card__more i:after{transform:translate(-50%,-50%) rotate(90deg)}
.wid-vacancy-card__more:hover{background:#0875ee;box-shadow:0 15px 32px rgba(31,127,242,.3);transform:translateY(-2px)}
.wid-vacancy-card__more:hover i{transform:rotate(90deg)}
.wid-vacancy-card__art{position:relative;min-height:100%;overflow:hidden;isolation:isolate}
.wid-vacancy-card__art:before{content:"";position:absolute;z-index:0;inset:9%;border-radius:50%;filter:blur(32px);opacity:.84}
.wid-vacancy-card__art--blue:before{background:#d7edff}.wid-vacancy-card__art--orange:before{background:#ffe0b8}.wid-vacancy-card__art--violet:before{background:#e9d8ff}.wid-vacancy-card__art--green:before{background:#d8f1e6}
.wid-vacancy-card__halo{position:absolute;z-index:1;width:min(450px,40vw);aspect-ratio:1;left:50%;top:50%;transform:translate(-47%,-47%);border-radius:50%;border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 0 0 19px rgba(255,255,255,.22),inset 0 0 0 20px rgba(255,255,255,.5)}
.wid-vacancy-card__art img{position:absolute;z-index:2;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:scale(.95);filter:drop-shadow(0 26px 28px rgba(41,49,63,.15));transition:transform .32s cubic-bezier(.16,1,.3,1),filter .32s ease}
.wid-vacancy-card.is-active:not(.is-flipped) .wid-vacancy-card__art img{transform:scale(1);filter:drop-shadow(0 30px 32px rgba(41,49,63,.2))}
.wid-vacancy-card__close{position:absolute;z-index:3;top:28px;right:28px;display:grid;width:44px;height:44px;padding:0;border:1px solid rgba(20,27,38,.07);border-radius:50%;background:#fff;color:#17191d;place-items:center;font-family:inherit;font-size:20px;font-weight:700;line-height:1;cursor:pointer}
.wid-vacancy-card__details{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;padding:35px 72px 28px 42px}
.wid-vacancy-card__details h3{margin:0;max-width:18ch;padding-right:44px;font-size:clamp(28px,2.7vw,39px)}
.wid-vacancy-card__details>p{margin:7px 0 0;color:#747982;font-size:13px}
.wid-detail-groups{display:grid;grid-template-columns:.78fr 1.22fr;gap:18px;align-self:center;margin-top:16px}
.wid-detail-groups section{min-width:0}
.wid-detail-groups h4{margin:0 0 13px;color:#555b64;font-size:12px;font-weight:750;letter-spacing:.035em}
.wid-detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px}
.wid-detail-groups section:first-child .wid-detail-list{grid-template-columns:1fr}
.wid-detail-list>div{display:grid;min-height:67px;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:9px;padding:8px 10px;border:1px solid rgba(26,34,47,.04);border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 5px 16px rgba(40,49,64,.035);color:#555b64;font-size:12px;line-height:1.28}
.wid-detail-icon{display:grid;width:40px;height:40px;border-radius:50%;place-items:center;font-size:19px}
.wid-detail-icon i{font-style:normal}
.wid-detail-icon.is-blue{background:#d9efff;color:#1b9dea}.wid-detail-icon.is-orange{background:#ffe8c8;color:#f28b09}.wid-detail-icon.is-violet{background:#efdfff;color:#a04be1}.wid-detail-icon.is-green{background:#d9f3e6;color:#199d61}.wid-detail-icon.is-pink{background:#ffdce6;color:#f34173}.wid-detail-icon.is-yellow{background:#fff0c7;color:#e9a10b}
.wid-vacancy-card__details small{align-self:end;margin-top:12px;color:#8a8f96;font-size:10px;line-height:1.35}
.wid-vacancy-controls{position:relative;z-index:4;display:flex;width:100%;flex:none;align-items:center;justify-content:center;margin:0;padding:8px 0 0;background:#fff;box-shadow:0 -18px 30px rgba(255,255,255,.98)}
.wid-vacancy-progress{display:flex;align-items:center;justify-content:center;gap:13px;width:246px;height:62px;padding:12px 18px;border:1px solid #1b263a0a;border-radius:999px;background:#fff;box-shadow:0 12px 36px #1f293f0c;backdrop-filter:blur(18px) saturate(135%)}
.wid-vacancy-progress__track{display:flex;align-items:center;gap:13px}
.wid-vacancy-progress__moving{display:none}
.wid-vacancy-progress button{position:relative;width:9px;height:9px;overflow:hidden;padding:0;border:0;border-radius:999px;background:#959aa1;cursor:pointer;transition:width .5s cubic-bezier(.16,1,.3,1),transform .25s ease}
.wid-vacancy-progress button:hover{transform:scale(1.14)}
.wid-vacancy-progress button.is-active{width:66px;background:#959aa1}
.wid-vacancy-progress button.is-active:before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--vacancy-auto-progress,0)*100%);border-radius:inherit;background:#287cf1}
@media(max-width:700px){
  .wid-vacancies{height:100svh;min-height:560px;padding:92px 0 14px}.wid-vacancies__intro{width:100%;padding:0 20px}.wid-vacancies h2{font-size:clamp(29px,8.3vw,35px);max-width:17ch}.wid-vacancies__lead{max-width:34ch;margin-top:8px;font-size:13px;line-height:1.36}.wid-vacancy-showcase{margin-top:18px}
  .wid-vacancy-rail{gap:12px;padding:5px 24px 10px;scroll-padding-inline:24px;touch-action:pan-x pan-y}.wid-vacancy-card{flex-basis:calc(100vw - 48px);height:100%;min-height:0;opacity:.58;transform:scale(.975)}
  .wid-vacancy-card__face{grid-template-columns:1fr;grid-template-rows:minmax(0,58%) minmax(0,42%);border-radius:29px}.wid-vacancy-card__copy{grid-row:2;padding:16px 20px 18px}
  .wid-vacancy-card h3{margin:0;max-width:14ch;font-size:clamp(27px,8vw,34px);line-height:.96}.wid-vacancy-card__copy>p{margin-top:8px;font-size:13px;line-height:1.35}.wid-vacancy-status{margin-top:10px;font-size:13px}.wid-vacancy-card__more{width:158px;height:44px;gap:9px;padding:0 18px;font-size:13px}.wid-vacancy-card__more i{width:17px;height:17px}.wid-vacancy-card__more i:before,.wid-vacancy-card__more i:after{width:17px;height:2px}.wid-vacancy-card__art{grid-row:1;min-height:0}.wid-vacancy-card__halo{width:min(285px,72vw)}.wid-vacancy-card__art img{width:100%;height:100%;transform:scale(.95)}.wid-vacancy-card.is-active:not(.is-flipped) .wid-vacancy-card__art img{transform:scale(1)}
  .wid-vacancy-card__close{top:14px;right:14px;width:36px;height:36px}.wid-vacancy-card__details{display:flex;height:100%;overflow-y:auto;padding:18px 15px 22px;flex-direction:column;scroll-padding-block:16px;scrollbar-width:none}.wid-vacancy-card__details::-webkit-scrollbar{display:none}.wid-vacancy-card__details h3{padding-right:42px;font-size:clamp(23px,6.8vw,28px)}.wid-vacancy-card__details>p{margin-top:4px;font-size:12px;line-height:1.35}.wid-detail-groups{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}.wid-detail-groups h4{margin-bottom:8px;font-size:12px;line-height:1.3}.wid-detail-list,.wid-detail-groups section:first-child .wid-detail-list{grid-template-columns:1fr;gap:8px}.wid-detail-list>div{min-height:54px;grid-template-columns:38px 1fr;gap:11px;padding:8px 12px;border-radius:16px;font-size:13px;line-height:1.35}.wid-detail-icon{width:38px;height:38px;font-size:18px}.wid-vacancy-card__details small{margin-top:14px;padding:0 2px 8px;font-size:10px;line-height:1.45}
  .wid-vacancy-controls{padding-top:8px}
  .wid-vacancy-progress{justify-content:flex-start;width:238px;height:54px;gap:0;padding:8px 18px;
    border:1px solid #1b263a0a;background:#fff;box-shadow:0 12px 36px #1f293f0c;overflow:hidden}
  .wid-vacancy-progress__track{position:relative;flex:none;gap:0;width:max-content;transform:translateX(var(--vacancy-track-offset,0px));
    transition:transform .38s cubic-bezier(.2,.8,.2,1)}
  .wid-vacancy-progress button{display:grid;place-items:center;flex:none;min-width:40px;width:40px;height:36px;padding:0;
    overflow:visible;background:transparent;transition:none}
  .wid-vacancy-progress button:before{content:"";position:static;display:block;width:10px;height:10px;
    border-radius:20px;background:#9298a0;transition:none}
  .wid-vacancy-progress button.is-active{width:40px;background:transparent;z-index:1}
  .wid-vacancy-progress button.is-active:before{opacity:0}
  .wid-vacancy-progress__moving{display:block;position:absolute;left:0;top:50%;width:48px;height:10px;
    border-radius:999px;pointer-events:none;z-index:2;
    transform:translate3d(var(--vacancy-active-x,-4px),-50%,0);
    transition:transform .48s cubic-bezier(.22,.7,.2,1)}
  .wid-vacancy-progress__moving:before{content:"";position:absolute;inset:0;border-radius:inherit;background:#287cf1}
  .wid-vacancy-progress__moving.is-moving:before{animation:wid-vacancy-worm .48s ease-in-out both}
}
@keyframes wid-vacancy-worm{0%,100%{transform:scaleX(1)}48%{transform:scaleX(1.36)}}
@media(max-width:700px) and (max-height:700px){
  .wid-vacancies{height:100svh;min-height:100svh;padding:88px 0 6px}.wid-vacancies__intro{padding:0 16px}.wid-vacancies h2{font-size:28px}.wid-vacancies__lead{max-width:36ch;margin-top:5px;font-size:11.5px;line-height:1.3}.wid-vacancy-showcase{margin-top:8px}
  .wid-vacancy-rail{padding-top:3px;padding-bottom:5px}.wid-vacancy-card__face{grid-template-rows:minmax(0,44%) minmax(0,56%)}.wid-vacancy-card__copy{padding:12px 18px 14px}.wid-vacancy-card h3{font-size:clamp(25px,7.3vw,29px)}.wid-vacancy-card__copy>p{margin-top:5px;font-size:11.5px;line-height:1.28}.wid-vacancy-status{margin-top:6px;font-size:12px}.wid-vacancy-card__more{width:146px;height:40px;gap:8px;padding:0 15px;font-size:12.5px}.wid-vacancy-card__more i{width:15px;height:15px}.wid-vacancy-card__more i:before,.wid-vacancy-card__more i:after{width:15px}
  .wid-vacancy-controls{margin-top:0;padding-top:3px}
}
@media(max-width:359px) and (max-height:600px){
  .wid-vacancy-card__face{grid-template-rows:minmax(0,42%) minmax(0,58%)}
  .wid-vacancy-card__copy{padding:9px 16px 11px}
  .wid-vacancy-card h3{font-size:24px}
  .wid-vacancy-card__copy>p{margin-top:4px;font-size:11px}
  .wid-vacancy-status{margin-top:4px;font-size:11.5px}
  .wid-vacancy-card__more{height:38px}
}
@media(prefers-reduced-motion:reduce){.wid-vacancy-card,.wid-vacancy-card__inner,.wid-vacancy-card__art img,.wid-vacancy-progress button,.wid-vacancy-progress__moving,.wid-vacancy-progress__track{transition:none!important}}
@media(prefers-reduced-motion:reduce){.wid-vacancy-progress__moving:before{animation:none!important}}

/* Вакансий стало много: точки-переключатели держим компактными. */
.wid-vacancy-progress button.is-hidden{display:none}
@media(max-width:700px){.wid-vacancy-progress button.is-hidden{display:grid}}
.wid-vacancy-progress button.is-edge{transform:scale(.6);opacity:.55}
/* Вертикальная картинка вписывается в кадр целиком: человек не обрезается
   ни на телефоне, ни на компьютере. */
.wid-vacancy-card__art.is-portrait img{left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:scale(.97)}
.wid-vacancy-card.is-active:not(.is-flipped) .wid-vacancy-card__art.is-portrait img{transform:scale(1)}

/* Карточка без картинки (файл ещё не загружен) показывает только текст. */
.wid-vacancy-card__art.is-artless img{display:none}
.wid-vacancy-card__art.is-artless:before{opacity:.5}

/* Оборот карточки на телефоне: содержимое длиннее экрана, поэтому оно
   прокручивается внутри карточки. Снизу — мягкая тень, чтобы было видно,
   что список продолжается, и запас, чтобы последний пункт не прилипал к краю. */
@media(max-width:700px){
  .wid-vacancy-card__back{position:absolute;overflow:hidden}
  .wid-vacancy-card__details{padding-bottom:30px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .wid-vacancy-card__back:after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:34px;
    background:linear-gradient(180deg,rgba(245,246,247,0),rgba(245,246,247,.96));pointer-events:none}
}

/* ---------- Телефон: карточки вакансий ----------
   Было: секция ровно в один экран, карточка растянута на всю высоту. На iPhone
   высота экрана «плавает» из-за адресной строки — кнопка «Подробнее» сжималась,
   картинки обрезались, а под переключателем появлялась резкая серая полоса
   (край блока). Теперь высоту задаёт содержимое карточки, все карточки
   одинаковые, и ничего не скачет при листании.

   Переворот делаем без трёхмерного разворота: на iOS он местами показывал
   зеркальный текст. Вместо этого лицо плавно уходит, а оборот проявляется. */
@media(max-width:700px){
  .wid-vacancies{height:auto;min-height:0;padding:74px 0 16px}
  .wid-vacancy-showcase{flex:none;margin-top:16px}
  .wid-vacancy-rail{flex:none;align-items:stretch;padding:6px 24px 14px}
  /* высоту задаёт содержимое лицевой стороны: так карточка никогда не
     обрезается строкой браузера, какой бы она ни была */
  .wid-vacancy-card{height:auto;min-height:0}
  .wid-vacancy-card__inner{height:100%;min-height:0;transform:none!important;transform-style:flat;transition:none;will-change:auto}
  /* все карточки одной высоты — при листании ничего не прыгает */
  /* Переворот как в макете: карточка поворачивается в пространстве.
     Поворачиваем каждую сторону отдельно (без общего трёхмерного слоя) —
     тогда Safari не показывает зеркальный текст лицевой стороны. */
  .wid-vacancy-card{perspective:1600px}
  .wid-vacancy-card__face{display:grid;grid-template-rows:auto minmax(0,1fr);
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    transition:transform .52s cubic-bezier(.2,.75,.2,1),opacity 0s linear .26s,visibility 0s linear .26s}
  /* лицевая сторона задаёт высоту, оборот лежит поверх неё */
  .wid-vacancy-card__front{position:relative;inset:auto;height:auto}
  .wid-vacancy-card__back{position:absolute;inset:0;height:100%}
  .wid-vacancy-card__front{transform:rotateY(0deg)}
  .wid-vacancy-card__back{transform:rotateY(180deg);opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}
  .wid-vacancy-card.is-flipped .wid-vacancy-card__front{transform:rotateY(-180deg);opacity:0;visibility:hidden;pointer-events:none}
  .wid-vacancy-card.is-flipped .wid-vacancy-card__back{transform:rotateY(0deg);opacity:1;visibility:visible;pointer-events:auto}
  .wid-vacancy-card__art{aspect-ratio:4/3;min-height:0;height:auto}
  .wid-vacancy-card__copy{grid-row:auto;padding:16px 20px 20px}
  .wid-vacancy-card__more{margin-top:16px}
  /* соседние карточки не притухают: на телефоне это читалось как «картинка не загрузилась» */
  .wid-vacancy-card{opacity:1}
  .wid-vacancy-card:not(.is-active){transform:scale(.985)}
  .wid-vacancy-card__details{height:100%}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .wid-vacancy-card__face{transition:none}
}