* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;  accent-color: var(--my-light-blue);}
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.39vw, 24px); scroll-behavior: smooth; overscroll-behavior: none;  }
body {font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
p:last-of-type { margin-bottom: 0;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-bold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: "arboria", system-ui, sans-serif;
    --header-font: "arboria", system-ui, sans-serif;

    /* Font weights */
    --font-regular: 400; 
    --font-medium: 500; 
    --font-bold: 700; 
    --font-black: 900; 

    /* Font sizes */
    --font-size-h1: 2rem;
    --font-size-h2: 1.8rem;
    --font-size-h3: 1.6rem;
    --font-size-h4: 1.4rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1rem; 
    --font-size-body: .8rem; 


    /* Colors */  
    --main-color: var(--my-black);
    --background-color: var(--my-white);

    --my-blue: #003757; 
    --my-black: #474747;
    --my-white: #FFF; 
    --my-light-blue: #5ed0ed;
    --my-orange: #ff7519;
    --my-orange-10: rgba(255, 117, 25, .1);
    --my-green: #2FBE8F; 

    --my-grey-1: #f2f3f4;
    --my-grey-2: #dee2e6;
    --my-grey-3: #adb5bd;
    --my-grey-4: #495057;
    --my-grey-5: #002942;

    --odf-pink: #EAA0A5;
    --odf-creme: #F9F4EE;

    /* Pie scale (blauw -> licht -> oranje) */
    --pie1: #003757;
    --pie2: #0e4d70;
    --pie3: #1d6588;
    --pie4: #2f7fa0;
    --pie5: #4a99b3;
    --pie6: #6fb0be;
    --pie7: #f8a86a;
    --pie8: #ff965a;
    --pie9: #ff843a;
    --pie10: #ff7519;

    /* Line heights */
    --line-height-small: 1.1;
    --line-height-regular: 1.4;
    --line-height-large: 1.6; 

    /* Widths */
    --gutter-side: 2rem;
    --gutter-top: 1rem;
    --max-width: 65rem;
    --max-width-ultra-wide: 180rem;
    --max-width-narrow: 40rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 4rem; 
    --padding-top: 5rem;
    --btn-padding: 0.4em 1.2em .55em 1em;

    /* Transitions */
    /* Transitions */
    --my-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --my-ease-out: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --drop-shadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blur-shadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --border-radius: 0.8rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 0.25em; 

    /* Logos */
    --logo-width: 8rem; 
}

/* =========================================================== */
/* ======================== HEADINGS ========================= */
/* =========================================================== */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-bold); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em; color: var(--my-blue);}
h1, .h1 {font-size: var(--font-size-h1); } 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3);  }
h4, .h4 {font-size: var(--font-size-h4); } 
h5, .h5 {font-size: var(--font-size-h5); } 
h6, .h6 {font-size: var(--font-size-h6); }
.kicker { font-size: var(--font-size-body); color: var(--my-light-blue); margin-bottom: .33em;  text-transform: uppercase; font-weight: var(--font-medium);}
.kicker:last-of-type { margin-bottom: .33em;}

:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6) em { color: var(--my-light-blue); font-weight: inherit;  }

/* =========================================================== */
/* ========================= GENERAL ========================= */
/* =========================================================== */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main section:first-of-type { padding-top: var(--padding-top); margin-top: 0; }
header, main, footer { min-width: 0; max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative; background: var(--background-color);  display: flex; flex-direction: column; background: var(--my-white);}
section.light { background: var(--my-grey-1);}
section.dark { background: var(--my-blue); color: var(--my-white);}
section.dark :is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6) { color: inherit;}
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow, .container.narrow { max-width: var(--max-width-narrow); }

section.dark + section.dark .container,
section.light + section.light .container,
section.white + section.white .container { margin-top: 1rem;}

/* --------------- IMAGES --------------- */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
img, video { width: 100%; height: auto; user-select: none;}

/* --------------- SELECTION --------------- */
*::selection { background: var(--main-color); color: var(--background-color); }

/* --------------- NO VISIBLE SCROLLBAR --------------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }

/* --------------- SOCIALS --------------- */
ul.socials { display: flex; align-items: center; gap: 0.5rem; --icon-size: 1.2rem;   color: var(--my-white);}
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: var(--icon-size); height: var(--icon-size); display: flex;  align-items: center; justify-content: center; }
ul.socials li svg { width: calc(var(--icon-size) / 1.2); height: calc(var(--icon-size) / 1.2); }


/* --------------- BUTTONS --------------- */
.buttons { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .2rem .5rem;}
button { touch-action: manipulation;  text-align: center; }
button,label { cursor: pointer;  user-select: none; }
.btn { display: inline-flex; align-items: center; gap: .5em; font-size: var(--font-size-body);  border: 1px solid var(--own-color, transparent); background: var(--my-orange); color: var(--own-color, var(--my-white)); padding: var(--btn-padding); border-radius: var(--btn-border-radius); text-align: center;   font-weight: var(--font-medium);}
.btn svg {  width: 1em; height: 1em; position: relative; top: .15em;  transition: transform 250ms var(--my-ease); will-change: transform;}
.btn:hover svg { transform: translateX(.25em); }
.btn.blue { background: var(--my-light-blue); color: var(--main-color);}
.btn.white { background: var(--my-white); color: var(--my-blue);}
.btn.orange-outlined { background: none; --own-color: var(--my-orange); }
.btn.white-outlined { background: none; --own-color: var(--my-white); }

/* --------------- ACTIVATE CHILDREN --------------- */
.activate-children > * { transition: transform 500ms, opacity 500ms; transition-delay: calc(var(--cascade, 0) * var(--own-delay, 100ms));  will-change: transform, opacity;;}
.activate-children.activate > * { transform: translateY(1rem); opacity: 0;  }




/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { position: fixed; z-index: 10; left: 0; right: 0; margin: 0 auto;  background: var(--my-blue); color: var(--my-white); font-weight: var(--font-medium); border-bottom: 1px solid rgba(255,255,255,0.2); }
header img, header svg { width: 100%; height: auto; }
nav#mobile, .burger, .mobile { display: none;  }
#skiplink { position: fixed;  left: 50%; top: -40rem; transform: translate(-50%, -50%);  text-transform: none; font-size: 1rem; background: var(--background-color);  opacity: 0; pointer-events: none; text-align: center; padding: 0.5rem;  z-index: 5; }
#skiplink:focus { top: 4rem; opacity: 1; pointer-events: all; }

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: .6rem 0; z-index: 2; background: var(--my-blue); }
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center; gap: 1rem;}
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li a { display: flex; position: relative; }
nav#desktop > ul li:not(.logo) a::after { content: ""; width: calc(100% - 1rem); left: .5rem; height: 1px; border-radius: .25rem; position: absolute; bottom: 0.45rem; background: var(--my-white);  transition: transform 250ms; transform-origin: center; transform: scaleX(0);}
nav#desktop > ul li:is(.active, :hover) > a::after { transform: scaleX(1);} 
nav#desktop > ul > li.logo {margin-right: auto; max-width: var(--logo-width); }
nav#desktop > ul > li:not(.logo) > a { padding: .5rem; }
nav#desktop a[data-vacatures] { position: relative; }
nav#desktop a[data-vacatures]::before { content: ""; position: absolute; top: 0.45rem; right: 0; background: var(--my-orange); border-radius: 50%; width: .4rem; height: .4rem; color: var(--my-white); display: grid; place-items: center;  line-height: 0;}


/* Desktop lang switcher */
nav#desktop > ul > li.switcher { align-items: center; justify-content: center; width: 2em; height: 2em; border: 1px solid var(--main-color); border-radius: 50%; cursor: pointer; flex-shrink: 0; }
nav#desktop > ul > li.switcher > span { font-size: 0.85em; line-height: 1; pointer-events: none; }
nav#desktop > ul > li.switcher ul.lang { list-style: none; position: absolute; bottom: -.5rem; right: -.5rem; transform: translateY(100%); opacity: 0; pointer-events: none; transition: opacity 250ms; background: var(--background-color); border: 1px solid var(--main-color); border-radius: .75rem; padding: .4rem .75rem; display: flex; flex-direction: column; gap: .4rem; white-space: nowrap; z-index: 10; }
nav#desktop > ul > li.switcher ul.lang::before { content: ""; position: absolute; width: 100%; top: -1rem; left: 0; height: 1rem; }
nav#desktop > ul > li.switcher:hover ul.lang, nav#desktop > ul > li.switcher:focus-within ul.lang { opacity: 1; pointer-events: all; }
nav#desktop > ul > li.switcher ul.lang li a { display: block; padding: .15rem .3rem; }
nav#desktop > ul > li.switcher ul.lang li.active a { text-decoration: underline; text-underline-offset: .2em; }
nav#desktop > ul > li.switcher ul.lang li a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* MOBILE NAV */
nav#mobile { position: fixed; top: 0; transform: translateY(-100%); transition: transform 500ms var(--my-ease); width: 100%; display: flex; flex-direction: column; align-items: center; background: var(--my-blue); }
nav#mobile > ul { display: flex;flex-direction: column; width: 100%;  height: 100%; margin-top: 2rem; padding: 2rem 0 0; }
nav#mobile > ul > li { display: flex; font-size: var(--font-size-h5); }
nav#mobile > ul > li > a { padding: 0.5rem var(--gutter-side); display: block; width: 100%;  border-bottom: 1px solid rgba(255,255,255,0.2); }
nav#mobile > ul > li:first-of-type  > a { border-top: 1px solid rgba(255,255,255,0.2);}
nav#mobile > ul > li.switcher ul.lang { display: flex; flex-direction: row; gap: 0.5rem; padding: 0; list-style: none; }
nav#mobile > ul > li.switcher ul.lang li { display: flex; }
nav#mobile > ul > li.switcher ul.lang li.active > a { text-decoration: underline; }
nav#mobile > ul > li.switcher ul.lang li > a { padding: 0.5rem; }

/* Burger */
button.burger { width: 1.2rem; height: calc(0.8rem + 3px); transition: transform 500ms var(--my-ease);  z-index: 99;  display: none; align-items: center; background-color: transparent; }
button.burger::before { content: ""; position: absolute; --_excess: -.25rem;   top: var(--_excess); left: var(--_excess); width: calc(100% + var(--_excess) * -2); height: calc(100% + var(--_excess) * -2);}
button.burger > span { width: 1.2rem; height: 2px; position: absolute; background: var(--my-white); transition: transform 500ms var(--my-ease); }
button.burger > span:nth-of-type(1) { transform: translateY(-.4rem); }
button.burger > span:nth-of-type(2) { transform: none }
button.burger > span:nth-of-type(3) { transform: translateY(.4rem); }

/* Burger open */
body.menu-open button.burger { transform: rotate(-180deg)  }
body.menu-open button.burger span:nth-of-type(1) { transform: rotate(45deg);}
body.menu-open button.burger span:nth-of-type(2) { transform: scaleX(0);}
body.menu-open button.burger span:nth-of-type(3) { transform: rotate(-45deg);}
body.menu-open nav#mobile { transform: none;  }


@media only screen and (max-width: 768px) {
    nav#mobile { display: flex; }
    button.burger { display: flex; }
    nav#desktop li:not(.logo,.burger) { display: none; }
}


/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { background: var(--my-blue); color: var(--my-white); border-top: 1px solid rgba(255,255,255,0.2);}
footer .h6 { color: var(--my-light-blue); text-transform: uppercase;}
footer address a { display: block; max-width: max-content; }
footer address > a:first-of-type { margin-top: 1rem;}
footer .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem var(--gap); margin-bottom: 1rem; }
footer  a:hover { text-decoration: underline;}
footer .container > * > ul { display: flex; flex-direction: column; gap: .3rem;}
footer .container > p  { font-size: 0.7rem; margin-top: 1rem; }

@media only screen and (max-width: 768px) {
    footer .container { grid-template-columns: 1fr;}
}



/* ------------------------ SECTIONS ------------------------ */
/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { display: flex; flex-direction: column; isolation: isolate; color: var(--my-white);  font-size: var(--font-size-h6); }
section.landing .h1 {  color: inherit }
section.landing picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: -1; }
section.landing picture img { object-fit: cover;}
section.landing picture::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-black); opacity: .7;}
section.landing article { max-width: 25rem;}

@media only screen and (max-width: 768px) {
    section.landing picture::after { opacity: .75;}
    
}


/* =========================================================== */
/* ===================== TEXT AND IMAGE ====================== */
/* =========================================================== */
section.text-image .container { display: grid; grid-template-columns: 1.04fr 0.96fr; grid-template-areas: "a f"; grid-gap: 2rem var(--gap); align-items: center; }
section.text-image article { max-width: 29rem; grid-area: a; }
section.text-image figure { grid-area: f; }
section.text-image .media > * { border-radius: var(--border-radius); }
section.text-image .h1 { max-width: 9em; }

.video.media[data-vimeo] { position: relative; overflow: hidden; }
.video.media[data-vimeo] picture, .video.media[data-vimeo] picture img { width: 100%; height: 100%; }
.video.media[data-vimeo] picture img { object-fit: cover; display: block; }
.video.media[data-vimeo] .play { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background:  none; border-radius: 0; }
.video.media[data-vimeo] .play > div { position: absolute; inset: 0; margin: auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--my-light-blue); color: var(--my-white); cursor: pointer; transition: transform 250ms var(--my-ease), background 250ms var(--my-ease); }
.video.media[data-vimeo] .play svg { width: 50%; height: 50%; margin-left: .15em; }
.video.media[data-vimeo] .play:hover > div { transform: scale(1.08); }
.video.media[data-vimeo] .play::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video.media[data-vimeo] iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.video.media[data-vimeo][data-playing] .play { opacity: 0; pointer-events: none; }

section.text-image.left .container { grid-template-areas: "f a"; grid-template-columns: 0.96fr 1.04fr; }

@media only screen and (max-width: 768px) {
    section.text-image .container { grid-template-columns: 1fr; grid-template-areas: "a" "f"; }
    section.text-image.left .container { grid-template-columns: 1fr; grid-template-areas: "f" "a"; }
    section.text-image article { max-width: 30rem; }
}


/* =========================================================== */
/* ====================== IMAGE SLIDER ======================= */
/* =========================================================== */
section.image-slider.fullscreen { max-width: var(--max-width-ultra-wide); width: 100%; margin: 1rem auto; overflow: hidden;  --image-width: clamp(8rem, 25vw, 14rem); z-index: 2; background: none; }
section.image-slider { display: flex; gap: 1rem; }
section.image-slider ul.main { display: flex; overflow: hidden; gap: 1rem; flex-shrink: 0; transform: translateX(0%); animation: slide 140s linear infinite; }
section.image-slider ul.main li { flex-shrink: 0; }
section.image-slider ul.main li img { position: relative; max-width: var(--image-width); border-radius: var(--half-border-radius); }
section.image-slider div.slider { max-width: unset; width: unset; margin: unset; display: flex; align-items: center; gap: 1rem; }
section.image-slider div.slider:nth-of-type(2n+1) ul.main { animation-direction: reverse; }
section.image-slider.builder { flex-direction: column; }

@keyframes slide {
    0% { transform: translate(0, 0); }
    100% { transform: translate(calc(-50% - 0.5rem), 0); }
}

section.image-slider:has(+section.voordelen) { margin-bottom: calc(var(--image-width) / (16/9) / -2);}
section.image-slider + section.voordelen .container { margin-top: calc(var(--margin-y) + 2rem);}


/* =========================================================== */
/* ======================== VOORDELEN ======================== */
/* =========================================================== */
section.voordelen .h2 { text-align: center; }
section.voordelen .container { display: flex; flex-direction: column; align-items: center; }
section.voordelen .cards { background: var(--my-white); padding: 2rem; border-radius: var(--border-radius);  list-style: none;  justify-content: center;  display: flex; flex-wrap: wrap; column-gap: var(--gap); row-gap: 1.4rem; width: 100%; }
section.voordelen .cards li { display: flex; align-items: flex-start; gap: 1rem; max-width: 12rem;  flex-grow: 1;}
section.voordelen .cards .icon { flex-shrink: 0; margin-top: .2rem; width: 1.6rem; height: 1.6rem; color: var(--my-light-blue); display: flex; }
section.voordelen .cards .icon svg { width: 100%; height: 100%; }
section.voordelen .cards span { line-height: var(--line-height-small); }

@media only screen and (max-width: 768px) {
    section.voordelen .h2 { max-width: 9em; margin-bottom: .75em;}
    section.voordelen .cards { grid-template-columns: 1fr; }
    section.voordelen .cards > li { max-width: unset;}
}


/* =========================================================== */
/* ======================= TEXT BLOCKS ======================= */
/* =========================================================== */
section.texts .container > ul { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 3rem 2rem;}
section.texts .container > ul:has(.icon) { text-align: center;}
section.texts .h4 { text-transform: uppercase;  color: inherit;}
section.texts .h6 { color: var(--my-light-blue); font-weight: var(--font-medium);}
section.texts .kicker + .h6 { font-size: var(--font-size-h2); color: var(--main-color);}
section.texts .kicker ~ :not(.has-head) { max-width: 32rem; margin-bottom: 1rem; }
section.texts li .icon { width: 1.5rem; height: 1.5rem; color: var(--my-light-blue); margin-bottom: .9rem; display: flex;  margin-inline: auto; }
section.texts:has(.icon) li { padding: 1rem; border: 1px solid var(--my-grey-2); border-radius: var(--border-radius);  display: flex; flex-direction: column; align-items: center;  }
section.texts:has(.icon) li p:last-of-type { margin-bottom: .9rem;}
section.texts li .icon svg { width: 100%; height: 100%; }
section.texts li .tag { display: inline-flex; margin-top: auto; padding: .25em .8em .4em; border-radius: 100px; background: var(--my-orange-10); color: var(--my-orange); font-size: .7rem;  font-weight: var(--font-medium); line-height: var(--line-height-small); letter-spacing: .04em; }
section.texts.dark li .tag { background: rgba(94, 208, 237, .14); color: var(--my-light-blue); }
section.texts .container > ul.has-head { margin-top: 2rem; }

@media only screen and (max-width: 768px) {
    section.texts .container > ul {grid-template-columns: 1fr;}

}

/* =========================================================== */
/* ==================== WERELDWIJDE IMPACT ==================== */
/* =========================================================== */
section.wereldwijde-impact .container { display: flex; flex-direction: column; }
section.wereldwijde-impact .section-head { max-width: var(--max-width-narrow); }
section.wereldwijde-impact .section-head .h2 { max-width: 16em; }
section.wereldwijde-impact .cards { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 2.5rem; }
section.wereldwijde-impact .cards li { background: var(--my-white); border-radius: var(--border-radius); padding: 2rem; display: flex; flex-direction: column; }
section.wereldwijde-impact .cards .icon { width: 2rem; height: 2rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: var(--half-border-radius); background: var(--my-light-blue); color: var(--my-white); }
section.wereldwijde-impact .cards .icon svg { width: 1.2rem; height: 1.2rem; }
section.wereldwijde-impact .cards .h3 { margin-top: 0; margin-bottom: .5rem; }
section.wereldwijde-impact .cards li p:last-child { margin-bottom: 0; }
section.wereldwijde-impact .impact-quote { margin-top: 2rem;  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; background: var(--my-blue); color: var(--my-white); border-radius: var(--border-radius); padding: 1.75rem 2rem; }
section.wereldwijde-impact .impact-quote .icon { width: 3rem; height: 3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 100vmin; background: var(--my-white); color: var(--my-light-blue); }
section.wereldwijde-impact .impact-quote .icon svg { width: 1.4rem; height: auto; }
section.wereldwijde-impact .impact-quote p { margin-bottom: 0; }
section.wereldwijde-impact .impact-quote p strong { color: var(--my-white); }
section.wereldwijde-impact.white .cards li { background: var(--my-grey-1); }
section.wereldwijde-impact.dark .cards li { color: var(--my-blue); }

@media only screen and (max-width: 768px) {
    section.wereldwijde-impact .cards { grid-template-columns: 1fr; }
    section.wereldwijde-impact .impact-quote { grid-template-columns: 1fr; gap: 1rem; }
}

/* =========================================================== */
/* ======================= TESTIMONIAL ======================= */
/* =========================================================== */
section.review figure { max-width: calc(var(--max-width-narrow) - 10rem); background: var(--my-white); border-radius: var(--border-radius); padding: 1.5rem; margin-inline: auto; }
section.review blockquote { padding-left: 2rem; }
section.review blockquote svg { position: absolute; left: .5rem; top: 0.5rem; width: 2rem; height: auto; color: var(--my-light-blue); }
section.review .author { display: grid; grid-template-columns: 4.5rem 1fr;  align-items: flex-end;  grid-gap: 1rem; margin-top: 1.5rem;   max-width: max-content; border-radius: calc(var(--border-radius) * .75); }
section.review .author img { border-radius: 50%;}
section.review .h4 {  margin-bottom: 0; color: var(--my-light-blue);}
section.review .h4 + p { margin-bottom: .5rem;}
section.review.white figure { background: var(--my-grey-1); }


/* =========================================================== */
/* ===================== TITLE AND TEXT ====================== */
/* =========================================================== */
section.text .container { display: flex; flex-direction: column;  }
section.text .container .h3 { margin-top: 0;}
section.text article.contained { max-width: 40rem;}
section.text:first-of-type .container { margin-top: 1rem;}

/* POSITIONS */
section.text.center .container {  align-items: center; }
section.text.right .container {  align-items: flex-end; }
section.text article.center { text-align: center;}
section.text article.right { text-align: right;}


/* =========================================================== */
/* ====================== VACATURE HERO ====================== */
/* =========================================================== */
section.vacature-hero .container { display: flex; flex-direction: column; align-items: flex-start; margin-top: 2rem;  max-width: calc(var(--max-width-narrow) + 5rem); margin-bottom: 0;}
section.vacature-hero .h1 { max-width: 14em; }
section.vacature-hero .description { max-width: 34em; }
section.vacature-hero .buttons:last-child {  margin-bottom: var(--margin-y);}

/* STAT BAR */
section.vacature-hero .stat-bar { --stat-color: var(--my-white); max-width: calc(var(--max-width-narrow) + 5rem); width: var(--width); margin: 2.5rem auto 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--my-grey-5); border-radius: var(--border-radius); overflow: hidden; position: relative; z-index: 2; }
section.vacature-hero .stat-bar > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15em; padding: .7rem .8rem .9rem; position: relative; }
section.vacature-hero .stat-bar > div:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: var(--my-white-30, rgba(255,255,255,.15)); }
section.vacature-hero .stat-bar dt { font-size: .55rem; text-transform: uppercase; letter-spacing: .05em; color: var(--my-grey-3); font-weight: var(--font-medium); }
section.vacature-hero .stat-bar dd { font-size: var(--font-size-body); font-weight: var(--font-bold); color: var(--stat-color); line-height: var(--line-height-small); display: flex; flex-direction: column; justify-content: center; flex-grow: 1;}
section.vacature-hero .stat-bar .orange { --stat-color: var(--my-orange); }
section.vacature-hero .stat-bar .green { --stat-color: var(--my-green); }
section.vacature-hero .stat-bar .blue { --stat-color: var(--my-light-blue); }

/* OVERLAP: stat-bar hangt half over de volgende sectie (patroon zoals image-slider) */
section.vacature-hero:has(.stat-bar) { margin-bottom: -1.75rem; }
section.vacature-hero:has(.stat-bar) + div + section .container { margin-top: calc(var(--margin-y) + 1.75rem); }

@media only screen and (max-width: 768px) {
    section.vacature-hero .stat-bar { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: 1fr 1fr; }
    section.vacature-hero:has(.stat-bar) { margin-bottom: -5rem; }
    section.vacature-hero:has(.stat-bar) + div + section .container { margin-top: calc(var(--margin-y) + 4rem); }
    section.vacature-hero .stat-bar > div:first-of-type { grid-column: -1/1; }
}


/* =========================================================== */
/* ====================== STICKY APPLY ======================= */
/* =========================================================== */
.sticky-apply { position: fixed; z-index: 20; left: 50%; bottom: 1rem; transform: translate(-50%, calc(100% + 1rem)); width: var(--width); max-width: var(--max-width-narrow); display: flex; align-items: center; gap: 1rem; padding: .6rem .6rem .6rem 1.2rem; background: var(--my-grey-5); color: var(--my-white); border-radius: 3px 3px var(--border-radius)  var(--border-radius); box-shadow: var(--blur-shadow); overflow: hidden; opacity: 0; pointer-events: none; transition: transform 400ms var(--my-ease), opacity 400ms var(--my-ease); }
.sticky-apply[data-active="true"] { transform: translate(-50%, 0); opacity: 1; pointer-events: all; }
.sticky-apply .progress { position: absolute; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; background: var(--my-orange); }
.sticky-apply p { margin: 0; font-weight: var(--font-medium); line-height: var(--line-height-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-apply .btn { margin-left: auto; flex-shrink: 0; }
.sticky-apply .mini-stats { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; }
.sticky-apply .mini-stats > div { display: flex; flex-direction: column; line-height: var(--line-height-small); }
.sticky-apply .mini-stats dt { font-size: .55rem; text-transform: uppercase; letter-spacing: .05em; color: var(--my-grey-3); font-weight: var(--font-medium); }
.sticky-apply .mini-stats dd { font-size: var(--font-size-body); font-weight: var(--font-bold); color: var(--stat-color, var(--my-white)); }
.sticky-apply .mini-stats .orange { --stat-color: var(--my-orange); }
.sticky-apply .mini-stats .green { --stat-color: var(--my-green); }
.sticky-apply .btn { flex-shrink: 0; }

@media only screen and (max-width: 768px) {
    .sticky-apply p, .sticky-apply .mini-stats { display: none; }
    .sticky-apply { justify-content: center; padding: .5rem;background: none; box-shadow: none; }
    .sticky-apply .btn { margin: 0; box-shadow: var(--drop-shadow); }
    .sticky-apply .progress { display: none; }
}


/* =========================================================== */
/* ========================= GROEIPAD ======================== */
/* =========================================================== */
section.groeipad { color: var(--my-white);  --node: 1.6rem; }
section.groeipad ol.step-list { list-style: none; display: flex; align-items: flex-start;  padding-top: 1rem;}
section.groeipad.groeipad ol.step-list > li { position: relative; flex-shrink: 0; --width: clamp(18rem, 24vw, 20rem); width: var(--width); }
section.groeipad ol.step-list [data-route="left"] { --accent: var(--route-left-color, var(--my-orange)); }
section.groeipad ol.step-list [data-route="right"] { --accent: var(--route-right-color, var(--my-green)); }
section.groeipad ol.step-list > li .top { height: var(--node); display: flex; align-items: center;  gap: 1rem; margin-bottom: 1rem; }
section.groeipad .node { width: var(--node); height: var(--node); border-radius: 50%; background: var(--accent, var(--my-white)); position: relative; z-index: 1;  display: inline-block; }
section.groeipad .node::before { content: ""; height: 2px; --line-length:  calc(var(--width) + var(--gap) - var(--node) * 2.5);  width: var(--line-length); background: var(--accent, var(--my-white)); position: absolute; right: 0; bottom: calc(var(--node) / 2); }
section.groeipad .start { --accent: var(--my-light-blue); }
section.groeipad .route-label {  font-size: .6rem; padding: .3em .9em; border-radius: .4em; background: var(--my-white); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--accent);  z-index: 2; }
section.groeipad .route-label.abs { position: absolute; left: calc(var(--node) + 1rem);}
section.groeipad .route-label.abs + .route-label { top: -1rem; transform: translateY(-50%);}
section.groeipad .body .h5 { margin-bottom: .1em; }
section.groeipad .body p { font-size: var(--font-size-body); opacity: .8; }

section.groeipad li:first-of-type .node::before { display: none; }
section.groeipad li[data-route="left"] + li[data-route="right"] .node::before { width: calc(var(--line-length) * (var(--left-len) + 1) + 4px); right: calc(var(--node) / 2 - 2px); height: 1rem; bottom: calc(var(--node) - 0px); border-radius: var(--border-radius) var(--border-radius) 0 0; background: none; border: 2px solid var(--accent); border-bottom: none;}


/* CONNECTOR / AFTAKKING — (Guus) */


/* =========================================================== */
/* ==================== TWO COLUMN LISTS ===================== */
/* =========================================================== */
section.two-lists .container { max-width: calc(var(--max-width-narrow) + 10rem);  }
section.two-lists .h2 { text-align: center; } 
section.two-lists ul.columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);  background: var(--my-white); padding: 2rem; border-radius: var(--border-radius); }
section.two-lists ul.columns > li .h3 { margin-bottom: 1rem; }
section.two-lists .prose ul { display: flex; flex-direction: column; gap: .8rem; list-style-type: none; padding-left: 0; }
section.two-lists .prose ul li { position: relative; padding-left: 1.6rem; }
section.two-lists .prose ul li::before { content: ""; position: absolute; left: 0; top: .35em; width: .9rem; height: .9rem; background: url("/img/icons/check.svg") center / contain no-repeat; }

@media only screen and (max-width: 768px) {
    section.two-lists .h2 { max-width: 9em; margin-bottom: .75em; margin-inline: auto;}
    section.two-lists ul.columns { grid-template-columns: 1fr; gap: 2.5rem; }
}


/* =========================================================== */
/* ======================== VERDELING ======================== */
/* =========================================================== */
section.verdeling .container { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: var(--gap); }
section.verdeling .text { max-width: 30rem; }
section.verdeling .prose ul { display: flex; flex-direction: column; gap: .8rem; list-style: none; padding-left: 0; }
section.verdeling .prose ul li { position: relative; padding-left: 1.6rem; }
section.verdeling .prose ul li::before { content: ""; position: absolute; left: 0; top: .35em; width: .9rem; height: .9rem; background: url("/img/icons/check.svg") center / contain no-repeat; }
section.verdeling .pie-chart { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; }
section.verdeling figure.piechart { width: 14rem; max-width: 100%; }
section.verdeling figure.piechart { margin: 0; }
section.verdeling figure.piechart .pie { transition: 750ms ease-in-out; transform: rotate(-135deg) scale(0.8); width: 100%; }
section.verdeling figure.piechart .pie circle { fill: none; stroke: var(--my-grey-2); stroke-width: 30.5; transform-origin: center; transition: 750ms ease-in-out; pointer-events: stroke; stroke-dasharray: 0 100; stroke-dashoffset: 0; }
section.verdeling figure.piechart .pie circle.active { transform: scale(1.06); }
section.verdeling figure.piechart .pie.opened { transform: rotate(-90deg); }
section.verdeling figure.piechart .pie.opened circle { transition: 250ms ease; }
section.verdeling figcaption ul { display: flex; flex-direction: column; align-items: flex-start; gap: .1em; }
section.verdeling figcaption ul li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: .8em; transition: 250ms ease; padding: .4em .7em; border-radius: var(--half-border-radius); font-weight: var(--font-medium); cursor: default; }
section.verdeling figcaption ul li::before { content: ""; height: .8em; width: .8em; border-radius: 50%; background: var(--pie-color); display: inline-block; flex-shrink: 0; transform: translateY(.05em); }
section.verdeling figcaption ul li .perc { font-weight: var(--font-bold); color: var(--my-blue); }
section.verdeling figcaption ul li .label { min-width: 0; }
section.verdeling figcaption ul li.active { background: var(--my-grey-1); }

@media only screen and (max-width: 1024px) {
    section.verdeling .container { grid-template-columns: 1fr; gap: 2.5rem;  max-width: 25rem;}
    section.verdeling .pie-chart { grid-template-columns: 1fr; }
    section.verdeling figure.piechart {  margin-inline: auto; }
}


/* =========================================================== */
/* ====================== UNCAPPED BONUS ===================== */
/* =========================================================== */
section.uncapped-bonus .container { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: var(--gap); }
section.uncapped-bonus .copy { max-width: 32rem; }
section.uncapped-bonus .copy .description { margin-bottom: 0; }

section.uncapped-bonus .earnings { margin-top: 2rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--border-radius); padding: 1.5rem; }
section.uncapped-bonus.light .earnings, section.uncapped-bonus.white .earnings { background: var(--my-white); border-color: var(--my-grey-2); }
section.uncapped-bonus .earnings-row { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 1rem; margin-bottom: 1rem; }
section.uncapped-bonus .earnings-row:last-of-type { margin-bottom: 0; }
section.uncapped-bonus .earnings-row .year { font-weight: var(--font-bold); color: var(--my-light-blue); }
section.uncapped-bonus .earnings-row .track { height: .9rem; background: rgba(255, 255, 255, 0.12); border-radius: 100vmin; overflow: hidden; }
section.uncapped-bonus.light .earnings-row .track, section.uncapped-bonus.white .earnings-row .track { background: var(--my-grey-1); }
section.uncapped-bonus .earnings-row .track .bar { display: block; height: 100%; width: 100%; border-radius: 100vmin; background: var(--my-orange); }
section.uncapped-bonus .earnings-row .amount { font-weight: var(--font-bold); text-align: right; white-space: nowrap; }
section.uncapped-bonus .earnings-row .amount small { display: block; font-weight: var(--font-regular); font-size: .85em; opacity: .75; white-space: normal; }
section.uncapped-bonus .earnings .note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: .85em; opacity: .7; }
section.uncapped-bonus.light .earnings .note, section.uncapped-bonus.white .earnings .note { border-top-color: var(--my-grey-2); }

section.uncapped-bonus .checks { margin-top: 1.75rem; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
section.uncapped-bonus .checks li { display: flex; align-items: flex-start; gap: .75rem; }
section.uncapped-bonus .checks .icon { flex-shrink: 0; margin-top: .2rem; width: .8rem; height: .8rem; color: var(--my-light-blue); display: flex; }
section.uncapped-bonus .checks .icon svg { width: 100%; height: 100%; }
section.uncapped-bonus .checks li > span:last-child { line-height: var(--line-height-small); }

section.uncapped-bonus .card { background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--border-radius); padding: 2rem; }
section.uncapped-bonus.light .card, section.uncapped-bonus.white .card { background: var(--my-blue); border-color: var(--my-grey-2); color: var(--my-white); }
section.uncapped-bonus.light .card h3, section.uncapped-bonus.white .card h3  { color: var(--my-white);}
section.uncapped-bonus .card .tag { color: var(--my-orange); text-transform: uppercase; font-weight: var(--font-medium); font-size: .85em; letter-spacing: .04em; margin-bottom: .5rem; }
section.uncapped-bonus .card .card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.75rem; }
section.uncapped-bonus .card .card-head .icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; color: var(--my-light-blue); display: flex; }
section.uncapped-bonus .card .card-head .icon svg { width: 100%; height: 100%; }
section.uncapped-bonus .card .card-head .h4 { margin-bottom: 0; }
section.uncapped-bonus .card .steps { list-style: none; display: flex; flex-direction: column; counter-reset: step; }
section.uncapped-bonus .card .steps li { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: 1rem; padding-bottom: 1.5rem; position: relative; }
section.uncapped-bonus .card .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 1.6rem; height: 1.6rem; border-radius: 100vmin; background: var(--my-orange); color: var(--my-white); font-weight: var(--font-bold); font-size: .85em; display: grid; place-items: center; z-index: 2; }
section.uncapped-bonus .card .steps li::after { content: ""; position: absolute; left: calc(.8rem - .5px); top: 1.6rem; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.18); }
section.uncapped-bonus.light .card .steps li::after, section.uncapped-bonus.white .card .steps li::after { background: var(--my-grey-2); }
section.uncapped-bonus .card .steps li:last-child { padding-bottom: 0; }
section.uncapped-bonus .card .steps li:last-child::after { display: none; }
section.uncapped-bonus .card .steps .step-title { grid-column: 2; font-weight: var(--font-bold); }
section.uncapped-bonus .card .steps .step-desc { grid-column: 2; font-size: .85em; opacity: .8; margin-top: .15rem; }
section.uncapped-bonus .card .note { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: .85em; opacity: .65; }
section.uncapped-bonus.light .card .note, section.uncapped-bonus.white .card .note { border-top-color: var(--my-grey-2); }

@media only screen and (max-width: 768px) {
    section.uncapped-bonus .container { grid-template-columns: 1fr; gap: 2.5rem; }
    section.uncapped-bonus .card { order: -1; }
    section.uncapped-bonus .earnings-row { grid-template-columns: 3.5rem 1fr auto; }
}

/* =========================================================== */
/* ========================= TIMELINE ======================== */
/* =========================================================== */
section.timeline .container {  background: var(--my-white); padding: 2rem; border-radius: var(--border-radius);  }
section.timeline .h2 { max-width: 18em;}
section.timeline ol.entries { margin-top: 2.5rem; display: flex; flex-direction: column; list-style: none; }
section.timeline ol.entries li { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; padding-bottom: 2rem; position: relative; }
section.timeline ol.entries li::before { content: ""; position: absolute; left: 4rem; top: .5rem; bottom: 0; width: 1px; background: var(--my-grey-2); }
section.timeline ol.entries li::after { content: ""; position: absolute; left: calc(4rem - .3rem); top: .35rem; width: .65rem; height: .65rem; border-radius: 100vmin; background: var(--my-orange); }
section.timeline ol.entries li:last-of-type { padding-bottom: 0; }
section.timeline ol.entries .time { font-weight: var(--font-bold); color: var(--my-blue); }

@media only screen and (max-width: 600px) {
    section.timeline ol.entries li { grid-template-columns: 1fr; gap: .3rem; }
    section.timeline ol.entries li::before, section.timeline ol.entries li::after { display: none; }
    section.timeline ol.entries .body { padding-left: 0; }
}


/* =========================================================== */
/* ========================== STEPS ========================== */
/* =========================================================== */
section.steps .slider  { padding-inline: var(--gutter-side); }
section.steps ol.step-list { list-style: none; display: grid; grid-auto-flow: column;  max-width: var(--max-width); margin-inline: auto; }
section.steps ol.step-list li { width: clamp(17rem, 24vw, 20rem); padding-right: 2rem; scroll-snap-align: center;  }
section.steps ol.step-list .number { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-bottom: 1rem; border-radius: 100vmin; background: var(--my-blue); color: var(--my-white); font-weight: var(--font-bold);  }
section.steps ol.step-list .number span { position: relative; top: -.1em;}
section.steps ol.step-list .h4 { margin-bottom: .3em; }
section.steps.dark ol.step-list .number { background: var(--my-white); color: var(--my-blue);}

/* HAS-CONTROLS SLIDER */
section.has-controls .container {  margin-bottom: 0; }
section.has-controls .has-slider { position: relative; width: 100%; min-width: 0; margin-block: 2rem var(--margin-y); --own-delay: 25ms; }
section.has-controls .slider { width: 100%; min-width: 0; overflow: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block: 3rem; margin-block: -3rem }
section.has-controls .ctrl-btns { position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; width: var(--width); max-width: calc(var(--max-width-ultra-wide) + 2rem); display: flex; align-items: center; justify-content: space-between; transform: translateY(-50%); pointer-events: none; z-index: 2; transition: opacity 500ms var(--my-ease) 500ms; }
section.has-controls .ctrl-btns button { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; color: var(--my-white); background: var(--my-light-blue); border-radius: 50%; pointer-events: all; opacity: 1; transition: color 333ms var(--my-ease), background 333ms var(--my-ease), opacity 333ms var(--my-ease); }
section.has-controls .ctrl-btns button svg { width: .8rem; height: .8rem; }
section.has-controls .ctrl-btns button:hover { background: var(--my-orange); }
section.has-controls .ctrl-btns button:nth-of-type(1) { transform: scaleX(-1); }
section.has-controls .slider:has(.activate) ~ .ctrl-btns { opacity: 0; }
section.has-controls .slider[data-has-scroll=false] ~ .ctrl-btns { opacity: 0; }
section.has-controls .slider[data-right=true] ~ .ctrl-btns button:nth-of-type(2),
section.has-controls .slider[data-left=true] ~ .ctrl-btns button:nth-of-type(1) { opacity: 0; }
section.has-controls .ctrl-btns { position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; width: var(--width); max-width: calc(var(--max-width-ultra-wide) + 2rem); display: flex; align-items: center; justify-content: space-between; transform: translateY(-50%); pointer-events: none; z-index: 2; transition: opacity 500ms var(--my-ease) 500ms; }

body.touch section.has-controls .ctrl-btns { display: none; }

body.loading section.has-controls .ctrl-btns, 
body.loading section.has-controls .ctrl-btns button { transition: 0s; }

/* =========================================================== */
/* ====================== CONTACT FORM ======================= */
/* =========================================================== */
section.contact-form .container { max-width: 30rem; }
section.contact-form:first-of-type .container { margin-top: 2rem }
section.contact-form form { margin-top: 1rem; }
section#solliciteer .container { padding: 1rem; background: var(--my-white); border-radius: var(--border-radius); }
section#solliciteer .container form.custom { --form-input-background-color: var(--my-grey-1);}


/* =========================================================== */
/* =================== TEXT, IMAGE & FORM ==================== */
/* =========================================================== */
section.text-image-form .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem var(--gap); align-items: start; }
section.text-image-form:first-of-type .container { margin-top: 2rem; }
section.text-image-form form { margin-top: calc(var(--font-size-body) * 1.73); }
section.text-image-form article { max-width: 30rem; }
section.text-image-form article figure { margin-top: 2rem;  max-width: 25rem; }
section.text-image-form article .media { border-radius: var(--border-radius);  overflow: clip;}

@media only screen and (max-width: 950px) {
    section.text-image-form .container { grid-template-columns: 1fr; }
    section.text-image-form article { max-width: unset; }
}


/* =========================================================== */
/* ======================= TEXT & MAP ======================== */
/* =========================================================== */
section.text-map figure { border-radius: var(--border-radius); overflow: hidden; }
section.text-map figure iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; }


/* =========================================================== */
/* ======================= PERSON CTA ======================== */
/* =========================================================== */
section.person-cta .container { display: grid; grid-template-columns: auto 1fr; align-items: flex-start; gap: var(--gap);  max-width: var(--max-width-narrow); }
section.person-cta .container .h2 { max-width: 9em;}
section.person-cta .person { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 12rem; }
section.person-cta .person picture { border-radius: var(--border-radius); overflow: hidden; }
section.person-cta .person .h4 { margin-bottom: 0; }
section.person-cta .content { max-width: 30rem; }

@media only screen and (max-width: 768px) {
    section.person-cta .container { grid-template-columns: 1fr; gap: 1.5rem;}
    section.person-cta .person picture {  max-width: 10rem; }
}



/* =========================================================== */
/* ========================== TEAM =========================== */
/* =========================================================== */
section.team .h2 { color: inherit; }
section.team .h6 { color: inherit; font-weight: var(--font-medium);  margin-bottom: .1em;}
section.team .container > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-gap: 1rem; }
section.team .container > ul > li { display: flex; flex-direction: column-reverse;}
section.team .container > ul > li img { border-radius: var(--border-radius) var(--border-radius) 0 0; }
section.team .container > ul > li div {  background: var(--my-white); color: var(--my-black); padding: .75rem; border-radius: 0 0 var(--border-radius) var(--border-radius);  transform: translateY(-1rem); z-index: 2; }
section.team .container > ul > li p { color: var(--my-light-blue);  font-weight: var(--font-medium);}
section.team .container > ul > li ul { display: flex; justify-content: space-between; font-size: .7rem;  margin-top: 1rem; }
section.team .container > ul > li ul a { text-decoration: underline; transition: color 250ms;}
section.team .container > ul > li ul a:hover { color: var(--my-light-blue);}

section.team .container > ul.activate-children > * { transition: transform 500ms, opacity 500ms; transition-delay: calc(var(--cascade, 0) * var(--own-delay, 50ms));  will-change: transform, opacity;;}

/* =========================================================== */
/* ====================== ALL VACATURES ====================== */
/* =========================================================== */
section.vacatures .container { margin-top: 2rem; display: grid; grid-template-columns: .5fr 1fr; grid-gap: 2rem var(--gap); align-items: flex-start; }
section.vacatures article { max-width: 25rem;}
section.vacatures .referral { margin-top: 2rem;  padding: 1rem; background: var(--my-orange-10); border-radius: .5rem; max-width: 18rem;}
section.vacatures .container > .referral { max-width: 22rem; display: none;}
section.vacatures .referral .btn { margin-top: 1em;}
section.vacatures ul.list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
section.vacatures ul.list li#open-sollicitatie { order: 99;}


/* --------------- VACATUREKAART --------------- */
.vacaturecard { --stat-color: var(--my-white); list-style: none; position: relative; display: flex; flex-direction: column;  background: var(--my-white); border-radius: var(--border-radius); background: var(--my-grey-5); }
/* stretched-link: de <a> legt een klikbare laag over de hele kaart */
.vacaturecard .top a::after { content: ""; position: absolute; inset: 0;  z-index: 2; }
.vacaturecard .top { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.4rem 1.6rem; flex-grow: 1; }
.vacaturecard .h5 { margin-bottom: 0; }
.vacaturecard .h5 a { color: var(--my-white); }
.vacaturecard .intro { color: var(--my-white); font-size: var(--font-size-body); margin-bottom: 0; }
.vacaturecard .btn { max-width: max-content; margin: .75rem;  margin-left: auto; display: block; }
.vacaturecard:hover .btn svg { transform: translateX(.25em); }


/* Donkere stat-strip (zoals de stat-bar op de detailpagina) */
.vacaturecard .stats { background: var(--my-blue); border-radius: var(--border-radius);}
.vacaturecard .stat-bar { display: grid; grid-template-columns: 1fr 1fr;  }
.vacaturecard .stat-bar > div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1em; padding: .7rem .7rem; position: relative; }
.vacaturecard .stat-bar > div:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: var(--my-white-30, rgba(255,255,255,.15)); }
.vacaturecard .stat-bar dt { font-size: .5rem; text-transform: uppercase; letter-spacing: .05em; color: var(--my-grey-3); font-weight: var(--font-medium); }
.vacaturecard .stat-bar dd { font-size: var(--font-size-body); font-weight: var(--font-bold); color: var(--stat-color); line-height: var(--line-height-small); }

@media only screen and (min-width: 1025px) {
    section.vacatures .container > .referral { display: none;}
    section.vacatures article {  position: sticky; top: 5rem; }
}

@media only screen and (max-width: 1024px) {
    section.vacatures .container { grid-template-columns: 1fr; max-width: 35rem;}
    section.vacatures article .referral { display: none; }
    section.vacatures .container > .referral {  display: block;}
    section.vacatures ul.list { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 450px) {
    section.vacatures .vacaturecard .btn { width: var(--width); max-width: unset; }
}


/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose img,  .prose iframe { width: 100%; } 
.prose ul, .prose ul ul ul { list-style: disc;}
.prose ul ul,.prose ul ul ul ul { list-style: circle; }
.prose :is(ol,ul)  { padding-left: 1em;}
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--main-color);}
.prose > * strong { font-weight: var(--font-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn) { font-weight: var(--font-medium); color: var(--my-blue); }
.prose code { font-family: monospace; background: #ddd; padding: .2rem; }
.prose :is(h1,h2,h3,h4) + :is(h1,h2,h3,h4) { margin-top: .2em;}
.prose p + ul { margin-top: 0.5em;}


/* =========================================================== */
/* ========================== FORMS ========================== */
/* =========================================================== */
form.custom {
    /* Layout */
    --form-columns: 2;
    --form-gap: 1em;

    /* Inputs */
    --form-main-color: var(--my-black);
    --form-input-background-color: var(--my-white);
    --form-padding-x: .6em;
    --form-padding-y: .75em;
    --form-padding: var(--form-padding-y) var(--form-padding-x);

    /* Borders */
    --form-border-color: transparent;
    --form-border-width: 1px;
    --form-border-radius: var(--btn-border-radius);

    /* Labels */
    --form-label-color: var(--main-color);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: var(--background-color);
    --form-label-asterisk-color: var(--my-orange);
    --form-label-transform-distance: 100%;

    /* Checkboxes */
    --form-check-border-radius: .2em;

    /* States */
    --form-color-focus: var(--my-blue);
    --form-color-error: var(--my-orange);

    /* Transition */
    --form-transition: 250ms ease;
}
/* LAYOUT */
form.custom { position: relative; max-width: 50rem; margin: 0 auto; }
form.custom fieldset { display: grid; grid-template-columns: repeat(var(--form-columns), 1fr); grid-gap: var(--form-gap); }
form.custom fieldset > div { position: relative; }

/* INPUTS */
form.custom :is(textarea, input, select) { padding: var(--form-padding); font-family: var(--primary-font); font-size: var(--font-size-body); color: var(--form-main-color); width: 100%; transition: border var(--form-transition), padding var(--form-transition); border: var(--form-border-width) solid var(--form-border-color); background: var(--form-input-background-color); border-radius: var(--form-border-radius); }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom .normal input { color: var(--main-color); }
form.custom div.double, form.custom small, form.custom small ~ * { grid-column: -1/1; }

/* TEXTAREA EXTRA'S */
form.custom .normal textarea { min-width: 100%; max-width: 100%; resize: none; border: var(--form-border-width) solid var(--form-border-color); }
form.custom .normal textarea:focus-visible { border: var(--form-border-width) solid var(--form-color-focus); }

/* DIVIDER */
form.custom .divider:not(:first-of-type) { margin-top: 1.5em; }
form.custom .divider h2 { font-size: var(--font-size-h5);  margin-bottom: 0;}

/* LABEL */
form.custom .normal label { position: absolute; top: calc(var(--form-padding-y) - .1em); left: var(--form-padding-x); opacity: .85; pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color); border-radius: var(--form-label-border-radius); }
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))) + label  { transform: translate(calc(var(--form-padding-x) * -.5), calc(var(--form-label-transform-distance) * -1)) scale(0.7); padding: 0 .2em 0 0.5em; opacity: 1; background: var(--form-label-background-color); max-width: unset; }
form.custom .select[data-active=true] label { transform: translate(calc(var(--form-padding-x) * -.5), calc(var(--form-label-transform-distance) * -.75)) scale(0.7); padding: 0 .2em 0 0.5em; opacity: 1; background: var(--form-label-background-color); max-width: unset; }
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))):not([required]) + label, form.custom .select[data-active=true] select:not([required]) + label { padding: 0 .5em; }

/* ASTERISK */
form.custom .normal :is(textarea, input, select)[required] + label::after { content: "*"; display: inline-block; margin-left: 0.15em; color: var(--form-label-asterisk-color); transition: var(--form-transition); }
form.custom .normal :is(:is(input, textarea):is(:focus, :not(:placeholder-shown)), select[data-active=true]) + label:after { opacity: 0; }

/* EMAIL VALIDATION */
form.custom input[type="email"]:not(:focus, :placeholder-shown):invalid + label::after { content: "Ongeldig"; display: inline-block; margin-left: 0.5em; padding: 0 0.5em; color: var(--form-color-error); opacity: 1; }

/* SELECTS */
form.custom .select { position: relative; display: flex; align-items: center; min-height: 2.333em; background: var(--form-input-background-color); border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); }
form.custom .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: transparent; border: none; cursor: pointer; }
form.custom .select span { position: absolute; top: calc(var(--form-padding-y) / 2); left: var(--form-padding-x); pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color); font-weight: var(--font-medium); opacity: 0; }
form.custom .select label { top: calc(var(--form-padding-y) / 2.5); }
form.custom .select[data-active=true] span { opacity: 1; }
form.custom .select::before, form.custom .select::after { content: ""; height: 2px; top: 45%; width: .4em; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.18em); background: var(--form-main-color); right: calc(var(--form-padding-x) + .4em); border-radius: 100vmin; transition: background var(--form-transition); }
form.custom .select::after { --r: -45deg; }

/* MULTICHOICE / SINGLE CHOICE */
form.custom .field { flex-direction: column; }
form.custom .field p { margin-bottom: 0.5em; color: var(--form-label-color); }
form.custom .field ul { display: flex; flex-wrap: wrap; gap: 1em; }
form.custom .field ul li { position: relative; display: flex; color: var(--form-label-color); }
form.custom .field ul input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
form.custom .field ul input:focus { border: none; outline: none; }
form.custom .field ul input:focus-visible + label::before { outline: 3px solid var(--form-color-focus); }
form.custom .field ul label:hover::before { background: var(--form-color-focus); }
form.custom .field ul label { padding-left: 1.5em; }
form.custom .field ul label::before, form.custom .field ul label::after { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 1em; border: 1px solid var(--form-border-color); border-radius: var(--form-check-border-radius); transition: background 250ms; }
form.custom .field ul label::before { background: var(--form-input-background-color); }
form.custom .field ul label::after { background: url("/img/icons/check.svg") center center / contain no-repeat; left: 0px; background-size: 60%; transform-origin: bottom; transition: transform var(--form-transition); transform: scale(0); border: none; }
form.custom .field ul input:checked ~ label::after { transform: none; }
form.custom .field ul input:checked ~ label::before { background: var(--form-color-focus); }

/* FILE UPLOAD */
form.custom .file { grid-column: -1/1; display: flex; flex-direction: column; }
form.custom .file > p { margin-bottom: .5em; color: var(--form-label-color); }
form.custom .file > p span { color: var(--form-label-asterisk-color); }
form.custom .file > div { position: relative; }
form.custom .file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
form.custom .file .placeholder { display: flex; align-items: center; justify-content: center; gap: .5em; text-align: center; min-height: 4rem; padding: 1rem; border: 1px dashed var(--my-grey-3); border-radius: var(--form-border-radius); background: var(--form-input-background-color); transition: var(--form-transition); pointer-events: none; }
form.custom .file > div:hover .placeholder { border-color: var(--form-color-focus); }
form.custom .file > div[data-state="dragging"] .placeholder { border-color: var(--form-color-focus); background: var(--my-grey-2); }
form.custom .file > div[data-state="filled"] .placeholder { border-style: solid; border-color: var(--my-blue); color: var(--my-blue); font-weight: var(--font-medium); }

form.custom .btn { accent-color: var(--my-orange); grid-column: -1/1; justify-content: center; }

@media only screen and (max-width: 768px) {
    form.custom { --form-columns: 1; }
}

form.custom small { font-size: .6rem; opacity: 1; text-align: center; opacity: .3; transform-origin: top left; margin-top: -0.5rem; }
form.custom small a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }

/* --------------- 404 PAGE --------------- */
section.not-found { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
section.not-found .container { display: flex; flex-direction: column; align-items: center;  text-align: center; max-width: 28rem; margin-bottom: 15vh; }


/* --------------- COOKIE BANNER COLORS --------------- */
section.odf__cookies.odf__cookies { 
    --odf_main_color: black;
    --odf_background_color: white; 
    --odf_highlight_color: maroon; 
}


/* --------------- MEDIA QUERIES --------------- */
/* MIN */


/* MAX */
@media only screen and (max-width: 1150px) {
    :root {
        --gutter-top: 1rem;
        --gutter-side: 1rem;


        --font-size-h5: 1.2rem;
        --font-size-h6: 1.1rem; 
        --font-size-body: 1rem; 
    }
    section.image-slider.fullscreen { margin-top: 3rem; }
}

@media only screen and (max-width: 350px) {
    html { font-size: 4.575vw;}
}

/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion) { }
  

/* --------------- ANIMATIONS --------------- */