/* Werken bij 2Jours — hoofdstylesheet */


/* ==========================================================
   WERKEN BIJ 2JOURS
   Huisstijl: rood #E2001A, donkergrijs #4B4743, lichtgrijs #D9DADB,
   wit en zwart. Het logo wordt nergens aangepast; op donkere vlakken
   staat het op een wit plaatje.
   Teksten staan onderin bij CONTENT.
   ========================================================== */

:root{
  --font:"proxima-nova","Proxima Nova","Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-kop:"proxima-nova","Proxima Nova","Figtree","Helvetica Neue",Arial,sans-serif;
  /* huisstijl */
  --red:#E2001A;
  --red-deep:#C00017;
  --red-text:#C00017;
  --grijs-donker:#4B4743;
  --grijs-licht:#D9DADB;

  /* afgeleid */
  --ink:#413D39;
  --body:#55504B;
  --muted:#7C766F;
  --line:#D9DADB;
  --rule:#E7E7E6;
  --bg:#FFFFFF;
  --surface:#F4F4F3;
  --surface-2:#EAEAE8;
  --dark:#4B4743;
  --on-dark:#FFFFFF;
  --on-dark-muted:#D5D1CC;

  --strip:#E8E8E6;          /* achtergrond filmrol */
  --strip-blok:#6E6761;     /* balk open sollicitatie */
  --frame:#D8D8D5;          /* vlak achter een filmframe */
  --hatch:rgba(226,0,26,.032);
  --rood-zacht:#FBF0F0;     /* lichte tint van de huisstijlrood */
  --rood-lijn:rgba(226,0,26,.20);

  
  
  
  
  
  

  --shadow:0 1px 2px rgba(75,71,67,.05), 0 10px 26px rgba(75,71,67,.08);

  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}

:root[data-theme="dark"]{
  --ink:#FFFEFD;
  --body:#F6F3F0;
  --muted:#D4CDC6;
  --line:#5F5852;
  --rule:#474139;
  --bg:#272421;
  --surface:#332F2C;
  --surface-2:#4E4740;
  --dark:#332F2C;
  --red-text:#FF4D58;
  --red-deep:#FF3A47;
  --strip:#3A3633;
  --strip-blok:#60594F;
  --frame:#4B443C;
  --rood-zacht:#3A2D2A;
  --rood-lijn:rgba(226,0,26,.30);
  --hatch:rgba(255,255,255,.028);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.45);
  color-scheme:dark;
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .way,
:root[data-theme="dark"] .aside,
:root[data-theme="dark"] .done,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea{background:#464039;border-color:#6A615A}
:root[data-theme="dark"] .card-top{background:#514A42}
:root[data-theme="dark"] .shot{background:#464039}
:root[data-theme="dark"] .chip{background:#5A524A;color:#DED8D1}
:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .card:focus-visible{border-color:#938982}
:root[data-theme="dark"] .cta-band .sluier{background:rgba(62,57,52,.92)}
@media (min-width:860px){
  :root[data-theme="dark"] .cta-band .sluier{background:linear-gradient(90deg,rgba(60,55,50,.95) 0%,rgba(60,55,50,.90) 47%,rgba(60,55,50,.34) 100%)}
}
:root[data-theme="dark"] .open-strip .btn{background:#fff;color:#262320;border-color:#fff}
:root[data-theme="dark"] .open-strip .btn:hover{background:var(--red);color:#fff;border-color:var(--red)}
:root[data-theme="dark"] .f-bot{border-top-color:#514A44}

*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(104px + env(safe-area-inset-top, 0px));-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--font);
  font-size:16px;line-height:1.62;letter-spacing:.004em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);
  background:var(--bg);z-index:60;
}
h1,h2,h3,h4{
  font-family:var(--font-kop);color:var(--ink);
  margin:0;letter-spacing:-.006em;line-height:1.05;font-weight:800;
}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--red);outline-offset:2px;border-radius:3px;
}
[hidden]{display:none !important}

.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:20px}
@media (min-width:720px){ .wrap{padding-inline:40px} }


/* ==========================================================
   RUIMTESYSTEEM
   Alle verticale witruimte komt uit deze zes waarden.
   ========================================================== */
:root{
  --pagehead-y:34px;    /* boven de titel van een pagina */
  --onder-kop:12px;     /* tussen een kop en de tekst eronder */
  --na-intro:24px;      /* tussen een tekstblok en de kaarten/lijst eronder */
  --na-kop:24px;        /* tussen een kopblok en het eerste element eronder */
  --sec-y:48px;         /* tussen twee secties of blokken */
  --band-y:32px;        /* binnenruimte van een gekleurde band */
  --pagina-eind:56px;   /* onder het laatste blok, boven de footer */
}
@media (min-width:720px){
  :root{
    --pagehead-y:42px; --onder-kop:14px; --na-intro:28px; --na-kop:30px;
    --sec-y:72px; --band-y:40px; --pagina-eind:80px;
  }
}
@media (max-width:719px){
  :root{
    --pagehead-y:26px; --onder-kop:10px; --na-intro:20px; --na-kop:20px;
    --sec-y:40px; --band-y:26px; --pagina-eind:44px;
  }
}

.sla-over{
  position:absolute;left:-9999px;top:0;z-index:80;
  background:var(--red);color:#fff;padding:10px 16px;border-radius:0 0 6px 0;
  font-family:var(--font-kop);font-weight:700;font-size:15px;text-decoration:none;
}
.sla-over:focus{left:0}

/* ---------- header ---------- */
/* de hoogte van de balk staat hier, zodat de banner er precies onderdoor past */
:root{ --kop-h:88px }
@media (max-width:699px){ :root{ --kop-h:76px } }
@media (max-width:419px){ :root{ --kop-h:68px } }

.hdr{
  position:sticky;top:env(safe-area-inset-top, 0px);z-index:50;
  background:var(--bg);border-bottom:1px solid var(--rule);
  transition:background-color .25s ease, border-color .25s ease;
}

/* Op de homepagina loopt de foto door achter de balk, net als op 2jours.nl.
   Zodra je voorbij de banner scrollt krijgt de balk zijn eigen achtergrond
   terug, anders zou hij onleesbaar over de witte inhoud liggen. */
html.over-foto .hdr{background:transparent;border-bottom-color:transparent}
html.over-foto .hdr .navlink,
html.over-foto .hdr .brand-tag{color:#fff}
html.over-foto .hdr .brand-tag{border-left-color:rgba(255,255,255,.3)}
html.over-foto .hdr .navlink:hover{color:#fff;border-bottom-color:var(--red)}
html.over-foto .hdr .thema-btn,
html.over-foto .hdr .menu-btn{color:#fff;border-color:rgba(255,255,255,.45);background:rgba(22,20,18,.22)}
html.over-foto .hdr .menu-btn .bars i{background:#fff}
.hdr-in{display:flex;align-items:center;gap:16px;height:var(--kop-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.logo-chip{display:flex;align-items:center}
.logo-chip img{height:54px;width:auto;display:block}
.logo-chip .lg-donker{display:none}
/* de witte versie in de donkere weergave en zolang de balk over de foto ligt */
:root[data-theme="dark"] .logo-chip .lg-licht{display:none}
:root[data-theme="dark"] .logo-chip .lg-donker{display:block}
html.over-foto .logo-chip .lg-licht{display:none}
html.over-foto .logo-chip .lg-donker{display:block}
.f-logo{height:30px;width:auto;display:block;margin-bottom:14px}
.brand-tag{font-size:14px;color:var(--muted);padding-left:12px;border-left:1px solid var(--line);display:none}
@media (min-width:600px){ .brand-tag{display:block} }
.nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.nav .navlink{
  display:none;text-decoration:none;color:var(--ink);
  font-family:var(--font-kop);font-weight:600;font-size:15.5px;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav .navlink:hover{border-bottom-color:var(--red);color:var(--red-text)}
@media (min-width:820px){ .nav .navlink{display:inline-block} .menu-btn{display:none} }

.thema-btn{
  display:inline-flex;align-items:center;justify-content:center;background:transparent;cursor:pointer;
  border:1.5px solid var(--line);border-radius:6px;width:44px;height:44px;color:var(--ink);padding:0;
}
.thema-btn:hover{border-color:var(--ink)}
.thema-btn .ico{width:19px;height:19px;stroke-width:1.7}
.thema-btn .zon{display:none}
:root[data-theme="dark"] .thema-btn .zon{display:block}
:root[data-theme="dark"] .thema-btn .maan{display:none}
.thema-btn .maan{fill:none}

.menu-btn{
  display:inline-flex;align-items:center;gap:8px;background:transparent;cursor:pointer;
  border:1.5px solid var(--line);border-radius:6px;padding:9px 13px;
  font-family:var(--font-kop);font-weight:700;font-size:14.5px;color:var(--ink);
}
.menu-btn .bars{display:grid;gap:3px}
.menu-btn .bars i{display:block;width:16px;height:2px;background:var(--red);border-radius:2px}
.menu-panel{
  display:none;border-top:1px solid var(--rule);background:var(--bg);
}
.menu-panel.open{display:block}
.menu-panel a{
  display:block;padding:14px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);font-family:var(--font-kop);font-weight:600;font-size:16px;
}
.menu-panel a:last-child{border-bottom:0}
@media (min-width:820px){ .menu-panel{display:none !important} .menu-btn{display:none} }
/* op een smal scherm alleen het logo en het menu in de balk */
@media (max-width:699px){ .nav > .btn-red{display:none} .nav{gap:10px} }

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-kop);font-weight:700;font-size:15.5px;
  padding:13px 22px;border-radius:4px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep);color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
.btn-sm{padding:9px 15px;font-size:14.5px}
.btn-block{width:100%}

/* ---------- handgeschreven notities ---------- */
.hand{display:inline-flex;align-items:flex-start;gap:4px;pointer-events:none}
.hand .arr{flex:0 0 auto;fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hand .t{
  font-family:"Caveat","Bradley Hand",cursive;font-weight:600;white-space:nowrap;
  font-size:1.08rem;line-height:1.12;color:var(--red-text);
}
.hand .arr{width:52px;height:34px}
/* Het notitietje wordt letter voor letter geschreven en daarna wordt de pijl
   getrokken. Alles hangt aan data-tekent, dat het script pas zet als er
   geanimeerd mag worden. Zonder script, of bij 'minder beweging', staat de
   tekst er dus gewoon in een keer.
   De notitie begint verborgen en wordt pas zichtbaar als het script hem in
   losse letters heeft geknipt. Anders zie je hem eerst staan en daarna
   verdwijnen. */
html.tj-anim .hand{visibility:hidden}
html.tj-anim .hand[data-tekent]{visibility:visible}
.hand[data-tekent] .t .ltr{opacity:0}
.hand[data-tekent].klaar .t .ltr{opacity:1;transition:opacity .17s ease}

.hand[data-tekent] .arr path{stroke-dasharray:1;stroke-dashoffset:1}
.hand[data-tekent].klaar .arr path{stroke-dashoffset:0;transition:stroke-dashoffset .55s ease .8s}
.hand[data-tekent].klaar .arr path:nth-child(2){transition-delay:1.25s}
@media (min-width:720px){
  .hand .t{font-size:1.24rem}
  .hand .arr{width:64px;height:42px}
}

/* ---------- beeld ---------- */
figure{margin:0}
.fotogrid{display:grid;gap:18px;margin-top:var(--na-intro)}
@media (min-width:700px){ .fotogrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:940px){ .fotogrid.g3{grid-template-columns:repeat(3,1fr)} }
/* drie foto's naast elkaar, maar staander dan de rij op solliciteren */
.fotogrid.staand .shot{aspect-ratio:5/6}

/* Ze vliegen van links naar rechts op hun plek: verder van opzij, iets
   kleiner en een slag gekanteld, en met een duidelijker doorzetten aan
   het eind. Bewust alleen verplaatsen en schalen, want dat zijn de twee
   dingen die een telefoon op de grafische kaart afhandelt. Geen schaduwen
   of vervagingen, die kosten wel rekenkracht. */
/* Alleen vanaf 720 pixels, waar het een vast rooster is. Daaronder is het
   een strook die je opzij veegt, en dan zou horizontaal invliegen de
   snappunten van die strook tijdens de animatie verschuiven. Op de
   telefoon houden de foto's daarom de gewone rustige opkomst. */
@media (min-width:720px){
  html.tj-anim .fotogrid.staand figure{
    transform:translateX(-96px) scale(.88) rotate(-1.6deg);
    transition-property:opacity, transform;
    transition-duration:.55s, 1.15s;
    transition-timing-function:ease, cubic-bezier(.18,1.45,.42,1);
    transition-delay:calc(var(--i, 0) * 260ms);
  }
  html.tj-anim .fotogrid.staand figure.in{transform:none}
}
.fotogrid .shot{aspect-ratio:4/3}
/* fotogrid met een groot beeld ernaast */


.pagehead{padding-block:var(--pagehead-y) 0}
.pagehead h1{font-size:clamp(1.8rem,5.6vw,2.7rem);max-width:26ch}
.pagehead .lead{margin-top:var(--onder-kop);max-width:112ch;font-size:clamp(1rem,2.9vw,1.06rem);color:var(--muted)}
.shot{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.shot.r32{aspect-ratio:3/2}
.shot.r43{aspect-ratio:4/3}
/* een iets liggender variant, voor het blok over Salland */
.shot.platter{aspect-ratio:3/2}
/* op een smal scherm staat de foto boven de tekst in plaats van eronder */
@media (max-width:859px){ .duo.beeld-eerst > .shot{order:-1} }
.shot.r218{aspect-ratio:21/8}
/* het beeld schuift een paar procent mee tijdens het scrollen */
.shot.diepte img{will-change:transform}

/* ---------- filmstrip ---------- */
.roll-sec{
  overflow:hidden;border-block:1px solid var(--rule);background:var(--strip);
  background-image:linear-gradient(180deg,rgba(75,71,67,.07) 0,rgba(75,71,67,0) 16%,rgba(75,71,67,0) 84%,rgba(75,71,67,.07) 100%);
}
.roll{
  --beeldje:166px;          /* hoogte van een beeldje; de breedte volgt de vorm */
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);
}
/* De strip schuift vanzelf en je kunt hem met de muis of je vinger opzij
   slepen. Dat gebeurt met een verplaatsing van het spoor zelf en niet met
   de schuifbalk van de browser: die rondt af op hele pixels, en bij 0,77
   pixel per beeldje zie je dat als haperen. Verplaatsen mag wel met
   kommagetallen en loopt daardoor vloeiend.
   touch-action op pan-y zorgt dat verticaal scrollen van de pagina gewoon
   blijft werken terwijl wij het horizontale slepen afhandelen. */
.roll-schuif{overflow:hidden;cursor:grab;touch-action:pan-y}
.roll-track{will-change:transform}
.roll-schuif.sleept{cursor:grabbing}
.roll-schuif.sleept .frame{pointer-events:none}
.roll-track{display:flex;width:max-content;padding:30px 0;position:relative}
.roll-track::before,.roll-track::after{
  content:"";position:absolute;left:0;right:0;height:11px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='11'%3E%3Crect x='0' y='0' width='16' height='11' rx='2.4' fill='%23fcfcfb'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:30px 11px;
}
.roll-track::before{top:9px}
.roll-track::after{bottom:9px}
.frame{
  position:relative;height:var(--beeldje);flex:0 0 auto;margin-right:5px;background:var(--frame);
  box-shadow:inset 0 0 0 1px rgba(28,26,24,.14), 0 0 0 1px rgba(28,26,24,.05);
  /* Elk beeldje heeft een vaste vorm, net als op een echte filmrol. De
     breedte staat er expliciet in en wordt niet uit de verhouding
     afgeleid: een flexitem zonder breedte kijkt namelijk naar de foto
     erin, en dan bepaalt de foto alsnog de vorm. Wat niet past wordt
     bijgesneden. */
  width:calc(var(--beeldje) * 3 / 2);
  overflow:hidden;
}
/* per beeldje in te stellen, zodat er afwisseling in de rol zit */
.frame.liggend{width:calc(var(--beeldje) * 3 / 2)}
.frame.staand{width:calc(var(--beeldje) * 2 / 3)}
.frame.vierkant{width:var(--beeldje)}
/* bij "volg de foto zelf" staat de breedte in het element zelf, uitgerekend
   uit de verhouding van de foto; dan wordt er niets bijgesneden */
.frame.eigen img{object-fit:contain}
/* en een stand voor de hele rol, voor beeldjes zonder eigen keuze */
.roll.staand .frame:not(.liggend):not(.vierkant){width:calc(var(--beeldje) * 2 / 3)}
.roll.vierkant .frame:not(.liggend):not(.staand){width:var(--beeldje)}
/* randlijn van de emulsie, boven en onder de beeldjes */
.roll-track::before,.roll-track::after{z-index:2}
.roll .rand{position:absolute;left:0;right:0;height:1px;background:rgba(28,26,24,.16);z-index:1}
.roll .rand.boven{top:30px}
.roll .rand.onder{bottom:30px}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame .no{
  display:none;position:absolute;left:3px;top:-13px;
  font-family:var(--font-kop);font-size:8.5px;letter-spacing:.18em;color:rgba(75,71,67,.5);
}
@media (min-width:720px){ .frame .no{display:block} }
@media (max-width:719px){
  .roll{--beeldje:116px}
  .frame{margin-right:4px}
  .roll-track{padding:22px 0}
  .roll-track::before{top:7px}.roll-track::after{bottom:7px}
  .roll-track::before,.roll-track::after{
    height:8px;background-size:22px 8px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='8'%3E%3Crect x='0' y='0' width='12' height='8' rx='1.8' fill='%23fcfcfb'/%3E%3C/svg%3E");
  }
  .roll .rand.boven{top:22px}
  .roll .rand.onder{bottom:22px}
  .roll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
        mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%)}
}
.cap{margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.45}
.cap b{font-weight:600;color:var(--body)}

/* ---------- hero: foto over de volle breedte ----------
   De foto ligt eronder, daarover een donkere sluier zodat de tekst altijd
   leesbaar is, en daar weer bovenop de tekst. De sluier loopt op de telefoon
   van onder naar boven en op een breed scherm van links naar rechts, zodat
   je in beide gevallen nog iets van het pand ziet. */
.banner{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(430px,47vw,700px);
  display:flex;align-items:center;
  margin-top:calc(-1 * (var(--kop-h) + 1px));
  padding-top:calc(var(--kop-h) + 1px);
}
.banner-beeld{position:absolute;inset:0;z-index:-2;background:var(--dark)}
.banner-beeld img{width:100%;height:100%;object-fit:cover;object-position:center 52%;display:block}
.banner-sluier{
  position:absolute;inset:0;z-index:-1;
  /* een gelijkmatige laag over de hele foto, met links net iets meer
     diepte omdat de tekst daar staat */
  background:
    linear-gradient(to right, rgba(22,20,18,.30) 0%, rgba(22,20,18,0) 55%),
    rgba(22,20,18,.52);
}
.banner-in{padding-block:104px 38px;color:#fff;max-width:1220px}
h1.banner-h{
  font-size:clamp(1.65rem,5.2vw,2.75rem);max-width:20ch;color:#fff;
  text-wrap:balance;
}
.banner-sub{
  margin-top:14px;max-width:52ch;font-size:clamp(.96rem,2.6vw,1.05rem);
  color:rgba(255,255,255,.88);
}
.banner-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.banner-acts .btn{flex:1 1 auto;justify-content:center}
.btn-wit{background:rgba(22,20,18,.28);color:#fff;border-color:rgba(255,255,255,.7)}
/* bij aanwijzen wordt hij wit met donkere letters; die kleur staat vast,
   anders wordt de tekst wit op wit in de donkere weergave */
@media (hover:hover){ .btn-wit:hover{background:#fff;color:#262320;border-color:#fff} }
.btn-wit:focus-visible{color:#fff}

@media (min-width:720px){
  .banner-in{padding-block:112px 60px}
  .banner-acts .btn{flex:0 0 auto}
}


/* ---------- vacaturekaarten ---------- */
/* secties dragen hun ruimte alleen aan de bovenkant, zodat twee secties
   onder elkaar nooit dubbele witruimte opstapelen */
.sec{padding-block:var(--sec-y) 0}
.sec.alt{background:var(--surface);margin-top:var(--sec-y);padding-block:var(--band-y)}
/* een band die direct op de bannerfoto aansluit heeft geen witruimte
   erboven nodig, en krijgt binnenin wat meer lucht */
.sec.alt.aansluitend{margin-top:0;padding-top:calc(var(--band-y) + 20px)}
/* een band die op een blok eindigt in plaats van op tekst krijgt onderin de volle sectieruimte */
.sec.alt.ruim-onder{padding-bottom:var(--sec-y)}

.sec-h{font-size:clamp(1.45rem,4.6vw,2.05rem)}
.sec-intro{margin-top:var(--onder-kop);max-width:112ch;font-size:15px;color:var(--muted)}

/* iconen */
.ico{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge{
  width:46px;height:46px;border-radius:11px;background:var(--red);color:#fff;
  display:grid;place-items:center;margin-bottom:14px;
}
.badge .ico{width:24px;height:24px;stroke-width:1.9}

.cards{display:grid;gap:20px;margin-top:var(--na-intro)}
@media (min-width:720px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:940px){ .cards{grid-template-columns:repeat(3,1fr);gap:24px} }

/* ---------- de kaarten passen zich aan het aantal vacatures aan ----------
   Eén of twee plekken staan netjes gecentreerd in plaats van links geplakt
   met een gat ernaast. Vanaf vier wordt het een strook die je opzij schuift,
   want vier of vijf kolommen worden te smal om te lezen. */
@media (min-width:720px){
  .cards.n1{grid-template-columns:minmax(0,440px);justify-content:center}
  .cards.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px;margin-inline:auto}
}
@media (min-width:720px){
  .cards.veel{
    display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:0;
    gap:24px;padding-bottom:6px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .cards.veel::-webkit-scrollbar{display:none}
  .cards.veel .card{flex:0 0 clamp(300px,31%,360px);scroll-snap-align:start}
  .cards.veel + .dots{display:flex}
}

.card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--bg);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sec.alt .card{background:var(--bg)}
.card:hover,.card:focus-visible{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.card-top{position:relative;background:var(--surface-2);aspect-ratio:16/10;overflow:hidden}
.card-top img{width:100%;height:100%;object-fit:cover;display:block}
.card-top::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:0;background:var(--red);transition:width .22s ease}
.card:hover .card-top::after,.card:focus-visible .card-top::after{width:100%}
.card-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
@media (max-width:719px){
  /* vacatures als swipebare slider */
  .cards{
    display:flex;gap:14px;margin:var(--na-intro) -17px 0;padding:4px 17px 6px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:17px;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  }
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 80%;scroll-snap-align:center}
  /* bij één vacature geen slider maar gewoon een kaart op volle breedte */
  .cards.n1{display:block;margin-inline:0;padding-inline:0;overflow:visible}
  .cards.n1 .card{flex:none;width:100%}
  .card h3{font-size:1.1rem}
  .card .chip{font-size:12px;padding:2px 7px}
  .card .chip:nth-of-type(3){display:none}
  .card p{margin-top:9px;font-size:14.5px}
}
.dots{display:none;gap:8px;justify-content:center;margin-top:14px;min-height:8px}
.dots button{
  position:relative;width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--line);cursor:pointer;
  transition:width .2s ease, background-color .2s ease;
}
/* onzichtbaar maar wel aan te tikken: minstens 26 bij 26 pixels */
.dots button::after{content:"";position:absolute;inset:-9px -6px}
.dots button[aria-current="true"]{width:22px;border-radius:5px;background:var(--red)}
@media (max-width:719px){ .dots{display:flex} }
.card h3{font-size:1.15rem;line-height:1.15}
.card:hover h3{color:var(--red-text)}
.meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.chip{font-size:13px;color:var(--muted);background:var(--surface-2);border:0;border-radius:4px;padding:4px 10px}
.sec.alt .chip{background:var(--surface-2)}
.card p{margin-top:10px;font-size:14.5px;flex:1;color:var(--muted)}
.card .go{margin-top:16px;font-weight:600;color:var(--red-text);font-size:15.5px;border-bottom:1.5px solid currentColor;align-self:flex-start;padding-bottom:1px}

.open-strip{
  background:var(--strip-blok);color:#fff;border-radius:12px;margin-top:var(--sec-y);
  padding:22px;display:grid;gap:16px;align-items:center;
}
.open-strip .ico{width:42px;height:42px;stroke-width:1.4;color:#fff}
.open-strip h3{color:#fff;font-size:1.15rem;margin-bottom:5px}
.open-strip p{color:rgba(255,255,255,.92);font-size:15px;max-width:none}
.open-strip .btn{background:#fff;color:var(--ink);border-color:#fff;white-space:nowrap}
.open-strip .btn:hover{background:var(--red);color:#fff;border-color:var(--red)}
@media (min-width:720px){
  .open-strip{grid-template-columns:auto 1fr auto;gap:26px;padding:24px 30px}
}

/* ---------- rode cijferband ---------- */
.numbers{background:var(--rood-zacht);color:var(--ink);border-block:1px solid var(--rood-lijn);margin-top:var(--sec-y)}
.numbers .wrap{padding-block:var(--band-y)}
.num-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 20px}
@media (min-width:820px){ .num-grid{grid-template-columns:repeat(4,1fr);gap:0} }
.num-grid > div{color:var(--ink)}
.num-grid .ico{width:28px;height:28px;stroke-width:1.7;margin-bottom:12px;color:var(--red)}
@media (min-width:820px){
  .num-grid > div{padding-right:26px}
  .num-grid > div + div{border-left:1px solid var(--rood-lijn);padding-left:28px}
}
/* De getallen beginnen onzichtbaar en verschijnen op het moment dat ze
   gaan optellen. Anders zie je het eindgetal al staan, waarna het
   terugspringt naar nul. */
html.tj-anim .num-grid b[data-waarde]{opacity:0;transition:opacity .3s ease}
html.tj-anim .num-grid b[data-waarde].telt{opacity:1}
.num-grid b{display:block;font-family:var(--font-kop);font-weight:800;font-size:clamp(1.7rem,5vw,2.3rem);line-height:1;letter-spacing:-.012em}
.num-grid span{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)}

/* ---------- tekst-en-beeld rijen ---------- */
.duo{display:grid;gap:26px;align-items:center}
@media (min-width:860px){
  .duo{grid-template-columns:repeat(2,1fr);gap:48px}
  .duo.flip .duo-txt{order:2}
}
.duo-h{font-size:clamp(1.35rem,4.4vw,1.85rem)}
.duo p{margin-top:var(--onder-kop);font-size:15px}

/* ---------- zo werkt het hier ---------- */
.ways{display:grid;gap:20px;margin-top:var(--na-intro)}
@media (min-width:820px){ .ways{grid-template-columns:repeat(3,1fr);gap:24px} }
.way{background:var(--bg);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.way .in{padding:22px}
.way h3{font-size:1.06rem;margin-bottom:7px}
.way p{font-size:14.5px;color:var(--muted)}

/* ---------- stappen ---------- */
.steps{margin-top:var(--na-intro);position:relative}
.step{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:0 0 24px;position:relative}
.step::before{content:"";position:absolute;left:17px;top:36px;bottom:2px;width:2px;background:var(--line)}
.step:last-child{padding-bottom:0}
.step:last-child::before{display:none}
.step .dot{
  width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-family:var(--font-kop);font-weight:800;font-size:15px;
  position:relative;z-index:2;
}
.step h3{font-size:1rem;margin-bottom:4px;padding-top:7px}
.step p{font-size:14px;color:var(--muted)}
@media (min-width:880px){
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:var(--na-intro)}
  .steps::before{content:"";position:absolute;left:18px;right:18px;top:17px;height:2px;background:var(--line)}
  .step{display:block;padding:0 24px 0 0}
  .step::before{display:none}
  .step h3{margin-top:16px;padding-top:0}
}

/* ---------- donker blok ---------- */
.cta-band{position:relative;border-radius:12px;overflow:hidden;background:var(--grijs-donker)}
.cta-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.cta-band .sluier{position:absolute;inset:0;background:rgba(52,48,44,.90)}
@media (min-width:860px){
  .cta-band{min-height:340px;display:flex;align-items:center}
  .cta-band .sluier{background:linear-gradient(90deg,rgba(48,44,41,.96) 0%,rgba(48,44,41,.92) 47%,rgba(48,44,41,.32) 100%)}
}
.cta-in{position:relative;padding:34px 22px;max-width:62ch}
@media (min-width:720px){ .cta-in{padding:58px 50px} }
.cta-band h2{color:#fff;font-size:clamp(1.3rem,3.6vw,1.85rem)}
.cta-band p{color:rgba(255,255,255,.85);margin-top:var(--onder-kop);font-size:15px}
.cta-band .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:var(--na-intro)}
.cta-band .btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.cta-band .btn-red:hover{background:#fff;color:var(--ink);border-color:#fff}
.breed{display:none}
@media (min-width:720px){ .breed{display:inline} }
.hand-stap{display:none;position:absolute;top:100%;left:16%;align-items:flex-start;gap:6px;margin-top:2px;white-space:nowrap}
.hand-stap .t{transform:rotate(-3deg);margin-top:26px}
.hand-stap .arr{width:50px;height:48px}
@media (min-width:880px){ .hand-stap{display:inline-flex} }
.cta-link{color:#fff;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.5);padding-bottom:2px}
.cta-link:hover{border-bottom-color:#fff}

/* ---------- vacaturepagina ---------- */
.back{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--muted);text-decoration:none;margin-bottom:20px}
.back:hover{color:var(--red-text)}
.vhead{padding-block:var(--pagehead-y) 0;position:relative}
h1.vac-h{font-size:clamp(1.75rem,5.6vw,2.6rem);max-width:26ch}
.vac-lead{margin-top:var(--onder-kop);max-width:112ch;font-size:clamp(1rem,2.9vw,1.06rem);color:var(--muted)}
.cols{display:grid;gap:34px;margin-top:var(--na-kop)}
@media (min-width:900px){ .cols{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start} }
#view-vacature .cols > .aside{order:-1}
@media (min-width:900px){ #view-vacature .cols > .aside{order:0} }
.block{margin-bottom:calc(var(--sec-y) / 2)}
#view-vacature .block + .block{border-top:1px solid var(--rule);padding-top:calc(var(--sec-y) / 2)}
.block h2{font-size:1.18rem;margin-bottom:var(--onder-kop)}
.ul{list-style:none;margin:0;padding:0}
.ul li{position:relative;padding-left:22px;margin-bottom:10px;font-size:15px}
.ul li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;background:var(--red);border-radius:2px}
.aside{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--surface);position:relative}
@media (min-width:900px){ .aside{position:sticky;top:calc(106px + env(safe-area-inset-top,0px))} }
.aside h2{font-size:1.15rem;margin-bottom:var(--onder-kop)}
.aside .row{display:block;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.aside .row:last-of-type{border-bottom:0}
.aside .row span:first-child{display:block;color:var(--muted);font-size:13.5px}
.aside .row span:last-child{display:block;font-weight:500;color:var(--ink);line-height:1.35}
.aside .acts{display:grid;gap:10px;margin-top:var(--na-intro)}
.note{font-size:14px;color:var(--muted);margin-top:var(--onder-kop)}
.fill{display:inline;border-bottom:1px dashed var(--red);color:var(--body);padding:0 1px}

/* ---------- formulier ---------- */
.form{max-width:580px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;color:var(--ink);font-size:15.5px;margin-bottom:7px}
.field .hint{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:7px;padding:13px 14px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.err{margin-top:10px;font-size:15px;color:var(--red-text);font-weight:600}
.done{border:1px solid var(--line);border-left:6px solid var(--red);border-radius:10px;padding:24px;background:var(--surface);max-width:580px}
.done h2{font-size:1.3rem;margin-bottom:var(--onder-kop)}

/* ---------- mobiele balk ---------- */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;
  background:var(--bg);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.mbar .btn{flex:1 1 0}
body.has-mbar .mbar{display:flex}
body.has-mbar{padding-bottom:78px}
@media (min-width:900px){ body.has-mbar .mbar{display:none} body.has-mbar{padding-bottom:0} }

/* ---------- footer ---------- */
footer{background:var(--dark);color:var(--on-dark-muted);padding:48px 0 32px}
footer a{color:var(--on-dark);text-decoration:none}
footer a:hover{text-decoration:underline}
/* op de telefoon staan de twee linkkolommen naast elkaar; ze passen
   prima en het scheelt een scherm scrollen */
.f-grid{display:grid;gap:30px 24px;grid-template-columns:repeat(2,1fr)}
.f-grid > :first-child{grid-column:1 / -1}
@media (min-width:720px){ .f-grid{grid-template-columns:1.4fr 1fr 1fr} }
footer h4{color:var(--on-dark);font-size:15px;font-weight:700;margin-bottom:12px;font-family:var(--font-kop)}
footer ul{list-style:none;margin:0;padding:0;font-size:15px}
footer li{margin-bottom:8px}
/* ---------- socials ---------- */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.socials a{
  /* 44 bij 44, een even getal, zodat het icoon er precies in het midden op
     hele pixels staat. De rand is 2 in plaats van 1,5 om dezelfde reden. */
  width:44px;height:44px;border-radius:9px;display:grid;place-items:center;
  color:#fff;border:2px solid #fff;text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.socials a:hover{text-decoration:none}
/* het tekengebied van de iconen is 24 bij 24, dus tonen we ze ook op 24.
   Bij elke andere maat landen de randen op halve pixels en oogt het zacht. */
.socials svg{width:24px;height:24px;fill:currentColor;display:block;shape-rendering:geometricPrecision}
@media (hover:hover){
  .socials a:hover{background:var(--red);border-color:var(--red);color:#fff}
}
@media (max-width:719px){ .socials a{width:42px;height:42px} }

.f-bot{margin-top:34px;padding-top:18px;border-top:1px solid #3A3630;font-size:13.5px;display:flex;flex-wrap:wrap;gap:14px}



/* ==========================================================
   MEER LUCHT OP GROTE SCHERMEN
   ========================================================== */
@media (min-width:720px){
  body{line-height:1.6}

  .card-body{padding:24px 24px 26px}
  .card p{margin-top:12px}
  .card .go{margin-top:18px}
  .open-strip{padding:30px 34px;gap:26px}

  .way .in{padding:25px}
  .way p{margin-top:4px}

  .num-grid{gap:28px}
  .num-grid span{margin-top:12px}

  .duo{gap:58px}

  .step{padding-right:34px}
  .step h3{margin-top:18px}
  .step p{margin-top:2px}



  .cols{gap:60px}
  .ul li{margin-bottom:13px}
  .aside{padding:25px}
  .aside .row{padding:14px 0}

  .field{margin-bottom:21px}
  .field label{margin-bottom:9px}
  .cta-in{padding:58px 52px}
  footer{padding:60px 0 38px}
  .f-bot{margin-top:38px;padding-top:22px}
  footer li{margin-bottom:12px}
  footer h4{margin-bottom:16px}
}

/* ==========================================================
   FIJNAFSTEMMING TELEFOON
   Alles een maat kleiner: typografie, blokken, beeld, witruimte.
   ========================================================== */
@media (max-width:719px){
  body{font-size:15px;line-height:1.55}
  .wrap{padding-inline:17px}

  /* regels gelijkmatiger verdelen, scheelt losse korte regels */
  p,li{text-wrap:pretty}
  h1,h2,h3,
  .banner-sub,.sec-intro,.pagehead .lead,.vac-lead,
  .card p,.way p,.step p,.duo p,.cta-band p,.open-strip p{text-wrap:balance}

  /* balk bovenin */
  html{scroll-padding-top:calc(92px + env(safe-area-inset-top, 0px))}
  .logo-chip img{height:42px}
  .menu-btn{padding:11px 13px;font-size:13.5px}
  .menu-btn .bars i{width:14px}
  .menu-panel a{padding:12px 0;font-size:15px}

  /* knoppen */
  .btn{padding:11px 16px;font-size:14.5px}
  .btn-sm{padding:8px 13px;font-size:13.5px}
  .banner-acts .btn{padding:11px 15px;font-size:14.5px}

  /* hero */
  h1.banner-h{font-size:1.52rem;line-height:1.12;max-width:17ch}
  .banner-sub{font-size:14.5px}
  .banner{min-height:clamp(380px,58vh,470px)}
  .banner-sluier{background:rgba(22,20,18,.60)}
  .banner-acts{margin-top:26px;gap:10px}
  .banner-acts .btn{flex:1 1 100%}

  /* secties en koppen */
  .sec-h{font-size:1.24rem}
  .sec-intro{font-size:14px}
  .pagehead h1{font-size:1.46rem}
  .pagehead .lead{font-size:14.5px}

  /* vacaturekaarten */
  .cards{gap:12px}
  .card{flex:0 0 76%}
  .card-top{aspect-ratio:16/9}
  .card-body{padding:13px 15px 15px}
  .card h3{font-size:1.02rem}
  .card p{font-size:13.5px;margin-top:7px}
  .card .go{font-size:13.5px;margin-top:9px}
  .chip{font-size:12.5px;padding:3px 8px}
  .dots{margin-top:12px}
  .dots button{width:7px;height:7px}
  .dots button[aria-current="true"]{width:18px}

  /* open sollicitatie */
  .open-strip{padding:18px;gap:12px;border-radius:10px}
  .open-strip .ico{width:32px;height:32px}
  .open-strip h3{font-size:1.02rem}
  .open-strip p{font-size:13.5px}

  /* zo werkt het hier */
  .ways{
    display:flex;gap:12px;margin:var(--na-intro) -17px 0;padding:0 17px 4px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:17px;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  }
  .ways::-webkit-scrollbar{display:none}
  .way{flex:0 0 80%;scroll-snap-align:center}
  .way .in{padding:17px}
  .badge{width:38px;height:38px;border-radius:9px;margin-bottom:10px}
  .badge .ico{width:20px;height:20px}
  .way h3{font-size:1rem}
  .way p{font-size:13.5px}

  /* cijfers */
  .num-grid{gap:20px 16px}
  .num-grid .ico{width:22px;height:22px;margin-bottom:8px}
  .num-grid b{font-size:1.4rem}
  .num-grid span{font-size:12.5px;margin-top:5px}

  /* tekst-en-beeldrijen */
  .duo{gap:18px}
  .duo-h{font-size:1.18rem}
  .duo p{font-size:14px}

  /* stappen */
  .step{grid-template-columns:30px 1fr;gap:12px;padding-bottom:18px}
  .step::before{left:14px;top:30px}
  .step .dot{width:30px;height:30px;font-size:13px}
  .step h3{font-size:.96rem;padding-top:5px}
  .step p{font-size:13.5px}

  /* beeld */
  .shot{border-radius:8px}
  .shot.r32,.shot.r218{aspect-ratio:16/10}
  .fotogrid{gap:12px}
  .fotogrid .shot{aspect-ratio:16/11}
  /* drie foto's naast elkaar om doorheen te swipen */
  .fotogrid.schuif{
    display:flex;gap:12px;margin:var(--na-intro) -17px 0;padding:0 17px 4px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:17px;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  }
  .fotogrid.schuif::-webkit-scrollbar{display:none}
  .fotogrid.schuif figure{flex:0 0 80%;scroll-snap-align:center}
  /* In een strook die je opzij veegt laten we het verschijneffect weg. Een
     foto die nog niet in beeld is geweest zou anders onzichtbaar blijven
     tot je er langs veegt, en de beweging kan het vegen in de weg zitten. */
  html.tj-anim .fotogrid.schuif figure{opacity:1;transform:none;transition:none}
  .fotogrid.schuif .shot{aspect-ratio:4/3}

  /* donker blok */
  /* op de telefoon een rustig vlak zonder foto eronder */
  .cta-band{border-radius:10px}
  .cta-band > img{display:none}
  .cta-band .sluier{background:var(--grijs-donker)}
  .cta-band .cta-link{display:none}
  .cta-in{padding:26px 18px}
  .cta-band h2{font-size:1.14rem}
  .cta-band p{font-size:13.5px}
  .cta-band .acts{margin-top:var(--na-intro)}

  /* vacaturepagina */
  h1.vac-h{font-size:1.46rem}
  .vac-lead{font-size:14.5px}
  .back{font-size:14px;margin-bottom:16px}
  .cols{gap:26px}
  .block h2{font-size:1.04rem}
  .ul li{font-size:14px;padding-left:19px;margin-bottom:9px}
  .ul li::before{width:8px;height:8px;top:.52em}
  .aside{padding:18px;border-radius:10px}
  .aside h2{font-size:1.02rem}
  .aside .row{font-size:14px;padding:8px 0}
  .aside .row span:first-child{font-size:13px}
  .aside .acts{gap:8px}
  .note{font-size:13px}

  /* formulier */
  .field{margin-bottom:15px}
  .field label{font-size:14.5px;margin-bottom:6px}
  .field input,.field select,.field textarea{font-size:16px;padding:11px 12px;border-radius:6px}
  .field textarea{min-height:104px}
  .done{padding:20px;border-radius:9px}
  .done h2{font-size:1.08rem}

  /* onderbalk en voet */

  .card:active{border-color:var(--ink)}
  .mbar{padding:8px 14px calc(8px + env(safe-area-inset-bottom, 0px));box-shadow:0 -2px 14px rgba(28,26,24,.10)}
  body.has-mbar{padding-bottom:70px}
  footer{padding:34px 0 24px}
  footer h4{font-size:14px;margin-bottom:10px}
  footer ul{font-size:14px}
  footer li{margin-bottom:7px}
  .f-logo{height:21px;margin-bottom:12px}
  .f-bot{font-size:13px;margin-top:26px;padding-top:14px}
}

/* ---------- beweging bij aanwijzen ----------
   alleen op apparaten met een muis; op een touchscreen heeft dit geen zin
   en kan het blijven hangen na een tik */
@media (hover:hover){
  /* Een heel lichte inzoom van 2 procent bij aanwijzen.
     will-change staat bewust op het beeld zelf en niet op :hover. De
     browser maakt de grafische laag daardoor meteen aan in plaats van op
     het moment dat je eroverheen gaat, en juist dat moment zag je eerder
     als een sprong of als pixels die opnieuw inladen. Twee procent is zo
     klein dat er van het herberekenen niets te zien is. */
  .shot img{
    transition:transform .6s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }
  .shot:hover img{transform:scale(1.02)}
  .shot.diepte:hover img{transform:none}

  /* knoppen worden alleen iets donkerder, verder blijven ze staan */
  .btn{transition:background-color .15s ease,color .15s ease,border-color .15s ease}

  /* het donkere blok onderaan leeft mee */
  /* de foto achter het donkere blok blijft ook staan */
}

/* ---------- ruimte-hulpklassen ----------
   staan bewust onderaan, zodat ze de standaardruimte van een sectie overschrijven */
.na-kop{padding-top:var(--na-kop)}
.na-blok{padding-top:var(--sec-y)}
.na-tekst{margin-top:var(--na-intro)}
.knoprij{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--na-intro)}
.pagina-eind{height:var(--pagina-eind)}

/* ---------- subtiele details ---------- */
/* voortgangsbalk bovenin */
.voortgang{
  position:fixed;left:0;top:env(safe-area-inset-top, 0px);height:3px;width:0;
  background:var(--red);z-index:70;transition:width .1s linear;pointer-events:none;
}

/* het beeld in de banner komt binnen met een trage uitzoom */
@keyframes traag-uit{from{transform:scale(1.07)}to{transform:scale(1)}}
.banner-beeld img{animation:traag-uit 1.8s cubic-bezier(.22,.61,.36,1)}

/* de tekst in de banner komt rustig binnen */
@keyframes opkomen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.banner-in h1{animation:opkomen .5s ease .1s both}
.banner-in .banner-sub{animation:opkomen .5s ease .16s both}
.banner-in .banner-acts{animation:opkomen .5s ease .22s both}

/* foto's die je kunt uitvergroten */
.shot.zoombaar{cursor:zoom-in}
.shot.zoombaar::after{
  content:"";position:absolute;inset:0;background:rgba(28,26,24,0);transition:background .2s ease;
}
.shot.zoombaar:hover::after{background:rgba(28,26,24,.12)}
.lightbox{
  position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(22,20,18,.92);padding:28px;cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1500px,94vw);max-height:90vh;width:auto;height:auto;border-radius:10px;display:block}
.lightbox .sluit{
  position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:22px;line-height:1;display:grid;place-items:center;
}
.card-top img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){
  .card-top img{will-change:transform}
  .card:hover .card-top img{transform:scale(1.03)}
}

.numbers{background-image:repeating-linear-gradient(135deg,var(--hatch) 0 2px,transparent 2px 16px)}

/* ---------- blokken die verschijnen bij het scrollen ----------
   De klasse tj-anim wordt al in de <head> gezet, nog voordat de pagina
   getekend wordt. Daardoor beginnen deze blokken meteen onzichtbaar en zie
   je ze niet eerst staan om daarna te verdwijnen. Staat JavaScript uit of
   wil de bezoeker minder beweging, dan komt die klasse er nooit en staat
   alles er gewoon. */
html.tj-anim .home .card,
html.tj-anim .way,
html.tj-anim .fotogrid figure,
html.tj-anim .open-strip,
html.tj-anim .duo > *,
html.tj-anim .step,
html.tj-anim .cta-band{
  opacity:0;transform:translateY(20px) scale(.988);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i, 0) * 70ms);
}
html.tj-anim .home .card.in,
html.tj-anim .way.in,
html.tj-anim .fotogrid figure.in,
html.tj-anim .open-strip.in,
html.tj-anim .duo > *.in,
html.tj-anim .step.in,
html.tj-anim .cta-band.in{opacity:1;transform:none}

/* ---------- de vijf stappen komen op volgorde binnen ----------
   de bolletjes ploppen een voor een op, de lijn ertussen wordt getekend.
   Alles hangt aan .reveal, dus zonder script of bij 'minder beweging'
   staat het meteen goed. */
html.tj-anim .step{transition-delay:calc(var(--i, 0) * 300ms)}
html.tj-anim .step .dot{
  transform:scale(.5);opacity:0;
  transition:transform .6s cubic-bezier(.34,1.42,.64,1), opacity .36s ease;
}
html.tj-anim .step.in .dot{
  transform:scale(1);opacity:1;
  transition-delay:calc(var(--i, 0) * 300ms + .16s);
}
/* het verbindingslijntje onder elk bolletje op de telefoon */
html.tj-anim .step::before{transform:scaleY(0);transform-origin:top center;transition:transform .5s ease}
html.tj-anim .step.in::before{transform:scaleY(1);transition-delay:calc(var(--i, 0) * 300ms + .46s)}
@media (min-width:880px){
  /* op een breed scherm loopt de lijn horizontaal: die wordt in een keer getrokken */
  html.tj-anim .steps::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.9s cubic-bezier(.22,.61,.36,1)}
  html.tj-anim .steps.getekend::before{transform:scaleX(1)}
}

.btn:active{transform:translateY(1px)}
body{-webkit-tap-highlight-color:transparent}

@media (prefers-reduced-motion: reduce){
  .steps::before{transform:none !important}
  .steps::before,.step::before,.step .dot{transform:none !important;opacity:1 !important}
  .hand .t .ltr{opacity:1 !important}
  .hand .arr path{stroke-dashoffset:0 !important}
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* =========================================================================
   WORDPRESS
   Alles wat alleen in WordPress voorkomt: Gravity Forms, de inhoud van de
   editor op een vacaturepagina, en de beheerdersmelding bij een ontbrekend
   formulier. De maten komen een-op-een uit het blok "formulier" hierboven,
   zodat een Gravity Forms-formulier er net zo uitziet als het origineel.
   ========================================================================= */

/* ---------- Gravity Forms ----------
   De eigen opmaak van Gravity Forms staat op de voorkant uit, want die
   laadt na het thema en won daardoor. Alles wat die stylesheet deed staat
   hieronder, in de vormgeving van de site. Daar horen ook een paar dingen
   bij die je niet ziet maar die wel moeten kloppen, zoals het verbergen
   van de spamval en van verborgen velden. */
.gf-wrap{max-width:580px}

/* dingen die verborgen horen te blijven */
.gf-wrap .gform_validation_container,
.gf-wrap .gform_hidden,
.gf-wrap .gfield_visibility_hidden,
.gf-wrap input[name^="input_"][type="hidden"]{
  display:none !important;
}
.gf-wrap .gfield--type-honeypot,
.gf-wrap li.gform_validation_container{position:absolute !important;left:-9999px !important}
.gf-wrap .screen-reader-text,
.gf-wrap .gform_hidden_label{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
/* lijsten zonder bolletjes, dat deed hun stylesheet ook */
.gf-wrap ul,.gf-wrap ol{list-style:none;margin:0;padding:0}
.gf-wrap legend{padding:0}
.gf-wrap fieldset{border:0;margin:0;padding:0;min-width:0}
.gf-wrap .gform_wrapper.gravity-theme,
.gf-wrap .gform_wrapper{margin:0;padding:0}
.gf-wrap .gform_wrapper form{margin:0}
.gf-wrap .gform_heading{display:none}

.gf-wrap .gform_fields{display:grid !important;grid-template-columns:1fr !important;gap:0 !important;margin:0;padding:0;list-style:none}
.gf-wrap .gfield{margin:0 0 18px 0 !important;padding:0 !important;grid-column:1 / -1 !important;max-width:none !important}
.gf-wrap .gfield--width-half{grid-column:auto !important}
@media (min-width:720px){
  .gf-wrap .gform_fields{grid-template-columns:repeat(2,1fr) !important;column-gap:20px !important}
  .gf-wrap .gfield{grid-column:1 / -1 !important}
  .gf-wrap .gfield--width-half{grid-column:span 1 !important}
}

.gf-wrap .gfield_label,
.gf-wrap legend.gfield_label{
  display:block;font-family:var(--font);font-weight:600;color:var(--ink);
  font-size:15.5px;margin:0 0 7px;line-height:1.35;
}
.gf-wrap .gfield_required{color:var(--red-text);margin-left:2px}
.gf-wrap .gfield_description{
  font-size:14px;color:var(--muted);margin-top:6px;padding:0;font-weight:400;
}
/* Gravity Forms zet onder een uploadveld zelf al een regel met de
   toegestane bestandstypen en de maximale grootte. Die staat er dan twee
   keer, want in de eigen omschrijving staat hetzelfde in gewone taal.
   We laten de technische regel weg en houden de leesbare. */
.gf-wrap .gform_fileupload_rules{display:none}
.gf-wrap .ginput_container_fileupload .gfield_description{margin-top:8px}

.gf-wrap input[type=text],
.gf-wrap input[type=email],
.gf-wrap input[type=tel],
.gf-wrap input[type=url],
.gf-wrap input[type=number],
.gf-wrap input[type=date],
.gf-wrap input[type=file],
.gf-wrap select,
.gf-wrap textarea{
  width:100%;font-family:inherit;font-size:16.5px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:7px;padding:13px 14px;box-shadow:none;
}
.gf-wrap textarea{min-height:120px;resize:vertical}
.gf-wrap input:focus,.gf-wrap select:focus,.gf-wrap textarea:focus{
  border-color:var(--ink);outline:3px solid var(--red);outline-offset:2px;
}
.gf-wrap input[type=file]{padding:10px 12px}

.gf-wrap .gfield_checkbox,.gf-wrap .gfield_radio{display:grid;gap:10px;margin:0}
.gf-wrap .gchoice{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;font-size:15px}
.gf-wrap .gchoice input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--red)}
.gf-wrap .gchoice label{font-weight:400;color:var(--body);margin:0}

/* verzendknop, gelijk aan .btn.btn-red.btn-block */
.gf-wrap .gform_footer{margin:0;padding:0}
.gf-wrap .gform_button,
.gf-wrap .gform_next_button,
.gf-wrap .gform_previous_button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-kop);font-weight:700;font-size:15.5px;line-height:1;
  padding:14px 20px;border-radius:8px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;width:100%;
  background:var(--red);color:#fff;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.gf-wrap .gform_previous_button{background:transparent;color:var(--ink);border-color:var(--line)}
@media (hover:hover){
  .gf-wrap .gform_button:hover,.gf-wrap .gform_next_button:hover{
    transform:translateY(-2px);box-shadow:0 8px 18px rgba(226,0,26,.26);
  }
}
.gf-wrap .gform_button:active{transform:translateY(1px)}

/* meldingen en validatie */
.gf-wrap .gform_validation_errors,
.gf-wrap .validation_error{
  border:1px solid var(--rood-lijn);border-left:6px solid var(--red);
  background:var(--rood-zacht);color:var(--ink);
  border-radius:10px;padding:16px 18px;margin:0 0 20px;font-size:15px;
}
.gf-wrap .gform_validation_errors h2{font-size:1rem;margin:0 0 4px}
.gf-wrap .gfield_validation_message,
.gf-wrap .validation_message{
  margin-top:8px;font-size:15px;color:var(--red-text);font-weight:600;
  background:none;border:0;padding:0;
}
.gf-wrap .gfield_error input,
.gf-wrap .gfield_error select,
.gf-wrap .gfield_error textarea{border-color:var(--red)}

/* Bevestiging na het versturen, in dezelfde vorm als het eigen bedankblok.
   Gravity Forms zet zijn bevestiging soms in twee omhulsels, en de tekst
   zelf kan ook nog een kader meebrengen. Daarom krijgt alleen het
   buitenste element een rand; wat erin zit wordt teruggezet naar niets.
   Anders zie je drie kaders in elkaar. */
.gform_confirmation_wrapper,
.gf-wrap .gform_confirmation_message,
.gf-wrap > .done{
  border:1px solid var(--line);border-left:6px solid var(--red);border-radius:10px;
  padding:24px;background:var(--surface);max-width:580px;
  font-size:16px;color:var(--body);
}
.gform_confirmation_wrapper .gform_confirmation_message,
.gform_confirmation_wrapper .done,
.gf-wrap .gform_confirmation_message .done,
.gf-wrap .gform_confirmation_message .gform_confirmation_message{
  border:0;padding:0;background:none;max-width:none;border-radius:0;
}
.gform_confirmation_wrapper h2,
.gf-wrap .gform_confirmation_message h2,
.gf-wrap .done h2{font-size:1.3rem;margin-bottom:var(--onder-kop);color:var(--ink)}

/* meertrapsformulier met voortgangsbalk */
.gf-wrap .gf_progressbar_wrapper{margin:0 0 24px}
.gf-wrap .gf_progressbar_title{font-size:14px;color:var(--muted);margin-bottom:8px}
.gf-wrap .gf_progressbar{background:var(--surface-2);border-radius:999px;height:8px;overflow:hidden;padding:0}
.gf-wrap .gf_progressbar_percentage{background:var(--red);height:8px;border-radius:999px;transition:width .4s ease}
.gf-wrap .gf_progressbar_percentage span{display:none}
.gf-wrap .gform_page_footer{display:flex;gap:12px;margin-top:4px}
.gf-wrap .gform_page_footer .gform_button,
.gf-wrap .gform_page_footer .gform_next_button,
.gf-wrap .gform_page_footer .gform_previous_button{width:auto;flex:1 1 0}

/* laadindicator */
.gf-wrap .gform_ajax_spinner{margin-left:10px;width:22px;height:22px}

/* ---------- inhoud uit de editor op een vacaturepagina ---------- */
.vac-inhoud > h2{
  font-size:1.18rem;margin-bottom:var(--onder-kop);
  font-family:var(--font-kop);color:var(--ink);font-weight:800;letter-spacing:-.022em;
}
.vac-inhoud > h2:not(:first-child){
  margin-top:calc(var(--sec-y) / 2);padding-top:calc(var(--sec-y) / 2);
  border-top:1px solid var(--rule);
}
.vac-inhoud > p{margin-bottom:12px}
.vac-inhoud > ul{list-style:none;padding:0;margin:0 0 12px}
.vac-inhoud > ul li{
  position:relative;padding-left:26px;margin-bottom:10px;font-size:15.5px;
}
.vac-inhoud > ul li::before{
  content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;
  background:var(--red);border-radius:2px;
}
.vac-inhoud figure,.vac-inhoud .wp-block-image{margin:var(--na-intro) 0 0;max-width:520px}
.vac-inhoud figure img,.vac-inhoud .wp-block-image img{border-radius:10px;display:block;width:100%;height:auto}
.vac-inhoud .block:first-child > h2{margin-top:0;padding-top:0;border-top:0}

/* ---------- melding voor de beheerder ---------- */
.tj-melding{
  border:1px dashed var(--red);border-radius:10px;padding:20px 22px;
  background:var(--rood-zacht);max-width:580px;
}
.tj-melding p{margin-bottom:8px}
.tj-melding p:last-child{margin-bottom:0}

/* ---------- WordPress-standaardklassen ---------- */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.alignleft{float:left;margin:0 20px 16px 0}
.alignright{float:right;margin:0 0 16px 20px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.wp-caption-text,figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}
.navlink.is-hier{border-bottom-color:var(--red)}