/* enhance.css — motion & interaction layer for the static Framer copies.
   Pairs with enhance.js. Everything degrades to the plain static page
   when JS is off or the user prefers reduced motion. */

:root {
  --wk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wk-green: rgb(205, 245, 149);
  --wk-black: rgb(18, 19, 16);
}

/* ---------- Header: transparent over hero → green bar after scroll ---------- */
.framer-1sd5g3o-container .framer-iqpv7e {
  transition: background-color 0.35s var(--wk-ease), box-shadow 0.35s var(--wk-ease);
}
.framer-1sd5g3o-container .framer-text,
.framer-1sd5g3o-container .framer-196o9f5 {
  transition: color 0.35s var(--wk-ease), background-color 0.35s var(--wk-ease), border-color 0.35s var(--wk-ease);
}
html.wk-scrolled .framer-1sd5g3o-container .framer-iqpv7e {
  background-color: var(--wk-green) !important;
  box-shadow: 0 6px 24px rgba(18, 19, 16, 0.08);
}
html.wk-scrolled .framer-1sd5g3o-container .framer-1iaf9va,
html.wk-scrolled .framer-1sd5g3o-container .framer-m95gkn {
  --extracted-r6o4lv: var(--wk-black) !important;
}
/* logo is a link with its own white text preset */
html.wk-scrolled .framer-1sd5g3o-container .framer-1iaf9va a {
  --framer-link-text-color: var(--wk-black) !important;
  --framer-link-hover-text-color: var(--wk-black) !important;
  color: var(--wk-black) !important;
}
html.wk-scrolled .framer-1sd5g3o-container .framer-196o9f5 {
  background-color: var(--wk-black) !important;
  --border-top-width: 0px !important;
  --border-right-width: 0px !important;
  --border-bottom-width: 0px !important;
  --border-left-width: 0px !important;
}

/* ---------- Mobile menu (open state injected by enhance.js) ---------- */
html.wk-menu-open,
html.wk-menu-open body {
  overflow: hidden;
}
html.wk-menu-open .wk-top {
  display: none;
}
/* rule the static export lacks for the open-menu button wrapper */
.framer-ZjpvH .framer-19vx3a1-container {
  cursor: pointer;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  position: relative;
}

/* ---------- Nav links: underline sweep ---------- */
.framer-1sd5g3o-container .framer-1u3pf9w .framer-text {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s var(--wk-ease), color 0.35s var(--wk-ease);
}
.framer-1sd5g3o-container .framer-1u3pf9w:hover .framer-text {
  background-size: 100% 1px;
}

/* ---------- Buttons & pill links ---------- */
a[class*="framer-"][data-border="true"],
a.framer-196o9f5,
button {
  transition: transform 0.25s var(--wk-ease), box-shadow 0.25s var(--wk-ease), filter 0.25s var(--wk-ease);
}
a[class*="framer-"][data-border="true"]:hover,
a.framer-196o9f5:hover {
  translate: 0 -2px;
  box-shadow: 0 10px 24px rgba(18, 19, 16, 0.14);
  filter: brightness(1.04);
}
a[class*="framer-"][data-border="true"]:active,
a.framer-196o9f5:active {
  translate: 0 0;
  transition-duration: 0.08s;
}

/* ---------- Cards: gentle lift ---------- */
.wk-card {
  transition: translate 0.4s var(--wk-ease), box-shadow 0.4s var(--wk-ease);
}
.wk-card:hover {
  translate: 0 -6px;
  box-shadow: 0 18px 40px rgba(18, 19, 16, 0.12);
}
.wk-card img {
  transition: scale 0.8s var(--wk-ease);
}
.wk-card:hover img {
  scale: 1.04;
}

/* ---------- Carousels ---------- */
.framer-u5zx6x {
  scrollbar-width: none;
}
.framer-u5zx6x::-webkit-scrollbar {
  display: none;
}
[data-framer-name="Вперед"],
[data-framer-name="Назад"] {
  transition: background-color 0.25s var(--wk-ease), scale 0.25s var(--wk-ease);
  border-radius: 999px;
}
[data-framer-name="Вперед"]:hover,
[data-framer-name="Назад"]:hover {
  background-color: var(--wk-green);
  scale: 1.06;
}
[data-framer-name="Вперед"]:active,
[data-framer-name="Назад"]:active {
  scale: 0.95;
}

/* ==========================================================================
   Responsive fixes for the Framer copy
   Framer breakpoints: <390 · 390–767 · 768–1023 · 1024–1279 · 1280–1439 ·
   1440–1819 · ≥1820. Framer gives text boxes fixed px widths and sometimes
   shows a component's Desktop variant on tablets — both break between the
   widths the designer actually drew. Found by .work/resp3.mjs (audit).
   ========================================================================== */

/* Elements wider than their column are capped by enhance.js (fitToColumns):
   a blanket `max-width:100%` would collapse shrink-to-fit pills (country chips). */

/* Tablet (768–1023): "The job offer engine" uses its Desktop variant in a
   ~700px column — one 400px card + two cards squeezed to 24–130px. Stack them. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* the section is fixed at 780px — let it grow with the stacked cards */
  .framer-cg1o7a-container,
  .framer-cg1o7a-container .framer-610xU {
    height: auto !important;
  }
  .framer-bj1r05 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    gap: 16px !important;
  }
  .framer-bj1r05 > * {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .framer-bj1r05 > * > [data-framer-name="фото"] {
    flex: none !important;
    width: 100% !important;
    height: 300px !important;
  }
  .framer-bj1r05 > * > [data-framer-name="Текст"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
  }
}

/* Phones in landscape / short windows: the ~870px hero hides its headline
   and buttons below the fold. Fit the hero to the window height instead. */
@media (max-height: 560px) and (orientation: landscape) {
  #hero .framer-ysMa4 {
    height: 100svh !important;
    min-height: 340px;
  }
}

/* Long legal headings ("2. Immediate Performance…") on phones */
@media (max-width: 767.98px) {
  h1.framer-text,
  h2.framer-text,
  h3.framer-text {
    overflow-wrap: anywhere;
  }
}

/* Touch devices: no hover-lift (it sticks after a tap) and bigger tap areas */
@media (hover: none) {
  .wk-card:hover,
  a[class*="framer-"][data-border="true"]:hover,
  a.framer-196o9f5:hover {
    translate: none;
    box-shadow: none;
  }
  .wk-card:hover img {
    scale: none;
  }
  [data-framer-name="Burger"] {
    padding: 10px;
    margin: -10px;
    box-sizing: content-box;
  }
}

/* Very large screens: keep the back-to-top button inside a sane reach */
@media (min-width: 1820px) {
  .wk-top {
    right: calc((100vw - 1760px) / 2);
  }
}

/* ---------- Scroll reveal ---------- */
.wk-reveal {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 0.8s var(--wk-ease) var(--wk-delay, 0s),
    translate 0.9s var(--wk-ease) var(--wk-delay, 0s);
}
.wk-reveal.wk-in {
  opacity: 1;
  translate: 0 0;
}

/* Hero: hidden until enhance.js plays the entrance (failsafe in <head>) */
html.wk-preload #hero .framer-text {
  opacity: 0;
}
.wk-hero-item {
  opacity: 0;
  translate: 0 22px;
  filter: blur(6px);
  transition:
    opacity 1s var(--wk-ease) var(--wk-delay, 0s),
    translate 1s var(--wk-ease) var(--wk-delay, 0s),
    filter 1s var(--wk-ease) var(--wk-delay, 0s);
}
.wk-hero-item.wk-in {
  opacity: 1;
  translate: 0 0;
  filter: none;
}
#hero img {
  animation: wk-kenburns 18s var(--wk-ease) both;
}
@keyframes wk-kenburns {
  from { scale: 1.08; }
  to { scale: 1; }
}

/* ---------- FAQ ---------- */
.framer-174br .framer-1r2p9sp {
  transition: rotate 0.35s var(--wk-ease);
}
.framer-174br.framer-v-dkjvwc .framer-1r2p9sp,
.framer-174br.framer-v-w41u9w .framer-1r2p9sp {
  rotate: 180deg;
}
.framer-174br {
  transition: background-color 0.25s ease;
}

/* ---------- Back to top button ---------- */
.wk-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--wk-green);
  color: var(--wk-black);
  box-shadow: 0 8px 24px rgba(18, 19, 16, 0.25);
  font-size: 20px;
  line-height: 48px;
  cursor: pointer;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity 0.3s var(--wk-ease), translate 0.3s var(--wk-ease);
}
html.wk-show-top .wk-top {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}


@media (prefers-reduced-motion: reduce) {
  .wk-reveal,
  .wk-hero-item {
    opacity: 1 !important;
    translate: none !important;
    filter: none !important;
    transition: none !important;
  }
  #hero img {
    animation: none;
  }
  html.wk-preload #hero .framer-text {
    opacity: 1;
  }
}