* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(18px, 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; letter-spacing: -.5%;}
a {text-decoration: none;  color: inherit; }
p a { text-decoration: underline; text-underline-offset: .15rem;}
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.33em; }
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: "DM Sans", system-ui, sans-serif;
    --header-font: "Crimson Text", system-ui, sans-serif;
    --mono-font: "Roboto Mono", monospace;

    /* Font weights */
    --font-regular: 400; 
    --font-medium: 500; 
    --font-semibold: 600; 
    --font-bold: 700; 

    /* Font sizes */
    --font-size-h1-extra-huge: 8rem;
    --font-size-h1-huge: 7rem;
    --font-size-h1: 6rem;
    --font-size-h2-plus: 4rem;
    --font-size-h2: 3rem;
    --font-size-h3: 2.7rem;
    --font-size-h4: 2rem;
    --font-size-h5-plus: 1.4rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1rem; 
    --font-size-body: .75rem; 
    --font-size-small: .7rem; 
    --font-size-tiny: .6rem; 


    /* Colors */  
    --main-color: var(--my-green);
    --background-color: var(--my-beige);

    --my-white: #F6F4F2; 
    --my-white-80: rgba(246, 244, 242, .8); 
    --my-white-60: rgba(246, 244, 242, .6); 
    --my-white-30: rgba(246, 244, 242, .3); 
    --my-white-10: rgba(246, 244, 242, .1); 
    --my-beige: #EDE6DC; 
    --my-beige-30: rgba(237, 230, 220, .3); 
    --my-green: #212B1E;
    --my-green-80: rgba(33, 43, 30, .8);
    --my-green-50: rgba(33, 43, 30, .5);
    --my-green-30: rgba(33, 43, 30, .3);
    --my-green-10: rgba(33, 43, 30, .1);
    --my-gold: #CBA135;
    --my-light-green: #3F4F3A; 
    --my-grey-30: rgba(168, 168, 168, .3);

    --my-gradient-white: linear-gradient(to top, transparent, var(--my-green));
    --my-gradient-green: linear-gradient(to top, transparent, var(--my-white));

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

    /* Line heights */
    --line-height-tiny: .9;
    --line-height-small: 1;
    --line-height-regular: 1.4;
    --line-height-large: 1.6; 

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

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 5rem; 
    --margin-y-large: calc(var(--margin-y) + 3rem);
    --padding-top: 4rem;
    --btn-padding: 0.6em 1.25em;

    /* 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: 1.2rem; 
    --border-radius-large: 1.5rem; 
    --border-radius-small: 1rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 1.5em; 

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

/* =========================================================== */
/* ======================== HEADINGS ========================= */
/* =========================================================== */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-medium); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em;  letter-spacing: -3%;}
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 { color: var(--my-gold); font-family: var(--mono-font); font-size: var(--font-size-tiny); margin-bottom: 2rem;}
.kicker:last-of-type { margin-bottom: 2rem; }
:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6) em { color: var(--my-gold); font-style: normal;}

/* =========================================================== */
/* ========================= GENERAL ========================= */
/* =========================================================== */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
section:first-of-type { padding-top: var(--padding-top); margin-top: 0; }
section:last-of-type .container { margin-bottom: var(--margin-y-large);}
header, main, footer { min-width: 0; max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
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; }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.ultrawide .container { width: 100%; max-width: var(--max-width-ultra-wide); }
section.narrow, .container.narrow { max-width: var(--max-width-narrow); }

section.dark { --main-color: var(--my-white); --background-color: var(--my-green); color: var(--main-color); }
section.white { --main-color: var(--my-green); --background-color: var(--my-white); color: var(--main-color); }
section.dark + section.dark .container,
section.white + section.white .container,
section.light + section.light .container { margin-top: 2rem;}

/* --------------- 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.2rem; --icon-size: 1.8rem;  }
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; justify-content: flex-start; align-items: center; }
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); }


/* --------------- BUTTONS --------------- */
.buttons { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem;}
button { touch-action: manipulation;  text-align: center; }
button,label { cursor: pointer;  user-select: none; }
.btn { background: var(--main-color); color: var(--background-color); padding: var(--btn-padding); border-radius: var(--btn-border-radius); text-align: center;   border: 1px solid transparent; display: inline-flex;  align-items: center;  position: relative;  transition: 250ms var(--my-ease); transition-property: background, color; text-decoration: none; user-select: none;}
.btn svg { height: .7rem; width: auto; margin-top: .1em; }
.btn.has-icon { gap: .6em;  padding-left: 1.1em; }

.btn.white { background: var(--my-white); color: var(--my-green); }
.btn.white-outlined { color: var(--my-white); background: none;  }
.btn.white-outlined::after { content: ""; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: var(--btn-border-radius); border: 1px solid transparent; background: linear-gradient(150deg, var(--my-white-10), var(--my-white-80)) border-box; mask:  linear-gradient(#000 0 0) padding-box,  linear-gradient(#000 0 0);mask-composite: exclude; }
.btn.beige { background: var(--my-beige); color: var(--my-green); }
.btn.green { background: var(--my-green); color: var(--my-white);}
.btn.green-outlined { color: var(--my-green); background: none;  }
.btn.green-outlined::after { content: ""; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: var(--btn-border-radius); border: 1px solid transparent; background: linear-gradient(150deg, var(--my-green-10), var(--my-green-80)) border-box; mask:  linear-gradient(#000 0 0) padding-box,  linear-gradient(#000 0 0);mask-composite: exclude; }
.btn.gold { background: var(--my-gold); color: var(--my-white); }

.btn:hover { background: var(--my-light-green); color: var(--my-white);}

/* --------------- LINK --------------- */
.link { display: inline-flex; align-items: center;   transition: color 250ms var(--my-ease); position: relative; font-size: var(--font-size-small); font-weight: var(--font-medium); }
.link::before {  bottom: 0; width: 100%; height: 1px; content: ""; left: 0; background: currentColor;  position: absolute; }
.prose .link.link { text-decoration: none; }

/* --------------- CHECKS LIST --------------- */
.has-checks-ul.has-checks-ul ul { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: .4rem; margin-top: 1.5rem; font-weight: var(--font-medium); font-size: var(--font-size-small);}
.has-checks-ul ul > li { color: var(--my-gold); padding-left: 1.4em; position: relative; }
.has-checks-ul ul > li::before { content: "✓"; position: absolute; left: 0; }

/* --------------- TAG --------------- */
.tag { display: inline-flex; align-items: center;  background: var(--my-white); color: var(--my-green);  padding: var(--btn-padding); border-radius: 100vmin;  font-size: var(--font-size-small);  transition: 250ms var(--my-ease); transition-property: background, color;  gap: .6em; }
.tag > svg { width: .9em; height: .9em;  transition: transform 250ms var(--my-ease); }
.tag:hover { background: var(--my-gold); }
.tag:hover > svg { transform: translateX(.15em); }


/* --------------- ARROW --------------- */
.arrow {display: flex; align-items: center; justify-content: center; background: var(--my-white); color: var(--my-green); width: 2.1rem; height: 2.1rem;  border-radius: 50%;   transition: 250ms var(--my-ease); transition-property: background, color, opacity; border: 1px solid transparent; }
.arrow.outlined { background: none; border: 1px solid currentColor; color: currentColor;}
.arrow > svg { width: 1.1rem; height: 1.1rem;  transition: transform 250ms var(--my-ease);}
.arrow:hover { background: var(--my-gold); }
.arrow:hover > svg { transform: translateX(.05rem);}


/* --------------- BREADCRUMBS --------------- */
nav#breadcrumbs {  color: var(--my-gold); font-family: var(--mono-font); font-size: var(--font-size-tiny); margin-bottom: 2.5rem; }
nav#breadcrumbs ol { list-style: none; display: flex; align-items: flex-start; }
nav#breadcrumbs ol li { display: flex; align-items: flex-start; }
nav#breadcrumbs ol li a { max-width: 25em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
nav#breadcrumbs ol span { display: block; margin: 0 .5em; }
nav#breadcrumbs ol a:hover { text-decoration: underline; }

@media only screen and (max-width: 768px) {
    nav#breadcrumbs { margin-bottom: 1.5rem; }
}

/* =========================================================== */
/* ======================= PAGINATION ======================== */
/* =========================================================== */
ul.pagination { display: flex; align-items: center; justify-content: center; gap: .3rem .3rem; max-width: max-content; width: 100%; margin: 3.5rem auto 0; font-size: var(--font-size-small); font-weight: var(--font-medium); }
ul.pagination .page-item { display: flex; }
ul.pagination .page-link { display: inline-flex; align-items: center; justify-content: center;  padding: 0.2rem .5rem; border: 1px solid transparent; border-radius: .5rem; white-space: nowrap; transition: 250ms var(--my-ease); transition-property: background, color, border-color; }
ul.pagination .page-link:hover { background: var(--my-gold); color: var(--my-green); }

/* Huidige pagina: omgekeerd, zoals een gevulde .btn */
ul.pagination .page-item.active .page-link { background: var(--main-color); color: var(--background-color); pointer-events: none; }

/* Geen vorige of volgende pagina */
ul.pagination .page-item.disabled { opacity: .3; pointer-events: none; }

ul.pagination li.dots { display: flex; align-items: center; padding-inline: .25em; opacity: .5; }

/* Vorige en volgende staan aan de buitenrand, de cijfers blijven ertussen gecentreerd.
   Zonder vorige of volgende schuift een lege plaatshouder met dezelfde marge mee. */
ul.pagination-terse li.empty { width: 0; }
ul.pagination-terse .prev { margin-right: auto; }
ul.pagination-terse .next { margin-left: auto; }
ul.pagination-terse .page-item:is(.prev,.next) .page-link { border-color: currentColor; }
ul.pagination-terse .page-item:is(.prev,.next) .page-link:hover { border-color: transparent; }

@media only screen and (max-width: 768px) {
    ul.pagination { gap: .2rem .3rem; margin-top: 2.5rem; font-size: var(--font-size-tiny); }
    ul.pagination .page-link { min-width: 1.8rem; padding: .6em .9em; }
}


/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { position: fixed; z-index: 10; left: 0; right: 0; margin: 0 auto;  color: var(--my-white); display: flex; pointer-events: none;}
header[data-theme=light] { color: var(--my-green); }
header .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;  margin: 1rem auto;  font-size: var(--font-size-small); font-weight: var(--font-medium); grid-gap: 1rem; width: calc(100% - 3rem);}
header .container > * { pointer-events: all;}
header img, header svg { width: 100%; height: auto; transition: color 250ms var(--my-ease); }
header .right { margin-left: auto;  align-items: center; display: flex; gap: 1rem;}
header .container .logo {  max-width: var(--logo-width);  display: flex; }
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; background: var(--my-white);  border-radius: 100vmin; position: relative;   user-select: none;}
nav#desktop > ul { position: relative; display: flex; justify-content: flex-end; align-items: center; color: var(--my-green);  padding: 0.2rem .4rem; }
nav#desktop > ul > li { display: flex; }
nav#desktop > ul > li > a { display: flex;  padding: 0.3rem 1.4rem 0.3rem .6rem; position: relative; --plus-icon-inset: .55rem; --plus-icon-width: .4rem; }

/* Dynamic sliding hover line */
nav#desktop > ul::before { position: absolute; bottom: .4rem; left: 50%; pointer-events: none; width: var(--w, 0px); height: 1.5px; background: var(--my-green); content: ""; transition: transform 333ms var(--my-ease), width 333ms var(--my-ease); transform: translateX(calc(-50% + var(--l, 0px))); border-radius: 100vmin; }
body.loading nav#desktop > ul::before { transition: 0s; }


header li.plus div.sub { position: absolute; left: 0; bottom: -.5rem; transform: translateY(100%); width: 100%; opacity: 0; pointer-events: none; background: var(--my-white); border-radius: 1rem;  transition: opacity 333ms var(--my-ease) 200ms; height: var(--highest); }
header li.plus div.sub::before { content: ""; top: -.7rem; height: 1.7rem; width: 100%; background: none; position: absolute; left: 0; z-index: -1;  opacity: 0; }
header li.plus > a { display: flex; align-items: center;  display: block;  }
header li.plus > a::before, header li.plus > a::after { content: ""; width: var(--plus-icon-width); height: 1.5px; background: currentColor; position: absolute; right: var(--plus-icon-inset);  transition: transform 250ms var(--my-ease);}
header li.plus > a::before { transform: rotate(var(--r, -90deg));}

header li.plus div.sub .inner { padding: 1.15rem 1.5rem 2rem 1.5rem;   display: flex; flex-direction: column;  height: 100%;}
header li.plus div.sub .inner .prose { font-size: var(--font-size-small); opacity: .5; margin-top: .5rem;  }
header li.plus div.sub .inner .prose a { text-underline-offset: .2em; font-weight: var(--font-regular);}
header li.plus div.sub .inner .buttons { margin-top: .75rem; }
header li.plus div.sub .inner > ul { margin-bottom: auto;  padding-bottom: 2rem;  transform: translate(var(--own-transform-x, 0%), var(--own-transform-y, -0.5rem)); transition: transform 333ms var(--my-ease); display: flex; flex-direction: column; align-items: flex-start; }
header li.plus div.sub .inner > ul li a { font-size: var(--font-size-h4); font-family: var(--header-font); letter-spacing: -4%; color: var(--my-green); transition: 300ms var(--my-ease);}
header li.plus div.sub .inner > ul:not(:has(li.active)) li a { color: var(--my-green);  }
header li.plus div.sub .inner > ul:not(:has(li:hover)) li.active a { color: var(--my-green);  }
header li.plus div.sub .inner > ul:has(li:hover:not(.active)) li:not(:hover) a {  color: var(--my-green-50);}
header li.plus div.sub .inner > ul:has(li.active) li:not(.active,:hover) a {  color: var(--my-green-50);}
header li.plus div.sub .inner > ul li:hover a { color: var(--my-green); }

header li.plus:hover div.sub  { opacity: 1; pointer-events: all; transition: opacity 333ms var(--my-ease) 0ms; }
header li.plus[data-side=left] { --own-transform-x: .75rem;  }
header li.plus[data-side=right] { --own-transform-x: -.75rem;  }
header nav#desktop:has(li.plus:hover) li.plus div.sub .inner > ul { --own-transform-y: 0rem; }
header nav#desktop ul:not(:has(li.plus:hover)) div.sub { transition: opacity 333ms var(--my-ease) 0ms;}

nav#desktop li.plus:hover { --r: 0deg;  z-index: 2; }
nav#desktop li.plus:hover div.sub { display: block; }

nav.lang-switch { transition: color 250ms var(--my-ease);  }
nav.lang-switch li:first-of-type::after { content: "/"; display: inline-block; margin-inline: .2em; }
nav.lang-switch > ul { display: flex; align-items: center;  }
nav.lang-switch > ul > li { display: flex; }
nav.lang-switch > ul > li.active > a { text-decoration: underline; text-underline-offset: .2em;}

/* MOBILE NAV */
nav#mobile { position: fixed; top: 3.4rem; transform: translateX(calc(100% + 1rem)); overflow: auto; transition: transform 500ms var(--my-ease); height: calc(100vh - 2rem - 2rem); height: calc(100dvh - 2rem - 2rem); margin-inline: auto; left: 0; right: 0;  width: var(--width); display: flex; flex-direction: column; align-items: center; background: var(--my-white);  border-radius: 1rem; color: var(--my-green); display: none;  } 
nav#mobile > ul { display: flex; flex-direction: column;  width: 100%;  padding: 1.15rem 1.5rem 0rem 1.5rem;  }
nav#mobile > ul > li { display: flex; flex-direction: column; gap: .25rem; padding-block: .66rem;  border-bottom: 1px solid var(--my-green-10);}
nav#mobile > ul > li:first-of-type { padding-top: 0; }
nav#mobile > ul > li > a { font-weight: var(--font-semibold); }
nav#mobile > ul > li > ul {  font-size: var(--font-size-h5-plus); font-family: var(--header-font); letter-spacing: -4%;}
nav#mobile > ul > li:last-of-type { border: none; padding-block: 1rem; }

nav#mobile .bottom { background: var(--my-white); padding-top: 1rem;   position: sticky; bottom: 0; padding: 1rem 0.4rem 1.2rem 0.4rem;  transform: translateY(calc(100% + 2rem)); transition: transform 500ms var(--my-ease) 500ms; align-self: flex-end; margin-inline: .8rem;  width: calc(100% - 1.5rem);}
nav#mobile .bottom::before { content: ""; position: absolute; top: 0; left: -.25rem; width: calc(100% + .5rem); height: calc(100% - .6rem); background: var(--my-beige); border-radius: .66rem;  z-index: -1; }
nav#mobile .bottom .prose {  margin-top: .5rem;  font-size: var(--font-size-small);  opacity: .5;}
nav#mobile .bottom .buttons { margin-top: .7rem;}

 
/* Burger */
button.burger { width: 1.9rem; height: 1.9rem; background: var(--my-white);  transition: transform 500ms var(--my-ease);  z-index: 99;  display: none; align-items: center; justify-content: center; border-radius: .66rem; }
button.burger > span { width: .9rem; height: 2px; position: absolute; background: var(--main-color); transition: transform 500ms var(--my-ease);  border-radius: .5rem; }
button.burger > span:nth-of-type(1) { transform: translateY(-.3rem); }
button.burger > span:nth-of-type(2) { transform: translateX(5%) scaleX(.9); }
button.burger > span:nth-of-type(3) { transform: translateX(10%) scaleX(.8) translateY(.3rem); }

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


@media only screen and (max-width: 1024px) and (min-width: 769px) {
    header .container { grid-template-columns: 1fr auto auto;}
    header .right a.btn { position: fixed; left: 0; right: 0; max-width: max-content; width: 100%; bottom: 1rem; margin: 0 auto;  }
}

@media only screen and (max-width: 768px) {
    nav#mobile { display: flex; }
    button.burger { display: flex; }
    nav#desktop  { display: none; }
    header .container { grid-template-columns: 1fr auto;  width: var(--width);}
    header .right {  grid-gap: .66rem; }
    header .right .btn { font-size: var(--font-size-tiny);}
    header .right .lang-switch { display: none; }
}



/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { background: var(--my-light-green); color: var(--my-white);}
footer h2 { font-size: var(--font-size-h2-plus); line-height: var(--line-height-tiny); margin-bottom: .25em; }
footer > .container { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem;   grid-gap: 2.5rem 1.5rem; margin-top: 2.5rem;  margin-bottom: 1rem;}
footer > .container > article { max-width: 20rem;  }
footer > .container > nav > ul { display: grid; grid-template-columns: repeat(3, 1fr) auto; grid-gap: 1.5rem; }
footer ul ul { display: flex; gap: .6rem; flex-direction: column; }
footer h3 { color: var(--my-gold); }
footer address a { margin-block: .3rem; display: block; }
footer ul ul a:hover,
footer address a:first-of-type:hover,
footer address a:first-of-type ~ a { text-decoration: underline ; text-underline-offset: .2em; }
footer .container > svg { grid-column: -1/1; margin: 1.5rem auto 0rem; transition: 1s var(--my-ease); transition-property: opacity, transform; }
footer .container .bottom { padding-top: 1rem; border-top: 1px solid var(--my-white-30); grid-column: -1/1; font-size: var(--font-size-small);}
footer .container .bottom :is(span,a:not(:hover)) {opacity: .5;}
footer .container .bottom p a { text-decoration: none;}
footer .container .bottom,
footer .container .bottom > ul { display: flex; align-items: center;  gap: .5rem 1rem;}
footer .container .bottom > ul { margin-left: auto; }
footer.activate .container > svg { transform: translateY(1rem); opacity: 0;}

.activate-children > * { transition: transform 500ms, opacity 500ms; transition-delay: calc(var(--cascade, 0) * var(--own-delay, 100ms)); }
.activate-children.activate > * { transform: translateY(.2rem); opacity: 0;  }

@media only screen and (max-width: 1250px) {
    footer > .container > * { grid-column: -1/1; }
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
    footer .container { margin-bottom: 3.5rem;}
}

@media only screen and (max-width: 1024px) {
    footer .container .bottom { display: grid; grid-template-columns: auto auto; }
    footer .container .bottom > ul { flex-direction: column; align-items: flex-end; grid-row: 1/4; grid-column: 2; }
    footer .container .bottom span:nth-of-type(2) { opacity: 0;}
}

@media only screen and (max-width: 950px) {
    footer > .container > nav > ul { grid-template-columns: 1fr 1fr; max-width: 30rem;}
}

@media only screen and (max-width: 500px) {
    footer .container > svg { margin: 2rem auto 0; }
    footer > .container > nav > ul { grid-template-columns: 1fr;}
    footer .container .bottom { grid-template-columns: 1fr; text-align: center;}
    footer .container .bottom > ul { grid-column: unset; align-items: center; grid-row: 1; margin-inline: auto;  }
}


/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { padding-top: 0; display: flex; flex-direction: column;  position: sticky; top: 0; height: clamp(25rem, calc(100vh - 4rem), 50rem); }
section.landing .container { z-index: 2;  margin-top: auto;  margin-bottom: 3.5rem;  }
section.landing .h1 { margin-bottom: 1.2rem; text-align: center; line-height: var(--line-height-tiny); margin-inline: auto; }
section.landing ul.usps { display: flex; justify-content: space-between; align-items: center;  }
section.landing ul.usps > li { flex-grow: 1; text-align: center; position: relative; padding-inline: 2rem; }
section.landing ul.usps > li span { max-width: 8em; display: block;  margin-inline: auto; } 
section.landing ul.usps > li:not(:last-of-type)::before { right: 0; border-radius: 1rem; height: .65rem; top: 50%; transform: translateY(-50%); background: var(--my-white);  content: ""; position: absolute; width: 1px; }

section.landing .media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.landing .media > :is(img,video) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
section.landing .media::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, black, transparent); opacity: .58;}



@media only screen and (max-width: 1200px) {
    section.landing .h1 { max-width: 6em;  }
}

@media only screen and (max-width: 1024px) {
    section.landing .container { margin-bottom: 2rem; }
    section.landing ul.usps { flex-wrap: wrap; justify-content: center; max-width: 32rem; margin-inline: auto; } 
    section.landing ul.usps > li { flex: 1; padding-inline: 0;}
    section.landing ul.usps > li:nth-of-type(3)::before { display: none; }
}

@media only screen and (max-width: 600px) {
    section.landing ul.usps { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; }
    section.landing ul.usps li::before { display: none; }
    section.landing ul.usps li:nth-of-type(2n+1):last-of-type { grid-column: -1/1;}
    section.landing ul.usps li:nth-of-type(2n+1)::before { display: block; right: calc(-.5rem - .5px); }
}




/* =========================================================== */
/* ====================== NEED HELP CTA ====================== */
/* =========================================================== */
section.need-help .container { margin-block: 1.75rem; grid-gap: 1rem 2rem; display: grid; grid-template-columns: auto auto;  align-items: flex-start; } 
section.need-help .h4 { margin-bottom: 0.3rem; }
section.need-help .h4 ~ * { opacity: .5;}

section.light + section.need-help { border-top: 1px solid var(--my-green);}
section.need-help:has(+ section.light) { border-bottom: 1px solid var(--my-green);}
section.need-help + section.light .container { margin-top: var(--margin-y); }


@media only screen and (min-width: 769px) {
    section.need-help nav { margin-left: auto; }
}

@media only screen and (max-width: 768px) {
    section.need-help .container { grid-template-columns: 1fr;}
    section.need-help .h4 { max-width: 9em;}
}


/* =========================================================== */
/* ================ THE INTRODUCTION - VIDEO ================= */
/* ================ THE INTRODUCTION - STEPS ================= */
/* =========================================================== */
section.introduction .container { display: flex; align-items: center; flex-direction: column;  }
section.introduction .container > .btn { margin-top: 2rem; }
section.introduction .h2 { max-width: 7em; margin-inline: auto;  text-align: center; margin-bottom: 0; }
section.introduction.video .media { margin-top: 2rem; border-radius: var(--border-radius-large); overflow: hidden; width: 100%; }

section.introduction.steps .container { padding-top: 4rem; }
section.introduction.steps .container::before { background: var(--my-white);}
section.introduction .steps { display: grid; grid-template-columns: var(--split); grid-gap: 2rem;  align-items: flex-start; margin-top: 2.5rem;  }
section.introduction .steps .media { border-radius: var(--border-radius); overflow: clip;}
section.introduction .steps > ul { display: grid;grid-template-columns: 1fr; gap: 2rem; grid-column: -1/1; width: 100%; }
section.introduction .steps > ul > li { padding: 2rem;; position: relative;    display: flex; flex-direction: column; justify-content: center; width: 100%; }
section.introduction .steps > ul > li .prose { opacity: .6; max-width: 15rem;}
section.introduction .steps > ul > li .buttons { margin-top: 1.5rem;}
section.introduction .steps > ul > li .kicker { margin-bottom: .6rem;}
section.introduction .steps > ul > li::before { content: ""; position: absolute; left: 0rem; height: 100%; transform-origin: top;  width: 1px; background: var(--my-gold); transition: transform 500ms var(--my-ease) calc(500ms + var(--delay, 125ms) * var(--i,0)); }
section.introduction .steps.activate > ul > li::before { transform: scaleY(0);}


section.introduction.has-media .steps { margin-top: 4rem; }
section.introduction.has-media .steps > ul { display: flex; flex-direction: column;  grid-column: unset;}
section.introduction.has-media .steps > ul > li { padding: 0 0 0 2rem; --delay: 500ms; }
section.introduction.has-media .steps > ul > li:nth-of-type(2n+2) { background: var(--main-color); color: var(--background-color); padding-block: 1.5rem 2rem;}
section.introduction.has-media .steps > ul > li:nth-of-type(2n+2)::before { display: none; }
section.introduction.has-media .steps > ul > li .h6 { font-size: var(--font-size-h3);}


@media only screen and (min-width: 769px) {   
    section.introduction.video .media { margin-top: 4rem; }
    section.introduction.has-media .steps { margin-top: 7rem; flex-direction: column;  }
    section.introduction.has-media .steps > ul { grid-template-columns: repeat(3,1fr); }
}

/* =========================================================== */
/* ===================== TITLE AND TEXT ====================== */
/* =========================================================== */
section.text .container { display: flex; flex-direction: column;  }
section.text .container .h3 { margin-top: 0; margin-bottom: 2.5rem;}
section.text article.contained { max-width: var(--max-width-narrow);}
section.text:first-of-type .container { margin-top: 1rem;}
section.text .prose .buttons { margin-top: 2.5rem;}

/* 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;}




/* =========================================================== */
/* ====================== GROWING IMAGE ====================== */
/* ====================== GROWING TITLE ====================== */
/* =========================================================== */
section.grow-image .media { transform: scale(calc(.7 + .3 * var(--perc,0))); transition: transform 800ms var(--my-ease-out); overflow: clip; border-radius: calc((1 - var(--perc)) * var(--border-radius));}
section.grow-image .media > :is(img,video) { transform: scale(calc(1.5 - .5 * var(--perc,0))); transition: transform 800ms var(--my-ease-out);  transform-origin: 50% 75%;}

section.grow-image .box { transform: scale(calc(.7 + .3 * var(--perc,0))); transition: transform 800ms var(--my-ease-out);   text-align: center; width: var(--width); margin-inline: auto;  }
section.grow-image .box .h2 {max-width: 9em;  margin-inline: auto;  }

@media only screen and (min-width: 1025px) {
    section.grow-image .box .h2 { font-size: var(--font-size-h1);}
}

@media only screen and (min-width: 769px) {
    section.grow-image .media { transform: scale(calc(.85 + .15 * var(--perc,0))); }
    section.grow-image .media > :is(img,video) { transform: scale(calc(1.30 - .3 * var(--perc,0))); }
    section.grow-image .box { transform: scale(calc(.8 + .2 * var(--perc,0)));}
    
}


/* =========================================================== */
/* ===================== VOOR WIE BLOCKS ===================== */
/* =========================================================== */
section.voor-wie .container { margin-bottom: 0}
section.voor-wie .titles { position: relative; }
section.voor-wie .titles > * { max-width: 14em; transition: opacity 500ms var(--my-ease) 0ms;  }
section.voor-wie .titles > *:not(:first-of-type) { position: absolute; top: 0; left: 0; width: var(--width); }
section.voor-wie .titles > *[aria-hidden=true] { opacity: 0; }

section.voor-wie .indicators { display: flex;  --dot-size: .4rem; --dot-gap: .4rem; --dot-grow-size: 1.4rem;  width: calc(var(--len) * var(--dot-size) + var(--len) * var(--dot-gap) + var(--dot-grow-size));  gap: var(--dot-gap);}
section.voor-wie .indicators > li { width: var(--dot-size); height: var(--dot-size); background: var(--my-white); border-radius: 100vmin;  transition: 250ms var(--my-ease); transition-property: background, flex-grow;}
section.voor-wie .indicators > li[data-active=true] { flex-grow: 1; background: var(--my-gold); }

section.voor-wie .items { display: grid; grid-template-columns: repeat(4,1fr);  grid-gap: 1rem; align-items: stretch; margin: 3.5rem auto var(--margin-y); padding: 1rem var(--gutter-side) 0.5rem; overflow: auto; scroll-snap-type: x mandatory;   max-width: 100%;}
section.voor-wie .items > li { position: relative; padding-top: 2rem; border-top: 1px solid var(--my-white);  display: flex; flex-direction: column;  min-width: 12.5rem; scroll-snap-align: center; }
section.voor-wie .items > li .h6 { margin-bottom: 1rem;}
section.voor-wie .items > li .prose { color: var(--my-white-60);  margin-bottom: 1.5rem; max-width: 14rem;}
section.voor-wie .items > li > span { color: var(--my-gold); font-size: var(--font-size-small);  margin-bottom: 1rem; display: block; }
section.voor-wie .items .arrow { margin-top: auto; }
section.voor-wie .items .arrow::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; }


@media only screen and (min-width: 1025px) {
    section.voor-wie .items { max-width: var(--max-width); width: var(--width); margin-inline: auto;  padding-inline: 0;}
}

@media only screen and (max-width: 768px) {
    section.voor-wie .titles > * {  font-size: var(--font-size-h3);}
}

/* =========================================================== */
/* =================== VERSLAVINGEN PREVIEW ================== */
/* =========================================================== */
section .topped { display: flex; align-items: center; justify-content: space-between; gap: 1rem;  padding-top: 1.5rem;  margin-bottom: 5rem; }
section .topped .kicker { margin: 0; }
section .has-line-top::before { content: ""; position: absolute; top: 0; width: 100%; transform: none; transform-origin: center; height: 1px; background: var(--my-green); transition: transform 750ms var(--my-ease);}
section .has-line-top.activate::before { transform: scaleX(0); }

section.verslavingen .container .h3 {margin-bottom: 4rem; max-width: 14em; }

section.verslavingen .preview { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-gap: 1rem 4rem;  align-items: flex-start; }
section.verslavingen .visuals { position: relative; grid-column: 1; grid-row: 1; }
section.verslavingen .verslaving-figure { transition: opacity 500ms var(--my-ease) 0ms; }
section.verslavingen .verslaving-figure:not(:first-of-type) { position: absolute; top: 0; left: 0; width: 100%; }
section.verslavingen .verslaving-figure[aria-hidden=true] { opacity: 0; pointer-events: none; transition-delay: 250ms; }
section.verslavingen .verslaving-figure .media { border-radius: var(--border-radius); overflow: hidden; }

section.verslavingen .tags { position: absolute; top: 1.5rem; left: 1.5rem;  display: flex; flex-wrap: wrap; gap: .5rem;  width: calc(100% - 3rem); }

section.verslavingen .descriptions { position: relative; grid-column: 1; grid-row: 2;  margin-top: 1rem;  color: var(--my-green-80); }
section.verslavingen .descriptions > * { max-width: 24rem; transition: opacity 500ms var(--my-ease) 0ms; }
section.verslavingen .descriptions > *:not(:first-of-type) { position: absolute; top: 0; left: 0; width: 100%; }
section.verslavingen .descriptions > *[aria-hidden=true] { opacity: 0; }

section.verslavingen .titles { grid-column: 2; grid-row: 1 / span 2;  display: flex; flex-direction: column; }
section.verslavingen .titles > li { max-width: max-content; margin-bottom: .6em; }
section.verslavingen .titles > li > span { display: block; color: var(--my-green-30);  transition: color 250ms var(--my-ease);  margin-bottom: 0; }
section.verslavingen .titles > li[data-active=true] > span { color: var(--my-green); }

section.verslavingen .slider { display: grid; grid-auto-flow: column; padding-inline: var(--gutter-side); overflow: auto; max-width: 100%; margin-bottom: var(--margin-y); grid-gap: 1rem; scroll-snap-type: x mandatory; }
section.verslavingen .slider > li { width: clamp(18.25rem, 45vw, 26rem);  display: flex; flex-direction: column; scroll-snap-align: center; }
section.verslavingen .slider > li figure { margin-bottom: 1rem; }
section.verslavingen .slider > li .prose { max-width: 32em; transition: opacity 500ms var(--my-ease);}
section.verslavingen .slider > li[data-active=false] .prose { opacity: 0;}
section.verslavingen .slider .tags { top: .5rem; left: .5rem; width: calc(100% - 1rem); gap: .25rem;}
section.verslavingen .slider .tags .tag { font-size: calc(var(--font-size-tiny) - .15em); padding-inline: 1em;}

@media only screen and (min-width: 1025px) {
    section.verslavingen .slider { display: none; }
}

@media only screen and (max-width: 1200px) {
    section.verslavingen .container .h2 { font-size: var(--font-size-h3);}
    section.verslavingen .preview { grid-template-columns: 1fr auto }
}
@media only screen and (max-width: 1024px) {
    section.verslavingen .preview { display: none; }
    section.verslavingen .container { margin-bottom: 0;}
    section.verslavingen .container .h3 { margin-bottom: 2rem; }
}

@media only screen and (max-width: 768px) {
    section.verslavingen .tags {  top: .5rem; left: .5rem; gap: .25rem;  width: calc(100% - 1rem); }
}



/* =========================================================== */
/* ======================== LOCATIONS ======================== */
/* =========================================================== */
section.locations .container { display: grid; grid-template-columns: var(--split); grid-gap: 2rem;}
section.locations article { padding: 3.5rem 2.5rem; background: var(--my-light-green); color: var(--my-white); border-radius: 1.5rem; display: flex; flex-direction: column; }
section.locations article .kicker { margin-bottom: 1rem;  }
section.locations article .prose { color: var(--my-white-60); margin-bottom: 2.5rem;}
section.locations article > ul { margin-top: auto; }
section.locations article > ul > li a { padding: .5em 0;  display: flex; align-items: center; gap: 1rem; justify-content: space-between; font-size: var(--font-size-h5-plus); border-top: 1px solid var(--my-white); position: relative; }
section.locations article > ul > li a div picture { position: absolute; max-width: 15rem; width: 40%; right: calc(2.1rem + 2rem); transform: translate(0%, -50%); z-index: 2;  top: 50%; transition: 250ms var(--my-ease); transition-property: opacity; pointer-events: none;}
section.locations article > ul > li:last-of-type { border-bottom: 1px solid var(--my-white);}

section.locations article > ul > li a:not(:hover) .arrow { opacity: 0; }
section.locations article > ul > li a:not(:hover) div picture { opacity: 0; }

@media only screen and (max-width: 768px) {
    section.locations article { padding: 3rem 2rem;}
}



/* =========================================================== */
/* ========================== QUOTE ========================== */
/* =========================================================== */
section.quote .container.container.container { margin-top: var(--margin-y); }
section.quote article { display: flex; flex-direction: column; align-items: flex-start; }
section.quote blockquote { order: -1; margin-bottom: 2.5rem; }
section.quote .h2 { font-size: var(--font-size-h5); font-weight: var(--font-regular); color: var(--my-gold); margin-bottom: 0.4rem;  font-family: var(--primary-font);}
section.quote .h6 { font-family: var(--mono-font); font-size: var(--font-size-tiny); color: var(--my-green-50);}
section.quote .btn { margin-top: 1rem; }
section.quote.dark .h6 { color: var(--my-white-60);}

section.quote.has-media .container.container { display: grid; grid-template-columns: var(--split); grid-gap: 2rem 1rem; align-items: flex-start; }
section.quote.has-media .media { border-radius: var(--border-radius-large); overflow: clip;}
section.quote.has-media article { display: block; order: 2; }
section.quote.has-media blockquote { margin-block: 2.5rem; max-width: 13.5em; }
section.quote.has-media .h2 { font-size: var(--font-size-h2-plus); font-weight: var(--font-medium); color: inherit;  }
section.quote.has-media .h6 { font-size: var(--font-size-h6); }
body.team section.quote.has-media blockquote { font-size: var(--font-size-h5-plus); line-height: 1.3; max-width: 26em; }

@media only screen and (min-width: 769px) {
    section.quote.has-media .container.container { margin-top: var(--margin-y-large);}
    section.quote.has-media article { padding-left: 2.5rem;  margin-top: 3.5rem; }
}



/* =========================================================== */
/* ======================= HAS CONTROLS ====================== */
/* =========================================================== */
section.has-controls { overflow: hidden; }
section.has-controls .container { width: 100%; }
section.has-controls .has-slider { width: 100%; position: relative; --own-delay: 25ms; }
section.has-controls .slider { width: 100%; min-width: 0; overflow: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
section.has-controls .slider ul { display: grid; grid-auto-flow: column; }

section.has-controls .ctrl-btns { display: flex; align-items: center; gap: .6rem; pointer-events: none; z-index: 2; transition: opacity 500ms var(--my-ease) 500ms; }
section.has-controls .ctrl-btns button { pointer-events: all; opacity: 1; }
section.has-controls .ctrl-btns button svg { width: .9rem; height: .9rem; transform: translateX(var(--own-transform-x, .12rem)); }
section.has-controls .ctrl-btns button:nth-of-type(1) > svg { transform:  scaleX(-1) translateX(var(--own-transform-x, .12rem)); }
section.has-controls .ctrl-btns button:hover > svg { --own-transform-x: .2rem;  }

section.has-controls:has(.slider[data-has-scroll=false]) .ctrl-btns { opacity: 0; pointer-events: none; }
section.has-controls:has(.slider[data-right=true]) .ctrl-btns button:nth-of-type(2),
section.has-controls:has(.slider[data-left=true]) .ctrl-btns button:nth-of-type(1) { opacity: .3; pointer-events: none; }


/* =========================================================== */
/* ========================= REVIEWS ========================= */
/* =========================================================== */
section.reviews .topped { margin-bottom: 2rem; }
section.reviews .topped .ctrl-btns { margin-left: auto; }
section.reviews .container { margin-bottom: 2rem;  max-width: var(--max-width); width: var(--width);}
section.reviews .slider ul { grid-gap: 1rem; align-items: stretch;  max-width: var(--max-width); margin: 0 auto; width: var(--width); position: relative;  }
section.reviews .slider ul::after { content: ""; width: calc(var(--gutter-side) - 1rem); flex-shrink: 0;  }
section.reviews .has-slider { margin-bottom: var(--margin-y); }

section.reviews .slider .reviewcard[data-active=true]::before ,.reviewcard:hover::before { background: var(--my-green); }
section.reviews .slider ul:has(:hover) .reviewcard[data-active=true]:not(:hover)::before { background: var(--my-green-80);}

.reviewcard { display: flex; flex-direction: column; color: var(--my-white); padding: 2.75rem 2.5rem; width: 22rem; scroll-snap-align: center;  isolation:  isolate; position: relative; }
.reviewcard::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-green-80);  z-index: -1; transition: background 500ms var(--my-ease); }
.reviewcard blockquote { font-size: var(--font-size-h5-plus); margin-top: auto; }
.reviewcard svg { width: 1.5rem; height: auto;   color: var(--my-gold); margin-bottom: 10rem;}
.reviewcard .kicker { margin-top: 1.5rem; margin-bottom: 0; }


@media only screen and (max-width: 768px) {
    .reviewcard { padding: 2rem; width: min(80vw, 22rem); scroll-snap-align: center; }
    section.reviews .topped { margin-bottom: 1rem;  }
}


/* =========================================================== */
/* =========================== FAQ =========================== */
/* =========================================================== */
section.faq .container { padding: 2.5rem 2.5rem 4rem; margin-top: var(--margin-y-large);  background: var(--my-beige); color: var(--my-green); border-radius: var(--border-radius-large);}
section.faq .container .kicker { margin-bottom: 2.5rem;}

ul.accordion { border-top: var(--border-width, 2px) solid var(--my-green-30); }
ul.accordion > li { border-bottom: var(--border-width, 2px) solid var(--my-green-30);   padding-left: .8rem}
ul.accordion > li h3 { margin-bottom: 0; font-family: var(--primary-font); font-size: var(--font-size-h5); font-weight: var(--font-regular); line-height: var(--line-height-regular); ;}
ul.accordion > li button { color: inherit; background: none; font: inherit; line-height: inherit; width: 100%; text-align: left; display: flex; align-items: center; gap: 1.5rem; padding: 1.3em 0; cursor: pointer; transition: opacity 250ms var(--my-ease); scroll-margin-top: 6rem; }
ul.accordion > li button > span { width: 2.1rem; height: 2.1rem; flex-shrink: 0; margin-left: auto; border: 1px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; transition: 250ms var(--my-ease); transition-property: background, color; }
ul.accordion > li button > span::before, ul.accordion > li button > span::after { content: ""; position: absolute; width: .7rem; height: var(--x-thickness, 1.5px); border-radius: 100vmin; background: currentColor; transform: rotate(var(--r, 0deg)); transition: transform 333ms var(--my-ease); }
ul.accordion > li button > span::before { --r: 90deg; }

ul.accordion > li > div { overflow: hidden; transition: max-height 333ms var(--my-ease); color: var(--my-green-80); }
ul.accordion > li > div > div { padding-bottom: 1.5rem; max-width: 45rem; transform: translateY(-.5rem); transition: transform 333ms var(--my-ease); }
ul.accordion > li > div[aria-hidden=true] { max-height: 0px; }

/* Opened */
ul.accordion > li > div[aria-hidden=false] { max-height: var(--height, unset); }
ul.accordion > li > div[aria-hidden=false] > div { transform: none; }
ul.accordion > li button[aria-expanded=true] > span::before { --r: 135deg; }
ul.accordion > li button[aria-expanded=true] > span::after { --r: 45deg; }

section.faq.light .container { background: var(--my-green); color: var(--my-white);}
section.faq.light ul.accordion { border-top: var(--border-width, 2px) solid var(--my-white-30); }
section.faq.light ul.accordion > li { border-bottom: var(--border-width, 2px) solid var(--my-white-30); }
section.faq.light ul.accordion > li > div { color: var(--my-white-60); }


@media only screen and (max-width: 768px) {
    section.faq .container { padding: 1rem 1rem 2rem; border-radius: var(--border-radius); margin-top: var(--margin-y); } 
    section.faq .container .h2 { font-size: var(--font-size-h4);}
    section.faq .container .h5 { font-size: var(--font-size-body); font-weight: var(--font-medium); }
    ul.accordion { --border-width: 1px; }
    ul.accordion > li { padding-left: .4rem;}
    ul.accordion > li button { padding-block: 1em; align-items: flex-end; }
    ul.accordion > li button > span { width: 1.6rem; height: 1.6rem; margin-block: auto .1em; }
    
    section.contact.light + section.faq.light .container,
    section.contact.dark + section.faq.dark .container { margin-top: 0;}
}


/* =========================================================== */
/* ======================= ACCORDIONS ======================== */
/* =========================================================== */
section.accordions .container { display: grid; grid-template-columns: var(--split);   --border-width: 1px;  grid-gap: 2rem; }
section.accordions .container .h2 { max-width: 11em;}
section.accordions ul.accordion > li { position: relative; padding-left: 1.75rem; }
section.accordions ul.accordion > li h3 { font-family: var(--header-font); font-size: var(--font-size-h5-plus);  }
section.accordions ul.accordion > li > span { top: 2.05rem; left: 0; position: absolute;  }
section.accordions ul.accordion > li button { padding-block: 1.5rem; }
section.accordions ul.accordion > li button > span { border: 1px solid transparent; background: var(--my-grey-30); color: var(--my-gold); --x-thickness: 2px; }

section.accordions.dark ul.accordion { border-top: var(--border-width) solid var(--my-white-60);}
section.accordions.dark ul.accordion > li { border-bottom: var(--border-width) solid var(--my-white-60);}
section.accordions.dark ul.accordion > li > div { color: var(--my-white); }


/* =========================================================== */
/* ========================= CONTACT ========================= */
/* =========================================================== */
section.contact .container { display: grid; grid-template-columns: var(--split); grid-gap: 2rem;}
section.contact .h2 { font-size: var(--font-size-h2-plus); max-width: 6em; line-height: var(--line-height-tiny);}
section.contact .prose { max-width: 36em; margin-block: 2.5rem }
section.contact:first-of-type .h2 { font-size: var(--font-size-h2); max-width: 12em; }

@media only screen and (min-width: 769px) {
    section.contact .container {  margin-bottom: var(--margin-y-large);}
}
@media only screen and (max-width: 768px) {
    section.contact .prose { margin-block: 2rem }
}

/* =========================================================== */
/* ======================= PAGE INTRO ======================== */
/* =========================================================== */
section.intro .container { display: grid; grid-template-columns: var(--split); grid-gap: 2rem; align-items: flex-start; }
section.intro article .prose { margin-block: 2rem; max-width: 36em; }
section.intro .media { border-radius: var(--border-radius); overflow: clip;  }
section.intro .buttons { margin-top: 2rem; }
section.intro article .meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
section.intro article .meta > li { background: var(--my-white-80); color: var(--my-green); padding: var(--btn-padding); border-radius: 100vmin; font-size: var(--font-size-small); }

section.intro figure { position: relative; }
section.intro figure .tags { position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; z-index: 2;  max-width: 26rem;}


@media only screen and (max-width: 768px) {
    section.intro.page-intro .container { max-width: 28rem; margin-left: var(--gutter-side); }
    section.intro .container figure { order: -1; }
    section.intro figure .tags { position: absolute; top: .5rem; left: .5rem;  display: flex; flex-wrap: wrap; gap: .25rem;  width: calc(100% - 1rem);   }

}



/* =========================================================== */
/* ======================= TEXT CARDS ======================== */
/* =========================================================== */
section.text-cards article { padding: 2rem; background: var(--my-light-green); color: var(--my-white); border-radius: 1.5rem; display: flex; flex-direction: column; }
section.text-cards article .kicker { margin-bottom: 1rem;  }
section.text-cards article .prose { color: var(--my-white-60); margin-bottom: 2.5rem;}
section.text-cards article .prose:last-child { margin-bottom: 0; }
section.text-cards .cards { display: grid; grid-template-columns: var(--split); grid-gap: 2rem;}
section.text-cards .cards .btn:hover { background: var(--my-gold);  color: var(--my-green); }
section.text-cards article .buttons { margin-top: auto; }
section.text-cards article .link:not(:hover) { color: var(--my-gold); }

section.text-cards .cards:first-child > article:nth-of-type(2n) { background: var(--my-light-green);}
section.text-cards .cards:first-child .h3 { font-size: var(--font-size-h4);}

@media only screen and (min-width: 769px) {
    section.text-cards article { padding: 3.5rem 2.5rem; }
}




/* =========================================================== */
/* ====================== TEXT AND USPS ====================== */
/* =========================================================== */
section.text-usps .usps { display: grid; grid-template-columns: calc(50% - .5rem) calc(50% - .5rem); grid-gap: 1rem;  grid-auto-rows: 1fr;}
section.text-usps .usps > li { padding: 2.25rem 1.75rem; background: var(--my-light-green); border-radius: var(--border-radius);}
section.text-usps .usps > li .prose { margin-top: 1rem}
section.text-usps .usps > li .link { color: var(--my-gold); margin-top: 1rem; }
section.text-usps .usps > li .number { color: var(--my-gold); font-size: var(--font-size-small); display: block; margin-bottom: 1rem; }
section.text-usps .usps.numbered > li { padding: 1.5rem 1.75rem;}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
     section.text-usps .usps { grid-template-columns: 1fr; grid-auto-rows: unset;}
}   
@media only screen and (max-width: 500px) {
    section.text-usps .usps { grid-template-columns: 1fr; grid-auto-rows: unset;}
}


/* =========================================================== */
/* ===================== PRICING BLOCKS ====================== */
/* =========================================================== */
section.pricing p.sub { color: var(--my-white-60); font-family: var(--mono-font);  font-size: var(--font-size-tiny);}
section.pricing ul.prices { display: grid; grid-auto-rows: 1fr;  grid-gap: 1rem;}
section.pricing .h2 { max-width: 8em;}
section.pricing ul.prices > li { padding: 2.25rem 1.75rem; background: var(--my-light-green); border-radius: var(--border-radius);}
section.pricing ul.prices > li .h6 { color: var(--my-gold); margin-bottom: 1rem; }
section.pricing ul.prices > li .price { margin-bottom: .5rem;  }

section.dark + section.dark.pricing .container,
section.light + section.light.pricing .container { margin-top: var(--margin-y); }

@media only screen and (max-width: 768px) {
    section.pricing article .prose { margin-bottom: 0;}
}



/* =========================================================== */
/* =========== TITLE AND TEXT ON WHITE BACKGROUND ============ */
/* =========================================================== */
section.text-on-white article { display: grid; grid-template-columns: var(--split); grid-gap: 2rem; align-items: start; }
section.text-on-white .h2 { margin-bottom: 0; }
section.text-on-white .kicker { grid-column: -1/1; margin-bottom: 2.5rem;}




/* =========================================================== */
/* ====================== TEXT AND IMAGE ===================== */
/* =========================================================== */
section.text-image { scroll-margin-top: var(--margin-y); }
section.text-image .container { display: grid; grid-template-columns: var(--split); grid-gap: 1.5rem var(--gap); align-items: center; }
section.text-image .h2 { margin-bottom: 1.5rem; }
section.text-image .buttons { margin-top: 2.5rem; }
section.text-image article { max-width: 36em;}
section.text-image figure { border-radius: var(--border-radius); overflow: clip; order: -1; }
section.text-image .prose em { font-style: normal; color: var(--my-gold);}

@media only screen and (min-width: 769px) {   
    section.text-image.right figure { order: unset; }
}

@media only screen and (max-width: 768px) {   
    section.text-image .container { max-width: 28rem; margin-left: var(--gutter-side);}
}


/* =========================================================== */
/* ==================== VERSLAVINGEN GRID ==================== */
/* =========================================================== */
section.verslavingen-grid .cards { display: grid; grid-template-columns: var(--split); grid-gap: 2rem; align-items: stretch; }
section.verslavingen-grid .cards > li { display: flex; flex-direction: column; padding: 3rem 2.5rem; background: var(--my-green); color: var(--my-white); border-radius: var(--border-radius-large); }
section.verslavingen-grid .cards > li .h3 { margin-bottom: 1.5rem; }
section.verslavingen-grid .cards > li .prose { color: var(--my-white-60); margin-bottom: 2.5rem; }
section.verslavingen-grid .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
section.verslavingen-grid .link { max-width: max-content; margin-top: auto; }
section.verslavingen-grid .link:not(:hover) { color: var(--my-gold); }

/* xxx */
 /* section:not(:nth-of-type(14)) { display: none !important; } main { padding-top: 0rem; background: white;}  */

@media only screen and (max-width: 768px) {    
     section.verslavingen-grid .cards { grid-gap: 1rem;}
     section.verslavingen-grid .cards > li { display: flex; flex-direction: column; padding: 1.5rem; background: var(--my-green); color: var(--my-white); border-radius: var(--border-radius-large); }
}



/* =========================================================== */
/* ======================= HEADER IMAGE ====================== */
/* =========================================================== */
section.header-image { padding-top: 0; justify-content: flex-end; height: clamp(25rem, calc(100vh - 4rem), 50rem); position: sticky; top: 0;  }
section.header-image .container { z-index: 2; margin-bottom: 3.5rem; text-align: center; }
section.header-image .h1 { margin-bottom: 1.2rem; }
section.header-image .subtitle { display: inline-flex; align-items: center; gap: 2.5rem; }
section.header-image .subtitle::before,
section.header-image .subtitle::after { content: ""; width: 1px; height: .65rem; border-radius: 1rem; background: var(--main-color); }
section.header-image .media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.header-image .media > :is(img,video) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
section.header-image .media::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, black, transparent); opacity: 0.3; }

section.header-image.dark + section.dark .container,
section.header-image.light + section.light .container { margin-top: var(--margin-y);}

@media only screen and (max-width: 768px) {
    section.header-image .h1 { font-size: var(--font-size-h2);}
}

/* =========================================================== */
/* ========================= CONTENT ========================= */
/* =========================================================== */
section.content .container { max-width: var(--max-width-narrow); }
section.content .container > * + * { margin-top: 3.5rem; }

/* --------------- CONTENT PROSE SUBSET --------------- */
section.content .prose > * + * { margin-top: 1.33em; }

/* --------------- TITLE --------------- */
section.content .title .h2 { max-width: 12em; margin-bottom: 0; }
section.content .prose h1 { font-size: var(--font-size-h3);  }
section.content .prose h2 { font-size: var(--font-size-h4);  }
section.content .prose h3 { font-size: var(--font-size-h5);  }
section.content .prose h4 { font-size: var(--font-size-h6);  }
section.content .prose :is(h1,h2,h3,h4,h5,h6) + * { margin-top: 0.6em;}

/* --------------- QUOTE --------------- */
section.content .quote { border-block: 1px solid var(--my-gold); padding-block: 2.5rem; margin-block: 5rem 4rem; text-align: center; }
section.content .quote blockquote { margin-inline: auto; margin-bottom: 0; }
section.content .quote .kicker { margin: 2rem 0 0; }

/* --------------- LIST --------------- */
section.content .list { background: var(--my-beige); color: var(--my-green); border-radius: var(--border-radius-large); padding: 2.5rem; }
section.content .list .prose ul { columns: 2; column-gap: 2rem; padding-left: 0; list-style: none;  font-weight: var(--font-medium);}
section.content .list .prose ul > li { break-inside: avoid; text-transform: capitalize; padding-left: 1.5em; position: relative; }
section.content .list .prose ul > li + li { margin-top: .75em; }
section.content .list .prose ul > li::before { content: "→"; position: absolute; left: 0; color: var(--my-gold); }

section.content.light .list { background: var(--my-white); }

/* --------------- IMAGES --------------- */
section.content .images[data-count="1"] picture { border-radius: var(--border-radius); overflow: clip; }
section.content .images:not([data-count="1"]) { display: grid; grid-template-columns: var(--split); grid-gap: 1rem; }
section.content .images:not([data-count="1"]) picture { border-radius: var(--border-radius); overflow: clip; aspect-ratio: 1; }
section.content .images:not([data-count="1"]) img { width: 100%; height: 100%; object-fit: cover; }

/* --------------- SIGNATURE --------------- */
section.content .signature { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
section.content .signature .intro { margin-bottom: 2rem; }
section.content .signature .h5 { color: var(--my-gold); margin-bottom: .4rem;  letter-spacing: inherit; font-family: var(--primary-font); font-weight: var(--font-regular);}
section.content .signature .kicker { margin-bottom: 1rem;  color: var(--my-white-60); }
section.content .signature .details { font-family: var(--mono-font); font-size: var(--font-size-tiny); }
section.content .signature .details a { text-decoration: underline; }
section.content .signature .media { max-width: 10rem; flex-shrink: 0; margin-inline: auto 2rem;  width: 20%;  }

section.content.light .signature .kicker {  color: var(--my-green-50); }

@media only screen and (max-width: 768px) {
    section.content .list .prose ul { columns: 1; }
    section.content .signature { flex-direction: column; align-items: flex-start; }
    section.content .quote blockquote { font-size: var(--font-size-h6); }
}


/* =========================================================== */
/* =================== TITLE AND TEXT ROWS =================== */
/* =========================================================== */
section.text-rows .kicker { grid-column: -1/1; margin-bottom: 1rem; }
section.text-rows article:not(:last-of-type) { margin-bottom: 3rem}
section.text-rows article { display: grid; grid-template-columns: var(--split); grid-gap: 2rem; align-items: start; }
section.text-rows .prose > div { margin-top: 0; }
section.text-rows .prose .link { display: block; margin-top: 2rem;  color: var(--my-gold); max-width: max-content;  }
section.text-rows .h2 { margin-bottom: 0; }


/* =========================================================== */
/* ======================= ARTICLE GRID ====================== */
/* =========================================================== */
section.article-grid .container.has-line-top { padding-top: 2rem;}
section.article-grid #breadcrumbs ~ *:not(.cards,.pagination) { max-width: var(--max-width-narrow);}
section.article-grid .cards { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1rem; align-items: stretch; margin-top: 1rem; }
section.article-grid .cards > li > a { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.5rem 2.5rem; background: var(--my-light-green); border-radius: var(--border-radius); }
section.article-grid .cards .media { border-radius: var(--border-radius-small); overflow: clip; display: flex; }
section.article-grid .cards .media img { width: 100%; height: 100%; object-fit: cover; }
section.article-grid .cards .kicker { margin: 1.5rem 0 1rem; }
section.article-grid .cards .h5 { margin-bottom: 0; }
section.article-grid.light .cards { color: var(--my-white);}

section.article-grid .category-filter { display: flex; gap: .5rem;  flex-wrap: wrap; margin-block: 2rem 3rem;}
section.article-grid .category-filter .active a { background: var(--my-gold);}

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


/* =========================================================== */
/* =========================== TEAM ========================== */
/* =========================================================== */
section.team .h2 { margin-bottom: 1.5rem; }
section.team .group + .group { margin-top: 5rem; }
section.team .group .h3 { margin-bottom: 0; }
section.team .members { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1rem; margin-top: 3.5rem; align-items: stretch; }
section.team .members > li { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.5rem 2.5rem; background: var(--my-light-green); color: var(--my-white); border-radius: var(--border-radius); }
section.team .members .media { border-radius: var(--border-radius-small); overflow: clip; display: flex; margin-bottom: 1.5rem; }
section.team .members .media img { width: 100%; height: 100%; object-fit: cover; }
section.team .members .h4 { margin-bottom: .5rem; }
section.team .members .kicker { margin-bottom: 1rem; }
section.team .members > li .prose { color: var(--my-white-60); }
section.team .members .link { margin-top: auto; padding-top: 1.5rem; color: var(--my-gold); max-width: max-content; }


@media only screen and (max-width: 1024px) {
    section.team .members {grid-template-columns: repeat(2,1fr);}
}

@media only screen and (max-width: 600px) {
    section.team .members { grid-template-columns: 1fr; }
}


/* =========================================================== */
/* ================= TITLE AND NUMBERED LIST ================= */
/* =========================================================== */
section.numbered-list .container { display: grid; grid-template-columns: var(--split); --border-width: 1px;  grid-gap: 2rem;}
section.numbered-list .container .h2 { max-width: 11em; }
section.numbered-list .prose p strong:only-child { color: var(--my-gold);}

section.numbered-list ul.items { border-top: var(--border-width) solid var(--main-color); }
section.numbered-list ul.items > li { position: relative; padding-left: 1.75rem; border-bottom: var(--border-width) solid var(--main-color); }
section.numbered-list ul.items > li h3 { font-family: var(--header-font); font-size: var(--font-size-h5-plus); padding-block: 1.5rem; margin-bottom: 0; }
section.numbered-list ul.items > li > span { top: 2.05rem; left: 0; position: absolute; }
section.numbered-list ul.items > li a { transition: color 250ms var(--my-ease);  display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
section.numbered-list ul.items > li a:not(:hover) .arrow { background: var(--my-gold); color: var(--my-white);}
section.numbered-list ul.items > li a:hover { color: var(--my-gold); }
section.numbered-list ul.items > li a::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: "";}

@media only screen and (max-width: 768px) {
    section.numbered-list ul.items > li h3 { padding-block: 1rem;}
    section.numbered-list ul.items > li > span { top: 1.55rem;}
    section.numbered-list ul.items > li  .arrow { width: 1.6rem; height: 1.6rem; }
    section.numbered-list ul.items > li  .arrow svg { width: .9rem; height: 0.9rem; }
}

/* =========================================================== */
/* =================== TITLE AND CTA CARD ==================== */
/* =========================================================== */
section.cta-card .container { display: grid; grid-template-columns: var(--split); grid-gap: var(--gap); align-items: start; }
section.cta-card article .prose { max-width: 36em;}
section.cta-card article .h2 { margin-bottom: 2.5rem; }
section.cta-card aside { padding: 3rem 2.5rem; background: var(--my-light-green); color: var(--my-white); border-radius: var(--border-radius-large); }
section.cta-card aside .h3 { margin-bottom: 1.5rem; }
section.cta-card aside .prose { color: var(--my-white-60); max-width: 32em; }
section.cta-card aside .buttons { margin-top: 2.5rem; }


/* =========================================================== */
/* ================ TITLE AND NUMBERED CARDS ================= */
/* =========================================================== */
section.numbered-cards .h2 { margin-bottom: 1.5rem; }
section.numbered-cards .container > .prose { max-width: 40rem; }
section.numbered-cards .cards { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1rem; margin-top: 3.5rem; align-items: stretch; }
section.numbered-cards .cards > li { display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.5rem 2.5rem; background: var(--my-light-green); border-radius: var(--border-radius); }
section.numbered-cards .cards .media { border-radius: var(--border-radius-small); overflow: clip; display: flex; }
section.numbered-cards .cards .media img { width: 100%; height: 100%; object-fit: cover; }
section.numbered-cards .cards .number { color: var(--my-gold); font-size: var(--font-size-small); display: block; margin: 1.5rem 0 1rem; }
section.numbered-cards .cards .h4 { margin-bottom: 0; }
section.numbered-cards .cards > li .prose { color: var(--my-white-60); margin-top: auto;   padding-top: 1rem; }

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


/* =========================================================== */
/* ====================== LOCATION GRID ====================== */
/* =========================================================== */
section.location-grid .h2 { margin-bottom: 1.5rem; }
section.location-grid .container > .prose { max-width: 40rem; }
section.location-grid .cards { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1rem; margin-top: 3.5rem; align-items: stretch; }
section.location-grid .cards > li { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.5rem 1.5rem 2.5rem; background: var(--my-light-green); border-radius: var(--border-radius); }
section.location-grid .cards .media { border-radius: var(--border-radius-small); overflow: clip; display: flex; }
section.location-grid .cards .media img { width: 100%; height: 100%; object-fit: cover; }
section.location-grid .cards .kicker { margin: 1.5rem 0 1rem; }
section.location-grid .cards .head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
section.location-grid .cards .head .h4 { margin-bottom: 0; }
section.location-grid .cards > li .prose { color: var(--my-white-60); margin-top: 1rem; }
section.location-grid .cards .arrow::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; }

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


/* =========================================================== */
/* ==================== LOCATION SLIDER ====================== */
/* =========================================================== */
section.location-slider .container { margin-bottom: 2rem; max-width: var(--max-width); width: var(--width);  display: grid; grid-template-columns: 1fr auto; align-items: flex-end; }
section.location-slider .container > article { max-width: 36em; }
section.location-slider .container > article .prose { margin-top: 2.5rem;}
section.location-slider .has-slider { margin-block: 0rem var(--margin-y); grid-column: -1/1; }
section.location-slider .slider ul { grid-gap: 1rem; align-items: stretch; max-width: var(--max-width); margin: 0 auto; width: var(--width); }
section.location-slider .slider ul::after { content: ""; width: calc(var(--gutter-side) - 1rem); flex-shrink: 0; }
section.location-slider .slider ul > li { width: 14rem; scroll-snap-align: center; }
section.location-slider .slider ul > li a { display: flex; flex-direction: column; gap: 1.5rem; }
section.location-slider .slider ul > li .media { border-radius: var(--border-radius); overflow: clip; aspect-ratio: 280 / 235; background: var(--my-light-green); }
section.location-slider .slider ul > li .media img { width: 100%; height: 100%; object-fit: cover; }
section.location-slider .slider ul > li .h4 { margin-bottom: 0; }



@media only screen and (min-width: 1025px) {
    section.location-slider .has-slider { margin-block: 2.5rem var(--margin-y); }
}

@media only screen and (max-width: 768px) {
    section.location-slider .slider ul > li { width: min(70vw, 14rem); }
}


/* =========================================================== */
/* ======================== STATISTIC ======================== */
/* =========================================================== */
section.statistic { justify-content: center; min-height: 28rem; overflow: clip; color: var(--my-white); }
section.statistic .container { z-index: 2; --margin-y: 6rem }
section.statistic .h2 { font-size: var(--font-size-h1-huge); margin-bottom: 1.5rem; }
section.statistic .prose { font-size: var(--font-size-h5); max-width: 21em; }
section.statistic .media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.statistic .media > :is(img,video) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
section.statistic .media::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, black, transparent); opacity: .5; }
section.statistic:last-of-type .container { margin-bottom: var(--margin-y);}


@media only screen and (max-width: 768px) {
    section.statistic .container { margin-top: auto; margin-bottom: 2rem;}
    section.statistic .h2 { font-size: var(--font-size-h2); margin-bottom: 1rem;}
    section.statistic .prose { font-size: var(--font-size-body);}
    section.statistic .media::after { background: linear-gradient(25deg, black 20%, transparent); }
}

/* =========================================================== */
/* ================== TEXT AND TEXT BLOCKS =================== */
/* =========================================================== */
section.text-blocks .container > .prose { max-width: 40rem; }
section.text-blocks .topped { margin-bottom: 2.5rem;}
section.text-blocks .h2 { max-width: 12em;}
section.text-blocks .blocks { display: grid; grid-template-columns: var(--split); grid-gap: 2rem; margin-top: 3.5rem; align-items: stretch; }
section.text-blocks .blocks > article { padding: 3.5rem 2.5rem 2.5rem; background: var(--my-green); color: var(--my-white); border-radius: var(--border-radius-large); display: flex; flex-direction: column; justify-content: center; }
section.text-blocks .blocks > article .h4 { margin-bottom: 1rem; }
section.text-blocks .blocks > article .prose { color: var(--my-white-60); }

@media only screen and (max-width: 768px) {
    section.text-blocks .blocks { grid-gap: 1rem;}
}

/* =========================================================== */
/* ================ TITLE AND NUMBERED BLOCKS ================ */
/* =========================================================== */
section.numbered .h2 { max-width: 13.5em; margin-bottom: 1.5rem; }
section.numbered .container > .prose { max-width: var(--max-width-narrow); }
section.numbered .items > li .link { margin-top: auto; padding-top: 1.5rem;  color: var(--my-gold); max-width: max-content;}
section.numbered .items { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 1rem; margin-top: 4.5rem; align-items: stretch; margin-bottom: var(--margin-y); }
section.numbered .items > li { padding-top: 2rem; border-top: 1px solid var(--main-color); display: flex; flex-direction: column; }
section.numbered .items > li > span { color: var(--my-gold); font-size: var(--font-size-small); margin-bottom: 1rem; display: block; }
section.numbered .items > li .h6 { margin-bottom: 1rem; }
section.numbered .items > li .prose { opacity: .6; max-width: 14rem; }

@media only screen and (max-width: 768px) {
    section.numbered .h2 { font-size: var(--font-size-h3);}
    section.numbered .items { grid-template-columns: 1fr; }
}


/* =========================================================== */
/* ========================= USP BAR ========================= */
/* =========================================================== */
section.usp-bar .container { margin-block: 1.75rem; }
section.usp-bar ul.usps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 6rem; width: 100%;  }
section.usp-bar ul.usps > li { position: relative; text-align: center; margin-bottom: 0; }
section.usp-bar ul.usps > li:not(:last-of-type)::before { right: -3rem; border-radius: 1rem; height: .65rem; top: 50%; transform: translateY(-50%); background: var(--main-color); content: ""; position: absolute; width: 1px; }
section.usp-bar:has( + section.light) { border-bottom: 1px solid var(--my-green);}

@media only screen and (max-width: 768px) {
    section.usp-bar ul.usps > li:not(:last-of-type)::before { display: none; }
}


/* =========================================================== */
/* ======================== STANDARD ========================= */
/* =========================================================== */
section.standard .prose h1 { font-size: var(--font-size-h2);  }
section.standard .prose h2 { font-size: var(--font-size-h5);  }
section.standard .prose h3 { font-size: var(--font-size-h6);  }
section.standard .prose h4 { font-size: var(--font-size-body);  }
section.standard .prose :is(h1,h2,h3,h4,h5,h6) + * { margin-top: 0.6em;}
section.standard .prose :is(ol,ul) > li { margin-bottom: .33em;}
section.standard .prose ol > li > ol { list-style: lower-alpha;  padding-left: 1.5em;}













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

    /* Inputs */
    --form-main-color: var(--my-green);
    --form-input-background-color: rgba(33, 43, 30, .08);
    --form-padding-x: 1em;  
    --form-padding-y: .9em;  
    --form-padding: var(--form-padding-x) var(--form-padding-y);  

    /* Borders */
    --form-border-color: transparent; 
    --form-border-width: 1px;  
    --form-border-radius: 0.5rem; 
    
    /* Labels */
    --form-label-color: var(--my-green);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: transparent;
    
    /* Checkboxes */
    --form-check-border-radius: .2em;

    /* States */
    --form-color-focus: var(--my-green-50);
    --form-color-error: maroon;

    /* Transition */
    --form-transition: 250ms ease; 
}
/* LAYOUT */
form.custom { position: relative; width: 100%; max-width: 29rem; margin-left: auto; background: var(--my-beige); color: var(--my-green); padding: 2.5rem; border-radius: var(--border-radius-large); }
form.custom > .form-title { font-family: var(--primary-font); font-size: var(--font-size-h5-plus); font-weight: var(--font-medium); margin-bottom: 1.5rem; }
form.custom > .form-disclaimer { font-family: var(--mono-font); font-size: var(--font-size-tiny); color: var(--my-green-50); margin-top: 1.5rem; }
form.custom fieldset > button { grid-column: -1/1; width: 100%; justify-content: center; margin-top: .5em; background: var(--my-green); color: var(--my-white); padding-block: 1em; border-radius: 100vmin; font-weight: var(--font-medium);  font-size: var(--font-size-small);}
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):focus-visible { outline: none; border: var(--form-border-width) solid var(--form-color-focus); }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom .normal input { color: var(--form-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: 2em; }

/* LABEL */
form.custom .normal label { display: block; margin-bottom: .5em; color: var(--form-label-color); }
form.custom :is(input, textarea, select) { font-family: var(--mono-font); }
form.custom :is(textarea, input, select)::placeholder { opacity: .5; color: var(--form-main-color); }
form.custom .select select:invalid { color: color-mix(in srgb, var(--form-main-color) 50%, transparent); }

/* OPTIONAL MARKER */
form.custom .normal label .optional { color: var(--my-green-50); }

/* EMAIL VALIDATION */
form.custom input[type="email"]:not(:focus, :placeholder-shown):invalid { border-color: var(--form-color-error); }

/* SELECTS */
form.custom .select { position: relative; min-height: unset; background: none; border: none; border-radius: 0; }
form.custom .select select { width: 100%; cursor: pointer; appearance: none; padding-right: 2em; }
form.custom .select::before, form.custom .select::after { content: ""; height: 2px; bottom: 1.75em; width: .4rem; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.225em); 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::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; }

/* CAPCHA NOTICES */
form.custom small { font-size: .6rem; opacity: 1; transform-origin: top left; margin: -1em 0 .5rem; margin-left: var(--half-border-radius); }
form.custom small a { text-decoration: underline; }
.grecaptcha-badge { visibility: hidden; }

@media only screen and (max-width: 768px) {
    form.custom { --form-columns: 1;  padding: 1.5rem 1.25rem;} 
    form.custom :is(textarea, input, select) { font-size: 16px; }
    form.custom > .form-title { max-width: 10em;}
}


/* --------------- PROSE CONTENT --------------- */
.prose > * + * { margin: 1.5em 0 0;}
.prose .kicker + * { margin-top: 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) { text-decoration: underline; }
.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;}


/* --------------- 404 PAGE --------------- */
section.not-found .container { display: flex; flex-direction: column; align-items: center; gap: 1rem; }


/* --------------- 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: 1300px) {
    :root {
        --gutter-side: clamp(.75rem, 9.793vw - 3.957rem, 4rem);
    }
}
@media only screen and (max-width: 768px) {
    :root {
        --logo-width:    9rem;
        --gutter-top: .75rem;
        --gutter-side: 1rem;
        --split: 1fr;

        --font-size-h1-extra-huge: 5rem;
        --font-size-h1-huge: 4rem;
        --font-size-h1: 3.5rem;
        --font-size-h2-plus: 2.7rem;
        --font-size-h2: 2.5rem;
        --font-size-h3: 2rem;
        --font-size-h4: 1.75rem;
        --font-size-h5: 1.2rem;
        --font-size-h6: 1rem; 
        --font-size-body: .9rem; 
        --font-size-small: .8rem; 
        --font-size-tiny: .7rem; 

        --margin-y: 4rem; 
    }
    section:first-of-type { padding-top: 0;}
    .btn { font-size: var(--font-size-small);}
}

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

/* =========================================================== */
/* ======================= HELPER VIEW ======================= */
/* =========================================================== */
body[data-helping=true] section { outline: 1px dashed var(--my-gold); outline-offset: -1px; }
div.helper.helper.helper.helper { position: sticky; top: 4rem; z-index: 9; display: flex; align-items: center; width: fit-content; height: 2rem; margin: 0 auto -2rem var(--gutter-side); padding: .4em 1.2em; border-radius: 100vmin; background: var(--my-gold); color: var(--my-white); font-family: var(--mono-font); font-size: var(--font-size-tiny); font-weight: var(--font-medium); pointer-events: none;  border: 1px solid var(--my-white); margin-bottom: 0rem; }



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

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