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

:root {
    /* Fonts */
    --primary-font: "IBM Plex Sans", system-ui, sans-serif;
    --header-font: "Barlow Condensed", system-ui, sans-serif;

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

    /* Font sizes */
    --font-size-h1: 3.5rem;
    --font-size-h2: 2.2rem;
    --font-size-h3: 1.6rem;
    --font-size-h4: 1.4rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1rem; 
    --font-size-body: .9rem; 
    
    /* Colors */  
    --mainColor: var(--myBlack);
    --backgroundColor:var(--myWhite);
    
    --myGreen: #5e8b56;
    --myLightGreen: #78a778;
    --myGrey: #e0e1e2;
    --myWhite: #FFF;
    --myBlack: #414042;
    --myYellow: #eeb348;
    
    --odfPink: #EAA0A5;
    --odfCreme: #F9F4EE;

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

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

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

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

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

    /* Borders */
    --border-radius: 0.2rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 100vmin;  

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

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-regular); font-family: var(--header-font);  line-height: var(--line-height-small); 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); } 
:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6) em { font-weight:  var(--font-bold);}

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main section:first-of-type { padding-top: var(--padding-top); margin-top: 0; }
header, main, footer { max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative; background: var(--backgroundColor);  display: flex; flex-direction: column; }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }

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

/* SELECTION */
*::selection { background: var(--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; }
button,label { cursor: pointer;  user-select: none; }
.btn {  color: var(--backgroundColor); font-weight: var(--font-medium); text-transform: lowercase; text-align: center;   display: inline-flex;  align-items: center; isolation: isolate; position: relative;  }
.btn span { padding: var(--btn-padding);  background: var(--myYellow);  border-radius: var(--btn-border-radius); transition: transform 500ms var(--my-ease), background 500ms var(--my-ease); position: relative; }
.btn::before,
.btn::after { position: relative; width: 2.25em; height: 2.25em; background: var(--myYellow) url('/img/icons/arrow.svg') 50% 50% / 40% 40% no-repeat; content: "";  border-radius: 50%;  z-index: -1;  transform: rotate(0deg); transition: transform 500ms var(--my-ease)}
.btn::before { position: absolute; left: 0; background-color: var(--myGreen); }
.btn:hover span { transform: translateX(2.25em); background: var(--myGreen); }
.btn:hover::before { transform: rotate(-45deg);}

/* TITLE ANIMATE */
:is(.h1, .h2, .h3, .h4, .animate):not(.no-animate) { opacity: 0; will-change: transform; rotate: 0.1deg;  }
:is(.h1, .h2, .h3, .h4, .animate):not(.no-animate).done { opacity: 1;}
.t-a { position: relative; overflow: hidden;  display: inline-flex; padding: .25em 0em; margin: -.25em 0em;  }
.delay { --delay: 250ms; }
.t-a > span { transform: translateY(calc(100% + .5em)); display: inline-block; transition: transform 750ms var(--my-ease-out) calc(150ms + var(--delay, 0ms) + var(--i,0) * (25ms)); }
[data-animate=true] .t-a > span  {transform: translateY(0);}

/* --------------- HEADER --------------- */
header { position: fixed; z-index: 10; --link-padding: .6em;  top: 0; left: 0; right: 0; margin: 0 auto; }
header::before { position: fixed;  top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--myBlack); opacity: .0;  pointer-events: none; transition: opacity 500ms var(--my-ease)}
header > div {  max-width: var(--max-width); width: var(--width); margin: 0 auto;   display: flex; align-items: flex-start; justify-content: space-between;  position: relative; }
header > div > a { max-width: var(--logo-width);  position: relative; display: flex; }
header .logo { margin-top: .5rem; color: var(--myWhite);}
header img, header svg { width: 100%;}

body:not(.home) header .logo { color: var(--myGreen);}

/* MOBILE NAV */
nav#mobile { position: absolute; right: calc(-0.125rem - .5rem); top: calc(1.225rem - .5rem);  transform: translatey(calc(-100% - 2rem)); transition: transform 500ms var(--my-ease);  height: auto; width: 80%; max-width: 15rem; display: flex; flex-direction: column;}
nav#mobile > ul { display: flex; flex-direction: column; height: 100%; margin-top: var(--padding-top); padding: 0 1em .5em 1em; margin-top: -.5rem;  background: var(--backgroundColor);  border-radius: .5rem; box-shadow: var(--drop-shadow);}
nav#mobile > ul > li { display: flex;  font-size: var(--font-size-h4); font-weight: var(--font-bold); font-family: var(--header-font);}
nav#mobile > ul > li.active a { color: var(--myGreen);}
nav#mobile > ul > li:first-of-type svg { max-width: 3em;  height: auto; padding-top: .4rem; }
nav#mobile > ul > li > a { padding: 0.1rem 0; transition: color 250ms var(--my-ease); }
nav#mobile > ul > li > a:hover { color: var(--myLightGreen);}
nav#mobile ul.bottom { margin-top: .8rem;  font-size: .8rem;    display: flex; gap: 1rem; color: var(--myYellow); padding: 0; background:  none; }
nav#mobile ul.bottom li a { transition: color 250ms var(--my-ease);}
nav#mobile ul.bottom li a:hover { color: var(--myBlack);}

/* Burger */
input.burger { display: none; -webkit-tap-highlight-color: transparent; }
label.burger {  width: 1.2rem; margin-top: 1rem; height: calc(0.8rem + 3px);  z-index: 99; align-items: center;  position:  relative; display: flex;    transform: translateY(.5rem);}
label.burger::before { content: ""; position: absolute; --_excess: -.5rem;   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: 3px; position: absolute; background: var(--backgroundColor); transition: transform 500ms var(--my-ease), width 500ms var(--my-ease), background-color 500ms var(--my-ease), height 500ms var(--my-ease), border-radius 500ms var(--my-ease);}
label.burger > span:nth-of-type(1) { transform: translateY(-.4rem); z-index: 2; }
label.burger:not(:hover) > span:nth-of-type(2) { transform: translateX(.2rem);  width: .8rem; }
label.burger > span:nth-of-type(3) { transform: translateY(.4rem);  z-index: 2; }

label.burger:hover > span:nth-of-type(1) { transform: translate(.2rem, -.4rem);  width: .8rem; }
label.burger:hover > span:nth-of-type(3) { transform: translate(.2rem, .4rem);  width: .8rem; }

/* Burger color variants - individual span control */
label.burger > span.dark { background: var(--mainColor); }
label.burger > span.light { background: var(--backgroundColor); }

/* Burger checked */
input.burger:checked ~ header label.burger span { background: var(--mainColor)}
input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: translateX(.2rem); width: 0.8rem; }
input.burger:checked ~ header label.burger span:nth-of-type(2) { width: 1.5rem; transform: translateX(-.15rem); height: 1.5rem; background: var(--myYellow); border-radius: .5rem;}
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: translateX(.2rem); width: 0.8rem; }
input.burger:checked ~ header nav#mobile { transform: none;  }
input.burger:checked ~ header::before { opacity: .6;}
input.burger:checked { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 9; opacity: 0; }


/* --------------- FOOTER --------------- */
footer { background: var(--myGreen); border-radius: 2rem 2rem 0 0; margin-top: 1rem;   overflow: hidden;}
footer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, white, transparent);  opacity: 0.13;}

footer a.logo { max-width: var(--logo-width); color: var(--myWhite); display: block;  }
footer a.logo svg { width: 100%; height: auto; }
footer > nav { margin-bottom: 1rem; }
footer > nav > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-gap: 1rem;   font-size: .7rem; color: var(--myWhite);}
footer > nav > ul li { margin-bottom: .2em;}
footer > nav > ul li a:hover { text-decoration: underline;}
footer > nav > p  { font-size: 0.7rem; margin-top: 5rem; text-align: center;  color: var(--myWhite); }
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.8rem;  }
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: flex-start; align-items: center; }
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); }


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

/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { height: clamp(20rem, 45vw, calc(100vh - var(--margin-y))); height: clamp(20rem, 45vw, calc(100dvh - var(--margin-y))); background: var(--myGreen); color: var(--myWhite);  border-radius: 0 0 2rem 2rem; overflow: hidden; }
section.landing:first-of-type { padding-top: 0;}
section.landing .container { height: 100%; margin: 0 auto; display: grid; place-items: center; }
section.landing::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, white, transparent);  opacity: 0.05;}
section.landing h1 { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 3; }
section.landing h1 div { position: relative;  display: inline; }
section.landing h1 div.cycle { filter: url(#threshold) blur(0px);  font-weight: var(--font-bold); }
section.landing h1 div > div:last-of-type { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;}

section.has-svg .bg {  position: absolute; left: 50%; top: 50%; transform: translate(-10%, -50%) scale(0.7); width: 65%;  opacity: 0; transform-origin: center;  transition: transform 3000ms var(--my-ease),  opacity 2000ms var(--my-ease); display: grid; place-items: center; height: 100%;  z-index: 2; }
section.has-svg svg {height: auto;  width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.98);   animation: pulse 15000ms var(--my-ease) infinite alternate }
section.has-svg svg path { transform-origin: center;}
section.has-svg svg path:nth-of-type(1) { animation: spin 32s var(--my-ease) infinite alternate; }
section.has-svg svg path:nth-of-type(2) { animation: spin 20s var(--my-ease) infinite alternate-reverse; }
section.has-svg svg path:nth-of-type(3) { animation: spin 10s var(--my-ease) infinite alternate; }

section.has-svg:not(.activate) h1 { opacity: 1; transform: none;}
section.has-svg:not(.activate) .bg { transform: translate(-10%, -50%); opacity: 1; }
section.has-svg:not(.activate) .bg svg:nth-of-type(2) { opacity: 1;}


@keyframes spin { 
    0% { transform: rotate(0deg);}
    100% { transform: rotate(45deg);}
}

@keyframes pulse { 
    0% { transform: translate(-50%, -50%) scale(0.97);}
    100% { transform: translate(-50%, -50%) scale(1.03);}
}

@keyframes fade-in-out { 
    0% { opacity: 0;}
    70% { opacity: .7;}
    100% { opacity: .7;}
}


@media only screen and (max-width: 768px) {
    section.landing { min-height: 25rem;}
    section.has-svg .bg { width: 110%;   }
}


/* =========================================================== */
/* ======================= TEXT BLOCKS ======================= */
/* =========================================================== */
section.texts .container > ul { display: grid; grid-template-columns: 1fr 1fr 1fr;  grid-gap: var(--gap);}
section.texts .btn { margin-top: 1.4em; }

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


/* =========================================================== */
/* ======================== SERVICES ========================= */
/* =========================================================== */
section.services {display: flex; flex-direction: column;  color: var(--myWhite);}
section.services .container { background: var(--myBlack); padding: 2rem;  max-width: calc(var(--max-width) + 4rem); border-radius: 1.5rem; width: calc(100% - .5rem);  margin: 0 auto; }
section.services .container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(225deg, white, transparent); opacity: .2;}
section.services .container > ul > li { border-radius: var(--border-radius); overflow: hidden; color: var(--myBlack);}
section.services .container > ul > li > div { padding: 1rem 1rem 2rem; margin-top: -1rem; z-index: 2; background: var(--myWhite); position: relative; border-radius: var(--border-radius);  transform: translateY(-1rem); transition: transform 1000ms var(--my-ease) calc(var(--i,0) * 250ms); height: 100%;  }
section.services .container > ul > li:not(.activate) > div { transform: none;}


@media only screen and (max-width: 768px) {
    section.services .container { max-width: 30rem; margin-inline: auto;}
    section.services .container > ul { grid-template-columns: 1fr; }
}



/* =========================================================== */
/* ======================= HOW WE WORK ======================= */
/* =========================================================== */
section.work { background: linear-gradient(to bottom, white, var(--myGrey)); border-radius: 0 0 2rem 2rem; z-index: 2;}
section.work .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 var(--gap);}
section.work .h1 { grid-column: -1/1;}
section.work .md { background: rgba(255,255,255,.6); padding: 2rem; border-radius: var(--border-radius); }
section.work .md ul { list-style: none;}
section.work .md ul li strong { color: var(--myGreen); font-weight: var(--font-bold);}
section.work .expect { background: rgba(255,255,255,.0); padding: 2rem;   margin-left: auto; }
section.work .expect ul li { padding-left: 1.2em; position: relative;  }
section.work .expect ul li::before { content: ""; position: absolute; left: 0; top: 0.1em; background: url('/img/icons/check.svg') 50% 200% / 50% 50% no-repeat; width: 1em; height: 1em; transition: background 750ms var(--my-ease) calc(var(--delay) + 250ms); }
section.work .expect ul li em { color: var(--myGreen); }

section.work .expect ul li.done::before { background-position: 50% 50%; }

@media only screen and (max-width: 768px) {
    section.work .container { grid-template-columns: 1fr;}
    section.work .md { max-width: 25rem;}
    section.work .expect { margin: 1rem auto 0; padding-bottom: 0; }
}



/* =========================================================== */
/* ======================== CUSTOMERS ======================== */
/* =========================================================== */
section.work + section.customers::before { content: ""; position: absolute; top: -2.8rem; width: 100%; height: 3rem; background: var(--myGreen);}
section.customers { background: linear-gradient(5deg, var(--myLightGreen), var(--myGreen)); border-radius: 0 0 2rem 2rem;}
section.customers .h1 { text-align: center; color: var(--myWhite);}
section.customers .container > ul {display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap); align-items: flex-start; }
section.customers .container > ul li { background: rgba(255,255,255,.6); padding: 2rem; border-radius: var(--border-radius);}


@media only screen and (max-width: 768px) {
    section.customers .container > ul {  grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto;}
}



/* =========================================================== */
/* ===================== CALL TO ACTION ====================== */
/* =========================================================== */
section.cta .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 var(--gap); max-width: var(--max-width-narrow);}
section.cta:only-of-type .container { max-width: var(--max-width);}
section.cta .h2 { text-align: left; max-width: 12em; }
section.cta .form {  margin-top: 4rem;  margin-left: auto; }
section.cta address svg { width: .8rem; height: auto;   color: var(--myGreen); transition: color 250ms var(--my-ease);} 
section.cta address ul { margin-top: .5em; }
section.cta address ul li { display: flex; align-items: center;  gap: .5em ; font-size: .8rem; margin-bottom: .5em; font-weight: var(--font-medium);}
section.cta address ul li a { color: var(--myGreen);  text-decoration: underline; transition: color 250ms var(--my-ease);}  
section.cta address ul li:has(a:hover) svg,
section.cta address ul li a:hover { color: var(--myYellow); }  



@media only screen and (max-width: 768px) {
    section.cta .container { grid-template-columns: 1fr;}
    section.cta .form {  margin-top: 1.5rem;  width: 100%; max-width: 25rem; }
}


/* =========================================================== */
/* ========================== ABOUT ========================== */
/* =========================================================== */
section.about svg { opacity: .1;  }
section.about article { max-width: 50%; margin-left: auto; }
section.about article a.btn { margin-top: 1em; }
section.about.has-svg:not(.activate) .bg { left: -20%; }


@media only screen and (max-width: 768px) {
    section.about article { max-width: 65%;}
}
@media only screen and (max-width: 500px) {
    section.about { overflow: hidden;}
    section.about article { max-width: 100%;}
    section.about svg { opacity: .05; left: 100%; top: 20%;}
}

/* =========================================================== */
/* ========================== GEERT ========================== */
/* =========================================================== */
section.geert { background: linear-gradient(to bottom, white, var(--myGrey)); border-radius: 0 0 2rem 2rem; }
section.geert .container {  display: grid; grid-template-columns: 1.5fr 1fr; grid-gap: 0 var(--gap);  align-items: center;}
section.geert figure { background: linear-gradient(to left, var(--myGreen, var(--myLightGreen))); max-width: 22rem;  margin-left: auto;  border-radius: 1rem;}
section.geert figure picture { width: calc(100% - 5rem); margin: -3rem 1rem 0 auto;  position: relative; z-index: 2;  }
section.geert figure::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("/img/icons/brand.svg") -70% -20% / 120% 120% no-repeat;}


@media only screen and (max-width: 768px) {
    section.geert .container { grid-template-columns: 1fr;  max-width: 30rem;}
    section.geert figure { order: -1; width: 80%;  margin-bottom: 2rem;}
}

/* =========================================================== */
/* ========================= VISION ========================== */
/* =========================================================== */
section.vision .container { max-width: calc(var(--font-size-h3) * 20);}



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

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

    /* Borders */
    --form-border-color: var(--mainColor);  
    --form-border-width: 1px;  
    --form-border-radius: 0.5rem; 
    
    /* Labels */
    --form-label-color: var(--mainColor);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: var(--backgroundColor); 
    --form-label-asterisk-color: var(--myGreen);
    --form-label-transform-distance: 80%; 
    
    /* Checkboxes */
    --form-check-border-radius: .2em;

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

    /* Transition */
    --form-transition: 250ms ease; 
}
/* LAYOUT */
form.custom { position: relative; max-width: 50rem; margin: 1rem auto 0; }
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) + 0.05em);  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); font-size: .8rem;}
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: "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; }
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; }

/* BUTTON */
form.custom .btn { margin: .5rem auto 0;  grid-column: -1/1; }


/* --------------- STANDARD --------------- */
section.standard article { max-width: 40rem; margin-inline: auto ;}

/* --------------- 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;}
.prose :is(h1,h2,h3,h4) em { font-style: normal;}
.prose h1 { font-size: var(--font-size-h2); font-weight: var(--font-medium); font-weight: var(--font-bold);}
.prose h2 { font-size: var(--font-size-h3); font-weight: var(--font-medium); font-weight: var(--font-bold);}
.prose h3 { font-size: var(--font-size-h4); font-weight: var(--font-medium);}
.prose h4 { font-size: var(--font-size-h5); font-weight: var(--font-medium);}


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


/* --------------- COOKIE BANNER COLORS --------------- */
section.odf__cookies.odf__cookies { 
    --odf_main_color: black;
    --odf_background_color: white; 
    --odf_highlight_color: var(--myGreen); 
}


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


/* MAX */
@media only screen and (max-width: 768px) {
    :root { 
        --logo-width: 5rem; 
        --gutter-top: 1rem; 
        --gutter-side: 1rem; 
        
        /* Font sizes */
        --font-size-h1: 2.25rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.5rem;
        --font-size-h4: 1.3rem;
        --font-size-h5: 1.1rem;
        --font-size-h6: 1rem; 
        --font-size-body: .9rem; 

    }

    footer > nav { margin-top: 2rem;}
    form.custom {   --form-columns: 1;  width: 100%; }
}

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

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

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