/* WorkxIN — detachering (concept). Zakelijker dan werken-bij: wit en beige, dunne lijnen, geel alleen als accent. */
.wi .kop-balk .wi-merk { display: flex; align-items: center; gap: 14px; }
.wi-label { padding-left: 14px; border-left: 1px solid var(--lijn); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); white-space: nowrap; }
.wi-label b, .wi-lbl b, .wt-lbl b { color: var(--inkt); font-weight: 500; }

.wi-lbl, .o-nr { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); text-wrap: balance; }
.wi-kop { margin: 0; font-size: clamp(32px, 3.6vw, 52px); font-weight: 400; text-transform: uppercase; line-height: 1.05; }
.wi-kop strong { font-weight: 500; }
.wi-sectie { padding-block: clamp(72px, 9vw, 128px); } /* sectiewitruimte volgens de norm (clamp 72–128) */
.wi-sectie.beige { background: var(--beige); }
.wi-kopregel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 60px); }
.wi-kopregel p { margin: 0; max-width: 56ch; color: var(--grijs); font-size: 18px; }

.wi-knop { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px 14px; background: var(--inkt); color: var(--wit); text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: .01em; border-radius: 2px; transition: color .25s; }
.wi-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.wi-knop:hover::before, .wi-knop:focus-visible::before { transform: scaleX(1); }
.wi-knop:hover, .wi-knop:focus-visible { color: var(--inkt); }
.wi-knop svg, .wi-knop-rand svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.wi-knop:hover svg, .wi-knop-rand:hover svg { transform: translateX(4px); }
.wi-knop-rand { display: inline-flex; align-items: center; gap: 12px; padding: 14px 23px 13px; border: 1px solid var(--inkt); color: var(--inkt); text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: .01em; border-radius: 2px; transition: background .25s, color .25s; }
/* knoppennorm (30 okt): zelfde hover als .kn-knop op home en .wb-knop-licht op werken-bij: geel van links, tekst blijft inkt */
.wi-knop-rand { position: relative; isolation: isolate; overflow: hidden; }
.wi-knop-rand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.wi-knop-rand:hover, .wi-knop-rand:focus-visible { color: var(--inkt); }
.wi-knop-rand:hover::before, .wi-knop-rand:focus-visible::before { transform: scaleX(1); }

/* held: de duiven op de stok, één vliegt uit naar de klant */
.wi-held { position: relative; padding: clamp(48px, 6vw, 96px) 0 0; overflow: hidden; background: var(--beige); }
.wi-held .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.wi-held h1 { margin: 18px 0 24px; font-size: clamp(40px, 5.2vw, 76px); font-weight: 400; text-transform: uppercase; line-height: 1.02; letter-spacing: -.005em; }
.wi-held h1 strong { font-weight: 500; }
@media (max-width: 344px) { .wi-held h1 { font-size: 36px; } }
.wi-held p.lead { margin: 0 0 34px; max-width: 54ch; font-size: 18px; color: var(--grijs); }
.wi-held .knoppen { display: flex; flex-wrap: wrap; gap: 14px; }
.wi-beeld { position: relative; aspect-ratio: 1 / .9; }
.wi-stok { position: absolute; left: 0; bottom: 6%; width: 78%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .06)); }
.wi-feiten { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 88px); margin-bottom: 0; padding: 0; }
.wi-feiten li { list-style: none; padding: 22px 24px 26px 0; transition: opacity .7s ease calc(var(--i, 0) * .12s), transform .9s var(--ease) calc(var(--i, 0) * .12s); }
.wi-feiten li + li { padding-left: 24px; border-left: 1px solid var(--lijn); }
.wi-feiten b { display: block; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.15; margin-bottom: 6px; }
.wi-feiten span { font-size: 15px; color: var(--grijs); }

/* gedetacheerd bij: eigen, prominente band (kaartopmaak: .k1 hieronder). Het aantal klanten wisselt (dashboard):
   kolommen vullen zich, geen lege vakken */
.wi-gedetacheerd { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; margin: 0; padding: 0; }
.wi-gedetacheerd li { list-style: none; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.wi-gedetacheerd .logo-vak { display: flex; align-items: center; justify-content: center; flex: 1; }
/* detacheringslogo's in zwart-wit en nooit vervormd */
.wi-gedetacheerd img { height: auto; width: auto; max-width: 100%; max-height: var(--h, 34px); object-fit: contain; filter: brightness(0); }
/* logo's even zwaar bij drie per rij (561–1199): niet breder dan op 1440, waar de kaartbreedte al begrenst */
.wi-gedetacheerd .logo-vak img { max-width: min(100%, 146px); }
.wi-gedetacheerd .stempel { display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.wi-gedetacheerd .stempel i { width: 7px; height: 7px; border-radius: 50%; background: var(--inkt); flex: none; }
.wi-klanten { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: center; gap: 24px clamp(24px, 4vw, 56px); margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--lijn); }
.wi-klanten p { margin: 0; font-size: 15px; color: var(--grijs); }
.wi-klanten p b { display: block; margin-bottom: 4px; color: var(--inkt); font-weight: 500; }
.wi-klanten .logoband { margin-top: 0; }
.wi-klanten .logoband-item { height: 56px; margin-right: 52px; }
.wi-klanten .logoband-item img { height: calc(var(--h, 40px) * .78); opacity: .6; }

@media (max-width: 1000px) {
  .wi-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wi-feiten li:nth-child(3) { padding-left: 0; border-left: 0; }
  .wi-feiten li:nth-child(n+3) { border-top: 1px solid var(--lijn); }
}
@media (max-width: 860px) {
  .wi-held .wrap, .wi-kopregel, .wi-klanten { grid-template-columns: minmax(0, 1fr); }
  /* gelijk aan het contactblok: op de linkerlijn, en geen leeg vlak tussen knoppen en duiven (lagere verhouding) */
  .wi-beeld { max-width: 420px; width: 100%; justify-self: start; aspect-ratio: 1 / .66; }
}
/* keuze 30 okt (optie 1): tussen 561 en 860 tekst en duiven naast elkaar, zoals vanaf 861 (tekst links, tekening rechts, kleiner) */
@media (min-width: 561px) and (max-width: 860px) {
  .wi-held .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .wi-beeld { max-width: none; justify-self: stretch; aspect-ratio: 1 / .9; }
  /* 'ARBEIDSRECHT-' past zo tot ca. 625px in de smallere tekstkolom (min. 36px, zoals tot 344px) */
  .wi-held h1 { font-size: min(clamp(40px, 5.2vw, 76px), 6.4vw); }
}
/* waar het label in de smallere kolom op twee regels valt: zoals op smalle telefoons geen losse punt, de rest op een eigen regel */
@media (min-width: 561px) and (max-width: 639px) { .wi-held .wi-lbl:lang(nl) .wi-lbl-punt { display: none; } .wi-held .wi-lbl:lang(nl) .wi-lbl-rest { display: block; } }
@media (min-width: 561px) and (max-width: 679px) { .wi-held .wi-lbl:lang(en) .wi-lbl-punt { display: none; } .wi-held .wi-lbl:lang(en) .wi-lbl-rest { display: block; } }
@media (max-width: 560px) {
  .wi-feiten { grid-template-columns: minmax(0, 1fr); }
  .wi-feiten li, .wi-feiten li + li { padding: 18px 0; border-left: 0; }
  .wi-feiten li + li { border-top: 1px solid var(--lijn); }
}

/* feitenrij over de volle breedte */
.wi-held .wrap + .wrap { display: block; }
@media (max-width: 560px) { .wi-gedetacheerd { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* held (keuze Jochem 28 okt): beige, vogel vliegt naar 'in huis.' en landt; daarna de gele markeerstift (workx-in.js) */
.wi-held > .wrap { position: relative; z-index: 2; }
.wi-held h1 mark { position: relative; z-index: 0; color: inherit; background: none; padding: 0 .08em; margin-left: -.08em; white-space: nowrap; }
.wi-held h1 mark::before { content: ""; position: absolute; inset: 8% 0 6%; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.wi-held h1 mark.aan::before, html:not(.js) .wi-held h1 mark::before { transform: none; }
.wi-vluchtlijn { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.wi-vluchtlijn .pad { fill: none; stroke: var(--inkt); stroke-width: 1.3; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .5; }
.wi-vluchtlijn .masker { fill: none; stroke: var(--wit); stroke-width: 10; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wi-vlieger { position: absolute; left: 0; top: 0; z-index: 3; width: clamp(52px, 5.4vw, 80px); height: auto; opacity: 0; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .1)); }
.wi-vlieger.geland { animation: wiDobber 4.5s ease-in-out infinite; }
@keyframes wiDobber { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .wi-vlieger.geland { animation: none; } .wi-held h1 mark::before { transition: none; } }
@media (max-width: 860px) { .wi-vluchtlijn { display: none; } }

/* ===== keuzes Jochem 28 okt, overgenomen uit workx-in-opties-held.html en -werkwijze.html ===== */
.o-vogel { pointer-events: none; }
.a1 h3, .b1-stappen h3 { margin: 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.25; color: var(--inkt); }

/* feitenrij (optie 1): de lijn tekent zich, 3 tot 20 telt op, onder elk feit groeit een gele streep */
.wi-feiten::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--inkt); transform-origin: left; transition: transform 1.2s var(--ease); }
.wi-feiten b::after { content: ""; display: block; width: 56px; height: 6px; margin-top: 14px; background: var(--geel-diep); transform-origin: left; transition: transform .8s var(--ease) calc(.4s + var(--i, 0) * .15s); }
.beweeg .wi-feiten:not(.in)::before, .beweeg .wi-feiten:not(.in) b::after { transform: scaleX(0); }
.beweeg .wi-feiten:not(.in) li { opacity: 0; transform: translateY(12px); }

/* Wanneer WorkxIN (optie 1): gele tegels; tekst in alle tegels op dezelfde lijn (subgrid) */
.a1 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
.a1 li { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; padding: 28px 26px; background: var(--beige); border-radius: 2px; }
.a1 li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.a1 li:hover::before, .a1 li:focus-within::before { transform: none; }
.a1-nr { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--geel); border: 1.5px solid var(--inkt); font-size: 17px; font-weight: 500; color: var(--inkt); transition: background-color .4s, color .4s; }
.a1 li:hover .a1-nr, .a1 li:focus-within .a1-nr { background: var(--inkt); color: var(--geel); }
.a1 h3 { margin: 30px 0 12px; align-self: start; }
.a1 p { margin: 0; color: var(--grijs); font-size: 16px; align-self: start; } /* zonder link (weg 31 okt, "too much"): onderin dezelfde witruimte als boven */
.a1-vogel { position: absolute; right: 16px; top: 18px; width: 70px; opacity: 0; transform: translate(-60px, 40px) rotate(12deg) scale(.8); transition: opacity .5s ease, transform .9s var(--ease); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .16)); }
.a1 li:hover .a1-vogel, .a1 li:focus-within .a1-vogel { opacity: 1; transform: none; }
.beweeg .a1 li { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s var(--ease); transition-delay: calc(var(--i) * .12s); }
.beweeg .a1.in li { opacity: 1; transform: none; }
@supports not (grid-template-rows: subgrid) { .a1 li { display: flex; flex-direction: column; } .a1 h3 { min-height: 2.5em; } }

/* Zo werkt het (optie 1): route zoals 'Groeien bij Workx', de vogel vliegt mee naar stap 4 */
.b1 { position: relative; padding-top: 74px; }
.b1-stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.b1-stappen li { position: relative; padding-top: 44px; }
/* vier naast elkaar: nummer, kop en uitleg per rij op één lijn, ook als een kop over twee regels loopt (subgrid, zoals .a1) */
@media (min-width: 861px) { .b1-stappen li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; } }
.b1-punt { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--wit); border: 2px solid var(--ladder-lijn); transition: border-color .3s, background-color .3s, transform .4s var(--ease); transition-delay: calc(var(--i) * .8s + .3s); }
.b1-stappen li:last-child .b1-punt { width: 26px; height: 26px; left: -3px; top: -3px; }
.b1-stappen .o-nr { margin-bottom: 10px; transition: color .3s; transition-delay: calc(var(--i) * .8s + .3s); }
.b1-stappen h3 { margin-bottom: 10px; transition: color .3s; transition-delay: calc(var(--i) * .8s + .3s); }
.b1-stappen p { margin: 0; color: var(--grijs); font-size: 16px; }
.b1-lijn { position: absolute; left: calc(var(--x0, 10px) - 3px); top: calc(var(--y0, 84px) - 3px); width: calc(var(--x3, 0px) - var(--x0, 0px) + 6px); height: calc(var(--y3, 0px) - var(--y0, 0px) + 6px); background: var(--ladder-lijn); border-radius: 3px; }
.b1-vol { position: absolute; inset: 0; background: var(--geel-diep); border-radius: 3px; transform-origin: left top; }
.b1-vogel { position: absolute; z-index: 2; left: var(--x3); top: var(--y3); width: 104px; transform: translate(-40%, calc(-100% - 14px)); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .16)); }
.b1-vogel img { width: 100%; }
.b1.in .b1-punt { border-color: var(--inkt); background: var(--geel); }
.b1.in .b1-stappen li:last-child .b1-punt { transform: scale(1.12); }
.beweeg .b1 .b1-stappen .o-nr, .beweeg .b1 .b1-stappen h3 { color: var(--stap-uit); }
.beweeg .b1.in .b1-stappen .o-nr { color: var(--grijs); }
.beweeg .b1.in .b1-stappen h3 { color: var(--inkt); }
/* lijn en vogel bewegen alleen via transform/translate (geen clip-path of left/top: dat kost layout per frame) */
.beweeg .b1 .b1-vol { transform: scaleX(0); }
.beweeg .b1.in .b1-vol { transform: none; transition: transform 2.4s cubic-bezier(.45, 0, .25, 1) .3s; }
.beweeg .b1 .b1-vogel { translate: calc(var(--x0, 10px) - var(--x3, 0px)) calc(var(--y0, 84px) - var(--y3, 0px)); }
.beweeg .b1.in .b1-vogel { translate: 0 0; transition: translate 2.4s cubic-bezier(.45, 0, .25, 1) .3s; }
@media (max-width: 860px) { .beweeg .b1 .b1-vol { transform: scaleY(0); } }
.beweeg .b1.in .b1-vogel img { animation: b1Slag .8s ease-in-out .3s 3; }
@keyframes b1Slag { 50% { transform: translateY(-7px) rotate(-4deg); } }
.b1.klaar * { transition-delay: 0s !important; }

@media (max-width: 1100px) {
  .a1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .a1 h3, .b1-stappen h3 { font-size: 19px; }
  .b1 { padding-top: 0; }
  .b1-stappen { grid-template-columns: minmax(0, 1fr); padding-left: 52px; }
  .b1-stappen li { padding: 0 0 40px; }
  .b1-stappen li:last-child { padding-bottom: 0; }
  .b1-punt { left: -52px; top: 2px; }
  .b1-stappen li:last-child .b1-punt { left: -55px; top: -1px; }
  .b1-vogel { width: 54px; transform: translate(-18%, calc(-100% - 12px)); }
}
@media (max-width: 560px) {
  .a1 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .a1 li::before, .a1-vogel, .b1 *, .wi-feiten li, .wi-feiten::before, .wi-feiten b::after { transition: none !important; animation: none !important; }
}
/* bovenbalk: label wijkt als het menu krap wordt (anders valt NL | EN buiten beeld rond 1024) */
@media (max-width: 1279px) { .wi-label { display: none; } } /* detailtoets: tot 1279 i.p.v. 1240, anders schuift NL | EN voorbij de rechtermarge */

/* beeldcontrole 28 okt: op mobiel geen lege halve tegel; band zonder vervaagde rand bij 'minder beweging' */
@media (max-width: 560px) { .wi-gedetacheerd li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .logoband { -webkit-mask-image: none; mask-image: none; } }

/* Gedetacheerd bij (keuze Jochem 28 okt: optie 1 van workx-in-opties-klanten.html): gele kaarten, bij aanwijzen de ervaring in het zwart */
.k1 .wi-gedetacheerd { gap: 12px; background: none; border: 0; }
.k1 .wi-gedetacheerd li { position: relative; overflow: hidden; min-height: 210px; padding: 24px 22px 20px; background: var(--geel); border-radius: 2px; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.k1 .wi-gedetacheerd .stempel { color: var(--inkt); font-size: 13px; letter-spacing: .14em; }
.k1 .achter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 22px; background: var(--inkt); color: var(--wit); transform: translateY(101%); transition: transform .5s var(--ease); } /* alleen transform animeren (li heeft overflow: hidden) */
.k1 .achter p.frag { font-size: 18px; } .k1 .achter .frag { margin: 0 0 auto; font-size: 21px; line-height: 1.25; color: var(--geel); }
.k1 .achter .rol { margin: 0; font-size: 15px; color: var(--lijn); }
.k1 .achter a { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px; color: var(--wit); font-size: 15px; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.k1 .wi-gedetacheerd li:hover, .k1 .wi-gedetacheerd li:focus-within, .k1 .wi-gedetacheerd li.open { transform: translateY(-4px); box-shadow: 0 16px 28px -16px rgba(0, 0, 0, .35); }
.k1 .wi-gedetacheerd li:hover .achter, .k1 .wi-gedetacheerd li:focus-within .achter, .k1 .wi-gedetacheerd li.open .achter { transform: none; }
.js .k1 .wi-gedetacheerd li { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease) calc(var(--i, 0) * 110ms), transform .7s var(--ease) calc(var(--i, 0) * 110ms), box-shadow .45s var(--ease); }
.js .k1 .wi-gedetacheerd.in li { opacity: 1; transform: none; }
.js .k1 .wi-gedetacheerd.in li:hover, .js .k1 .wi-gedetacheerd.in li:focus-within, .js .k1 .wi-gedetacheerd.in li.open { transform: translateY(-4px); transition-delay: 0s; }
@media (hover: none) { .k1 .wi-gedetacheerd li { cursor: pointer; } }
@media (hover: hover) { .k1 .wi-gedetacheerd.muis-stil li { pointer-events: none; } }
/* touch: na een tweede tik is .open weg, maar :hover blijft hangen; dan moet de kaart toch dicht */
@media (hover: none) { .k1 .wi-gedetacheerd li:hover:not(.open):not(:focus-within) .achter { transform: translateY(101%); } .k1 .wi-gedetacheerd li:hover:not(.open):not(:focus-within), .js .k1 .wi-gedetacheerd.in li:hover:not(.open):not(:focus-within) { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .js .k1 .wi-gedetacheerd li { opacity: 1; transform: none; transition: none; } .k1 .achter { transition: none; } }
@media (max-width: 560px) {
  .k1 .wi-gedetacheerd li { min-height: 230px; padding: 16px; }
  /* achterkant op een smalle kaart: van boven beginnen, zodat de quote niet boven uit de kaart valt */
  .k1 .achter { justify-content: flex-start; gap: 6px; padding: 16px; }
  .k1 .achter .frag, .k1 .achter p.frag { margin: 0; font-size: 16px; }
  .k1 .achter .rol { font-size: 15px; }
  .k1 .achter a { margin-top: auto; }
}
@media (max-width: 360px) { .k1 .wi-gedetacheerd li { min-height: 262px; } }

/* ===== In hun woorden (keuze Jochem 28 okt: optie 2 van workx-in-opties-klanten.html): zwart, als een film.
   Wijziging klant: de bedrijven als kolom links (zoals optie 1), per tab logo + naam + gele voortgangsbalk.
   Gedrag in workx-in.js (data-wf-film). ===== */
.wf { background: var(--inkt); color: var(--wit); }
.wf .wi-kop { color: var(--wit); }
.wf .wi-kop strong { color: var(--geel); }
.wf .wi-kopregel p { color: var(--lijn); }
.wf :focus-visible { outline-color: var(--geel); }
.wf-film { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.wf-keuze { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.wf-tabs { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.wf-tabs button { display: grid; justify-items: start; gap: 10px; width: 100%; min-height: 44px; padding: 16px 0 0; border: 0; background: none; color: var(--mos); font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; transition: color .3s; }
.wf-logo { display: flex; align-items: center; height: 30px; max-width: 100%; }
.wf-logo img { height: var(--h, 24px); width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .5; transition: opacity .3s; }
.wf-tabs button:hover, .wf-tabs button[aria-selected="true"] { color: var(--wit); }
.wf-tabs button:hover img, .wf-tabs button[aria-selected="true"] img { opacity: 1; }
.wf-tabs i { display: block; width: 100%; height: 3px; margin-top: 6px; background: var(--lijn-op-inkt); overflow: hidden; }
.wf-tabs s { display: block; height: 100%; background: var(--geel); transform: scaleX(var(--p, 0)); transform-origin: left; }
.wf-tabs button[aria-selected="true"] s { --p: var(--voortgang, 1); }
.wf-pauze { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; border-radius: 2px; background: transparent; color: var(--wit); cursor: pointer; transition: background .25s, color .25s; }
.wf-pauze svg { width: 18px; height: 18px; }
.wf-pauze .i-speel, .wf-pauze[aria-pressed="true"] .i-pauze { display: none; }
.wf-pauze[aria-pressed="true"] .i-speel { display: block; }
.wf-pauze:hover { background: var(--wit); color: var(--inkt); }
/* alle ervaringen liggen op elkaar: het doek is zo hoog als de langste, dus er verspringt niets bij het wisselen */
.wf-doek { display: grid; }
.wf-quote { grid-area: 1 / 1; margin: 0; }
.wf-quote > figure { margin: 0; } /* de tabpanel-rol staat op de omhullende div: een figure met figcaption mag geen andere rol krijgen */
.wf-quote[hidden] { display: block; visibility: hidden; }
.wf-quote .teken { display: block; height: 62px; font-size: 132px; line-height: 1; font-weight: 500; color: var(--geel); }
.wf-quote blockquote { margin: 0; }
.wf-quote .groot { margin: 0; max-width: 30ch; font-size: clamp(28px, 3.3vw, 48px); line-height: 1.18; letter-spacing: -.005em; }
.wf-quote mark { background: none; color: var(--geel); }
.wf-quote figcaption { display: flex; align-items: center; gap: 18px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--lijn-op-inkt); font-size: 15px; color: var(--lijn); }
.wf-quote figcaption img { flex: none; height: calc(var(--h, 24px) * 1.1); width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.wf-quote figcaption b { display: block; color: var(--wit); font-weight: 500; }
.wf-quote details { margin-top: 14px; }
.wf-quote summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 16px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; list-style: none; }
.wf-quote summary::-webkit-details-marker { display: none; }
.wf-quote details[open] summary { margin-bottom: 8px; }
.wf-quote details p { margin: 0 0 12px; max-width: 70ch; font-size: 16px; color: var(--lijn); }
.beweeg .wf-quote:not([hidden]) { animation: wfIn .9s var(--ease) both; }
@keyframes wfIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.wf-erk { margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--lijn-op-inkt); }
.wf-erk-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, 3vw, 40px); }
.wf-erk-kop > p { margin: 0; font-size: 18px; }
.wf-erk-kop > p b { font-weight: 500; }
.wf-badges { display: flex; align-items: center; gap: 22px; padding: 12px 18px; background: var(--wit); border-radius: 2px; }
.wf-badges .b-chambers { width: 92px; height: auto; mix-blend-mode: multiply; }
.wf-badges .b-legal { width: 58px; height: auto; }
.wf-erk-citaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); margin-top: 24px; }
.wf-erk-citaten figure { margin: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; } /* bronregels naast elkaar op één lijn */
.wf-erk-citaten .nw { white-space: nowrap; }
.wf-erk-citaten blockquote { margin: 0 0 10px; }
.wf-erk-citaten blockquote p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--wit); }
.wf-erk-citaten figcaption { font-size: 15px; color: var(--mos); }
.wf-erk-citaten figcaption a { position: relative; color: var(--wit); text-underline-offset: 3px; }
.wf-erk-citaten figcaption a::before { content: ""; position: absolute; inset: -13px -4px; }
@media (max-width: 860px) {
  .wf-film { grid-template-columns: minmax(0, 1fr); }
  .wf-keuze { flex-direction: row; align-items: flex-end; gap: 16px; }
  .wf-tabs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .wf-tabs button { padding-top: 6px; gap: 8px; }
  .wf-logo { height: 26px; }
  .wf-logo img { height: calc(var(--h, 24px) * .85); }
  .wf-erk-citaten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .wf-keuze { flex-direction: column; align-items: flex-start; gap: 16px; }
  .wf-tabs { align-self: stretch; gap: 8px; }
  .wf-tabs button { font-size: 15px; }
  .wf-logo { height: 22px; }
  .wf-logo img { height: calc(var(--h, 24px) * .72); }
  .wf-quote .teken { height: 48px; font-size: 104px; }
  .wf-quote figcaption { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-pauze { display: none; }
  .wf-quote:not([hidden]) { animation: none !important; }
  .wf-tabs button, .wf-logo img, .wf-erk-link svg { transition: none; }
}

/* ===== Het team erachter (keuze Jochem 28 okt: optie 4 van workx-in-opties-team.html): drie punten met gele
   onderstreping naast een gele portrettenwand. Raster en profielkaart zoals op de homepage (team-kaart.*). ===== */
.wt { overflow-x: clip; }
.wt-grid { display: grid; gap: 48px clamp(32px, 5vw, 80px); align-items: start; }
.wt-lbl { display: block; margin: 0 0 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); text-wrap: balance; }
.wt-tekst { margin: 22px 0 0; max-width: 50ch; font-size: 18px; color: var(--grijs); }
.wt-punten { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--inkt); }
.wt-punten li { padding: 20px 0; border-bottom: 1px solid var(--lijn); }
.wt-punten b { font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--inkt); background: linear-gradient(transparent 58%, var(--geel) 58%, var(--geel) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .9s var(--ease) calc(.3s + var(--i, 0) * .2s); }
.beweeg .wt-punten:not(.in) b { background-size: 0% 100%; }
.wt-punten span { display: block; max-width: 62ch; margin-top: 8px; font-size: 16px; color: var(--grijs); }
.wt-wand { position: relative; background: var(--geel); border-radius: 2px; }
.wt-wand .wt-lbl { margin-bottom: 6px; color: var(--inkt); }
.wt-hint { margin: 0 0 18px; font-size: 15px; color: var(--inkt); }
.wt .lid { transition: opacity .6s ease, transform .4s var(--ease), box-shadow .4s var(--ease); }
.wt .lid img { transition: transform .6s var(--ease), filter .5s ease; }
.wt .tk-badge { width: 26px; height: 26px; right: 6px; bottom: 6px; }
.beweeg .wt-wand:not(.in) .lid { opacity: 0; }
.wt-vogel { position: absolute; width: clamp(70px, 8vw, 110px); right: -10px; top: -58px; pointer-events: none; }
.beweeg .wt-vogel { transition: opacity .8s ease 1.4s, transform 1.6s var(--ease) 1.4s; }
.beweeg .wt-wand:not(.in) .wt-vogel { opacity: 0; transform: translate(-80px, 40px) rotate(8deg) scale(.7); }
@media (max-width: 1100px) { .wt-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .wt-punten b { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .wt-punten b, .wt .lid, .wt .lid img, .wt-vogel { transition: none !important; } }

/* ===== Contact (keuze Jochem 28 okt: optie 1 van workx-in-opties-team.html): op geel de duiven op de stok, één
   vogel vliegt uit en bij aanwijzen verder. Eigen klassen (wc-): de vogel in de held (wi-vlieger) blijft los. ===== */
.wc { background: var(--geel); padding-block: clamp(72px, 9vw, 128px); overflow-x: clip; }
.wc .wt-lbl { color: var(--inkt); }
.wc-boven { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 96px); align-items: center; }
.wc-tekst { margin: 22px 0 0; max-width: 50ch; font-size: 18px; color: var(--inkt); }
.wc .wi-knop { margin-top: 30px; min-height: 44px; }
.wc .wi-knop::before { background: var(--wit); }
.wc-beeld { position: relative; aspect-ratio: 1 / .78; max-width: 460px; width: 100%; justify-self: end; }
.wc-stok { position: absolute; left: 0; bottom: 0; width: 70%; height: auto; }
.wc-vogel { position: absolute; right: 0; top: 0; width: 40%; height: auto; }
.beweeg .wc-vogel { transition: transform 1.6s var(--ease) .4s; }
.beweeg .wc-boven:not(.in) .wc-vogel { transform: translate(-95%, 95%) rotate(10deg) scale(.6); }
.beweeg .wc-boven.in:hover .wc-vogel, .beweeg .wc-boven.in:focus-within .wc-vogel { transform: translate(18%, -22%) rotate(-6deg); transition-duration: 1.2s; transition-delay: 0s; }
.wc-gegevens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin-top: clamp(48px, 5vw, 72px); }
.wc-gegevens a, .wc-gegevens > span { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 60px; padding: 14px 0; border-top: 1px solid var(--inkt); color: var(--inkt); text-decoration: none; font-size: clamp(18px, 1.6vw, 22px); }
.wc-gegevens small { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt); }
.wc-gegevens a::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--inkt); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.wc-gegevens a:hover::after, .wc-gegevens a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 860px) {
  .wc-boven { grid-template-columns: minmax(0, 1fr); }
  .wc-beeld { justify-self: start; max-width: 340px; }
  .wc-gegevens { grid-template-columns: minmax(0, 1fr); }
  .wc-gegevens a, .wc-gegevens > span { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
}
@media (max-width: 560px) {
  .wc-gegevens a, .wc-gegevens > span { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .wc-vogel, .wc-gegevens a::after { transition: none !important; } }
/* Contactformulier: de witte kaart van de gewone site (.formulier in style.css), met de zwarte WorkxIN-knop */
.wc-form { margin-top: clamp(40px, 5vw, 64px); border-radius: 2px; } /* één hoekstijl op WorkxIN (keuze 30 okt) */
.wc-form .verstuur { min-height: 44px; background: var(--inkt); color: var(--wit); transition: color .25s; }
.wc-form .verstuur::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.wc-form .verstuur:focus-visible { background: var(--inkt); color: var(--inkt); transform: none; }
.wc-form .verstuur:focus-visible::before { transform: scaleX(1); }
/* aanwijzen alleen met een muis: op de telefoon bleef de knop na een tik geel hangen (ronde 3) */
@media (hover: hover) {
  .wc-form .verstuur:hover { background: var(--inkt); color: var(--inkt); transform: none; }
  .wc-form .verstuur:hover::before { transform: scaleX(1); }
}
@media (hover: none) { .wc-form .verstuur:hover svg { transform: none; } }
.wc-form .verstuur:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.wc-form[aria-busy="true"] .verstuur { opacity: .6; cursor: progress; }
.wc-form .melding { color: var(--inkt); }
.wc-form .melding.fout { color: var(--fout); }
.wc-form [aria-invalid="true"] { border-color: var(--fout) !important; }
@media (prefers-reduced-motion: reduce) { .wc-form .verstuur::before, .wc-form .verstuur svg { transition: none !important; } }
/* het oplopende getal in "3 tot 20 jaar" hoort bij de kop, niet bij de kleine uitlegtekst; vaste breedte voor twee
   cijfers, zodat "jaar" niet verspringt tijdens het tellen (min-width zet workx-in.js op de breedte van het eindgetal) */
.wi-feiten b [data-wi-tel] { display: inline-block; text-align: right; font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit; }

/* ---------- teamwand optie 1, keuze Jochem 28 okt ----------
   Kleur op geel: grotere staande portretten (4:5) op witte kaartjes zonder rand, alleen de voornaam klein eronder.
   Zes kolommen (onder 560px drie); 17 portretten, dus de laatste rij staat links uitgelijnd met één open plek rechts,
   net als voorheen. Eén uitsnede voor iedereen: overschrijft de inline uitsnede van het vierkante homepage-raster. */
@media (min-width: 1101px) { .wt .wt-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.wt .wt-wand { padding: clamp(16px, 2vw, 28px); }
.wt .team-raster { margin-top: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 10px; }
.wt .lid { position: relative; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.wt .lid:hover, .wt .team-raster .tk-lid.tk-open { transform: none; box-shadow: none; }
.wt .lid::after { content: none; }
.wt .lid .foto { aspect-ratio: 4 / 5; border-radius: 2px; background: var(--wit); }
.wt .lid img, .wt .lid:hover img, .wt .lid.tk-open img, .wt .lid:focus-visible img { width: 165% !important; left: -32% !important; top: -2% !important; transform-origin: 50% 30% !important; filter: none; mix-blend-mode: normal; }
.wt .lid .naam { display: block; margin: 8px 0 0; padding: 0; background: none; font-size: 15px; line-height: 20px; color: var(--inkt); text-decoration: underline transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .3s; }
.wt .lid .naam .an { display: none; }
.wt .lid:hover .naam, .wt .lid.tk-open .naam, .wt .lid:focus-visible .naam { text-decoration-color: currentColor; }
.wt .tk-badge svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .wt .team-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; } }
@media (prefers-reduced-motion: reduce) { .wt .lid .naam { transition: none !important; } .wt .lid:hover img, .wt .lid.tk-open img { transform: none !important; } }

/* ===== detailtoets 28 okt ===== */
/* contrast AA: --zacht op beige haalt 4,28:1; labels op beige daarom in --grijs */
.wi-held .wi-lbl, .beige .o-nr { color: var(--grijs); }
/* koptekst 861–960 px: menu, NL | EN en logo passen anders niet naast elkaar (EN viel buiten beeld) */
@media (min-width: 861px) and (max-width: 960px) { .wi .kop-balk .wrap { gap: 20px; } .wi .hoofdmenu { gap: 14px; } }

/* Gedetacheerd bij (wens Jochem 29 okt): achterop wie er gedetacheerd was, met portret, in plaats van een citaat
   (de citaten staan al bij 'In hun woorden') */
.k1 .achter .wie { display: flex; flex-direction: column; gap: 10px; margin: 0 0 auto; }
.k1 .achter .wie .p { display: flex; align-items: center; gap: 12px; min-width: 0; }
.k1 .wi-gedetacheerd .achter .wie img { flex: none; width: 56px; height: 70px; max-height: none; object-fit: cover; object-position: 50% 0; filter: none; border-radius: 2px; background: var(--inkt-licht); }
.k1 .achter .wie a { display: flex; flex-direction: column; min-width: 0; min-height: 44px; justify-content: center; margin: 0; color: var(--wit); text-decoration: none; font-size: 15px; line-height: 1.25; }
.k1 .achter .wie a:hover b, .k1 .achter .wie a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.k1 .achter .wie b { font-weight: 500; color: var(--geel); }
.k1 .achter .wie span { font-size: 15px; color: var(--lijn); }
.k1 .achter .rol { line-height: 1.4; }
@media (max-width: 560px) {
  .k1 .achter .wie { gap: 6px; }
  .k1 .wi-gedetacheerd .achter .wie img { width: 44px; height: 55px; }
  .k1 .achter .wie a { font-size: 15px; min-height: 44px; }
  .k1 .achter .wie span { font-size: 15px; }
  .k1 .achter .rol { font-size: 15px; }
}
/* kaarten iets hoger, zodat twee portretten met naam en de zin erbij passen; achterkant van boven gevuld */
.k1 .wi-gedetacheerd > li { min-height: 280px; }
.k1 .achter { justify-content: flex-start; }
.k1 .achter .wie { margin: 0 0 14px; }
.k1 .achter .wie a { text-align: left; align-items: flex-start; }
.k1 .achter a.erv { margin-top: auto; }
@media (max-width: 560px) {
  .k1 .wi-gedetacheerd > li { min-height: 340px; }
  .k1 .achter .wie { margin-bottom: 10px; }
}
@media (max-width: 359px) { .wi-gedetacheerd { grid-template-columns: minmax(0, 1fr) !important; } .k1 .wi-gedetacheerd > li { min-height: 260px; } }
/* normtoets 29 okt: rond 1024 werden de zes kaarten te smal voor twee portretten; daar drie per rij */
@media (min-width: 561px) and (max-width: 1199px) { .k1 .wi-gedetacheerd { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
/* apparatentoets 29 okt: de achterkant (twee portretten, functie en zin op 15px) paste niet in 280px; alleen de hoogte groeit */
@media (min-width: 720px) and (max-width: 1023px), (min-width: 1300px) { .k1 .wi-gedetacheerd > li { min-height: 340px; } }
@media (min-width: 561px) and (max-width: 719px), (min-width: 1200px) and (max-width: 1299px) { .k1 .wi-gedetacheerd > li { min-height: 372px; } }
/* uitlijning: naast elkaar (>1100) staan de twee labels op één lijn. Sinds de rij die openklapt (keuze Jochem 30 okt,
   optie A van demo-teamkaart.html) staat het portretraster direct onder de kop en vervalt het lege gele vlak erboven;
   de strook klapt open onder de gekozen rij en het gele vlak groeit mee. */
@media (min-width: 1101px) {
  .wt .wt-grid { align-items: start; }
  .wt .wt-wand { display: flex; flex-direction: column; margin-top: calc(-1 * clamp(16px, 2vw, 28px)); }
  .wt .wt-wand .team-raster { margin-top: 18px; }
}

/* ===== detailtoets 29 okt (groep 24) ===== */
/* feitenrij: kop, gele streep en uitleg per rij op één lijn, ook als een kop over twee regels loopt (subgrid, zoals .a1) */
@media (min-width: 561px) {
  .wi-feiten li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .wi-feiten b { position: relative; padding-bottom: 20px; }
  .wi-feiten b::after { position: absolute; left: 0; bottom: 0; margin-top: 0; }
}
.wi-feiten b { text-wrap: balance; }
/* Wanneer WorkxIN: een lang Engels woord rekte de inhoudskolom op tot over de rechterpadding */
.a1 li { grid-template-columns: minmax(0, 1fr); }
.wi-klanten p { text-wrap: pretty; }
.b1-stappen p, .a1 p, .wi-feiten li, .wi-kopregel p, .wf p, .wf figcaption, .wt-punten span, .wt-tekst, .wc-tekst { text-wrap: pretty; }
@media (max-width: 560px) { .wi-feiten b { font-size: 19px; } }
/* contactformulier: dezelfde focusstaat als op de contactpagina (doorklik.css .dk-form) */
.wc .formulier input:focus-visible { box-shadow: 0 1.5px 0 var(--inkt); }
.wc .formulier textarea:focus-visible { box-shadow: 1.5px 0 0 var(--inkt); }
@media (max-width: 860px) { .wc .formulier textarea:focus-visible { box-shadow: 0 1.5px 0 var(--inkt); } }

/* terug naar de pagina (workx-in.js zet .terugkeer even): alles wat al gezien was meteen in de eindstand, zonder intro */
html.terugkeer [data-wi-in], html.terugkeer [data-wi-in] *, html.terugkeer [data-wi-in] *::before, html.terugkeer [data-wi-in] *::after { transition: none !important; }

/* compacte kop ook op WorkxIN alleen met transform/opacity (normfix T10, zoals style.css voor de gewone site): het logo
   kromp via 'width' en het menu schoof mee (layoutverschuiving bij scrollen). Nu hetzelfde beeld via transform: logo
   schaalt vanuit linksboven, label/menu schuiven 34 px mee naar links en 10 px (mobiel 6 px) omhoog, de witte laag en het
   lijntje schuiven omhoog. Hoogte en marge-onder wisselen in één keer (samen even hoog). Het logo zelf is ongewijzigd.
   Het mobiele menu (fixed, in nav) krijgt geen transform op een voorouder: nav schuift alleen vanaf 861 px. */
.wi .kop-balk { transition: none; }
.wi .kop-balk.compact { box-shadow: none; }
.wi .kop-balk::before { bottom: auto; height: 88px; transition: background-color .3s, transform .3s var(--ease); }
.wi .kop-balk.compact::before { transform: translateY(-20px); }
.wi .kop-balk::after { content: ""; position: absolute; left: 0; right: 0; top: 88px; height: 1px; background: rgba(0,0,0,.07); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.wi .kop-balk.compact::after { opacity: 1; transform: translateY(-20px); }
.wi .kop-balk .wrap { height: 88px; }
.wi .kop-balk.compact .wrap { pointer-events: none; }
.wi .kop-balk.compact .wrap > * { pointer-events: auto; }
.wi .kop-balk .wi-merk > .logo { transform-origin: 0 0; transition: transform .3s var(--ease); }
.wi .kop-balk.compact .wi-merk > .logo { width: 150px; transform: translateY(-1.6px) scale(.7733); } /* 116 / 150; -1.6 px = midden van de lagere balk, als voorheen */
.wi .kop-balk .wi-label, .wi .kop-balk .wrap > .taal, .wi .kop-balk .wrap > .menuknop { transition: transform .3s var(--ease); }
.wi .kop-balk.compact .wi-label { transform: translate(-34px, -10px); }
.wi .kop-balk.compact .wrap > .taal, .wi .kop-balk.compact .wrap > .menuknop { transform: translateY(-10px); }
@media (min-width: 861px) {
  .wi .kop-balk .wrap > nav { transition: transform .3s var(--ease); }
  .wi .kop-balk.compact .wrap > nav { transform: translate(-34px, -10px); }
}
@media (max-width: 860px) {
  .wi .kop-balk::before { height: 72px; }
  .wi .kop-balk.compact::before { transform: translateY(-12px); }
  .wi .kop-balk::after { top: 72px; }
  .wi .kop-balk.compact::after { transform: translateY(-12px); }
  .wi .kop-balk .wrap { height: 72px; }
  .wi .kop-balk.compact .wi-merk > .logo { width: 112px; transform: translateY(-1px) scale(.8214); } /* 92 / 112 */
  .wi .kop-balk.compact .wrap > .taal, .wi .kop-balk.compact .wrap > .menuknop { transform: translateY(-6px); }
}

/* ===== grafische controle 29 okt ===== */
/* 'minder beweging': de klantenband is dan een raster van meerdere rijen; de introtekst staat bovenaan, zoals bij de
   lopende band (rijafstand van het raster zelf: style.css) */
@media (prefers-reduced-motion: reduce) { .wi-klanten { align-items: start; } }
/* contactformulier: met focus bleef de donkere focuslijn over de rode foutrand liggen; een fout veld blijft rood */
.wc .formulier [aria-invalid="true"]:focus-visible { box-shadow: 0 1.5px 0 var(--fout); }
.wc .formulier textarea[aria-invalid="true"]:focus-visible { box-shadow: 1.5px 0 0 var(--fout); }
@media (max-width: 860px) { .wc .formulier textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 1.5px 0 var(--fout); } }
/* foutmelding bij naam, telefoon of e-mail onder de rechterkolom, bij het veld zelf (klasse uit workx-in.js) */
@media (min-width: 861px) { .wc-form .melding.bij-velden { grid-column: 2; } }
/* logo strak tegen de bovenrand, zoals op de gewone site en werken bij; label en menu blijven gecentreerd.
   Compact: alleen schalen vanuit linksboven (geen verschuiving omlaag), dus ook dan op top 0. Het logo zelf is ongewijzigd. */
.wi .kop-balk .wi-merk { align-self: stretch; }
.wi .kop-balk .wi-merk > .logo { align-self: flex-start; }
.wi .kop-balk.compact .wi-merk > .logo { transform: scale(.7733); }
@media (max-width: 860px) { .wi .kop-balk.compact .wi-merk > .logo { transform: scale(.8214); } }
/* 861–899 px: de volledige navigatie paste niet (NL | EN plakte tegen 'Contact' en EN stak over de kantlijn).
   Daar loopt het menu van mobiel door (zelfde knop en uitklapmenu als style.css tot 860 px); de kop blijft verder gelijk. */
@media (min-width: 861px) and (max-width: 899px) {
  .wi .menuknop { display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; z-index: 3; }
  .wi .menuknop span, .wi .menuknop span::before, .wi .menuknop span::after { display: block; width: 24px; height: 1.6px; background: var(--inkt); position: relative; transition: transform .35s var(--ease), background-color .2s; }
  .wi .menuknop span::before, .wi .menuknop span::after { content: ""; position: absolute; left: 0; }
  .wi .menuknop span::before { top: -7px; } .wi .menuknop span::after { top: 7px; }
  .wi.menu-open .menuknop span { background: transparent; }
  .wi.menu-open .menuknop span::before { transform: translateY(7px) rotate(45deg); }
  .wi.menu-open .menuknop span::after { transform: translateY(-7px) rotate(-45deg); }
  .wi .hoofdmenu { position: fixed; inset: 0; z-index: 2; background: var(--wit); flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; padding: 110px var(--rand) 40px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .wi .hoofdmenu a { font-size: 30px; display: inline-block; padding: 6px 0; }
  .wi .hoofdmenu a::before { content: none; }
  .wi .hoofdmenu li { transform: translateY(8px); transition: transform .4s var(--ease); }
  .wi.menu-open .hoofdmenu { opacity: 1; visibility: visible; }
  .wi.menu-open .hoofdmenu li { transform: none; }
  .wi.menu-open .logo, .wi.menu-open .taal { position: relative; z-index: 3; }
  .wi .hoofdmenu .menu-contact { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--lijn); font-size: 16px; color: var(--zacht); }
  .wi .hoofdmenu .menu-contact a { font-size: 16px; display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--inkt); overflow-wrap: anywhere; }
  .wi .hoofdmenu .menu-contact a::after { display: none; }
  /* het uitklapmenu is fixed: geen transform op nav, anders staat het menu binnen de kop in plaats van over het scherm */
  .wi .kop-balk .wrap > nav, .wi .kop-balk.compact .wrap > nav { transform: none; transition: none; }
}
/* 'minder beweging' (grafische controle 30 okt): in het statische klantenraster kwam het label 'Works council' te dicht
   op de rij eronder (375: 16 px, 1440: 25 px). Alleen hier ruim 12 px extra rijafstand; de lopende band blijft gelijk. */
@media (prefers-reduced-motion: reduce) { .wi-klanten .logoband-rail { row-gap: 28px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 860px) { .wi-klanten .logoband-rail { row-gap: 24px; } }

/* hero-label op smalle telefoons (grafische controle 30 okt): NL past met de smalle-schermregel van .wc-label op één
   regel; EN past onder 375 niet, daar een vaste breuk na 'WorkxIN' zonder los scheidingspunt aan het regeleinde */
@media (max-width: 359px) { .wi-held .wi-lbl:lang(nl) { letter-spacing: .06em; } }
@media (max-width: 374px) { .wi-held .wi-lbl:lang(en) .wi-lbl-punt { display: none; } .wi-held .wi-lbl:lang(en) .wi-lbl-rest { display: block; } }

/* feitenrij (feedback ttwwoo V5, 9 nov): geen gele streepjes en geen doorlopende lijn meer; onder elke kop een zwarte lijn
   over de breedte van de kolom, met een onderbreking tussen de kolommen. De lijn tekent zich nog steeds van links in. */
.wi-feiten { column-gap: clamp(24px, 3.4vw, 48px); }
.wi-feiten::before { display: none; }
.wi-feiten li, .wi-feiten li + li { padding-left: 0; padding-right: 0; border-left: 0; }
.wi-feiten b::after { width: 100%; height: 1px; background: var(--inkt); }
@media (max-width: 860px) { .wi-feiten li:nth-child(n+3), .wi-feiten li + li { border-top: 0; } }