* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: 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); }
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: "Montserrat";
    --headerFont: "Chap-Regular";

    /* Font weights */
    --font-light: 200; 
    --font-regular: 300; 
    --font-medium: 500; 
    --font-bold: 700; 

    /* Font sizes */
    --font-size-h1: clamp(1.8rem, 6vw, 4rem);
    --font-size-h2: clamp(1.6rem, 4vw, 3rem);
    --font-size-h3: clamp(1.2rem, 3vw, 1.75rem);
    --font-size-h4: clamp(1rem, 2.5vw, 1.25rem); 
    --font-size-huge: clamp(2.2rem, 8vw, 5rem);
    --font-size-body: 0.8rem; 
    --font-size-kicker: 1rem; 
    --font-size-button: 1rem; 


    /* Colors */  
    --mainColor: var(--myBlack);
    --ownColor: var(--myBlack);
    --backgroundColor: var(--myGrey);
    --highlightColor: var(--myBlack);

    --myGrey: #E9E7E9;
    --myBlack: #353131;
    --myDarkGrey: #D9D9D9;
    --odfPink: #EAA0A5;

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

    /* Widths */
    --gutterSide: 2rem;
    --gutterTop: 1rem;
    --maxWidth: 75rem;
    --maxWidthUltraWide: 150rem;
    --maxWidthNarrow: 35rem;
    --width: calc(100% - calc(var(--gutterSide) * 2));
    
    /* Margins */
    --margin: var(--marginSingular) auto;
    --marginSingular: clamp(4rem, 10vw, 10rem);
    --marginSingularTop: clamp(9rem, 20vw, 16rem);
    --btnPadding: 0.5em 1.4em;
    --btnPaddingNarrow: 0.5em 1em;
    --btnPaddingWide: 0.5em 2.1em;
    --gap: clamp(1.5rem, 5vw, 6rem);

    /* 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: 0.5rem; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadius: 1em; 

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

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3 ,h4,.h4  {font-weight: var(--font-medium); font-family: var(--headerFont);  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); } 
.kicker { font-size: var(--font-size-kicker); font-family: var(--primaryFont); text-transform: uppercase; font-weight: var(--font-light); }

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main section:first-of-type { padding-top: var(--marginSingularTop); margin-top: 0; }
header, main, footer { max-width: var(--maxWidthUltraWide); width: 100%; margin: 0 auto; position: relative; }
section, nav#desktop, footer > nav, .container {max-width: var(--maxWidth); width: var(--width); margin: var(--margin); position: relative; }
section.fullscreen { max-width: 100%; width: 100%; }
section.ultrawide { max-width: var(--maxWidthUltraWide); width: 100%; }
section.narrow { max-width: var(--maxWidthNarrow); }
section { scroll-margin-top: var(--gap);}

body[data-lock-scroll=true] { overflow: hidden;}

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

/* 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;  }
.btn { color: var(--mainColor);  text-transform: uppercase; font-size: var(--font-size-button);}

/* LINES */
.line { position: relative; display: inline-block; }
.line.p { padding: 0.5rem;}
.line.t::before { top: 0; }
.line.b::before { bottom: 0; }
.line.r::before { right: 0; transform: translateX(-30%) scaleX(0); }
.line.l::before { left: 0; transform: translateX(30%) scaleX(0); }
.line.f::before,.line.h::before {  content: ""; position: absolute; width: 100vw; height: 1px; background: var(--myBlack); transition: 950ms ease-in-out; }
.line.h::before {  width: 100%; }
.line[data-active=true]::before {  transform: none; }

.btn { position: relative;  display: inline-flex; padding:.5rem 0;  }
.btn::after { content: ""; position: absolute; top: 0; width: 100%; transform: scaleX(0); transition: 500ms; height: 1px; background: var(--myBlack);  transform-origin: left;}
.btn:hover::after {  transform: scaleX(1);}
.btn.both::before { content: ""; position: absolute; bottom: 0; width: 100%; transform: scaleX(0); transition: 500ms; height: 1px; background: var(--myBlack);  transform-origin: left;}
.btn.both:hover::before {  transform: scaleX(1);}

span.line {  display: block; }


.buttons { display: grid; grid-gap: 1rem;  grid-template-columns: 1fr 1fr;}
.buttons button { width: 2rem; height: 2rem;  position: relative; display: flex; justify-content: center; align-items: center; --twist: 40deg;  --offset: .295rem;  --ownColor: var(--myBlack); }
.buttons button::before, .buttons button::after {  content: ""; position: absolute;  height: 2px; width: 1rem; background: var(--ownColor); --r:var(--twist); --y: calc(var(--offset) * 1); transform: translateY(var(--y)) rotate(var(--r)); border-radius: 1px; }
.buttons button:hover::before, .buttons button:hover::after { height: 3px; --offset: .28rem; }
.buttons button::after {  --y: calc(var(--offset) * -1); --r: calc(var(--twist) * -1);   }
.buttons button:last-of-type { transform: scaleX(-1); }

/* --------------- HEADER --------------- */
header { position: absolute; z-index: 10; }
header img { width: 100%;}
.mobile { display: none;  }

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: 2rem 0;  }
nav#desktop > ul > li {max-width: var(--logoWidth);  width: 25%;  margin-top: calc(var(--gap) * .46);}
nav#desktop > ul > li a { display: flex; position: relative; }
nav#desktop > ul > li a img + img { position: absolute; top: 0; left: 0; width: 100%; }

header nav#desktop .sub { position: absolute; bottom: 0; transform: translateY(100%); display: none; }
header nav#desktop .sub > li > a { padding: 0.25rem 0.5rem; display: inline-block; }

body.header-light nav#desktop > ul > li:first-of-type a img + img { opacity: 0;}

/* MOBILE NAV */
nav#slide { position: fixed; top: 0; right: 0; transform: translateX(100%); transition: transform 500ms ease; height: 100vh; height: 100dvh; width: 80%; max-width: 20rem; display: flex; flex-direction: column; align-items: center; background: var(--myDarkGrey); z-index: 98;  padding: 0 2rem;  overflow: auto;}
nav#slide > ul:not(.socials) { display: flex;flex-direction: column;align-items: flex-start; width: 100%;   margin-bottom: auto;   max-width: var(--logoWidth);}
nav#slide > ul > li { display: flex; transition: 500ms ease; margin-bottom: .5rem; }
nav#slide > ul > li > a { padding: 0.35rem 0; font-size: 1.3rem;  text-transform: uppercase; font-weight: 100; position: relative; }
nav#slide > ul > li > a::before { content: ""; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background: var(--mainColor); transform: scaleX(0); transition: 500ms; transform-origin: left; }
nav#slide > ul :is(li.active > a, li a:hover)::before { transform: scaleX(1); }
nav#slide > ul.socials { display: flex; gap: 1rem; width: 100%; margin-bottom: 10vh; margin-top: 2rem;  max-width: var(--logoWidth); }
nav#slide > a { display: flex;  width: var(--logoWidth); margin-top: calc(var(--gap) * .75 + 2rem); margin-bottom: 2rem;   }
nav#slide h3 { text-transform: uppercase; width: 100%; margin-top: auto; max-width: var(--logoWidth);}


nav#slide ul.lang { flex-direction: row; gap: .5rem; margin-bottom: 0;   } 
nav#slide ul.lang li { display: flex; align-items: center; }
nav#slide ul.lang li:first-of-type::after { pointer-events: none; content: "/"; display: inline-block; margin-left: .5rem; }
nav#slide ul.lang a { font-size: var(--font-size-kicker);}

/* Burger */
input.burger { display: none; }
.burgercontainer { max-width: calc(var(--maxWidth) + 5rem); margin: 0 auto; position: fixed; transform:  translateY(calc(var(--gap) * .75 - .75rem));  top: 2.75rem; left: 0;   right: 0;  display: flex; justify-content: flex-end;   width: var(--width);z-index: 99;  transition: transform 500ms; pointer-events: none;}
label.burger {position: relative;   display: flex; flex-direction: column;  transition: 500ms ease;  pointer-events: all; } 
label.burger::before { content: ""; position: absolute; --_excess: -.55rem;   top: var(--_excess); left: var(--_excess); width: calc(100% + var(--_excess) * -2); height: calc(100% + var(--_excess) * -2);}


label.burger > span { width: 2.2rem; --spacing: .4rem;  height: 5px; position: relative; display: block; top: 0; right: 0; background: var(--myGrey); transition: 500ms ease;}
label.burger > span:nth-of-type(1) {  transform: scaleX(.6); }
label.burger > span:nth-of-type(2) { margin-top: var(--spacing);  }
label.burger > span:nth-of-type(3) { margin-top: var(--spacing); transform: scaleX(.6);}

.underlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; pointer-events: none; transition: 500ms;}
header[data-scrolled=true] .burgercontainer { transform: none;}
body:not(.header-light) header label.burger > span, 
header[data-scrolled=true] label.burger > span { background: var(--myBlack); }

/* Burger checked */
input.burger:checked ~ header .burgercontainer { transform: translateY(calc(var(--gap) * .75 - .5rem));}
input.burger:checked ~ header label.burger { transform: translateX(calc(var(--distance-right, 1rem) - 21rem)) rotate(-270deg); }
input.burger:checked ~ header label.burger span {  background: var(--myGrey); height: 3px; }
input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: translateY(0.55rem) rotate(45deg);}
input.burger:checked ~ header label.burger span:nth-of-type(2) { transform: scaleX(0);}
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: translateY(-0.55rem) rotate(-45deg);}
input.burger:checked ~ header nav#slide { transform: none;  }
input.burger:checked ~ header .underlay { opacity: .6; pointer-events: all; z-index: 97;}

/* START ARROW BLOCK */
header nav .arrow { padding-right: 0.8em; display: flex; align-items: center;  position: relative;}
header nav .arrow::before, header nav .arrow::after { content: ""; position: absolute; right: 0; background: var(--mainColor); width: 0.4em; height: 2px; transform: rotate(45deg); border-radius: 2px; transition: 250ms ease; }
header nav .arrow::before { transform: translate(0.22em) rotate(-45deg); }

header nav#desktop .arrow:hover::before,header nav#desktop .arrow:hover::after { transform: none; border-radius: 50%; height: 0.25rem; width: 0.25rem;  }
header nav#desktop .arrow:hover ul.sub { display: block; }

nav#slide > ul > li.arrow { padding-right: 0.5rem;}
nav#slide > ul > li.arrow .sub { position: absolute; bottom: 0; transform: translateY(100%); overflow: hidden; transition: 500ms ease;}
nav#slide > ul > li.arrow .sub li { display: flex;}
nav#slide > ul > li.arrow .sub li:last-of-type {margin-bottom: 0.25rem;}
nav#slide > ul > li.arrow .sub li a {padding: 0.25rem 0; }
nav#slide > ul > li.arrow input { position: absolute; right: -0.25rem; width: 1rem; height: 0.8rem; z-index: 2; opacity: 0;}

nav#slide li.arrow.open::after {transform: translate(0) rotate(-45deg); }
nav#slide li.arrow.open::before {transform: translate(0.22em) rotate(45deg); }
/* END ARROW BLOCK */

/* --------------- FOOTER --------------- */
footer > nav { margin: 0 auto 4rem;   display: grid; grid-template-columns: 1fr 1fr;  }
footer > nav h2.line.p { padding: .5rem 0;  justify-self: flex-end; margin-right: var(--set-width, 25%); grid-column: -1/1; transform: translateX(100%); margin-bottom: 1rem; }
footer > nav .md h2 { font-family: var(--primaryFont); font-size: var(--font-size-h3); text-transform: uppercase; font-family: var(--headerFont);}
footer > nav ul:not(.socials) li:nth-of-type(2) { margin-bottom: 1rem; }

footer ul.socials { display: flex; align-items: center; gap: 1rem;  margin-top: 1rem;}
footer ul.socials li { margin: 0 0.2rem 0 0; position: relative; display: flex; justify-content: center; align-items: center;  }
footer ul.socials li a { display: flex; justify-content: flex-start; align-items: center;  padding: 0.25rem; margin-left: -.25rem; }
footer ul.socials li svg { max-width: 1.2rem; max-height: 1.2rem; }
footer ul.socials li svg { max-width: 1.2rem; max-height: 1.2rem; }

footer form { max-width: 20rem;  margin-left: auto; }
footer form .input { position: relative; padding: .2rem 0; }
footer form .input span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
footer form input { display: block;  font-size: 16px; padding: .25em 0; background: none; width: 100%; }
footer form input:focus { outline: none; border: none; }
footer form input:is(:focus,:not(:placeholder-shown)) + span::after { transform: scaleX(1);}
footer form input:is(:focus,:not(:placeholder-shown)) + span[data-active=false]::before { transform: scaleX(1);}
footer form input::placeholder { opacity: .35 ;font-style: italic; font-weight: var(--font-light);}

footer form button.line.btn::after { display: none; }
footer form button.line.btn::before { transform: scaleX(0); transform-origin: left; transition: 500ms; }
footer form button.line.btn:hover::before { transform: scaleX(1); }

footer { display: flex; flex-direction: column; align-items: center; }
footer > div {  display: flex; flex-direction: column; align-items: center; }
footer > div > img { width: 100%;  --size: clamp(4rem, 10vw, 5rem); width: var(--size); height: calc(var(--size) * .8); }
footer > strong { margin-top: .5em; font-weight: 100; font-size: clamp(.57rem, 1.45vw, .745rem);  letter-spacing: 1px; width: clamp(4rem, 10vw, 5rem); display: flex; flex-direction: column; line-height: .7;}
footer > strong > span { display: flex; justify-content: space-between; line-height: 1;}
footer > p { align-self: flex-end; font-size: .6rem; max-width: var(--maxWidth); width: var(--width); text-align: right; margin: 4rem auto 1rem;   opacity: .2;  display: flex; justify-content: space-between;  flex-wrap: wrap;  gap: 2em; }  



/* --------------- HOMEPAGE --------------- */
main {  overflow: hidden;}
section.landing { height: clamp(30rem, 60vw, calc(100vh - 2rem));  }
section.landing::before { position: absolute; --size: clamp(4rem, 10vw, 5rem); width: var(--size); height: calc(var(--size) * .8); margin-bottom: .5rem; content: ""; background: url('/img/beeldmerk_white.png') 50% 50% / contain no-repeat;  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; opacity: .8;}
section.landing::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.4));  }
section.landing :is(picture, .video, video) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video { overflow: hidden;}
.video video { object-fit: cover;}
.video video {width: 100%; height: auto; }
.video .buttonbox { position: absolute; top: 0; left: 0; height: 100%; pointer-events: none; right: 0; max-width: var(--maxWidth); width: var(--width); margin: 0 auto; }
.video .buttonbox button { position: absolute; bottom: 1em; line-height: .8; font-size: var(--font-size-body); right: 0;  font-family: var(--headerFont);  font-size: var(--font-size-h4); z-index: 2;   color: var(--myGrey); cursor: pointer; pointer-events: all; user-select: none;}
.video .buttonbox button span { display: inline-block; transform: translateY(0); transition: 350ms;  }
.video video[data-muted=false] ~ .buttonbox button span {  transform: translateY(calc(100% + 1.2rem));}

section.about { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 var(--gap); }
section.about .kicker { padding: 0.5rem 0;}
section.about article { text-align: justify; }
section.about article p strong { font-weight: var(--font-medium);}
section.about article > span { display: block; }
section.about figure { padding-top: 1em; font-size: var(--font-size-h2);}
section.about figure img { position: static; }

section.filosofie { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 var(--gap)}
section.filosofie .kicker { margin-left: var(--set-width); padding: .5rem 0;  transform: translateX(-100%); width: max-content; margin-bottom: 0;}
section.filosofie .h2 { margin: 0rem 0 .8em; width: max-content; }
section.filosofie ul { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
section.filosofie ul li { margin-bottom: 1.5rem; text-align: justify; transform: translateY(2rem); opacity: 0; transition: 500ms;}
section.filosofie ul li:last-of-type { margin-bottom: 0;}
section.filosofie ul li[data-activated=true] { transform: translateY(0); opacity: 1; }
section.filosofie ul li p:last-of-type { margin-bottom: 0.75rem;}
section.filosofie > :is(h2,h3,div) { grid-column: -1/1;}
section.filosofie figure { display: flex; }
section.filosofie picture { display: block;  width: 100%; padding-bottom: 100%;  height: 0; }
section.filosofie > div { justify-self: center; max-width: calc(50% - var(--gap) / 2 - 0rem); margin: var(--gap) 0 0 auto;  text-align: justify;}

picture.move { overflow: hidden;}
picture.move img { transform: scale(var(--scale, 1)); transition: 50ms var(--myEaseOut); }

section.projects { display: flex; flex-direction: column; align-items: flex-end }
section.projects .kicker { margin-right: var(--set-width, 36.5%); transform: translateX(100%); padding: .5rem 0; }
section.projects .h2 { margin-bottom: 1em;}
section.projects .mover { margin-bottom: 1rem; transition: 500ms; position: relative;  }
section.projects ul { transform: scale(var(--scale, .75));  transition: 400ms var(--myEaseOut); transform-origin: top;}
section.projects ul li:not(:first-of-type) { position: absolute; top: 0; left: 0; }
section.projects ul li { transition: 850ms; clip-path: inset(0 0 0 0); }
section.projects ul li[data-show=false] {  clip-path: inset(0 0% 0 100%);}
section.projects picture img { position: static;  height: auto; }
section.projects > a.btn { align-self: center;}

section.werkwijze { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 var(--gap);}
section.werkwijze .h2 { margin: 0rem 0 .8em; width: max-content;}
section.werkwijze .kicker { padding: .5rem 0; margin-left: var(--set-width, 25%);  transform: translateX(-100%); width: max-content;  margin-bottom: 0;}
section.werkwijze > :is(h2,h3,div) { grid-column: -1/1;}
section.werkwijze ul li { padding-top: 2rem; opacity: 0; transition: 500ms; text-align: justify;}
section.werkwijze ul li[data-activated=true] { padding-top: 0; opacity: 1;}
section.werkwijze ul li:not(:last-of-type) { margin-bottom: 25%; }
section.werkwijze h4 { display: flex; align-items: center; position: relative; text-align: left;}
section.werkwijze h4::before { content: ""; position: absolute; right: calc(var(--gap) * -.5); transform: translateX(50%); width: .85rem; height: .85rem; background: var(--myBlack); border-radius: 50%;   border: .25rem solid var(--myGrey);  z-index: 2;  opacity: 0; transition: 500ms ease calc(250ms * var(--i, 0));}
section.werkwijze figure { order: 2;}
section.werkwijze figure picture { width: 100%; padding-bottom: 100%;  display: block;  height: 0; }
section.werkwijze figure::before { content: ""; width: 1px; height: calc(100% + (var(--gap) / 2)); background: var(--myBlack); position: absolute; left: calc(var(--gap) / -2);  font-size: var(--font-size-h3); top: .5em; transform-origin: top; transform: scaleY(0); transition: 1500ms;  }

section.werkwijze div { order: 3; grid-column: 2; margin-top: calc(var(--gap) / 2); text-align: justify;}
section.werkwijze div h4::before { left: calc(var(--gap) * -.5); transform: translateX(-50%);  right: unset;}

section.werkwijze figure[data-active=true]::before { transform: scaleY(1);}
section.werkwijze figure[data-active=true] ~ * h4::before { opacity: 1;}

/* --------------- CONTACT PAGE --------------- */
section.contact > div { display: grid; grid-template: auto auto auto / 1fr 1fr; grid-template-areas: "p f" "p f" "p a"; grid-gap: 0 var(--gap); width: 100%; grid-column: -1/1;  padding-top: 3rem;}
section.contact h1 { margin-bottom: 2rem; padding: .5rem 0; position: absolute; top: -3rem; }
section.contact figure { grid-area: p;}
section.contact figure img { position: static; height: auto;}
section.contact ul { margin-left: auto; grid-column: -1/1; grid-area: a; }
section.contact ul li { display: flex; flex-direction: column;  margin-bottom: 1rem; text-align: right;} 
section.contact ul li a { font-weight: var(--font-light);}
section.contact ul li strong { font-weight: var(--font-medium);  text-transform: uppercase; }

form.custom { 
    --form-main-color: var(--mainColor);  
    --form-border-color: transparent;  
    --form-label-color: var(--mainColor); 
    --form-input-background-color: none;  
    --form-label-background-color: var(--backgroundColor); 
    --form-asterisk-color: var(--highlightColor); 
    --form-color-focus: var(--highlightColor); 
    --form-color-error: maroon; 
 }
form.custom { position: relative;  width: 100%;  margin: 0  0 0 auto;  max-width: 25rem; font-size: .8rem; }
form.custom :is(textarea, input, select) { padding: 0.75em 0em; color: var(--form-main-color);  width: 100%;   font-size: .8rem;}
form.custom :is(textarea, input, select):focus { outline: none; border: 1px solid transparent; }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom fieldset { display: flex; flex-direction: column;  }
form.custom fieldset div { display: flex; flex-direction: column-reverse; position: relative;  }
form.custom fieldset > div {margin-bottom: 1rem; }
form.custom fieldset div.double { display: grid; grid-template-columns: 1fr 1fr; grid-gap: .75rem; }
form.custom fieldset input { position: relative; top: 0; left: 0; width: 100%; height: 100%;  border: 1px solid var(--form-border-color); background: var(--form-input-background-color); }
form.custom fieldset div label {  position: absolute; top: 0.7em; left: 0em; pointer-events: none;  transform-origin: left; transition: 500ms ease;  white-space: nowrap;   color: var(--form-label-color); transform: translateX(.2em) skew(-12deg); opacity: .25; }
form.custom fieldset textarea { min-width: 100%; padding: 0.5em; max-width: 100%; resize: none; color: var(--form-main-color);  font-family: var(--primaryFont); border: 1px solid var(--form-border-color); background: var(--form-input-background-color);}
form.custom fieldset textarea + label { left: .5em;}
form.custom fieldset :is(textarea, input)[required] + label::after { content: "*"; display: inline-block; margin-left: 0.15em;  color: var(--form-asterisk-color); transition: 500ms;  }

form.custom fieldset div :is(input, select, textarea):is(:focus, :not(:placeholder-shown)) + label { transform: translate(-0.2em, calc(-100% + .1em)) scale(0.7); transform-origin: left; background: var(--form-label-background-color); opacity: 1; padding: .2em .2em .2rem .6em;}
form.custom fieldset div :is(input, select, textarea):is(:focus, :not(:placeholder-shown)) + label:after { opacity: 0; }
form.custom fieldset input[type="email"]:not(:focus, :placeholder-shown):invalid + label::after { content: "Ongeldig emailadres"; display: inline-block; margin-left: 0.5rem; padding: 0 0.5rem; border-radius: 100vmin; opacity: 1; color: var(--form-color-error);}

form.custom fieldset button { align-self: flex-start;  padding: .5rem 0; cursor: pointer; }

form.custom small { font-size: .6rem; opacity: .3; width: 120%; transform: scale(.8); transform-origin: top left; margin: -.5rem 0 .5rem; margin-left: var(--halfBorderRadius);}
form.custom small a { text-decoration: underline;}

form.custom .line.textarea[data-active=true] { --scale: 1; }
form.custom .line.textarea::before, form.custom .line.textarea::after { content: ""; position: absolute; width: calc(100% * var(--scale, 0)); height: calc(100% * var(--scale, 0));  pointer-events: none;  transition: 950ms ease-in-out; }
form.custom .line.textarea::before {  border-top: 1px solid var(--mainColor);  border-right: 1px solid var(--mainColor); transform-origin: top right; right: 0;  top: 0; }
form.custom .line.textarea::after {  border-left: 1px solid var(--mainColor);  border-bottom: 1px solid var(--mainColor); transform-origin: bottom left; bottom: 0; left: 0; }


section.map a { display: flex}
section.map a > img { position: absolute;  width: 2.5%; transform-origin: bottom center; left: 36.6%; top: 31%; transform: scale(0); transition: 1500ms ease calc(var(--transition, 0ms) - 2000ms); }
section.map svg { width: 100%; border: 1px solid var(--mainColor); }
section.map svg g path {  stroke-dashoffset: var(--length, 0); stroke-dasharray: var(--length, 0); transition: var(--transition, 0ms) ease-out;}
section.map[data-activated=true] svg g path { stroke-dashoffset: 0;  }
section.map[data-activated=true] a > img { transform: scale(1);}
section.map a > img:hover { animation: wiggle 2500ms linear infinite; transition: 500ms; scale: 1.1;  }

@keyframes wiggle {
    0% { transform: rotate(0);}
    25% { transform: rotate(-5deg);}
    75% { transform: rotate(5deg);}
    100% { transform: rotate(0deg);}
}

section.map > a:last-of-type { font-size: var(--font-size-button);  text-align: right; width: max-content; margin-left: auto; display: block;  font-weight: var(--font-light); margin-top: 1rem;  }

/* --------------- OVER ONS PAGE --------------- */
body.about main { overflow: unset;}
section.over {  padding-top: 3.5rem; }
section.over h1 { position: absolute; top: 0; padding: 0.5rem 0;  }
section.over picture { grid-row: span 2;}
section.over picture img { position: static; height: auto;  }
section.over p strong { font-weight: var(--font-medium); }
section.over .quote { padding: 0; }

figure.quote { padding-left: .75em; position: relative; padding-top: 0.5em; margin-top: auto; }
figure.quote img { position: absolute; left: 0em; top: 0; }
figure.quote blockquote { font-size: var(--font-size-h4);  font-family: var(--headerFont); text-transform: uppercase;  max-width: 18em;}
figure.quote figcaption { font-size: var(--font-size-body); font-weight: var(--font-light); opacity: .45; margin-top: .5rem; }

section#ontwerpfilosofie ul { display: flex; flex-direction: column; justify-content: space-between; height: 100%;   }
section#ontwerpfilosofie ul li:last-of-type { margin-bottom: 0;  }
section#ontwerpfilosofie picture { height: 0; }

section#biophilia h2 { text-align: right;}
section#biophilia ul li { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap);   margin-bottom: var(--gap); align-items: flex-start; text-align: justify;}
section#biophilia ul li:nth-of-type(even) picture { order: 2;}
section#biophilia ul li img { position: static; }

/* --------------- PROJECT PAGE LIST --------------- */
section.projects.page ul { transform: none;  }
section.projects.page ul li { display: flex; flex-direction: column; flex-grow: 1; }
section.projects.page ul li:not(:first-of-type) { height: 100%;  }
section.projects.page ul li div { background: var(--backgroundColor);  max-width: 35rem; margin: 1rem auto; width: calc(100% - 2rem);  flex-grow: 1;}
section.projects.page ul li h2 { margin-bottom: .25em; margin-top: .5rem; }
section.projects.page ul li div p strong { font-weight: var(--font-medium); }
section.projects.page ul :is(li,a, picture) { display: flex; }
section.projects.page .mover { position: relative; }
section.projects.page .buttons { position: absolute; top: calc(var(--set-height) + .5rem); right: 0;  }

section.gallerij { display: flex; flex-direction: column; align-items: flex-start; }
section.gallerij .kicker { margin: 0 0 1rem  var(--set-offset-left); display: block;  padding: .5rem 0 ; }
section.gallerij .h2 { margin: 0  0 0.5em var(--set-offset-left);  }
section.gallerij input { display: none; }
section.gallerij label:hover::after { transform: scale(0); }
section.gallerij input:checked + label::before, section.gallerij input:checked + label::after { transform: none;}
section.gallerij .filter { width: 100%; user-select: none; }
section.gallerij .filter ul { display: flex; gap: 2rem;  justify-content: center; width: calc(100% - 2rem);  align-self: center;  }

section.gallerij > ul {  width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-gap: calc(var(--gap) / 2);  margin-top: 3rem; justify-items: center; }
section.gallerij > ul > li[data-visible=false] { display: none;  }

li.projectcard { width: 100%;  overflow: hidden; position: relative; }
li.projectcard article { position: absolute; height: 100%; width: 50%; background: var(--myDarkGrey); top: 0; right: 0;  z-index: 2; padding: 5%; text-align: justify;   font-size: clamp(.65rem, 1.3vw, 1rem);  overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;  pointer-events: none; transition: 650ms ease; transform: translateX(100%);}
li.projectcard article a.btn { margin-top: auto; }
li.projectcard article a.btn::before { transform: none;  width: 250%;}
li.projectcard picture { width: 100%; padding-bottom: 100%; height: 0; display: block;   overflow: hidden;}
li.projectcard picture::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: 650ms ease;}
li.projectcard picture img { transition: 650ms ease;}

li.projectcard:is(:hover,[data-hover=true]) article { transform: none;}
li.projectcard:is(:hover,[data-hover=true]) img { transform:  translateX(-15%) }
li.projectcard:is(:hover,[data-hover=true]) picture::after { opacity: 0.3;}

/* --------------- PROJECT PAGE SINGLE --------------- */
section.landing.project { margin-bottom: 0;}
section.landing.project::after { background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.7));   }
section.landing.project h1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; text-transform: uppercase; color: var(--myGrey);  font-size: var(--font-size-huge); max-width: 7.2em; text-align: center; line-height: .9;}

section.block { --block-gap: 2rem; margin: var(--block-gap) auto; text-align: justify;}
section.block:last-of-type { margin-bottom: var(--marginSingular);}
section.block p strong { font-weight: var(--font-medium); }
section.block p:last-of-type { margin-bottom: 0;}
section.fullwidth-image img { position: relative;}

section.text-square { display: grid; grid-template-columns: 1fr 1fr; gap: var(--block-gap); }
section.text-square.left picture { order: -1; }
section.text-square img { position: relative;}
section.text-square article { display: flex; flex-direction: column;  align-items: flex-start; justify-content: flex-end; text-align: justify;}
section.text-square article.top { justify-content: flex-start; }
section.text-square article.middle { justify-content: center; }
section.text-square article.bottom { justify-content: flex-end; }

section.quote { display: flex; flex-direction: column; align-items: center; }
section.quote figure.quote { padding-top: 1.8em; padding-left: 2.5em;}

section.tall { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;  grid-gap: var(--block-gap); }
section.tall figure:nth-of-type(1) { grid-row: span 2;}
section.tall figure:nth-of-type(1) picture { height: 100%; width: 100%;  display: flex;}
section.tall figure:nth-of-type(2) { display: flex; margin-top: auto; }
section.tall figure:nth-of-type(2) picture {  width: 100%; padding-bottom: 100%; display: flex; }
section.tall.right figure:nth-of-type(1) { grid-column: 2; order: -1; }
section.tall.right figure:nth-of-type(2) { grid-column: 1; order: -1;}
section.tall.right article { order: -2; width: auto; }
section.tall.bottom article { order: 2; }


section.tall.bottom.right figure:nth-of-type(1) { order: -1;}
section.tall.bottom.right figure:nth-of-type(2) { order: -2;}
section.tall.bottom.right article { order: -1; }

figure.carrousel { display: flex;  }
figure.carrousel ul:not(.text) { width: 100%; flex-shrink: 0;  }
figure.carrousel ul:not(.text) picture { display: flex; }
figure.carrousel ul:not(.text) li { transition: opacity 500ms; }
figure.carrousel ul:not(.text) li:not(:first-of-type) { position: absolute; width: 100%; top: 0; height: 100%;  }
figure.carrousel ul:not(.text) li:not(:first-of-type) picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
figure.carrousel ul:not(.text) li:first-of-type img { position: relative; width: 100%;  }
figure.carrousel ul li[data-active=false] { opacity: 0; pointer-events: none;}

figure.carrousel > .indicators { position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 2; bottom: .8em;  display: flex; justify-content: center; gap: .5em;  pointer-events: none; }
figure.carrousel > .indicators > button { --_size: .6em; width: var(--_size); height: var(--_size); background: var(--myGrey);  border-radius: 50%;  transition: 500ms; pointer-events: all; position: relative; }
figure.carrousel > .indicators > button::before { content: ""; position: absolute;  --_excess: -0.15em; top: var(--_excess); left: var(--_excess); width: calc(100% - var(--_excess) * 2); height: calc(100% - var(--_excess) * 2); }
figure.carrousel > .indicators > button[data-active=true] { background: var(--myBlack); transform: scale(1.5); }

figure.carrousel > .buttons { position: absolute; left: 0; right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; width: calc(100% - 2rem);  pointer-events: none; transition: 500ms ease; opacity: 1;}
figure.carrousel > .buttons > .arrow {  border: none; width: 3em; height: 3em;  --offset: .35em; pointer-events: all; background: var(--mainColor); --ownColor: var(--myGrey); }

figure.carrousel > .buttons > .arrow span { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 2; pointer-events: none;  }
figure.carrousel > .buttons > .arrow span::before,figure.carrousel > .buttons > .arrow span::after { content: ""; position: absolute; width: 0; height: 0; transform: none;  border: 1px solid var(--myGrey); transition: width 500ms, height 500ms, opacity 500ms;  opacity: 0;}
figure.carrousel > .buttons > .arrow span::before { border-right: none; border-bottom: none; top: 0; left: 0;  }
figure.carrousel > .buttons > .arrow span::after { border-left: none; border-top: none; bottom: 0; right: 0;  }

figure.carrousel > .buttons > .arrow:hover span::before,figure.carrousel > .buttons > .arrow:hover span::after {  width: 100%; height: 100%; opacity: 1; transition: width 500ms, height 500ms}

figure.carrousel > .buttons > .arrow::before,figure.carrousel > .buttons > .arrow::after { height: 3px;}


figure.carrousel:hover > .buttons {  opacity: 1;}
  
/* --------------- WERKWIJZE PAGE --------------- */
body.werkwijze main { overflow: unset;}
section.intro {  display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap); }
section.intro .kicker { padding: 0.5rem 0;}
section.intro article { grid-column: 2; }
section.intro article *:not(h1,h2) {  text-align: justify;}
section.intro article p strong { font-weight: var(--font-medium);}

section.steps > ul { display: flex; flex-direction: column; margin-bottom: -30vh; }
section.steps > ul::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1px; height: calc(100% - .5em); background: var(--myBlack); top: .5em; font-size: var(--font-size-h3); }
section.steps > ul::after { content: ""; position: sticky; left: 50%; bottom: 0; transform: translateX(-50%); width: 10px; height: 30vh; background: var(--backgroundColor);  }
section.steps > ul > li { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);  margin-bottom: var(--gap); text-align: justify;}
section.steps > ul > li article > *:nth-last-child(2) { margin-bottom: 1.12rem;}
section.steps > ul > li :is(ul, ol) { list-style-type: disc; display: block; padding-left: 1em;}
section.steps > ul > li :is(ul, ol) li { margin-bottom: .25em;}
section.steps > ul > li h2 { display: flex; align-items: center;}
section.steps > ul > li h2::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: .85rem; height: .85rem; background: var(--myBlack); border-radius: 50%;   border: .25rem solid var(--myGrey);  z-index: 2;  opacity: 1; transition: 500ms ease calc(250ms * var(--i, 0));  }
section.steps > ul > li:first-of-type h2::before { top: 0; }
section.steps > ul > li figure { width: 100%; }
section.steps > ul > li figure picture { width: 100%; height: 0; padding-bottom: 100%; display: block; }

section.steps > ul > li:nth-of-type(odd) figure { order: -1; }

section.steps > ul > li:last-of-type{ margin-bottom: 0; position: relative; }
section.steps > ul > li:last-of-type::before { background: var(--backgroundColor); content: ""; position: absolute; left: 50%; transform: translateX(-50%); height: calc(100% - .25em); font-size: var(--font-size-h2); width: 2px; bottom: 0;  }

section.bekijk_alle { display: flex; justify-content: center; margin-top: calc(var(--marginSingular) / 2); }
section.bekijk_alle .btn::before { transform: scaleX(1); }











/* --------------- 404 PAGE --------------- */
section.not-found { display: flex; flex-direction: column; align-items: center  }
section.not-found h1 ~ * { max-width: 28em; text-align: center;}


/* --------------- STANDARD SECTION --------------- */
section.standard article { max-width: 40rem; margin: 3rem auto; font-size: 0.8rem;}
section.standard article img { width: 100%;  border-radius: var(--borderRadius); }

section.standard article h1 { margin-bottom: 1rem;}
section.standard article h1 em { pointer-events: none;}
section.standard article h2 { font-size: clamp(1.2rem, 1.3vw, 1.6rem); margin-top: 2rem; text-transform: none; font-weight: var(--font-medium); }
section.standard article h3:not(.kicker) { font-size: clamp(0.9rem ,1vw, 1.1rem); text-transform: none; font-weight: var(--font-medium); }
section.standard article h4 { font-size: clamp(1rem, 1vw, 1.2rem);}

section.standard article ul { list-style: initial;  padding-left: 1em; margin-bottom: 1rem;}
section.standard article ul li { margin-bottom: 0.25rem; }
section.standard article ol { list-style: numeric;  padding-left: 1em; margin-bottom: 1rem;}
section.standard article ol li {margin-bottom: 0.5rem;}
section.standard article :is(ul, ol) li::marker { font-weight: var(--font-medium); font-size: 0.9em;  }
section.standard blockquote { padding-left: 1em; border-left: .25rem solid var(--ownColor); font-size: 1.2rem;  margin: 1.5rem 0;}

/* --------------- 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: 1000px) {
    section.map a > img { width: 6.5%; left: 34.4%; top: 23.8%; }
    section.block { --block-gap: 1rem; }
    body.projecten section.landing { margin-bottom: 2rem; }

    /* --------------- PROJECTEN PAGE SINGLE --------------- */
    section.block.tall { grid-template-columns: 1fr; grid-template-rows: unset;}
    section.block.tall picture img { position: relative; height: auto; }
    section.block.tall article { order: -4;}

}
@media only screen and (max-width: 768px) {
    :root { 
        --logoWidth: 8rem; 
        --gutterTop: 1rem; 
        --gutterSide: 1rem; 
    }
    nav#slide, .burger, .mobile { display: block; }
    nav#desktop li:not(:first-of-type) { display: none; }

    /* --------------- HEADER --------------- */
    .burgercontainer { top: 1.5rem; transform: translateY(calc(var(--gap) * .75 + 0.5rem)); }
    input.burger:checked ~ header label.burger { transform: translateX(calc(100% + 1.75rem - 100vw)) rotate(-270deg); }
    nav#desktop > ul > li { width: 100%; }
    nav#slide > ul > li > a { font-size: 1rem; }
    nav#slide h3 { margin-top: 3rem; }
    
    /* --------------- FOOTER --------------- */
    footer { margin-top: 3rem;}
    footer > p { justify-content: center; gap: 1em; }
    
    /* --------------- HOMEPAGE --------------- */
    section:is(.about,.filosofie,.werkwijze) { grid-template-columns: 1fr; }  
    section.about figure { order: 1; }
    
    section.filosofie ul li:last-of-type { margin-bottom: 1.4rem; }
    section.filosofie > div { max-width: 100%; }
    section.filosofie > * { max-width: calc(100vw - var(--gutterSide) * 2);}
    
    section.projects .mover { margin: 0 auto .5rem; }
    section.projects .h2 { margin: 0 auto .5rem; }
    
    /* section.werkwijze .kicker { margin: 0 auto;} */
    section.werkwijze .h2 { margin-top: 1rem; width: max-content; }
    section.werkwijze div { grid-column: 1;}
    section.werkwijze figure { margin: 1rem 0;}
    section.werkwijze figure::before { display: none; }
    section.werkwijze h3 ~ * { padding-left: 1.5rem; max-width: calc(100% - 3rem);}
    section.werkwijze h4::before { left: calc(var(--gap) * -1); transform: none; opacity: 1; }
    section.werkwijze ul li { margin-bottom: 3rem !important; opacity: 1; padding-top: 0; }
    section.werkwijze::before { content: ""; height: calc(100% - var(--marginSingular) - 4.6em + 2rem); width: 1px; background: var(--mainColor); position: absolute; left: 0.4rem; font-size: var(--font-size-h2); margin-top: calc(3.6em + 2rem);   }

    section.werkwijze .kicker { margin-left: 0; transform: none; }
    
    /* --------------- CONTACT PAGE --------------- */
    section.contact > div { grid-template-columns: 1fr; }
    section.contact > div figure { order: 1; margin: 1rem auto 0; display: flex; }
    section.contact > div figure picture { display: flex; }
    
    section.map a > img {top: 21.8%; }
    
    /* --------------- OVER ONS PAGE --------------- */
    section.about.over article { order: -1;}
    section.about.over picture:last-of-type { order: 1;}
    section.about.over figure.quote { margin: 1rem 0 2em;}
    
    section#ontwerpfilosofie figure { margin: 1rem 0; }
    section#biophilia ul li { grid-template-columns: 1fr;  grid-gap: 0 var(--gap); margin-bottom: 4rem;}
    section#biophilia ul li picture { margin: .5rem 0 1rem; order: -1; }
    section#biophilia ul li:nth-of-type(2n) picture { order: -1;}
    
    /* --------------- PROJECTEN PAGE LIST --------------- */
    section.projects.page { max-width: 22.5rem;}
    section.projects .buttons { left: 0; margin: 0 auto; width: max-content; grid-gap: .25rem; transform: scale(.8);  top: calc(var(--set-height) + .45rem); }
    section.projects.page ul li div { width: 100%; margin-top: 2.4rem; }
    
    section.gallerij { max-width: 25rem;  }
    section.gallerij .line { display: none;  }
    section.gallerij h2 { margin-bottom: 1rem; }
    section.gallerij .filter { margin-left: calc(var(--gutterSide) * -1); }
    section.gallerij .filter ul { gap: 1rem; justify-content: flex-start;  width: max-content; max-width: 100vw; overflow: auto; }
    section.gallerij .filter ul li:first-of-type { margin-left: var(--gutterSide)}
    section.gallerij .filter ul li:last-of-type { margin-right: var(--gutterSide)}
    section.gallerij .filter ul .btn { font-size: .8rem;  }
    section.gallerij > ul { grid-template-columns: 1fr;  margin: 1.5rem auto 0;}
    section.gallerij > ul li article { width: 60%;}
    section.gallerij > ul li article h3 { font-size: 1rem;}
    section.gallerij > ul li article .btn { font-size: .8rem;}
    
    /* --------------- PROJECTEN PAGE SINGLE --------------- */
    section.block { grid-template-columns: 1fr; max-width: 25rem;}
    section.block picture { padding: 0 !important; }
    section.block picture img { position: relative; height: auto; }

    figure.carrousel > .indicators > button { --_size: .4em;  }
    figure.carrousel > .buttons > .arrow { width: 2em; height: 2em; --offset: .25em  }
    .buttons button { --offset: 0.195rem; }
    .buttons button::before, .buttons button::after { width: .7rem; }

    /* --------------- WERKWIJZE PAGE --------------- */
    section.intro { grid-template-columns: 1fr;}
    section.intro article { grid-column: unset;}
    
    section.steps > ul::before,section.steps > ul::after { left: .5rem; transform: none; } 
    section.steps > ul::after { transform: translateX(50%);} 
    section.steps > ul > li:last-of-type::before { left: 0.5rem;  }
    section.steps > ul > li { grid-template-columns: 1fr; padding-left: 1.5rem;}
    section.steps > ul > li article { order: -1;}
    section.steps > ul > li h2::before { left: 0.5rem;  }

}

@media only screen and (max-width: 500px) {
    /* --------------- FOOTER --------------- */
    footer { overflow: hidden;}
    footer > nav { grid-template-columns: 1fr; max-width: calc(100vw - 2rem); }
    footer > nav form { margin: 2rem 0 0; display: flex; flex-direction: column;  align-items: flex-start; }
    footer > nav > *,
    section.contact > div { max-width: calc(100vw - 2rem);}
    footer > p { text-align: center; }
    footer > nav h2.line.p { transform: none; margin-right: unset; justify-self: flex-start; }
    
    /* --------------- CONTACT PAGE --------------- */
    section.map a > img { top: 20.5%; left: 35%; }
    


}

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

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