* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: clamp(16px, 1.25vw, 22px); scroll-behavior: smooth; overscroll-behavior: none;  }
body {font-size: var(--font-size-body); color: var(--mainColor); font-family: var(--primaryFont); font-weight: var(--font-regular); background: var(--backgroundColor); line-height: var(--line-height-large);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
body.loading { --load-transition: 0s; }
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.2em;}
p strong { font-weight: var(--font-bold);}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primaryFont: "Visby CF", system-ui, sans-serif;
    --headerFont: "Visby CF", system-ui, sans-serif;

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

    /* Font sizes */
    --font-size-super-huge: 4.42rem;  /* 64px */
    --font-size-huge: 2.95rem;  /* 64px */
    --font-size-h1: 2.4rem;     /* 52px */
    --font-size-h2: 2.3rem;     /* 50px */
    --font-size-h3: 1.85rem;    /* 40px */
    --font-size-h4: 1.3rem;     /* 28px */
    --font-size-h5: 1.1rem;     /* 24px */
    --font-size-h6: .9rem;      /* 20px */
    --font-size-body: .9rem;    /* 20px */
    --font-size-small: .75rem;  /* 16px */
    --font-size-tiny: .7rem;  /* 14px */

    /* Colors */  
    --mainColor: var(--myBlack);
    --backgroundColor: var(--myWhite);

    --myTrueWhite: #FFFFFF; 
    --myWhite: #F6F6F6; 
    --myBlack: #000000; 
    --myGrey: #E0E0E0; 
    --myLightOrange: #FFA800;
    --myDarkOrange: #FF7800;
    --myDarkerOrange: #FF3F00;
    --myLightPurple: #AA01C8;
    --myLighterPurple: #C700FF;
    --myDarkPurple: #7B0098;
    --myDarkerPurple: #8C00FF;
    --myLightBlue: #0171FF;
    --myDarkBlue: #1A1A90;

    --myOrangeGradient: linear-gradient(to right,var(--myLightOrange), var(--myDarkerOrange));
    /* --myOrangeGradientInvert: linear-gradient(to left,var(--myLightOrange), var(--myDarkOrange)); */
    --myPurpleGradient: linear-gradient(to right,var(--myLighterPurple), var(--myDarkerPurple));
    --myPurpleGradientAngled: linear-gradient(210deg ,var(--myLighterPurple), var(--myDarkerPurple));
    /* --myPurpleGradientInvert: linear-gradient(to left,var(--myLightPurple), var(--myDarkPurple)); */
    --myBlackGradient: linear-gradient(to right,var(--myLightBlue), var(--myDarkBlue));
    /* --myBlackGradientInvert: linear-gradient(to left,var(--myLightBlue), var(--myDarkBlue)); */

    --odfPink: #EAA0A5;
    --odfCreme: #F9F4EE;

    /* Line heights */
    --line-height-small: 1.05;
    --line-height-regular: 1.2;
    --line-height-large: 1.4; 

    /* Widths */
    --gutterSide: 2rem;
    --gutterTop: 1rem;
    --maxWidth: 65rem;
    --maxWidthWide: 85rem;
    --maxWidthUltraWide: 150rem;
    --maxWidthNarrow: 50rem;
    --width: calc(100% - calc(var(--gutterSide) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 5.5rem; 
    --margin-y-quarter: calc(var(--margin-y) / 4); 
    --margin-y-half: calc(var(--margin-y) / 2); 
    --margin-y-three-quarter: calc(var(--margin-y) * .75); 
    --margin-y-double: calc(var(--margin-y) * 2); 
    --margin-y-triple: calc(var(--margin-y) * 3); 
    --margin-y-quad: calc(var(--margin-y) * 4); 
    --paddingTop: clamp(3rem, 1vw, 5rem);
    --btnPadding: .6em 1.1em;

    /* Transitions */
    --myEaseOut: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --dropShadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blurShadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --borderRadius: 2.5rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadius: 100vmin; 

    /* Logos */
    --logoWidth: 8rem; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-bold); font-family: var(--headerFont);  line-height: var(--line-height-regular); margin-bottom: 0.5em; letter-spacing: -2%; }
:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6) em { color: var(--myDarkOrange); font-weight: inherit; }
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); } 
.large { font-size: var(--font-size-h3);  letter-spacing: -2%;}
.kicker { font-size: var(--font-size-h3); font-weight: var(--font-semi-bold);}
.huge { font-size: var(--font-size-huge);  margin-bottom: .3em;}
.super-huge { font-size: var(--font-size-super-huge); }

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; --scheme-primary: var(--mainColor); --scheme-background: var(--backgroundColor); }
body[data-scrollable=false] { overflow: hidden;}
section:first-of-type { padding-top: var(--paddingTop); margin-top: 0; }
header, main, footer { max-width: var(--maxWidthUltraWide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--maxWidth); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; max-width: var(--maxWidthUltraWide); position: relative; background: var(--scheme-background); color: var(--scheme-primary); isolation: isolate; display: flex;  flex-direction: column;  }
section.ultrawide { max-width: var(--maxWidthUltraWide); width: 100%; }
section.narrow,.container.narrow { max-width: var(--maxWidthNarrow); }
main > section:last-of-type .container { margin-bottom: 2rem;}

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

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

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

/* BUTTONS */
button { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center;}
button,label { cursor: pointer;  }
.btn { background: var(--myDarkOrange); color: var(--myWhite); padding: var(--btnPadding); border-radius: var(--btnBorderRadius); text-align: center;   font-size: var(--font-size-body); font-weight: var(--font-semi-bold); display: flex; align-items: center; max-width: max-content; gap: .7em; transition: background 250ms, color 250ms; position: relative;  overflow: hidden; white-space: nowrap; user-select: none; } 
.btn::after { content: ""; display: inline-block; height: 1em; width: 1em;  background: url('/img/icons/arrow.svg') center center / contain no-repeat;   transition: transform 350ms 200ms; flex-shrink: 0;}
.btn::before { content: ""; display: inline-block; height: 1em; width: 1em;  background: url('/img/icons/arrow.svg') center center / contain no-repeat;   transition: translate 250ms 0s; position: absolute; right: 1.1em;  rotate: -45deg;  translate: -170% 170%;}
:is(.target:hover .btn, .btn:hover) { background-color: var(--myLightPurple);  text-decoration: none; }
:is(.target:hover .btn, .btn:hover)::after { transform: translateX(calc(100% + 1.1em));   transition: transform 250ms 0s; }
:is(.target:hover .btn, .btn:hover)::before {  animation: btn 750ms ease-in-out infinite alternate; translate: 0 0;   transition: translate 350ms 200ms; }

.btn.blue { background: var(--myDarkBlue); }
.btn.blue:hover { background: var(--myLightPurple); }

.btn.purple { background: var(--myDarkPurple); }
.btn.purple:hover { background: var(--myLightOrange); }

.btn.white { background: var(--myWhite); color: var(--myDarkOrange);  }
.btn.white::after { background-image: url("/img/icons/arrow-orange.svg");  }
.btn.white:hover { background: var(--myDarkOrange); color: var(--myWhite);}

.btn.bare::before,.btn.bare::after { display: none; }
.btn.transparent { background: transparent; border: 2px solid var(--myWhite); }
.btn.transparent:hover { background: transparent; }

.big-btn { padding: 1.2rem 1.5rem; background: var(--myPurpleGradient); max-width: max-content; margin: 1rem 0 1rem auto; border-radius: 100vmin;  opacity: 0; transform: translateY(1rem); transition: opacity 500ms ease 250ms, transform 500ms ease 250ms; }
.big-btn .btn { text-decoration: none;}
.big-btn .btn svg { height: .8em; width: auto;  }
.big-btn:hover .btn { background: var(--myDarkOrange); color: var(--myWhite);}
.big-btn:not(.activate) { opacity: 1; transform: none; }

nav.buttons { display: flex; flex-wrap: wrap; gap: .33rem 1rem; margin-top: 2rem; }
section.has-button { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; margin: var(--gap) auto; max-width: var(--maxWidthNarrow); flex-direction: row;  gap: .25rem;}
.btn.back,
.btn.back span  { transform: scaleX(-1);}


/* DOTS */
.dots { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.dots::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--myOrangeGradient);   mask: url('/img/dots.png') center center / 15rem auto repeat-x; opacity: .3;}
.dots::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(185deg, var(--myWhite) 25%, transparent);}
.dots.purple::before { background: var(--myPurpleGradient); }
.dots.blue::before { background: var(--myLightBlue); }


/* --------------- COLOR SCHEMES --------------- */
[data-scheme='color'] { 
    --scheme-primary: ;
    --scheme-secondary: ;
    --scheme-background: ;
}

section[data-scheme='color'] + section[data-scheme='color'] .container {  margin-top: var(--margin-y-quarter);}

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10;  left: 0; right: 0; margin: 0 auto; }
header img, header svg { max-width: 100%; width: 100%; height: auto;  transition: color 250ms;}
nav#main, .burger, .mobile { display: none;  }
header::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;  background: var(--myBlack); pointer-events: none; transition: opacity 500ms; opacity: 0;}
.burger:not(:checked) ~ header[data-style=light] { color: var(--myWhite); --ownColor: var(--myWhite); --ownBackgroundColor: transparent;  }
nav#desktop li:first-of-type svg { transition: filter 250ms;}
header[data-style=light] nav#desktop li:first-of-type svg  { filter: brightness(0) invert(.97) }
body[data-filter-open=true]  header[data-style=light] nav#desktop li:first-of-type svg { filter: none;}


/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: 1rem 0;  z-index: 6; }
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center;}
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li a { display: flex; }
nav#desktop > ul > li:first-of-type {margin-right: auto; max-width: var(--logoWidth); }
nav#desktop a.button { padding: var(--btnPadding); display: flex; align-items: center; gap: .5rem; font-weight: var(--font-semi-bold); border: 2px solid var(--ownColor, var(--myBlack)); text-transform: lowercase; border-radius: 100vmin; background: var(--ownBackgroundColor, var(--backgroundColor)); transition: color 250ms, background 250ms, border 250ms;}
nav#desktop a.button svg { height: 1.2em; width: auto; }
nav#desktop li.menu { width: 2.518rem; height: 2.518rem; border-radius: 50%; border: 2px solid var(--ownColor, var(--myBlack));  display: grid; place-items: center; margin-left: 1.2rem;  background: var(--ownBackgroundColor, var(--backgroundColor));  transition: color 250ms, background 250ms, border 250ms;}

/* MOBILE NAV */
nav#main { position: fixed; top: 0; right: 0; transform: translateX(100%); transition: transform var(--load-transition, 500ms) ease; height: 100vh; height: 100dvh; width: 100%; display: flex; flex-direction: column; background: var(--backgroundColor);  max-width: 35rem; z-index: 5; }
nav#main > ul { display: flex;flex-direction: column; height: 100%; margin-top: var(--margin-y);  align-items: flex-start;  overflow: auto;  padding-bottom: 14rem;}
nav#main > ul > li { display: flex; transition: grid-template-rows 500ms ease;  position: relative; flex-direction: column; align-items: center;  display: grid; grid-template-rows: 4em 0fr;   width: 100%; }
nav#main li > span {  padding-left: var(--gutterSide); font-weight: var(--font-bold); display: flex; margin: 0; justify-content: flex-end;  transition: color 125ms;}
nav#main li > span.active { color: var(--myDarkPurple);}
nav#main li > span:hover { color: var(--myDarkOrange);}
body.resizing nav#main li.arrow { transition: none;}

nav#main li.arrow button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; }
nav#main li.arrow button > span { width: 2.518rem; height: 2.518rem; border: 2px solid var(--myBlack); top: .4em; border-radius: 50%;  position: absolute; right: var(--gutterSide); display: flex; align-items: center; justify-content: center; transform: rotate(-90deg); transition: transform 250ms;}
nav#main li.arrow button > span::before,nav#main li.arrow button > span::after { content: ""; position: absolute;  width: .6rem; height: 3px; border-radius: .5rem; background: var(--mainColor); transform: translateX(-33%) rotate(var(--r, 45deg)) translateX(40%);  transition: transform 500ms;}
nav#main li.arrow button > span::before { --r: -45deg; }
nav#main li.arrow > div {  overflow: hidden; height: 100%;  padding: 0 var(--gutterSide); }

nav#main li.arrow ul.submenu { position: relative; transform: none; left: var(--link-padding); padding: var(--link-padding);  display: block; padding: .5rem 0 1.5rem;   }
nav#main li.arrow ul.submenu li { font-size: var(--font-size-h4); font-weight: var(--font-semi-bold); break-inside: avoid;  margin-bottom: .5em;} 
nav#main li.arrow ul.submenu li a { opacity: .4; transition: opacity 250ms;}
nav#main li.arrow ul.submenu li a:hover { opacity: 1;}
nav#main li.arrow ul.submenu.dual { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr;  grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-gap: 0 1em;}
nav#main li.arrow ul.submenu.columns { display: block; column-count: 2; margin-bottom: .7rem;  max-width: 30rem;}

nav#main li.arrow[data-open=true] { grid-template-rows: 4em 1fr;}

nav#main li.arrow[data-open=true] button > span::before {  --r: 45deg; transform: translate(-20%, -.30rem) rotate(var(--r, 45deg)) translateX(40%); transition-delay: 50ms; }
nav#main li.arrow[data-open=true] button > span::after {  --r: 135deg; transform: translate(-20%, .36rem) rotate(var(--r, 45deg)) translateX(-40%); }



/* Burger */
input.burger { display: none; -webkit-tap-highlight-color: transparent; opacity: 0;  z-index: 2; }
label.burger { position: relative; width: 2.518rem; height: 2.518rem; z-index: 99;  display: flex; align-items: center;  justify-content: center; top: -2px; left: -2px;  overflow: hidden; -webkit-tap-highlight-color: transparent;}
label.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);}
label.burger > span { width: 1rem; height: 3px; position: absolute; background: var(--ownColor, var(--myBlack)); transition: transform 500ms ease, width 500ms ease, background 250ms;  border-radius: 1rem;}
label.burger > span:nth-of-type(1) { transform: none; }
label.burger > span:nth-of-type(2) { transform: translateY(-.33rem); }
label.burger > span:nth-of-type(3) { transform: translateY(.33rem); }

/* Burger checked */
input.burger:checked { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; z-index: 9; }
input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: translateX(200%); width: 0;}
input.burger:checked ~ header label.burger span:nth-of-type(2) { transform: rotate(-135deg); width: .8rem; }
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: translateX(0%) rotate(135deg);  width: .8rem;;}
input.burger:checked ~ header nav#main { transform: none;  }
input.burger:checked ~ header::before { opacity: .2;}


/* --------------- FOOTER --------------- */
footer { background: var(--myPurpleGradientAngled); color: var(--myWhite); border-radius: 3rem 3rem 0 0; isolation: isolate; display: flex; flex-direction: column; margin-top: var(--margin-y-half); }
footer svg { width: var(--logoWidth);}
footer > nav { display: grid; grid-template-columns: auto auto; margin-bottom: 2rem; grid-gap: 1rem 2rem;} 
footer > nav > div { max-width: 15rem; }
footer > nav > div p { margin: 1rem 0 1.5rem;}

footer > nav > ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2.5rem; margin-left: auto; font-size: var(--font-size-small); }
footer > nav > ul > li { max-width: 20rem; font-weight: var(--font-medium); }
footer > nav > ul ul > li:not(:last-of-type) { margin-bottom: .85em;}
footer > nav > ul .h6 {  color: var(--myLightOrange);}

footer > nav > ul ul > li a { display: inline-block; position: relative;   transition: transform 250ms;}
footer > nav > ul ul > li a::before { content: ""; width: .7em; height: .7em; top: .35em; background: url("/img/icons/chevron.svg") center center / contain no-repeat; position: relative; display: inline-block; position: absolute; left: 0; opacity: 0; transition: opacity 250ms, transform 250ms; transform: translateX(-.5em);  pointer-events: none;}
footer > nav > ul ul > li a:hover { transform: translateX(.9em); }
footer > nav > ul ul > li a:hover::before { transform: translateX(-.9em); opacity: 1; }

footer > p { font-size: 0.6rem; margin: 0; padding: .7rem; text-align: center; background: var(--myBlack);  }
footer > p strong { font-weight: var(--font-semi-bold);}
footer > p a { padding: .3em .75em; border-radius: 100vmin; transition: background 333ms, color 333ms;}
footer > p a:hover  { color: var(--odfCreme); background: var(--odfPink);  text-decoration: none;}

footer ul.bottom { margin: var(--margin-y) 0 0; grid-column: -1/1;  display: flex;  grid-gap: 1rem;}
footer ul.bottom > li:first-of-type { margin-right: auto; }
footer ul.bottom > li { font-weight: var(--font-regular);}
footer ul.bottom > li a:hover { text-decoration: underline;}

footer .dots { border-radius: 3rem 3rem 0 0; overflow: hidden; }
footer .dots::before { background: var(--myWhite); opacity: .08;}
footer .dots::after { display: none; }

ul.socials { display: flex; align-items: center; gap: .75rem; --icon-size: 1.4rem;   grid-column: -1/1; margin: 0;  }
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 a:hover { color: var(--myDarkOrange); }
ul.socials li svg { width: var(--icon-size); height: var(--icon-size);  transition: color 250ms;}


/* ------------------------ SECTIONS ------------------------ */

/* ========================================================== */
/* ========================== INTRO ========================= */
/* ========================================================== */
section.intro:has(h1.huge) .container { margin-top: 2rem;}
section.intro h1.huge { letter-spacing: -2%; text-align: center; margin-bottom: 0;}
section.intro h2.h3 { max-width: 22.5em; letter-spacing: 2%; text-align: center; margin: 0 auto;  }
section.intro .h1 { letter-spacing: -2%; max-width: 24.5em; text-align: center; margin: 0 auto; }
section.intro .container { display: flex; flex-direction: column; align-items: center; gap: 1.5em;  margin: var(--margin-y-three-quarter) auto calc(var(--margin-y-three-quarter) + var(--borderRadius));}
section.intro .dots::after { background: linear-gradient(185deg, var(--myWhite) 10%, transparent);}

section.intro[data-scheme=purple] { background: var(--myPurpleGradient); color: var(--myWhite);}
section.intro[data-scheme=purple] .dots::before { background: var(--myDarkBlue); opacity: .1;}
section.intro[data-scheme=purple] .dots::after { background: linear-gradient(185deg, var(--myDarkerPurple) 10%, transparent); opacity: .7;}
section.intro + section { margin-top: calc(var(--borderRadius) * -1);  background: var(--backgroundColor);  z-index: 2; border-radius: var(--borderRadius) var(--borderRadius) 0 0;}
section.intro + section.text .container { margin-top: var(--margin-y);}

body:has(section.intro + section:not(.media.fullscreen)) section.intro .dots::after { transform: scaleY(-1); }


/* ========================================================== */
/* ===================== FULLWIDTH MEDIA ==================== */
/* ========================================================== */
section.media .container { margin: 0 auto;  max-width: var(--maxWidthUltraWide); width: 100%; }
section.media .media { overflow: hidden;}
section.media .media > *:not(.btn) { border-radius: var(--borderRadius) var(--borderRadius) 0 0;  }
section.media.contain .container {max-width: var(--maxWidth);}
section.media.contain .media > *:not(.btn) { border-radius: var(--borderRadius);}


.media button.floater { gap: 0.3em; position: absolute; top: 50%; left: 50%; transform: translate3d(var(--x, -50%), var(--y, -50%), 0) rotateZ(0); -webkit-transform: translate3d(var(--x, -50%), var(--y, -50%), 0) rotateZ(0); -webkit-transition: 250ms var(--myEaseOut); will-change: transform; display: inline-flex;  z-index: 2; cursor: pointer; transition: 250ms var(--myEaseOut); pointer-events: none;   align-items:  center;}
.media button.floater svg { height: .8em; width: auto; margin-left: .5em;  transform: translateY(1px);}
.media button.floater::before,.media button.floater::after { display: none; }
.media button.floater span { display: flex;  align-items: center; justify-content: flex-end; }
.media button.floater span:first-of-type { padding-right: .2em;}
.media button.floater span:first-of-type::before,.media button.floater span:first-of-type::after { content: ""; width: .5em; height: 2px; position: absolute; right: .95em;  transform: translateY(.05em) rotate(var(--r, 45deg)); background: var(--myWhite); z-index: 2;  }
.media button.floater span:first-of-type::before { --r: -45deg;  }
.media video[data-muted=true] { cursor: pointer;  }
.media video[data-muted=false] ~ button.floater { transform: translate3d(-50%, calc(var(--parking-y) - 100% - 1rem  - var(--extra-padding, 0%)), 0) rotateZ(0); -webkit-transform: translate3d(-50%, calc(var(--parking-y) - 100% - 1rem  - var(--extra-padding, 0%)), 0) rotateZ(0);  -webkit-transition: 750ms; transition: 750ms var(--myEaseOut);}
.media video[data-muted=true]  ~ button.floater span:nth-of-type(1),
.media video[data-muted=false]  ~ button.floater span:nth-of-type(2) { display: none; }

body.touch-device .media button.floater{ transform: translate3d(-50%, calc(var(--parking-y) - 100% - 1rem  - var(--extra-padding, 0%)), 0) rotateZ(0); }


/* ========================================================== */
/* ======================= LARGE TEXT ======================= */
/* ========================================================== */
section.text .kicker + * { margin-top: 1rem;}
section.text .container { max-width: var(--maxWidthNarrow);}
section.text .container p:last-of-type { margin-bottom: 0;}
section.text .dots::after { background: linear-gradient(150deg, var(--myWhite) 40%, transparent);}
section.text .dots > span { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: linear-gradient(0deg, var(--myWhite) 0%, transparent 50%, var(--myWhite) 100%) }
section.text + section.text .container { margin-top: 0;}


/* =========================================================== */
/* ======================= NORMAL TEXT ======================= */
/* =========================================================== */
section.text { margin: var(--margin);}
section.text.normal .prose { font-size: var(--font-size-h5);}
section.text .container { max-width: calc(var(--maxWidthNarrow) - 8rem); margin: 0 auto; }

body.bureaus section.details + section.text  { margin: 0 auto;  }

/* =========================================================== */
/* ======================= LARGE TITLE ======================= */
/* =========================================================== */
section.title { margin: var(--margin-y-half) auto; text-align: center; }
section.title .container {margin: 0 auto; }
section.title + section.text .container { margin-top: 0; }

/* ========================================================== */
/* ====================== BUREAU SLIDER ===================== */
/* ========================================================== */
section.slider { max-width: 100vw; width: 100%; padding: var(--margin-y-half) 0 var(--margin-y) 0; margin-bottom: calc(var(--marginSingularHalf) * -1);  user-select: none; overflow: hidden;  display: flex; flex-direction: column; align-items: center;  }
section.slider .h2 { max-width: 12em;  text-align: center; margin-bottom: 1em;  width: var(--width); }
section.slider > p { margin-bottom: 2.5em; font-weight: var(--font-medium);  padding: 0 3em; text-align: center; }
section.slider > ul:first-of-type { padding-top: 2px;}
section.slider > ul { display: flex;  width: max-content; align-items: center; --m: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, var(--m), 0, 0, 1); will-change: transform; }
section.slider > ul ul { display: flex; --slider-gap: 0em;  }
section.slider > ul ul picture { max-width: 5rem; max-height: 3rem; height: auto; width: 80%;  position: relative;  background: var(--backgroundColor); }
section.slider > ul ul picture img { width: 100%;  object-fit: contain; mix-blend-mode:multiply; }
section.slider > ul ul li { min-width: 12rem; height: 4.75rem; background: transparent; border-radius: 100vmin;  display: grid; place-items: center; color: var(--myWhite); font-weight: var(--font-bold);  margin-top: -2px;  line-height: var(--line-height-regular);}
section.slider > ul ul li p { margin: 0; text-align: center; text-transform: lowercase; padding: 0 2rem;}
section.slider > ul ul li.grad { background: var(--myPurpleGradient); }
section.slider > ul ul li:not(.grad) { border: 2px solid var(--myDarkOrange); }
section.slider > ul ul .btn { font-size: .75rem;}

@media only screen and (max-width: 768px) {
    section.slider > ul ul picture { max-width: 3rem; }
    section.slider > ul ul li { width: 8rem; height: 4rem;  }
    section.slider > ul ul li.has-button {width: auto; padding: 0 1rem; }
    section.slider > ul ul li.has-button p { max-width: unset;}
    section.slider > ul ul li p { font-size: .75rem;  max-width: 8em;}
}

/* ========================================================== */
/* ==================== BUREAUS SINGLE ROW ================== */
/* ========================================================== */
section.slider.single { background: var(--myOrangeGradient); padding: var(--margin-y-half) 0;}
section.slider.single ul ul li { border: 2px solid var(--myWhite); }
section.slider.single ul ul li img { filter: brightness(0) invert(1);}

@media only screen and (max-width: 768px) {
    section.slider.single { padding: var(--margin-y-quarter) 0; }
}



/* ========================================================== */
/* ===================== ANIMATED TITLE ===================== */
/* ========================================================== */
section.animated-title { overflow: hidden;}
section.animated-title .dots::after { background: linear-gradient(0deg, var(--myWhite) 10%, transparent); }
section.animated-title .super-huge { display: flex; flex-direction: column;   text-align: center; color: var(--myDarkPurple); line-height: var(--line-height-small); margin: 0; padding: var(--margin-y-half) 0 var(--margin-y-quarter)}
section.animated-title .super-huge span { transition: transform 700ms ease var(--delay), opacity 700ms ease var(--delay); opacity: 0;}
section.animated-title .super-huge span:first-of-type { --delay: 250ms; margin-right: 2.5em; transform: translateX(-.5em);}
section.animated-title .super-huge span:last-of-type { --delay: 500ms;  margin-right: -2.5em; transform: translateX(.5em);}
section.animated-title.orange .super-huge { color: var(--myDarkOrange);  }
section.animated-title.blue .super-huge {  color: var(--myDarkBlue); }

section.animated-title .super-huge:not(.activate) span { transform: none;  opacity: 1;}
section.animated-title + section .container { margin-top: 0; }

@media only screen and (max-width: 768px) {
    section.animated-title .super-huge { padding: 0;}
}


/* ========================================================== */
/* ======================== KEURMERK ======================== */
/* ========================================================== */
section.keurmerk { isolation: unset;}
section.keurmerk .dots { z-index: 0; top: unset; bottom: 0; height: 25%;}
section.keurmerk .container { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem var(--gap); align-items: center; } 
section.keurmerk .container article { font-size: var(--font-size-h5);}
section.keurmerk .huge { max-width: 9.5em;}

figure.keurmerk { --size: clamp(6.4rem, 13vw, 10rem); --gap: .5rem; --totalSize: calc(var(--size) * 3 + var(--gap) * 2);  width: var(--totalSize); height: calc(var(--totalSize) * 0.95964285714);  display: grid; place-items: center;}
figure.keurmerk picture {  width: var(--size); }
figure.keurmerk ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  display: grid; place-items: center;}
figure.keurmerk ul li {  position: absolute;  text-transform: lowercase; font-weight: var(--font-bold);  text-align: center; letter-spacing: -2%; line-height: var(--line-height-small);  margin-bottom: 2rem; font-size: calc(var(--size) / 8); width: var(--size); height: calc(var(--size) * 1.15416666667); margin: 0; display: grid; place-items: center; color: var(--ownColor); z-index: 1; 
    --tm: calc(var(--size) * 0.5) 0%;
    --tl: 0% calc(var(--size) * 0.29);
    --tr: var(--size) calc(var(--size) * 0.29);
    --br: var(--size) calc(var(--size) * 0.29 * 3);
    --bm: calc(var(--size) * 0.5) calc(var(--size) * 1.15416666667);
    --bl: 0% calc(var(--size) * 0.29 * 3);

    --cut-from-top-left: polygon(var(--tm), var(--tm), var(--tm), var(--tl), var(--tl), var(--tl));
    --cut-from-top-right: polygon(var(--tm), var(--tr), var(--tr), var(--tm), var(--tm), var(--tm));
    --cut-from-middle-left: polygon(var(--tl), var(--tl), var(--bl), var(--bl), var(--bl), var(--tl));
    --cut-from-middle-right: polygon(var(--tr), var(--tr), var(--br), var(--br), var(--br), var(--br));
    --cut-from-bottom-left: polygon(var(--bm), var(--bm), var(--bm), var(--bm), var(--bl), var(--bl));
    --cut-from-bottom-right:  polygon(var(--br), var(--br), var(--br), var(--bm), var(--bm), var(--bm));
}
figure.keurmerk ul li:nth-of-type(1) { --ownColor: var(--myDarkPurple); transform: translate(calc(-50% - var(--gap) / 2), calc(-74.5% - var(--gap))); --clip-start: var(--cut-from-bottom-right); }
figure.keurmerk ul li:nth-of-type(2) { --ownColor: var(--myLightPurple); transform: translate(calc(50% + var(--gap) / 2), calc(-74.5% - var(--gap))); --clip-start: var(--cut-from-bottom-left);  }
figure.keurmerk ul li:nth-of-type(3) { --ownColor: var(--myLightBlue); transform: translate(calc(100% + var(--gap)), 0); --clip-start: var(--cut-from-middle-left); }
figure.keurmerk ul li:nth-of-type(4) { --ownColor: var(--myDarkBlue); transform: translate(calc(50% + calc(var(--gap) / 2)), calc(74.5% + var(--gap))); --clip-start: var(--cut-from-top-left); }
figure.keurmerk ul li:nth-of-type(5) { --ownColor: var(--myDarkOrange); transform: translate(calc(-50% - calc(var(--gap) / 2)), calc(74.5% + var(--gap))); --clip-start: var(--cut-from-top-right); }
figure.keurmerk ul li:nth-of-type(6) { --ownColor: var(--myLightOrange); transform: translate(calc(-100% - var(--gap)), 0); --clip-start: var(--cut-from-middle-right);  pointer-events: none; }
figure.keurmerk ul li strong  { max-width: 7em;  font-weight: inherit; position: relative; z-index: 5; transition: color 333ms; user-select: none;}

figure.keurmerk ul li span,figure.keurmerk ul li::before,figure.keurmerk ul li::after { position: absolute; height: 100%; width: 66.666%; border-top: .18rem solid var(--ownColor); border-bottom: .18rem solid var(--ownColor); }
figure.keurmerk ul li span { transform: scale(.87) rotate(90deg); }
figure.keurmerk ul li::before { content: ""; transform: scale(.87) rotate(30deg); }
figure.keurmerk ul li::after { content: ""; transform: scale(.87) rotate(-30deg); }

figure.keurmerk ul li div { position: absolute; display: grid; grid-template-columns: calc(var(--size) * .75) 2fr; grid-gap: 2rem; background: var(--ownColor); top: -1px; left: 0; width: 40vw; max-width: 25rem; height: auto; min-height: calc(var(--size) * 1.25);  padding: calc(var(--size) * .45) 1rem 1rem;  text-align: left; color: var(--myWhite);  pointer-events: none; transition: clip-path 333ms; clip-path: var(--clip-start);}
figure.keurmerk ul li div p { grid-column: 2; font-weight: var(--font-regular);  opacity: 0; transition: opacity 333ms; font-size: var(--font-size-body); }
figure.keurmerk ul li div button { background: var(--myWhite); display: flex; align-items: center; width: 2rem; height: 2rem; position: absolute; top: .5rem; right: .5rem; border-radius: 50%; justify-content: center;  transition: transform 333ms;}
figure.keurmerk ul li div button:hover {transform: rotate(90deg);}
figure.keurmerk ul li div button::before,figure.keurmerk ul li div button::after { content: ""; width: .8rem; height: 3px; border-radius: 1rem; background: var(--myBlack); transform: rotate(var(--r, 45deg)); position: absolute; }
figure.keurmerk ul li div button::before { --r: -45deg; }
body.resizing figure.keurmerk ul li div { transition: none;}

figure.keurmerk ul li:hover div { clip-path: polygon(var(--tm),var(--tr),var(--br),var(--bm),var(--bl),var(--tl))}
figure.keurmerk ul li:is(:hover, [data-open=true]) strong { color: var(--myWhite); }

figure.keurmerk ul li[data-open=false] { cursor: pointer; }
figure.keurmerk ul li[data-open=true] { z-index: 4; }
figure.keurmerk ul li[data-open=true] div { pointer-events: all; clip-path: polygon(var(--tm), 100% 0, 100% 100%, 0 100%, 0 100%, var(--tl));}
figure.keurmerk ul li[data-open=true] div p { opacity: 1;}

@media only screen and (max-width: 1024px) {
    section.keurmerk .container { grid-template-columns: 1fr; max-width: 30rem;}
    section.keurmerk .container figure { margin: 0 auto; }
    figure.keurmerk { --gap: .25rem;  }
    figure.keurmerk ul li div {  max-width: 20rem; width: 70vw; grid-gap: 1.5rem;  padding: calc(var(--size) * .46) 1.5rem 1rem;}
    figure.keurmerk ul li div button { width: 1.5rem; height: 1.5rem;  }
    figure.keurmerk ul li div button::before,figure.keurmerk ul li div button::after { width: .6rem; height: 2px;}

    figure.keurmerk ul li:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) { 
        --tm: calc(100% - var(--size) * 0.5) 0%;
        --tl: calc(100% - var(--size)) calc(var(--size) * 0.29);
        --tr: 100% calc(var(--size) * 0.29);
        --br: 100% calc(var(--size) * 0.29 * 3);
        --bm: calc(100% - var(--size) * 0.5) calc(var(--size) * 1.15416666667);
        --bl: calc(100% - var(--size)) calc(var(--size) * 0.29 * 3);
    }
    figure.keurmerk ul li:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) div { right: 0; left: unset; grid-template-columns: 2fr calc(var(--size) * .6);}
    figure.keurmerk ul li:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) div p { grid-column: 1;}
    figure.keurmerk ul li:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4)) div button {  right: unset; left: .5rem; }
    figure.keurmerk ul li:is(:nth-of-type(2), :nth-of-type(3), :nth-of-type(4))[data-open='true'] div { clip-path: polygon(var(--tm), var(--tr), 100% 100%, 0 100%, 0 0, 0 0) ;}
} 

@media only screen and(max-width: 768px) {
    figure.keurmerk ul li div {  grid-gap: 0.5rem; }
}

/* ========================================================== */
/* ============== MEEST RECENTE NIEUWSBERICHTEN ============= */
/* ========================================================== */
section.news .container { display: grid; grid-template-columns: 1fr  auto;  align-items: flex-end; grid-gap: 2rem;}
section.news .h2 { margin-bottom: 0;}
section.news ul { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1.75rem; grid-column: -1/1;}

li.newscard time { margin: .5rem 0; display: block; }
li.newscard a { display: block; transition: color 125ms; }
li.newscard a picture { overflow: hidden;}
li.newscard a img { transition: transform 125ms ease-in-out;}
li.newscard a:hover { color: var(--myDarkOrange);}
li.newscard a:hover img { transform: scale(1.05) ;}


@media only screen and (max-width: 850px) {
    section.news ul { display: flex; grid-gap: unset; gap: 1.75rem; overflow: auto; margin-left: calc(var(--gutterSide) * -1); width: calc(100% + var(--gutterSide) * 2); scroll-snap-type: x mandatory; }
    section.news ul li { width: 14rem; flex-shrink: 0; scroll-snap-align: center; }
    section.news ul li:first-of-type { margin-left: var(--gutterSide);}
    section.news ul::after { content: ""; width: 1px; height: 1px; opacity: 0; flex-shrink: 0;}
}

@media only screen and (max-width: 768px) {    
    section.news .container { grid-template-columns: 1fr; grid-gap: 1rem;}
    section.news .btn { order: 1; margin: .5rem auto 0;}
}


/* ========================================================== */
/* ================ FIGURE WITH NUMBERED LIST =============== */
/* ========================================================== */
section.list { color: var(--myWhite); font-size: var(--font-size-h5); overflow: hidden; max-width: var(--maxWidthWide);}
section.list > div { display: grid; grid-template-columns: 1fr 1fr; }
section.list .bg { height: 100%; position: absolute; width: 100%; }
section.list > div > :is(ol, .prose) { background: var(--myBlackGradient) }
section.list.purple > div > :is(ol, .prose) { background: var(--myPurpleGradient) }
section.list.orange > div > :is(ol, .prose) { background: var(--myOrangeGradient) }

section.list .container {  margin: 0 auto;  max-width: unset; width: 100%; }
section.list article { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;  position: relative;  padding: 1rem var(--gutterSide); }
section.list article h2 { max-width: 11em;}
section.list article :is(picture,img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
section.list article picture::after { position: absolute; bottom: 0; left: 0; width: 100%; height:100%; content: ""; background: linear-gradient(to top, var(--myBlack) 20%, transparent);  opacity: .6;}

section.list .container > ol { padding: var(--margin-y-half) calc(var(--gap) / 2);  list-style: none; counter-set: count;}
section.list .container > ol li { counter-increment: count;  display: grid; grid-template-columns: 4rem 1fr;  padding: 1.5rem 0;  position: relative;  align-items: center; }
section.list .container > ol li p { margin-bottom: 0;}
section.list .container > ol li::after { content: ""; position: absolute; top: 0; left: calc(var(--gap) / -2); width: calc(100% + var(--gap)); height: 100%; border-bottom: 2px solid var(--myWhite);  pointer-events: none;}
section.list .container > ol li:first-of-type::after { border-top: 2px solid var(--myWhite);}
section.list .container > ol li:has(:only-child)::before { grid-row: unset;}
section.list .container > ol li::before { content:counter(count) "."; font-size: 3.3rem; font-weight: var(--font-semi-bold); grid-row: span 2; margin-top: -.05em; }
section.list .container > ol li h3 { margin-bottom: 0;}

@media only screen and (max-width: 850px) {    
    section.list article { padding: 10rem var(--gutterSide) 2rem; }
    section.list .container { grid-template-columns: 1fr;}
    section.list .container > ol li { grid-template-columns: 3rem 1fr; }
    section.list .container > ol li::before { font-size: var(--font-size-huge);}
}

/* ========================================================== */
/* ==================== FIGURE WITH TEXT ==================== */
/* ========================================================== */
section.list.text .prose { padding: var(--margin-y) calc(var(--gap) / 2); }
section.list article h2:only-of-type { margin: auto;}


/* ========================================================== */
/* ======================== PREFOOTER ======================= */
/* ========================================================== */
section.prefooter :is(picture,img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
section.prefooter .container { color: var(--myWhite); padding: calc(var(--gap) * .75) var(--gap); transform: translateY(3rem) scale(.9); transform-origin: bottom; opacity: 0; transition: transform 500ms, opacity 500ms; }
section.prefooter h2 { max-width: 9.5em; line-height: var(--line-height-small);}
section.prefooter article { font-size: var(--font-size-h5); font-weight: var(--font-medium); max-width: 24em;}
section.prefooter nav.buttons { margin-top: 0;}
section.prefooter .container:not(.activate) { opacity: 1; transform: none; }
section.prefooter .container picture::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.5) 25%, transparent);}

@media only screen and (max-width: 768px) {    
    section.prefooter .container { padding: 20rem 2rem 2rem;  max-width: 30rem; }
    section.prefooter .container picture::after {background: linear-gradient(to top, rgba(0,0,0,0.5) 25%, transparent);}
}


/* ========================================================== */
/* =========================== TEAM ========================= */
/* ========================================================== */
section.team .dots { transform: scaleX(-1); opacity: .6;}
section.team .dots::before { mask-position: center 0;}
section.team .dots::after { background: linear-gradient(0deg, var(--myWhite) 0%, transparent); }
section.team {text-align: center;}
section.team .container { display: flex; flex-direction: column; align-items: center;  margin-bottom: 1.5rem;}
section.team .h1 ~ *  { font-size: var(--font-size-h4);  max-width: 24em;  }
section.team .slider { overflow: auto; max-width: 100vw; scroll-snap-type: x mandatory; scroll-behavior: smooth; cursor: grab;}
section.team .slider > ul { text-align: left; display: flex;  max-width: var(--maxWidthWide); margin: 0 auto;  gap: 1rem;}
section.team .slider > ul li { flex-shrink: 0; width: 13.5rem; scroll-snap-align: center; user-select: none;}
section.team .slider > ul li:first-of-type { margin-left: var(--gutterSide); }
section.team .slider > ul::after { width: 1px; content: ""; height: 1px; opacity: 0; pointer-events: none; flex-shrink: 0;}

section.team .scrollbar { width: var(--width); max-width: var(--maxWidth); margin: 2rem auto 0;  height: .5rem; border-radius: 100vmin; background: var(--myGrey);  position: relative; transition: opacity 500ms, margin-top 500ms;  pointer-events: none;}
section.team .scrollbar::before { content: ""; position: absolute; left: var(--l, 0); top: 0; width: var(--w, 33%); background: var(--myDarkPurple); border-radius: 100vmin;  height: 100%;  pointer-events: all; cursor: grab;}

body[data-scrolling=true] * { cursor: grabbing;}
body[data-scrolling=true] .scrollbar::before { cursor: grabbing;}
body[data-scrolling=true] section.team .slider { scroll-snap-type: none;}


/* ========================================================== */
/* =========================== PITCH ======================== */
/* ========================================================== */
section.pitch .dots { transform: scaleX(-1); opacity: .6;}
section.pitch .dots::before { mask-position: center 0;}
section.pitch .dots::after { background: linear-gradient(0deg, var(--myWhite) 0%, transparent 50%, var(--myWhite) 100%); height: 37rem; }

section.pitch .container { display: grid; grid-template-columns: 1fr 1.2fr; grid-gap: 2rem var(--gap);}
section.pitch figure { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--len), 1fr);  grid-gap: 1rem; }
section.pitch figure div { grid-column: var(--col); grid-row: var(--row-start) / span 2; }
section.pitch figure picture { height: 100%;  max-height: 25rem;}
section.pitch figure picture img { object-fit: cover;}
section.pitch article { display: flex; flex-direction: column;  font-size: var(--font-size-h4);}
section.pitch article h2:last-of-type { margin-top: auto;  padding-top: 1.5em; }
section.pitch article p:last-of-type { margin-bottom: 0; }

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

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


/* ========================================================== */
/* ======================= ADRESGEGEVENS ==================== */
/* ========================================================== */
section.adres .prose strong { font-weight: var(--font-medium);  margin: -.2em 0 .2em;}
section.adres .prose ul { list-style: none; padding: 0;}
section.adres .prose ul li a { display: flex;  gap: .5rem; text-decoration: none;}
section.adres .prose ul li a:hover { text-decoration: underline;}
section.adres .prose ul li::before { display: none;  }
section.adres .prose ul li svg { height: 1em; width: auto; margin-top: .25em; }
section.adres article { background: var(--myTrueWhite); padding: 2rem; border-radius: 1rem; }
section.pitch article h2:not(:first-of-type) { margin-top: 1.5em; padding: 0;}


/* ========================================================== */
/* ========================== MEETUPS ======================= */
/* ========================================================== */
section.meetups { overflow: hidden;}
section.meetups .dots::before { opacity: .2;}
section.meetups .dots::after { background: linear-gradient(0deg, var(--myWhite), transparent, var(--myWhite));  }
section.meetups span[aria-hidden=true] { display: none }
section.meetups .container { display: grid; grid-template-columns: 1fr auto; align-items: flex-end;   grid-gap: 2rem;}
section.meetups h2 { margin-bottom: 0; }
section.meetups .slider { grid-column: -1/1; display: flex; }
section.meetups .slider > ul { display: grid; grid-template-columns: repeat(4,1fr);  gap: 1rem; pointer-events: none; transition: transform 1000ms ease; transform: translateX(calc(-120vw * var(--i, 1) + 120vw * var(--step, 0))); }
section.meetups .slider > ul:not(:first-of-type) { position: absolute; }
section.meetups .buttons { display: flex; gap: 1rem;}
section.meetups .buttons button:first-of-type { transform: scaleX(-1); width: 2.45rem; height: 2.45rem; display: grid; padding: 0; flex-shrink: 0; max-width: unset; display: flex; justify-content: center; align-items: center;  transition: opacity 250ms;}
section.meetups[data-step='0'] .buttons button:first-of-type { opacity: 0; pointer-events: none;}
body.resizing section.meetups .slider > ul { transition: none;}

li.meetupcard { background: var(--myDarkPurple);  color: var(--myWhite); padding: 1.5rem; display: flex; flex-direction: column; position: relative;  transition: background 250ms, box-shadow 250ms; box-shadow: 0px 0px 0px rgba(0,0,0,0); pointer-events: all;}
li.meetupcard svg { height: 1.2em; width: auto;  }
li.meetupcard > strong.h2 { margin-bottom: 0; letter-spacing: -4%; }
li.meetupcard > span { text-transform: uppercase; font-size: var(--font-size-tiny);  margin-bottom: 3.5rem; }
li.meetupcard > em { font-size: var(--font-size-small); }
li.meetupcard > h3 { margin: .25rem 0 1em; }
li.meetupcard > ul { display: flex; flex-direction: column; gap: .25rem; font-size: var(--font-size-tiny);}
li.meetupcard > ul li { display: flex; align-items: center;   gap: .25rem; letter-spacing: -4%; font-weight: var(--font-semi-bold);}

/* Hover/Active */
section.meetups .slider > ul:not(:hover) li.meetupcard.first:not(:hover),
li.meetupcard:hover {  background: var(--myLightPurple); box-shadow: 0px .2rem .75rem rgba(170, 1, 200, .7);}

/* Upcoming */
li.meetupcard.first::after { content: ""; position: absolute; right: 1rem; top: -0.25rem; height: 4.5rem; background: var(--myDarkOrange);  width: 2rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);}

/* Geweest */
li.meetupcard[data-old=true] { box-shadow: none;}
li.meetupcard[data-old=true]::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--myBlack); opacity: .4; transition: opacity 250ms; }
li.meetupcard[data-old=true]:hover { background: var(--myDarkPurple);}
li.meetupcard[data-old=true]:hover::after { opacity: 0;  }

@media only screen and (max-width: 900px) {    
    section.meetups .slider {  margin-left: calc(var(--gutterSide) * -1);  width: calc(100% + var(--gutterSide) * 2);}
    section.meetups .slider > ul { overflow: auto; margin: -1rem 0; padding: 1rem 0; max-width: 100vw; scroll-snap-type: x mandatory; display: flex; }
    section.meetups .slider > ul > li { scroll-snap-align: start; scroll-margin-left: 1rem; min-width: 14rem;}
    section.meetups .slider > ul > li:first-of-type { margin-left: var(--gutterSide);}
    section.meetups .slider > ul::after { content: ""; height: 1px; width: 1px; flex-shrink: 0; opacity: 0; pointer-events: none; }
    
    section.meetups .container { grid-gap: 1rem; }
    section.meetups .buttons { grid-column: -1/1; order: 2; margin-top: .5rem;  justify-content: flex-end; }
}



/* ========================================================== */
/* =================== ALLE NIEUWSBERICHTEN  ================ */
/* ========================================================== */
div.top { height: calc(7rem + var(--borderRadius)); background: var(--myPurpleGradient); isolation: isolate; position: relative; }
div.top .dots::before { background: var(--myDarkPurple); opacity: .2;}
div.top .dots::after { opacity: 0;}
div.top + section { margin-top: calc(var(--borderRadius) * -1);  padding-top: 0; border-radius: var(--borderRadius) var(--borderRadius) 0 0;  }

section.bare .container { display: grid; grid-template-columns: 1fr auto; align-items: flex-end;  margin-top: var(--borderRadius);   }
section.bare nav .btn { color: var(--myBlack); border: 2px solid var(--myBlack); }
section.bare nav .btn:hover { background: var(--myWhite); color: var(--myBlack); border: 2px solid var(--myBlack); }
section.bare nav a.btn:hover { background: var(--myDarkPurple); border: 2px solid var(--myDarkPurple);  color: var(--myWhite);}
section.bare nav { display: flex; flex-wrap: wrap; gap: .5rem .8rem;}
section.bare .h1 { margin: 0; }
section.bare nav .btn::before,section.bare nav .btn::after { display: none; }
section.bare nav .btn.active { background: var(--myLightPurple); border: 2px solid var(--myLightPurple); color: var(--myWhite);}

section.all-news ul { grid-column: -1/1;}
section.all-news ul.list { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); display: grid;  margin-top: 3rem; grid-gap: 1rem;}

ul.pagination { display: flex; align-items: center; max-width: var(--maxWidthNarrow); width: 100%; justify-content: center; margin: 2rem auto 0;   gap: .25em;}
ul.pagination li { display: flex;  transition: background 250ms; }
ul.pagination .empty { opacity: 0;}
ul.pagination li a { width: 1.5em; height: 1.5em; display: flex; align-items: center;justify-content: center;  font-weight: var(--font-semi-bold);}
ul.pagination li.page-dots {padding: 0.25em; pointer-events: none;} 
ul.pagination li:not(.page-dots):hover { background: var(--myDarkPurple); color: var(--myWhite); }
ul.pagination .active:is(:hover,:not(:hover)) a { background: var(--myDarkPurple); color: var(--myWhite); }

@media only screen and (max-width: 768px) {
    section.bare .container { grid-template-columns: 1fr;}
    section.bare .container nav { margin-top: 1rem;}
    section.all-news ul.list  { margin-top: 2rem;  }
}


/* ========================================================== */
/* =========================== POST  ======================== */
/* ========================================================== */
section.post .container {  max-width: var(--maxWidthWide); width: 100%;  margin-bottom: 2rem;}
section.post .container > .btn { margin: 3rem auto 0; }
section.post .inner { display: grid; grid-template-columns: 1fr auto; max-width: var(--maxWidth); width: var(--width); margin: 0 auto; align-items: flex-start;  grid-gap: 0 2rem;  margin-bottom: var(--gap);}
section.post h1 { max-width: 18em;}
section.post article { display: grid; grid-template-columns: 1fr 1fr; grid-column: -1/1; align-items: flex-start; }
section.post article > picture { height: 100vh; height: 100dvh; position: sticky; top: 0;  }
section.post article > picture img { object-fit: cover;}
section.post article .prose { padding: 2rem;  background: var(--myBlackGradient); color: var(--myWhite); min-height: 100%;}
section.post article .prose ul li::before { background-image: url('/img/icons/check-circled-white.svg')}

section.post article.no-image { grid-template-columns: 1fr;   background: var(--myBlackGradient);}
section.post article.no-image .prose { max-width: 40rem; background: none; margin: 0 auto; }

@media only screen and (max-width: 850px) {
    section.post article { grid-template-columns: 1fr;}
    section.post article > picture { height: auto; position: relative; top: unset;}
}

@media only screen and (max-width: 768px) {
    section.bare .inner { grid-template-columns: 1fr;}
    section.bare .inner nav { margin-top: 1rem;}
}


/* ========================================================== */
/* ========================= PARTNERS  ====================== */
/* ========================================================== */
section.partners { margin: var(--margin-y-half) auto;}
section.partners .container { margin: 0 auto; }
section.partners .container > ul { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); display: grid;  grid-gap: 1rem; }
section.partners .container > ul:not(:last-of-type) { margin-bottom: var(--margin-y-half);}

li.partnercard { background: var(--myDarkPurple); color: var(--myWhite);  padding: 1.25rem; display: grid; grid-gap: 0.5rem 1rem;  grid-template-columns: 1fr auto;  grid-template-rows: 3.5rem auto auto;}
li.partnercard > div { grid-column: -1/1; margin-bottom: 1rem; }
li.partnercard picture { max-width: 6rem; align-items: flex-start;  grid-column: -1/1; margin-bottom: 2rem; }
li.partnercard picture img { max-height: 2.5rem; width: auto; max-width: 100%; }
li.partnercard .prose { font-size: var(--font-size-small); line-height: var(--line-height-regular); letter-spacing: -2%; margin-bottom: 2rem;}
li.partnercard .prose > *:last-child { margin-bottom: 0;}

li.partnercard span { background: var(--myLightPurple); border-radius: 100vmin; margin-top: auto; max-width: max-content; color: var(--myWhite); padding: var(--btnPadding); font-size: var(--font-size-tiny);  font-weight: var(--font-semi-bold); display: flex; align-items: center; gap: .5rem;}
li.partnercard span::before { content: ""; display: inline-block; width: .5rem; margin-top: .05em; height: .75rem;  background: var(--ownColor, var(--myDarkOrange)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);} 

li.partnercard a.btn { padding: 0; margin-top: auto; width: 1.9rem; height: 1.9rem; display: flex; align-items: center; justify-content: center; border: 2px solid var(--myWhite); border-radius: 50%;  max-width: unset;  background: transparent; }
li.partnercard a.btn::after { rotate: -45deg; }
li.partnercard a.btn::before { right: 0.45em; background-image: url("/img/icons/arrow-purple.svg"); }
li.partnercard a.btn:hover { background: var(--myWhite);}

li.partnercard span.partner { --ownColor: var(--myLightOrange);  }
li.partnercard span.premium-partner { --ownColor: var(--myDarkOrange); background: var(--myPurpleGradientAngled);  }
li.partnercard span.business-partner { --ownColor: var(--myLightOrange);  }
li.partnercard span.partner-opleidingen { --ownColor: var(--myLightOrange);  }
li.partnercard ul.contact > li { font-size: var(--font-size-small);   margin-bottom: .5rem; display: flex; align-items: center; }
li.partnercard ul.contact > li:last-of-type { margin-bottom: 0;}
li.partnercard ul.contact li strong { font-weight: var(--font-semi-bold); margin-bottom: .25em; display: inline-block;  margin-left: .5rem; 2;}
li.partnercard ul.contact li a { width: 1.2rem; height: 1.2rem; display: grid; place-items: center;   border-radius: 50%; background: var(--myWhite); padding: 0.3rem;  color: var(--myDarkPurple);}
li.partnercard ul.contact li a.tel { padding: .35rem;}
li.partnercard ul.contact li ul { display: flex; gap: .25rem;}

@media only screen and (max-width: 768px) {
    li.partnercard span {  width: 2.4rem; height: 2.4rem;}
    li.partnercard span::before { right: 0.6em; }
}



/* ========================================================== */
/* ======================= ALLE BUREAUS  ==================== */
/* ========================================================== */
section.bureaus .container { display: grid; grid-template-columns: auto 1fr; align-items: flex-start;  grid-gap: 0 var(--gap) }
section.bureaus .container .h2 { grid-column: -1/1; text-align: center;  margin-bottom: 2rem; }

section.bureaus .left { height: 100%; max-width: 19.5rem; }
section.bureaus .left > div:first-of-type .h3 { display: block; }

section.bureaus .filter .h4 { display: block; }
section.bureaus fieldset:not(:first-of-type) { margin-top: 2rem;}
section.bureaus fieldset.checks input {  display: none; }
section.bureaus fieldset.checks li { margin-bottom: .6em; font-size: var(--font-size-small); display: flex; }
section.bureaus fieldset.checks li[data-left-over='0']:not(:first-of-type) { display: none; }
section.bureaus fieldset.checks label { padding-left: 1.9em;  position: relative;  font-weight: var(--font-semi-bold); user-select: none;  max-width: 18rem;  transition: color 250ms; }
section.bureaus fieldset.checks label span { color: var(--myDarkPurple); }
section.bureaus fieldset.checks label:hover { color: var(--myDarkPurple); }
section.bureaus fieldset.checks label::before,section.bureaus fieldset.checks label::after { content: ""; position: absolute; left: 0;  top: .075em; height: .9rem; width: .9rem; border: 2px solid var(--myBlack);  transition: background 333ms, border; border-radius: 50%;}
section.bureaus fieldset.checks label::after { background: url('/img/icons/check.svg') 50% 55% / 50% 50% no-repeat; opacity: 0; transition: opacity 333ms;}
section.bureaus fieldset.checks input:checked + label::after { opacity: 1; border: none;}

section.bureaus .filter { top: 6rem; }
section.bureaus .filter[data-sticky=true] { position: sticky; top: 6rem; }

section.bureaus .filter ul { display: flex; flex-direction: column; }
section.bureaus .filter .mobile { display: none; }
section.bureaus .filter .more { order: 4; margin-top: .25rem; font-size: var(--font-size-small); font-weight: var(--font-medium);}
section.bureaus .filter .more ~ li { margin-bottom: 0;}
section.bureaus .filter .more ~ li > *:not(:is(input:checked, input:checked ~ label)) { display: none; }
section.bureaus .filter .more button { position: relative; display: flex; color: var(--myBlack); text-decoration: underline; text-underline-offset: .25rem;  transition: color 250ms;}
section.bureaus .filter .more button:hover { color: var(--myDarkPurple); }

section.bureaus .filter fieldset[data-show=true] .more ~ li { margin-bottom: .6rem;}
section.bureaus .filter fieldset[data-show=true] .more ~ li label { display: block;}
section.bureaus .filter fieldset[data-show=true] .more button::before { --r: -45deg;  }
section.bureaus .filter fieldset[data-show=true] .more button::after { --r: 45deg;  }

section.bureaus ul.list { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1.2rem; }
section.bureaus ul.list li.bureaucard[data-visible=false] { display: none; }

section.bureaus button.reset { position: relative; display: flex; color: var(--myBlack); text-decoration: underline; text-underline-offset: .25rem; font-weight: var(--font-medium); transition: color 250ms; margin-top: 1.5rem;   font-size: var(--font-size-small);}
section.bureaus button.reset:hover { color: var(--myBlack); }

section.bureaus .mobile :is(button, a):not(.btn) { position: relative; display: flex; color: var(--myBlack); text-decoration: underline; text-underline-offset: .25rem; font-weight: var(--font-medium); transition: color 250ms; margin: 0;}
section.bureaus .mobile :is(button, a):not(.btn):hover { color: var(--myDarkPurple); }

section.bureaus .filter div.mobile:not(button) {justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 1rem; position: sticky; bottom: 0rem; border-top: 2px solid var(--myBlack); background: var(--myWhite); padding: 1rem .5rem 1rem 0.25rem; width: calc(100% + 2rem);   margin-left: -1rem; grid-gap: 1rem;}
section.bureaus .filter div.mobile:not(button) a { display: flex; align-items: center; gap: .3rem;}
section.bureaus .filter div.mobile:not(button) button:last-of-type { width: 100%; justify-content: center;  }
section.bureaus .filter button.x { position: sticky; top: 1rem;   margin: .5rem -.75rem 1.5rem auto; width: 2.5rem; height: 2.5rem; border-radius: 50%;  align-items: center; justify-content: center; transition: background 250ms;  z-index: 3; }
section.bureaus .filter button.x::before,section.bureaus .filter button.x::after { content: ""; width: 1.3rem; height: 3px; background: var(--myBlack); content: ""; position: absolute; transform: rotate(var(--r, -45deg)); border-radius: 1rem;}
section.bureaus .filter button.x::before { --r: 45deg; }
body.resizing section.bureaus .container .left.left { transition: 0s;}

li.bureaucard strong { margin: .5rem 0; display: block; }
li.bureaucard a { display: block; transition: color 125ms; }
li.bureaucard a picture { overflow: hidden;}
li.bureaucard a img { transition: transform 125ms ease-in-out;}
li.bureaucard a:hover { color: var(--myDarkOrange);}
li.bureaucard a:hover img { transform: scale(1.05) ;}

section.bureaus fieldset.search :is(input, select) { padding: .56rem 0 .56rem .5rem; height: 2.6rem; font-family: var(--primaryFont);  background: var(--myWhite); opacity: 1;  border: 2px solid var(--myBlack); font-size: 16px; width: 100%; max-width: 8.5rem;  border-radius: 0;}
section.bureaus fieldset.search input::placeholder { font-weight: var(--font-semi-bold); color: var(--myBlack); opacity: .5; font-size: 16px; }
section.bureaus fieldset.search input { border-right: 0;}
section.bureaus fieldset.search select { border-left: 0;}
section.bureaus fieldset.search :is(:focus,:focus-visible) { outline: none;}

section.bureaus fieldset.search > div.location:has(:focus, :focus-visible) { outline: 2px solid var(--myLightPurple); }
section.bureaus fieldset.search > div:not(.buttons) { display: flex; align-items: center; width: 100%; }
section.bureaus fieldset.search > div input { background: transparent; font-weight: var(--font-semi-bold);}
section.bureaus fieldset.search > div .select { display: flex; align-items: center;   position: relative; height: 100%; height: 2.6rem;  width: 5.25rem;}
section.bureaus fieldset.search > div .select::before { content: ""; position: absolute; left: 0; height: calc(100% - 1em);  top: .5em; width: 2px; background: var(--myBlack);}
section.bureaus fieldset.search > div .select label { display: flex; align-items: center;  padding: .625rem .8rem;  font-weight: var(--font-semi-bold); justify-content: flex-end; margin-right: 1rem; font-size: 16px; width: 100%; }
section.bureaus fieldset.search > div .select label span { white-space: nowrap; }
section.bureaus fieldset.search > div .select label svg { width: 0.3rem;  height: auto; flex-shrink: 0; transform: rotate(90deg); right: -.66rem; position: relative;  }
section.bureaus fieldset.search > div .select label svg path { fill: var(--myBlack)}
section.bureaus fieldset.search > div select  { background: none;  color: transparent; cursor: pointer;   position: absolute; top: 0; left: 0; width: 100%; height: 100%;   appearance: none; -moz-appearance: none; -webkit-appearance: none;  padding: 0;  }
section.bureaus fieldset.search button.toggle-filter-mobile { display: none; }


@media only screen and (max-width: 1250px) {
    section.bureaus ul.list { grid-template-columns: 1fr 1fr; }
}

@media only screen and (max-width: 950px) {
    section.bureaus .container { grid-template-columns: 1fr; }
    section.bureaus .container .top { grid-column: 1;}
    section.bureaus .container .left { position: fixed; top: 0; left: 0; background: var(--myWhite); transform: translateX(-100%); transition: transform var(--load-transition, 500ms); padding: 0rem 1.5rem 0rem; max-width: 21rem;  width: calc(100% - 4.5rem);  z-index: 99;  height: 100vh; height: 100dvh; overflow: auto; overscroll-behavior: none; }
    section.bureaus fieldset.search :is(input, select) { max-width: unset;}
    section.bureaus fieldset.search > div .select label { margin-right: .8rem; }
    section.bureaus .container .left .filter { top: unset; }
    section.bureaus .container .left .filter::before { position: sticky; display: block;  top: 0; left: -.5rem; width: calc(100% + 1rem); height: 4rem; background: var(--backgroundColor); content: "";   margin: 0 0 -3.5rem -.5rem; z-index: 2; }
    section.bureaus .container .left + ul::before { position: fixed; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--myDarkBlue); z-index: 98;  opacity: 0; pointer-events: none;  transition: opacity 500ms;}
    section.bureaus .buttons { justify-content: center; position: fixed;  bottom: 1rem; left: 0; margin: 0 auto; z-index: 2;align-items: flex-end; width: 100%; pointer-events: none; transition: transform var(--load-transition, 500ms); transform: translateY(calc(100% + 1rem));  }
    section.bureaus[data-active=true] .buttons { transform: none;}
    section.bureaus .buttons .btn { pointer-events: all; }
    section.bureaus .buttons .btn::before,section.bureaus .buttons .btn::after { display: none; }
    section.bureaus .buttons .btn svg { width: .9rem;  margin-top: .1em;}
    section.bureaus .filter .mobile,
    section.bureaus .mobile { display: flex; }
    section.bureaus button.reset { display: none; }
    section.bureaus fieldset.checks li { font-size: var(--font-size-body); }

    section.bureaus .left[data-open=true] { transform: translateX(0); }
    section.bureaus .left[data-open=true] + ul::before { opacity: .5; pointer-events: all; }
    section.bureaus .left .count[data-one=true]  + span {  display: none; }
    section.bureaus .left .count[data-one=false] + span + span {  display: none; }
    section.bureaus button.reset,
    section.bureaus .filter .more { font-size: var(--font-size-body); }
}
@media only screen and ( max-width: 650px) {
    section.bureaus .container { max-width: 30em;}
    section.bureaus ul.list { grid-template-columns: 1fr;}
    section.bureaus .top { justify-content: center; }
}


/* ========================================================== */
/* ====================== BUREAU SINGLE  ==================== */
/* ========================================================== */
section.details .container > div { grid-column: -1/1; display: grid; grid-template-columns: 1fr 2fr; grid-gap: 1rem; margin-top: 2rem; }

section.details address { background: var(--myTrueWhite); border-radius: 1rem; padding: 3rem;  font-size: var(--font-size-h5); display: flex; flex-direction: column; }
section.details address > a:not(.btn) {  display: grid; grid-template-columns: 1rem auto;   grid-gap: 1rem;}
section.details address > a:not(.btn) svg { margin-top: .1rem;}
section.details address > a:not(.btn):hover { text-decoration: underline;}
section.details address > ul { margin-bottom: 2rem;}
section.details address > a.btn { margin-top: auto; }
section.details address h2 { margin-bottom: .2em; font-weight: var(--font-semi-bold);}
section.details address h2:not(:first-of-type) { margin-top: 1em ;}
section.details address li strong { font-weight: var(--font-medium); display: block; margin-bottom: .33rem;}
section.details address > ul > li:not(:last-of-type, :only-of-type) { margin-bottom: 1rem; }
section.details address li ul { display: flex; align-items: center; gap: .5rem;}
section.details address li li a { color: var(--myWhite); background: var(--myDarkPurple); border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;   transition: background 250ms;}
section.details address li li a:hover { background: var(--myLightPurple); }
section.details address li li a svg { height: 1rem; width: auto; }
section.details address li li a.mail svg { height: .8rem; }
section.details .pictures { position: relative; }
section.details picture:first-of-type { min-height: 100%; }
section.details picture:first-of-type img { border-radius: 1rem; object-fit: cover;}
section.details picture + picture { position: absolute;  bottom: 1rem; right: 1rem; padding: .5rem; background: var(--myWhite);  border-radius: .75rem; max-width: 5rem; max-height: 3rem;}
section.details picture + picture img { mix-blend-mode: multiply; object-fit: contain;}


@media only screen and (max-width: 768px) {
    section.details .container > div { grid-template-columns: 1fr;}
    section.details address { order: 2; padding: 2rem; }
}

/* ========================================================== */
/* ====================== REDENEN SWITCHER ================== */
/* ========================================================== */
section.reasons .container { background: var(--myOrangeGradient); padding: 2rem; border-radius: 1rem; color: var(--myWhite); display: grid; grid-template-columns: 1fr 2fr; align-items: flex-start; grid-gap: 1rem var(--gap); max-width: var(--maxWidthNarrow); margin: 0 auto var(--margin-y-quarter); }  
section.reasons .buttons { display: flex; align-items: center; gap: .5rem;}
section.reasons button.btn { padding: 0.75em;}
section.reasons button.btn:hover { background: var(--myWhite);}
section.reasons button.btn::after { transform:  translateX(.05em) rotate(-45deg); }
section.reasons button.btn::before { right: 0.7em;background-image: url("/img/icons/arrow-orange.svg"); }

section.reasons .h3 { font-weight: var(--font-semi-bold); line-height: var(--line-height-regular);}
section.reasons ul li { position: absolute;  top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
section.reasons ul li[aria-hidden=false] { opacity: 1; pointer-events: all;}

section.reasons .bottom { display: flex; flex-direction: column;  justify-content: flex-end; }
section.reasons .bottom ul { margin-top: auto; }
section.reasons .bottom li { font-size: 15rem; font-weight: var(--font-semi-bold);  line-height: 1; letter-spacing: -4%; margin-bottom: -.125em; margin-top: .3rem; clip-path: inset(0 0 28% 0); bottom: 0; left: 1rem; top: unset;}

section.reasons .right { position: relative;  width: 100%; height: var(--height); min-height: 13rem; transition: height 500ms;  }
section.reasons .right { grid-row: span 2; max-width: 23rem; margin-left: auto; font-size: var(--font-size-h5);line-height: 1.1; }
section.reasons .right p:last-of-type { margin-bottom: 0; }

@media only screen and (max-width: 768px) {
    section.reasons button.btn { right: 0.6em; }
}



/* ========================================================== */
/* =================== TRAJECT & TARIEVEN =================== */
/* ========================================================== */
section.traject .container { padding: 1rem; background: var(--myTrueWhite);  border-radius: 1rem;}
section.traject .steps { margin-top: 1rem; overflow: hidden; }
section.traject .steps > li { padding: .7rem .5rem; display: grid; grid-template-columns: auto 1fr; grid-gap: 2rem; margin-bottom: 1rem; border-radius: .5rem; border: 2px solid transparent; position: relative; }
section.traject .steps > li div > strong { display: block;  margin-bottom: 0;}
section.traject .steps > li div:has(strong + *) > strong { margin-bottom: .25em;}
section.traject .steps > li > span { width: calc(1.7rem + 4px); height: calc(1.7rem + 4px); border-radius: 50%; background: var(--myDarkPurple); color: var(--myWhite);  display: grid; place-items: center; font-weight: var(--font-medium); letter-spacing: -2%; position: relative;  border: 4px solid var(--myTrueWhite); transform: translateY(-2px);  z-index: 2;}
section.traject .steps > li p:last-of-type { margin-bottom: 0;}
section.traject .steps > li p strong { font-weight: var(--font-semi-bold);}

section.traject .steps > li.orange { background: var(--myWhite); border: 2px solid var(--myGrey);}
section.traject .steps > li.orange > span { background: var(--myDarkOrange); border: 4px solid var(--myWhite);}
section.traject .steps > li:not(:last-of-type)::before { height: calc(100%  - .7rem); width: 3px;  content: ""; background: var(--myDarkPurple);  position: absolute; left: calc(.5rem + .85rem + 2px); transform: translateX(-50%);  top: calc(.7rem + 1.7rem + 4px); z-index: 2; }

section.traject .tarieven { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: .5rem; }
section.traject summary::marker { content: ""; }
section.traject details {  margin-top: .5em; position: relative; }
section.traject details p { padding-left: calc(1em + .5rem); margin-top: .5rem; }
section.traject summary { font-weight: var(--font-semi-bold);  cursor: pointer; user-select: none;  }
section.traject details[open] summary,
section.traject summary:hover { color: var(--myDarkOrange); --ownColor: var(--myDarkOrange)}
section.traject summary span { display: inline-flex; align-items: center; justify-content: center;  width: 1em; height: 1em;  padding: 0.2em; border: 2px solid var(--ownColor, var(--myBlack));  border-radius: 50%; top: -0.21em; margin-right: .5rem; position: relative; }
section.traject summary span svg { width: 100%; height: auto; }
section.traject details[open] summary span {transform: rotate(180deg);  }


@media only screen and (max-width: 768px) {
    section.traject .steps > li { grid-gap: 1rem;}
    section.traject .steps > li > span { font-size: var(--font-size-small); }
}


/* ========================================================== */
/* ==================== STICKY TEXT SCROLLER ================ */
/* ========================================================== */
section.sticky-scroll .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap); align-items: flex-start; margin: 2rem auto;  }
section.sticky-scroll .container > picture { margin: 0 auto; max-width: 18rem;  position: sticky; top: 25vh;}
section.sticky-scroll .container > ul { max-width: 30rem; margin-left: auto; }
section.sticky-scroll .container > ul li {  margin-bottom: 3rem; opacity: 0; transform: translateY(1rem);  transition: opacity 500ms ease 500ms, transform 500ms ease 500ms;  font-size: var(--font-size-h5);}
section.sticky-scroll .container > ul :is(li:last-of-type, li:last-of-type p:last-of-type) { margin-bottom: 0;}
section.sticky-scroll .container > ul li .h4 { margin-bottom: .2em;}
section.sticky-scroll .container > ul li:not(.activate) { opacity: 1; transform: none;}

@media only screen and (max-width: 1024px) {
    section.sticky-scroll .container {grid-template-columns: auto 1fr; gap: 0 2rem; }
    section.sticky-scroll .container > picture { max-width: clamp(2rem, 18vw, 10rem); top: 5rem;}
}



/* =========================================================== */
/* =========================== FAQ =========================== */
/* =========================================================== */
section.faq .container { display: flex; flex-wrap: wrap; justify-content: space-between;}
section.faq .container h2 { margin-bottom: 0.2em;}
section.faq .container h2:not(:first-of-type) { margin-top: 2em; }

section.faq ul.faq { list-style: none; padding: 0; width: 100%; }
section.faq ul.faq button { color: inherit; background: inherit; border: inherit;  font-size: inherit; display: block; line-height: inherit; width: 100%; text-align: left;}
section.faq ul.faq > li { border-bottom: 2px solid var(--myBlack);}
section.faq ul.faq > li .h4 { margin-bottom: 0;}
section.faq ul.faq > li button { padding: 1rem 0 1rem; display: flex; align-items: center; cursor: pointer;  transition: padding 333ms, color 333ms; user-select: none;}
section.faq ul.faq > li button span { width: 2rem; height: 2rem; background: var(--myDarkOrange); margin-left: auto; border-radius: .25rem;  display: flex; align-items: center; justify-content: center;  transition: background 333ms;}
section.faq ul.faq > li button span::before,section.faq ul.faq > li button span::after { content: ""; position: absolute;  width: .9rem; height: 2px; border-radius: 1rem; background: white; transform: rotate(var(--r, 0deg));  transition: transform 333ms;}
section.faq ul.faq > li button span::before { --r: -90deg;}
section.faq ul.faq > li button:hover { color: var(--myLightPurple); }
section.faq ul.faq > li button:hover span { background: var(--myLightPurple);  }
section.faq ul.faq > li > div { transition: padding 333ms, max-height 333ms; overflow: hidden;  width: calc(100% - 3rem);}
section.faq ul.faq > li > div[aria-hidden=true] { max-height: 0px; }

/* Opened */
section.faq ul.faq > li > div[aria-hidden=false] { padding-bottom: 1rem;  max-height: var(--height, unset);}
section.faq ul.faq > li button[aria-expanded=true] { padding-bottom: 1rem;}
section.faq ul.faq > li button[aria-expanded=true]:not(:hover) span { background: var(--myLightOrange);}
section.faq ul.faq > li button[aria-expanded=true] span::before { --r: 0deg; }



/* =========================================================== */
/* ========================= SEARCH ========================== */
/* =========================================================== */
section.results .container { margin-top: 2em; display: flex; flex-direction: column;  }
section.results .container > ul { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-gap: 1em; }
section.results .container > ul > li { border: 1px solid var(--myGrey); border-radius: var(--halfBorderRadius); }
section.results .container > ul > li a { min-height: 13em; padding: 1em;  display: block; transition: background 333ms; height: 100%;  border-radius: var(--halfBorderRadius);}
section.results .container > ul > li a:hover { background: var(--myTrueWhite);}
section.results .container > ul > li a strong { margin-bottom: .8em; font-size: var(--font-size-tiny);}
section.results .container > ul > li a strong::before, section.results .container > ul > li a strong::after { display: none; }
section.results .container > ul > li a strong.pagina { background: var(--myDarkOrange);}
section.results .container > ul > li a strong.bureau { background: var(--myLightPurple);}
section.results .container > ul > li a strong.page { background: var(--myLightBlue);}
section.results .container > ul:not(:empty) ~ .no-results { display: none; }

section.results .no-results { max-width: 32em; margin: 0 auto; display: none; }
section.results .no-results h2 { font-size: var(--font-size-h6); }
section.results .no-results ul { list-style: initial; padding-left: 1em; }
section.results .no-results ul li { margin-bottom: .25em;}

section.results li.first-view.first-view  {grid-column: -1/1; border: none; text-align: center; max-width: 25rem; margin: 2rem auto;  }


body.show section.results .container > *:not(ul) { display: initial; }

form.searchbar { display: flex; align-items: center; position: relative; margin-top: auto;  width: 100%; max-width: 20rem;}
form.searchbar input { font: inherit; width: 100%; padding: .5em 2.8em .5em .8em;  background: var(--myWhite);  transition: background 250ms, color 250ms, border 250ms; width: 100%; border-radius: .25rem;}
form.searchbar input:focus-visible { outline: 2px solid var(--myDarkOrange); }
form.searchbar input::placeholder { opacity: .5; }

form.searchbar button { position: absolute; right: 0; height: 100%; display: flex; align-items: center; justify-content: center;  width: 2.25rem; border-radius: .25rem; }
form.searchbar button::before { width: 100%; height: 100%; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--myDarkOrange); border-radius: 50%;  opacity: 0; transition: opacity 250ms; border-radius: .25rem;}
form.searchbar button svg { transition: color 250ms; position: relative; z-index: 2;  height: 100%; width: 1em;  color: var(--mainColor); }
form.searchbar button:hover svg { color: var(--myWhite);}
form.searchbar button:hover::before { opacity: 1;}

body.search footer { margin-top: calc(var(--borderRadius) * -1);}

@media only screen and (max-width: 1024px) {
    section.results .container > ul {grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media only screen and (max-width: 768px) {
    section.results .container > ul {grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media only screen and (max-width: 450px) {
    section.results .container > ul {grid-template-columns: 1fr; }
}

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

    /* Inputs */
    --form-main-color: var(--scheme-primary);
    --form-input-background-color: var(--myGrey);
    --form-padding-x: .5em;  
    --form-padding-y: .8em;  
    --form-padding: var(--form-padding-y) var(--form-padding-x);

    /* Borders */
    --form-border-color: transparent;  
    --form-border-width: 1px;  
    --form-border-radius: 0.25rem; 
    
    /* Labels */
    --form-label-color: var(--scheme-primary);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: var(--scheme-background); 
    --form-label-asterisk-color: var(--myBlack);
    --form-label-transform-distance: 100%; 
    
    /* Checkboxes */
    --form-check-border-radius: .2em;

    /* States */
    --form-color-focus: var(--myLightPurple);
    --form-color-error: maroon;

    /* 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(--primaryFont); 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);   text-align: center;}
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 + label { top: 50%;  transform: translate(-50%, -50%);}
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 { position: absolute;  top: calc(var(--form-padding-y) - .1em);  left: 50%;  opacity: .85; pointer-events: none; transform-origin: center; transition: var(--form-transition); white-space: nowrap; color: var(--form-label-color);  border-radius: var(--form-label-border-radius); font-weight: var(--font-semi-bold); transform: translateX(-50%);}
form.custom .normal :is(textarea:is(:focus,:not(:placeholder-shown)), input:is(:focus, :not(:placeholder-shown))) + label, form.custom .select[data-active=true] label { transform: translate(calc(-50%), 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 .normal :is(textarea:is(:focus,:not(:placeholder-shown))) + label, form.custom .select[data-active=true] label { top:  calc(var(--form-padding-y) - .1em); }
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: "Invalid"; 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: var(--form-padding-y); 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-semi-bold); opacity: 0; }
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; font-size: var(--font-size-small);  max-width: 25rem; opacity: .8;}
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 { border: 1px solid 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(--myBlack); 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; }

/* SEND BTN */
form.custom .btn { margin-top: 1rem; }

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

@media only screen and ( max-width: 650px) {
        form.custom fieldset { grid-template-columns: 1fr;}
}


/* --------------- PROSE CONTENT --------------- */
.prose:not(.no-flow) > * + * { margin: 1.5em 0 0;}
.prose img,  .prose iframe { width: 100%; } 
.prose ul, .prose ul ul ul { list-style: none; }
.prose ul > li, .prose ul ul ul > li { position: relative; }
.prose :is(ol,ul)  { padding-left: 1.25em;}
.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(--mainColor);}
.prose > * strong { font-weight: var(--font-semi-bold); }
.prose > * em { font-style: italic; }
.prose a:not(.btn, .big-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 ul > li, .prose ul ul ul > li { margin-bottom: .5em;}
.prose ul > li::before, .prose ul ul ul > li::before { content: ""; width: 1em; height: 1em; background: url('/img/icons/check-circled.svg') center center / 65% 65% no-repeat; display: inline-block; position: absolute;   left: -1.25em; top: .2em; }

section.standard .prose h1 { font-size: var(--font-size-h2);}
section.standard .prose h2 { font-size: var(--font-size-h3);}
section.standard .prose h3 { font-size: var(--font-size-h4);}
section.standard .prose h4 { font-size: var(--font-size-h5);}

.prose.special-list > ul > li::before, .prose.special-list ul ul ul > li::before { display: none;  }
.prose.special-list > ul > li picture { width: .9em; height: .9em; display: inline-block; position: absolute;   left: -1.25em; top: 0.08em; }

/* --------------- 404 PAGE --------------- */
section.not-found { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%;}


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


/* --------------- MEDIA QUERIES --------------- */
/* MIN */
@media only screen and (min-width: 69rem) { 
    /* --------------- HEADER --------------- */
    nav#main { max-width: 50vw;}
    nav#main li span { max-width: 32.5rem;  max-height: calc(var(--font-size-body) * 5);}
    /* nav#main li.arrow button { max-width: 34.5rem;  max-height: calc(var(--font-size-body) * 5);} */
}

/* MAX */
@media only screen and (max-width: 850px) {
    /* --------------- FOOTER --------------- */
    footer > nav { grid-template-columns: 1fr; margin-top: 3rem;}
    footer > nav > ul { margin-left: 0;  }
    footer ul.socials { margin-top: 1rem;}

}
@media only screen and (max-width: 768px) {
    :root { 
        --logoWidth: 7rem; 
        --gutterTop: 1rem; 
        --gutterSide: 1rem; 

        --font-size-super-huge: 2.8rem;  /* 64px */
        --font-size-huge: 2.3rem;  /* 64px */
        --font-size-h1: 1.9rem;     /* 52px */
        --font-size-h2: 1.8rem;     /* 50px */
        --font-size-h3: 1.4rem;    /* 40px */
        --font-size-h6: 1rem; 
        --font-size-body: 1rem; 
        --font-size-small: .75rem;
        --font-size-tiny: .75rem;
    }
    html { font-size: 16px;}
    /* --------------- HEADER --------------- */
    nav#main, .mobile { display: block; }
    label.burger { display: flex; }
    nav#desktop > ul li:nth-of-type(2) { position: fixed; left: 0; right: 0; margin: 0 auto; bottom: 2rem; display: flex; justify-content: center; transform: translateY(calc(100% + 2rem)); transition: transform var(--load-transition, 500ms);}
    input.burger:checked ~ header nav#desktop > ul li:nth-of-type(2) { transform: none;}
    nav#main li.arrow ul.submenu.dual.dual { column-count: unset; display: grid; grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: unset;}
    header { pointer-events: none;}
    nav#desktop li, nav#main { pointer-events: all;}
    nav#main li.arrow > span { font-size: calc(var(--font-size-h2) * .9); }
    nav#main li.arrow button { max-height: calc(var(--font-size-body) * 5);}
    
    /* --------------- FOOTER --------------- */
    footer > nav > ul { grid-template-columns: 1fr; grid-gap: 1.5rem; }
    footer > nav > ul.bottom { flex-direction: column; align-items: flex-start;  margin-top: 1.5rem;}
    footer > nav > ul.bottom > li:first-of-type { margin: 1.5rem auto 0;  order: 2;}
}

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

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

/* --------------- ANIMATIONS --------------- */
@keyframes btn { 
    0% { transform: translateX(-.2em); }
    100% { transform: translateX(.2em); }
}