* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; font-weight: var(--font-weight);  font-variation-settings: 'wght' var(--font-weight); }
*::before, *::after { box-sizing: border-box;  }
html {font-size: clamp(16px, 1.5vw, 20px); 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; }
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
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: "Satoshi", system-ui, sans-serif;
    --headerFont: "Clash Display", system-ui, sans-serif;
    --fancyFont: "Clash Display", system-ui, sans-serif;

    /* Font weights */
    --font-weight: var(--font-regular);
    --font-regular: 400; 
    --font-medium: 400; 
    --font-semi-bold: 500; 
    --font-bold: 600; 

    /* Font sizes */
    --font-size-huge: 2.95rem;
    --font-size-h1: 2.2rem;
    --font-size-h2: 1.8rem;
    --font-size-h3: 1.6rem;
    --font-size-h4: 1.4rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1rem; 
    --font-size-body: 1rem; 


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

    --mainColor:       var(--myBlack);
    --backgroundColor: var(--myBeige);

    --myLightColor:    #C06A4A;   /* accent: knoppen, kicker, nav-links */
    --myBlack:         #3A362E;   /* tekst (warme antraciet) */
    --myDarkColor:     #A8512F;   /* diep accent: strong-woorden, quote */
    --myNeutralColor:  #E6D9C6;   /* footer + cirkels (zand) */
    --myDarkRed:       #5E3A2A;   /* koppen (diep cacao/terracotta) */
    --myBeige:         #F4E5E0;   /* pagina-achtergrond */
    --myWhite:         #FFFDF8;   /* warm wit: nav-pill, knoppen */
    --myGradient:      #d7a492;   /* boog achter portret */

    --odfPink:         #C06A4A;   /* footer-link hover */
    --odfCreme:        #F4EEE3;
    /* --myGradient: linear-gradient(180deg, #898F73 0%, #67695A 100%); */


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

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

    /* Widths */
    --gutterSide: 4rem;
    --gutterTop: 1rem;
    --maxWidth: 65rem;
    --maxWidthUltraWide: 150rem;
    --maxWidthNarrow: 43rem;
    --maxWidthNarrowish: calc(var(--maxWidthNarrow) + 10rem); 
    --width: calc(100% - calc(var(--gutterSide) * 2));
    --gap: 4rem; 

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 4rem; 
    --margin-y-quarter: calc(var(--margin-y) / 4); 
    --margin-y-half: calc(var(--margin-y) / 2); 
    --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: 5rem;
    --btnPadding: 0.8em 1.6em .8em 1.6em;
    --btnPaddingRight: 0.8em 1.8em .8em 1.4em;
    --btnPaddingLeft: 0.8em 1.4em .8em 1.8em;

    /* 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: 2rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadiusRight: .5em 2em 2em .5em; 
    --btnBorderRadiusLeft:  2em .5em .5em 2em; 

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

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6, .huge  { color: var(--myDarkRed); --font-weight: var(--font-medium);  font-family: var(--primaryFont); line-height: var(--line-height-regular); margin-bottom: 0.5em; }
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); } 
.huge { font-size: var(--font-size-huge);}
.kicker { font-size: .8rem; font-family: var(--fancyFont); text-transform: lowercase; --font-weight: var(--font-bold); font-variation-settings: 'wght' var(--font-bold);   color: var(--myLightColor); }
.kicker.kicker + * { margin-top: 0;}
:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6) strong { font-weight: var(--font-bold); color: var(--myDarkColor);   font-family: var(--headerFont); }
strong * { font-weight: inherit;}

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; --scheme-primary: var(--mainColor); --scheme-background: var(--backgroundColor); }
main 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; position: relative; background: var(--scheme-background); color: var(--scheme-primary);   scroll-margin-top: 7rem;  }
section.ultrawide { max-width: var(--maxWidthUltraWide); width: 100%; }
section.narrow { max-width: var(--maxWidthNarrow); }

/* TITLE ANIMATE */
.t-a { position: relative;  display: inline-flex; padding: .25em .25em; margin: -.25em -.25em;   overflow: hidden;}
.t-a > span { --delay: 250ms; transform: rotate(15deg)  translateY(calc(100% + .5em)) rotate(-15deg) ; display: inline-block; transition: transform var(--transition, 1000ms) var(--myEaseOut) calc(0ms + var(--delay, 0ms) + var(--i,0) * (12ms + var(--extend, 0s))); }
[data-animate=true] .t-a > span  {transform: translateY(0);}

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

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

/* 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; font-weight: var(--font-weight);  font-variation-settings: 'wght' var(--font-weight); }
button,label { cursor: pointer;  }

.buttons { display: flex; flex-wrap: wrap; gap: .25rem;  transition: opacity 500ms, transform 500ms; opacity: 0; transform: translateY(.5rem); }
.buttons:not(.activate) { opacity: 1; transform: translateY(0); }
.btn { background: var(--myWhite); color: var(--myBlack); padding: var(--btnPaddingRight); border-radius: var(--btnBorderRadiusRight); text-align: center;  --font-weight: var(--font-bold); transition: border-radius 333ms, padding 333ms, color 333ms, background 333ms; font-size: .9rem;}
.btn:first-of-type:not(:only-child) { padding: var(--btnPaddingLeft); border-radius: var(--btnBorderRadiusLeft); background: var(--myLightColor); color: var(--myWhite);}
.btn.left, .btn + .btn { padding: var(--btnPaddingRight); border-radius: var(--btnBorderRadiusRight); }

.btn.btn.btn:hover { padding: var(--btnPadding); border-radius: 2em; background: var(--myDarkRed); color: var(--myWhite);}

/* LINES */
.lines { position: relative; width: var(--width); max-width: var(--maxWidth); margin: 0 auto;   }
.lines > span { width: 100%; display: block; position: relative;   }
.lines > span::before { content: ""; width: .5em; height: .5em; background: var(--myWhite); position: relative; display: block;   border-radius: 50%; transform: scale(0);  transition: transform 500ms ease-in-out var(--delay, 0s); }
.lines > span::after { content: ""; height: 2px; width: calc(100% - 3rem); background: var(--myWhite); display: block; position: absolute; top: 50%; transform: translateY(-50%) scaleX(0); transition: transform 500ms ease-in-out calc(var(--delay, 0ms) + 200ms); transform-origin: left;  border-radius: 1rem;}

.lines > span + span { margin-top: .25rem; --delay: 500ms; }
.lines > span + span::before {  margin-left: auto; }
.lines > span + span::after { left: unset; right: 0;   transform-origin: right;}
.lines:not(.activate) > span::before,.lines:not(.activate) > span::after { transform: none; }

/* --------------- COLOR SCHEMES --------------- */
[data-scheme='color'] { 
    --scheme-primary: var(--myBlack);
    --scheme-secondary: var(--myDarkColor);
    --scheme-background: var(--myBeige);
}

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

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; --link-padding: .6em;  left: 0; right: 0; margin: 0 auto;  }
header img, header svg { width: 100%; height: auto;  margin: 0 0 -.6em .5em; color: var(--mainColor); transition: color 500ms ease; }
nav#mobile, .burger, .mobile { display: none;  }
header svg, footer > nav > svg { color: var(--myDarkColor); transition: 333ms ease; transition-property: transform, clip-path; clip-path: inset(0 0 0 0); }


header[data-scrolled=true] svg { color: var(--myLightColor);  }

/* DESKTOP NAV */


nav#desktop { margin: 0.5rem auto;  padding: .5rem 0; backdrop-filter: blur(.2rem); border-radius: 100vmin;}
nav#desktop::before { content: ""; position: absolute; top: 0; left: calc(var(--gutterSide) / -4); width: calc(100% + var(--gutterSide) * .4); height: 100%; background: var(--myWhite); opacity: .8; border-radius: 100vmin;  transform: translateY(calc(-100% - 1rem));  transition: transform 500ms; }
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center;}
nav#desktop > ul li {position: relative; display: flex; --font-weight: var(--font-semi-bold); }
nav#desktop > ul li a.btn:not(:hover) { background: var(--myLightColor); color: var(--myWhite);}


nav#desktop > ul li:not(:first-of-type) a:not(.btn) { display: flex;   transition: font-variation-settings 333ms, color 333ms;   position: relative; isolation: isolate; }
nav#desktop > ul li:not(:first-of-type) a:not(.btn)::before { content: ""; position: absolute; bottom: -1px; width: 100%; left: 0; background:var(--myLightColor); height: 1px; z-index: -1;   transform: scaleX(0); transform-origin: left; transition: transform 500ms;}
nav#desktop > ul li:is(.active, :hover) > a:not(.btn) {  color: var(--myLightColor);}
nav#desktop > ul li:is(.active, :hover) > a:not(.btn)::before { transform: scaleX(1); }
nav#desktop > ul > li:first-of-type {margin-right: auto; max-width: var(--logoWidth);  transform: translateY(25%); transition: transform 500ms, max-width 500ms;  }
nav#desktop > ul > li:not(:first-of-type) {margin-left: 1.5rem; }
nav#desktop > ul > li:not(:first-of-type) > a:not(:last-of-type) { padding: var(--link-padding); }
nav#desktop > ul > li.menu { display: none; }

header[data-scrolled=true] { --logoWidth: 3rem; }
header[data-scrolled=true] nav#desktop svg { clip-path: inset(0 0 12% 0); transform: translateY(5%); }
header[data-scrolled=true] nav#desktop::before,
header[data-scrolled=true] nav#desktop > ul li:first-of-type {  transform: none;}

/* MOBILE NAV */
nav#mobile { position: fixed; bottom: 1rem; transform: translate(calc(100% + 1.5rem), calc(100% + 1rem)); transition: transform 500ms ease; width: auto; right: 1.5rem; display: flex; flex-direction: column; align-items: center; background: var(--myLightColor);  color: var(--myBeige); border-radius: var(--borderRadius); padding: 1rem;  max-width: max-content;  border: 1px solid var(--myBeige); box-shadow: var(--blurShadow);}
nav#mobile > ul { display: flex;flex-direction: column; height: 100%; align-items: flex-start; }
nav#mobile > ul > li { display: flex; transition: 500ms ease; }
nav#mobile > ul > li a { transition: font-variation-settings 333ms;  }
nav#mobile > ul > li:is(.active,:hover) { color: var(--myWhite); }
nav#mobile > ul > li > a { padding: 0.5rem;   font-weight: var(--font-semi-bold);}

/* Burger */
input.burger { display: none; }
label.burger { position: relative;  width: 1.2rem; height: calc(0.8rem + 3px); transition: 500ms ease;  z-index: 99;  display: none; align-items: center;  }
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: 1.2rem; height: 2px; position: absolute; background: var(--myBlack); transition: 500ms ease; }
label.burger > span:nth-of-type(2) { transform: translateY(-.4rem); }
label.burger > span:nth-of-type(1) { transform: none }
label.burger > span:nth-of-type(3) { transform: translateY(.4rem); }

/* Burger checked */
input.burger:checked ~ header label.burger { transform: rotate(-180deg)  }
input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: rotate(45deg);}
input.burger:checked ~ header label.burger span:nth-of-type(2) { transform: translateY(1rem); opacity: 0;}
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: rotate(-45deg);}
input.burger:checked ~ header nav#mobile { transform: none;  }


/* --------------- FOOTER --------------- */
footer { display: flex; }
footer > nav > svg { margin: 0 auto; display: block; max-width: var(--logoWidth);  }
footer > nav { background: var(--myGradient); margin: 0 auto; padding: 2rem 0 0;   border-radius: var(--borderRadius) var(--borderRadius) 0 0;}
footer > nav > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-gap: 1rem;  }
footer > nav > p  { font-size: 0.7rem; margin-top: 1rem; text-align: center;  }
footer > nav > p a { padding: .5em .75em; border-radius: 100vmin; }
footer > nav > p a:hover  { color: var(--odfCreme); background: var(--odfPink);  text-decoration: none;}

ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 1.5rem;  justify-content: center;   margin: 1.5rem 0;}
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: auto; height: auto; display: flex; justify-content: flex-start; align-items: center;  text-decoration: underline;}
ul.socials li svg { width: var(--icon-size); height: var(--icon-size);  color: var(--mainColor);}


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


/* ========================================================== */
/* ========================= LANDING ======================== */
/* ========================================================== */
section.landing .container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
section.landing article h1 { max-width: 13em; }
section.landing figure { max-width: 20rem; }
section.landing figure picture { overflow: hidden;}
section.landing figure::before { background: var(--myGradient); position: absolute; bottom: 0; left: 0%; width: 110%; height: 95%; content: ""; border-radius: 100vmin 100vmin 2rem 2rem;transform-origin: bottom; transform: scale(.9); transition: transform 500ms; }
section.landing figure img { position: relative; object-fit: contain;   width: 100%; height: auto; opacity: 0; transition: opacity 500ms ease 250ms, transform 500ms ease 250ms; transform: translateY(1rem);}
section.landing figure:not(.activate)::before { transform: none;}
section.landing figure:not(.activate) img { opacity: 1; transform: translateY(0); }


@media only screen and (max-width: 1024px) {
    section.landing .container { grid-gap: 2rem 4.5rem; }
}

@media only screen and (max-width: 768px) {
    section.landing .container { grid-template-columns: 1fr; max-width: 30rem; margin-top: 2rem; } 
    section.landing figure { max-width: 15rem;}
}

/* ========================================================== */
/* ========================== VIDEO ========================= */
/* ========================================================== */
section.video .video { position: relative;  display: flex; max-width: var(--maxWidthNarrow); margin: 0 auto; width: 100%;}
section.video video { width: 100%; border-radius: var(--borderRadius);  background: var(--myGradient);  box-shadow: 0.5rem 0.5rem 0px #A4B4BE;}
section.video .video::after { content: ""; width: 5rem; height: 5rem; border-radius: 50%; position: absolute; right: calc(var(--borderRadius) * 2); top: 0; transform: translateY(-50%); background: var(--myNeutralColor); animation: pulseCircle 5s ease infinite alternate; }

@media only screen and (max-width: 768px) {
    section.video .video::after { width: 3rem; height: 3rem;  right: var(--borderRadius); }
    
}

/* ========================================================== */
/* =========================== TEXT ========================= */
/* ========================================================== */
section.text { max-width: var(--maxWidthNarrow);}

/* ========================================================== */
/* ====================== TEXT AND IMAGE ==================== */
/* ========================================================== */
section.text-image .container { display: grid; grid-template-columns: .7fr 1fr; grid-gap: 4rem; align-items: center; }
section.text-image[data-side=right] .container { grid-template-columns: 1fr .7fr; }
section.text-image[data-side=right] .media { order: 2;} 
section.text-image img { width: 100%; height: auto;  border-radius: var(--borderRadius);}

@media only screen and (max-width: 768px) {
    section.text-image[data-side="right"] .container,   
    section.text-image .container {  grid-template-columns: 1fr; max-width: 30rem; grid-gap: 1rem; }
    section.text-image .container article { margin-bottom: 1rem;}
    section.text-image .container .media { order: unset; }
    section.text-image:not(:nth-of-type(2)) .container .media {  max-width: 16rem ; margin: 0 auto; } 
}


/* =========================================================== */
/* ===================== TEXT AND VIDEO ====================== */
/* =========================================================== */
section.text-video .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap); }
section.text-video .video video { box-shadow: 0.25rem 0.25rem 0px #A4B4BE;}
section.text-video .video::after { width: 3rem; height: 3rem; }

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

/* ========================================================== */
/* ========================== VISIE ========================= */
/* ========================================================== */
section.visie .container { padding: 3rem 6rem; background: var(--myGradient); border-radius: calc(var(--borderRadius) * 1.5); color: var(--myWhite); display: grid; grid-template-columns: 1fr 2.5fr;}
section.visie .container::before { content: ""; width: 4rem; height: 4rem; border-radius: 50%; position: absolute; left: calc(var(--borderRadius) * 2); top: 0; transform: translateY(-50%); background: var(--myNeutralColor); animation: pulseCircle 5s ease infinite alternate; }
section.visie .container figure { position: relative; height: auto; width: 9rem;  display: flex; align-items: flex-end;   margin-left: -2rem;}
section.visie .container figure img { height: auto;   width: 100%;  border-radius: 1.5rem;}
section.visie .huge {  grid-column: -1/1; color: var(--myBeige);}
section.visie .huge strong { color: var(--myWhite); display: block;}
section.visie svg { width: 3rem;  position: absolute;  bottom: -1em; left: -1rem;    z-index: 2; }
section.visie svg:only-child { bottom: 0; left: 2rem; }

@media only screen and (max-width: 768px) {
    section.visie .container { padding: 2rem; grid-template-columns: 1fr; }
    section.visie .container figure { order: 2; margin: 0rem 0 0 auto; }
    section.visie .container figure svg {  left: unset; right: 0; bottom: 0; margin: 0; }
}

/* ========================================================== */
/* ========================== CONTACT ======================= */
/* ========================================================== */
section.contact .container { display: grid; grid-template-columns: 1fr 1.5fr;  grid-gap: 0 var(--margin-y); margin: calc(var(--margin-y) * 1.5) auto; max-width: var(--maxWidthNarrowish);}
section.contact hgroup {grid-column: -1/1; max-width: 25em;}
section.contact picture { width: 100%; max-width: 10rem; }
section.contact picture img { width: 100%; border-radius: 50%; height: auto;  border: 2px solid var(--myWhite); background: var(--myNeutralColor); }

@media only screen and (max-width: 768px) {
    section.contact .container { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; max-width: 30rem;}
    section.contact .container form { margin: 0; }
    section.contact .container .buttons { display: flex; justify-content: center; }
    form.custom.custom fieldset { --form-columns:  1fr;  }   
}


/* ========================================================== */
/* =========================== QUOTE ======================== */
/* ========================================================== */
section.quote .container { display: flex; justify-content: center; }
blockquote { font-size: var(--font-size-h2);  font-family: var(--fancyFont);  max-width: 20em; color: var(--myDarkColor);}
blockquote p { margin-bottom: 0;}
blockquote p::before { content: "“"; color: var(--myLightColor); margin-left: 1em;  }
blockquote p::after { content: "”"; color: var(--myLightColor); }

@media only screen and (max-width: 768px) {
    section.quote blockquote { font-size: var(--font-size-h3); }
}

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


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

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

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

    /* Borders */
    --form-border-color: var(--scheme-primary); 
    --form-border-width: 1px;  
    --form-border-radius: 0.5rem; 
    
    /* 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: 80%; 
    
    /* Checkboxes */
    --form-check-border-radius: .2em;

    /* States */
    --form-color-focus: var(--scheme-primary);
    --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); }
form.custom div.double, form.custom small, form.custom small ~ * { grid-column: -1/1; }

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

/* DIVIDER */
form.custom .divider:not(:first-of-type) { margin-top: 2em; }

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

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

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

/* SELECTS */
form.custom .select { position: relative; display: flex; align-items: center; min-height: 2.333em; background: var(--form-input-background-color);  border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); }
form.custom .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: transparent; border: none; cursor: pointer; }
form.custom .select span { position: absolute; top: 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; }
form.custom .field p { margin-bottom: 0.5em; color: var(--form-label-color);}
form.custom .field ul { display: flex; flex-wrap: wrap; gap: 1em;   }
form.custom .field ul li { position: relative; display: flex;  color: var(--form-label-color);}
form.custom .field ul input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
form.custom .field ul input:focus { border: none; outline: none; }
form.custom .field ul input:focus-visible + label::before { outline: 3px solid var(--form-color-focus); }
form.custom .field ul label:hover::before { background: var(--form-color-focus); }
form.custom .field ul label { padding-left: 1.5em; }
form.custom .field ul label::before, form.custom .field ul label::after { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 1em; border: 1px solid var(--form-border-color); border-radius: var(--form-check-border-radius); transition: background 250ms; }
form.custom .field ul label::after { background: url("/img/icons/check.svg") center center / contain no-repeat; left: 0px; background-size: 60%; transform-origin: bottom; transition: transform var(--form-transition); transform: scale(0); border: none; }
form.custom .field ul input:checked ~ label::after { transform: none; }

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


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


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


/* MAX */
@media only screen and (max-width: 1024px) {
    :root { 
        --margin-y: 5rem; 
        --gutterSide: 3rem; 

    }
}
@media only screen and (max-width: 768px) {
    :root { 
        --logoWidth: 3.5rem; 
        --gutterTop: 1rem; 
        --gutterSide: 1rem; 
        --margin-y: 3rem;
        --paddingTop: 2.5rem; 
        --borderRadius: 1.5rem; 

        /* Font sizes */
        --font-size-huge: 2.2rem;
        --font-size-h1: 1.8rem;
        --font-size-h2: 1.6rem;
        --font-size-h3: 1.4rem;
        --font-size-h4: 1.2rem;
        --font-size-h5: 1rem;
        --font-size-h6: 1rem; 
        --font-size-body: 1rem; 
    }
    nav#mobile, .mobile { display: block; }
    label.burger { display: flex; }
    header svg { margin-left: 0;}
    nav#desktop li:not(:first-of-type) { display: none; }
    nav#desktop::before { border-radius: .75em;}
    nav#desktop > ul > li.menu { display: flex;}
    header nav#desktop > ul > li:last-of-type { transform: translateX(-.6rem);}

    header[data-scrolled=true] { --logoWidth: 3rem;}
    header[data-scrolled=true] nav#desktop > ul > li:first-of-type { transform: translateX(.3rem);}
}


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

/* --------------- ANIMATIONS -------305-------- */
@keyframes pulseCircle { 
    0% { transform: translateY(-50%) scale(1); }
    100% { transform: translateY(-50%) scale(.8); }
}