/* enhance.css — motion & interaction layer for the static pages.
   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 ---------- */
.wr-1sd5g3o-container .wr-iqpv7e {
  transition: background-color 0.35s var(--wk-ease), box-shadow 0.35s var(--wk-ease);
}
.wr-1sd5g3o-container .wr-text,
.wr-1sd5g3o-container .wr-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 .wr-1sd5g3o-container .wr-iqpv7e {
  background-color: var(--wk-green) !important;
  box-shadow: 0 6px 24px rgba(18, 19, 16, 0.08);
}
html.wk-scrolled .wr-1sd5g3o-container .wr-1iaf9va,
html.wk-scrolled .wr-1sd5g3o-container .wr-m95gkn {
  --extracted-r6o4lv: var(--wk-black) !important;
}
/* logo is a link with its own white text preset */
html.wk-scrolled .wr-1sd5g3o-container .wr-1iaf9va a {
  --wr-link-text-color: var(--wk-black) !important;
  --wr-link-hover-text-color: var(--wk-black) !important;
  color: var(--wk-black) !important;
}
html.wk-scrolled .wr-1sd5g3o-container .wr-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 */
.wr-ZjpvH .wr-19vx3a1-container {
  cursor: pointer;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  position: relative;
}

/* ---------- Hover states — colours measured on the original site ---------- */
/* (The original drives these from JS, so the static pages have none.) No movement,
   shadows or scaling anywhere: only the colour changes, as in the original. */
.wr-196o9f5,
.wr-h33prf,
.wr-174br,
.wr-1sd5g3o-container .wr-1u3pf9w .wr-text,
.wr-196o9f5 .wr-text,
.wr-h33prf .wr-text {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  /* header menu: green over the hero, grey on the green bar */
  .wr-1sd5g3o-container .wr-1u3pf9w:hover [data-wr-component-type="RichTextContainer"] {
    --extracted-r6o4lv: var(--wk-green) !important;
  }
  html.wk-scrolled .wr-1sd5g3o-container .wr-1u3pf9w:hover [data-wr-component-type="RichTextContainer"] {
    --extracted-r6o4lv: rgb(99, 99, 99) !important;
  }
  /* glass buttons (header over the hero, hero buttons) */
  a.wr-196o9f5:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }
  /* header button on the green bar: black -> white */
  html.wk-scrolled .wr-1sd5g3o-container a.wr-196o9f5:hover {
    background-color: #fff !important;
  }
  html.wk-scrolled .wr-1sd5g3o-container a.wr-196o9f5:hover [data-wr-component-type="RichTextContainer"] {
    --extracted-r6o4lv: var(--wk-black) !important;
  }
  /* green CTA -> black, black CTA -> green */
  a.wr-h33prf.wr-v-h33prf:hover {
    background-color: var(--wk-black) !important;
  }
  a.wr-h33prf.wr-v-h33prf:hover [data-wr-component-type="RichTextContainer"] {
    --extracted-r6o4lv: #fff !important;
  }
  a.wr-h33prf.wr-v-y2vjnt:hover {
    background-color: var(--wk-green) !important;
  }
  a.wr-h33prf.wr-v-y2vjnt:hover [data-wr-component-type="RichTextContainer"] {
    --extracted-r6o4lv: var(--wk-black) !important;
  }
  .wr-174br:hover {
    background-color: var(--wk-green) !important;
  }
}
/* an open question stays green */
.wr-174br.wr-v-dkjvwc,
.wr-174br.wr-v-w41u9w {
  background-color: var(--wk-green) !important;
}

/* ---------- Carousels ---------- */
.wr-u5zx6x {
  scrollbar-width: none;
}
.wr-u5zx6x::-webkit-scrollbar {
  display: none;
}
/* ==========================================================================
   Responsive fixes for the static pages
   Breakpoints: <390 · 390–767 · 768–1023 · 1024–1279 · 1280–1439 ·
   1440–1819 · ≥1820. The export 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 */
  .wr-cg1o7a-container,
  .wr-cg1o7a-container .wr-610xU {
    height: auto !important;
  }
  .wr-bj1r05 {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    gap: 16px !important;
  }
  .wr-bj1r05 > * {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
  }
  .wr-bj1r05 > * > [data-wr="photo"] {
    flex: none !important;
    width: 100% !important;
    height: 300px !important;
  }
  .wr-bj1r05 > * > [data-wr="text"] {
    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) {
  [data-wk-anchor="hero"] .wr-ysMa4 {
    height: 100svh !important;
    min-height: 340px;
  }
}

/* Long legal headings ("2. Immediate Performance & Proportional Deduction") on
   phones: the green pill is one fixed-height line and cuts the text off —
   let it wrap onto a second line instead */
@media (max-width: 767.98px) {
  .wr-o83r43 {
    height: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }
  .wr-o6175c {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .wr-o6175c,
  .wr-o6175c .wr-text {
    white-space: normal !important;
  }
}

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

/* Hero: hidden until enhance.js plays the entrance (failsafe in <head>) */
html.wk-preload [data-wk-anchor="hero"] .wr-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;
}
/* ---------- FAQ ---------- */
.wr-174br .wr-1r2p9sp {
  transition: rotate 0.35s var(--wk-ease);
}
.wr-174br.wr-v-dkjvwc .wr-1r2p9sp,
.wr-174br.wr-v-w41u9w .wr-1r2p9sp {
  rotate: 180deg;
}

/* ---------- Footer accordion (phones / tablets) ---------- */
/* panels are baked in by scripts/patch-exact.py; enhance.js swaps the variant */
.wr-hapc6.wr-v-jfxjvv .wr-u4u32q {
  display: none;
}
.wr-hapc6 .wr-u4u32q {
  opacity: 0.7;
  overflow: hidden;
}
.wr-hapc6 .wr-mbc01t {
  cursor: pointer;
}
.wr-hapc6 .wr-15txpm9 {
  transition: rotate 0.35s var(--wk-ease);
}
.wr-hapc6.wr-v-13gtenc .wr-15txpm9 {
  rotate: 180deg;
}
/* The export hard-codes 358px (390 design) for the phone rows */
.wr-hapc6.wr-v-13gtenc .wr-14amwg6,
.wr-hapc6 .wr-1fzwgl4,
.wr-hapc6 .wr-2ieli6 {
  width: 100% !important;
}

/* ---------- Semantics added by scripts/fix-structure.py ---------- */
/* the hero headline wrapper is the page <h1>; it must look like the <div> it was */
h1[data-wk-h1]:not(.wr-text) {
  margin: 0;
  font: inherit;
}
.wk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* anchors land below the fixed header */
[data-wk-anchor] {
  scroll-margin-top: 76px;
}
[data-wk-anchor="hero"] {
  scroll-margin-top: 0;
}

/* ---------- Country chips on phones (a picture originally) ---------- */
.wr-1xduwy3 {
  height: auto !important;
}
.wk-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 4px;
  width: 100%;
  font: 400 13px/1 "Inter", "Inter Placeholder", sans-serif;
  color: var(--wk-black);
}
.wk-chips li {
  flex: 1 1 auto;
  box-sizing: border-box;
  height: 27px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  border-radius: 14px;
  white-space: nowrap;
}
.wk-chips .wk-chip-extra,
.wk-chips.wk-open .wk-chip-more {
  display: none;
}
.wk-chips.wk-open .wk-chip-extra {
  display: flex;
}
.wk-chips .wk-chip-more {
  padding: 0;
  background: var(--wk-green);
}
.wk-chip-more button {
  all: unset;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- Menu of inner pages (built by enhance.js) ---------- */
.wk-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  padding: 0 24px 24px;
  background: var(--wk-green);
  color: var(--wk-black);
  font-family: "Inter", "Inter Placeholder", sans-serif;
}
.wk-menu-top {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
}
.wk-menu a {
  color: inherit;
  text-decoration: none;
}
.wk-menu-logo {
  margin-right: auto;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wk-menu-cta {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--wk-black);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
}
.wk-menu-close {
  all: unset;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -14px;
  cursor: pointer;
}
.wk-menu-close::before,
.wk-menu-close::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 21px;
  width: 18px;
  height: 1.5px;
  background: var(--wk-black);
  rotate: 45deg;
}
.wk-menu-close::after {
  rotate: -45deg;
}
.wk-menu nav {
  margin-top: 38px;
}
.wk-menu nav a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--wk-black);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ---------- Touch targets: at least 44x44 without changing the look ---------- */
[data-wr="burger"],
[data-wr="menu-close"],
[data-wk-dots] button {
  position: relative;
}
[data-wr="burger"]::after,
[data-wr="menu-close"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
}
[data-wk-dots] button::after {
  content: "";
  position: absolute;
  inset: -16px -3px;
}

/* ---------- 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-hero-item {
    opacity: 1 !important;
    translate: none !important;
    filter: none !important;
    transition: none !important;
  }
  html.wk-preload [data-wk-anchor="hero"] .wr-text {
    opacity: 1;
  }
}