* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { font-size: var(--root-font-size); scroll-behavior: smooth; overscroll-behavior: none;   scroll-padding-top: 3rem;}
body {font-size: var(--font-size-body); color: var(--main-color); font-family: var(--primary-font); font-weight: var(--font-regular); background: var(--background-color); line-height: var(--line-height-regular);  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
a {text-decoration: none; color: inherit; }
:is(ul,ol,p) a {  text-underline-offset: 0.15rem; transition: 0.2s opacity ease-in-out; text-decoration: underline; }
:is(ul,ol,p) a:hover { opacity: .5; }
a[href^="mailto:"] {text-decoration: none;}
ul {list-style-type: none;}
p {margin-bottom: 1.6em;}
p:last-child, ul:last-child {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: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --header-font: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono-font: 'Sometype Mono', ui-monospace, monospace;

    /* Font weights */
    --font-regular: 300;
    --font-medium: 500;
    --font-bold: 600;

    /* Font sizes */
    --root-font-size:  clamp(16px, 1.39vw, 21px);
    --font-size-huge:  4rem;             
    --font-size-h1:    2.5rem;           
    --font-size-h2:    2rem;             
    --font-size-h3:    1.7rem;           
    --font-size-h4:    1.5rem;           
    --font-size-h5:    1.2rem;           
    --font-size-h6:    1rem;             
    --font-size-body:  max(16px,.8rem);  
    --font-size-small: max(14px,.7rem);  
    --font-size-tiny:  max(12px,.6rem);  

    /* Colors */  
    --main-color: var(--my-black);
    --background-color: var(--my-white);
    
    --my-black: #1c1c1c;
    --my-black-20: rgba(0, 0, 0, 0.2);
    --my-black-40: rgba(0, 0, 0, 0.4);
    --my-black-10: rgba(0, 0, 0, 0.1);
    --my-full-black: #000;
    --my-dark-gray: #63686f;
    --my-slate: #2e4755;
    --my-body: #808080;
    --my-white: #fff;
    --my-white-20: rgba(255,255,255,0.2);
    --my-white-40: rgba(255,255,255,0.4);
    --my-white-50: rgba(255,255,255,0.5);
    --my-soft-white: #f5f5f5;
    --my-soft-black: #494949;
    --my-red: #cb4520;

    --faded-color: var(--my-black-40);

    /* Line heights */
    --line-height-tiny: 1;
    --line-height-small: 1.2;
    --line-height-medium: 1.35;
    --line-height-regular: 1.5;
    --line-height-large: 1.6; 
    --line-height-h1: var(--line-height-small);

    /* Labels (h2 in een sectie) */
    --label-font-size: var(--font-size-h5);
    --label-font-weight: var(--font-regular);
    --label-line-height: var(--line-height-small);
    --label-padding-bottom: .3rem;
    --label-margin-bottom: 2rem;

    /* Widths */
    --gutter-side: 2rem;
    --gutter-top: 1rem;
    --max-width: 75rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 35rem;
    --margin-left: 0%;
    --margin-left-large: 0%;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem; 
    --header-gutter-side: var(--gutter-side);
    --header-max-width: var(--max-width);

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 5rem; 
    --padding-top: 4rem;
    --section-padding-top: var(--margin-y);
    --header-padding-block: 1rem 0.675rem;
    --nav-gap: 1.8rem;
    --btn-padding: 0 1.35rem;

    /* 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.5rem; 
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 1.5rem;

    /* Logos */
    --logo-width: 5rem; 
    --footer-logo-width: 7.55rem;

    /* Footer */
    --footer-color: var(--my-white);
    --footer-font-size: 1em;
    --footer-large-font-size: var(--font-size-h1);
    --footer-large-font-weight: var(--font-medium);
    --footer-large-padding: 3rem 2rem;
    --postfooter-padding-block: 1.5rem;
    --postfooter-font-size: 1em;
}

/* =========================================================== */
/* ======================== HEADINGS ========================= */
/* =========================================================== */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-medium); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em; }
h1, .h1 {font-size: var(--font-size-h1); line-height: var(--line-height-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); } 

h1:has(strong) { font-weight: var(--font-regular); }
h1 strong {  font-weight: var(--font-bold); }

main section:not(.h2-normal) h2, section.featured-image h1 { font-size: var(--label-font-size); font-family: var(--mono-font); text-transform: uppercase; border-bottom: 1px solid var(--faded-color); font-weight: var(--label-font-weight); line-height: var(--label-line-height); margin-block: 3rem var(--label-margin-bottom); padding-bottom: var(--label-padding-bottom); letter-spacing: 0.025em; }
main section:not(.h2-normal) h2:first-child { margin-top: 0; }
main section.h2-normal h2 { font-size: var(--font-size-h3); max-width: 28em; }

/* =========================================================== */
/* ========================= GENERAL ========================= */
/* =========================================================== */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
main { padding-top: var(--padding-top);  }
header, main, footer { min-width: 0; max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }

/* --------------- LENIS --------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }


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

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

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

/* --------------- SOCIALS --------------- */
ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 2rem;  }
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; border: 1px solid var(--my-white);  padding: .5rem; border-radius: 50%;}
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); }

/* --------------- LOGO --------------- */
.logo {text-decoration: none;}
.logo img, .logo svg {display: block; height: auto; width: var(--logo-width);}

/* --------------- BUTTONS --------------- */
button { touch-action: manipulation;  text-align: center; font-family: inherit; }
button,label { cursor: pointer;  user-select: none; }
.btn { background: var(--main-color); color: var(--background-color); padding: var(--btn-padding); border-radius: var(--btn-border-radius); text-align: center; transition: 250ms; transition-property: border,background,color, opacity; }
.btn:hover, .btn.reversed:not(:hover) {background: transparent; color: var(--my-soft-black);}

.buttons { display: flex; gap: 1rem;}
.buttons button { width: 1.8rem; height: 1.8rem; padding: 0.4rem;  display: grid; place-items: center; cursor: pointer; }
.buttons button:hover { background: var(--my-soft-black); }
.buttons.outline button { width: 2rem; height: 2rem; color: inherit; background: transparent; border: 1px solid; }
.buttons.outline button:hover { color: var(--my-soft-black); background: var(--my-soft-white); border: 1px solid var(--my-soft-white);}
.buttons.outline button svg { width: 1rem; height: auto; }
.buttons.outline button path { fill: currentColor;}

/* --------------- SECTIONS --------------- */
section { margin: 0 auto; position: relative; background: var(--background-color); padding-block: var(--section-padding-top) var(--margin-y); }
section:first-of-type { padding-top: 0;}
section.intro:first-of-type { padding-top: var(--margin-y); }
section .container { margin: 0 auto; }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }
section:nth-of-type(even) { background: var(--my-soft-white); }

section.dark + section.dark { padding-top: 0; display: flex; flex-direction: column; }
/* Andere achtergrond (donker → zwart): dan wel ruimte erboven. */
section.dark:not(.black) + section.dark.black { padding-top: var(--margin-y); }

/* --------------- DARK SECTIONS --------------- */
section.dark { 
    --faded-color: var(--my-white-40);

    background: var(--my-black); color: var(--my-soft-white);
    a {color: var(--my-white);}
    &:not(.h2-normal) h2  { border-color: var(--my-white-40); }
}
section.black { background: var(--my-full-black); } 

/* --------------- CUT CORNER --------------- */
.cut-corner { position: relative;  --border-width: 1px; --corner-offset: 3rem; }
.cut-corner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-white-40); z-index: -1;  clip-path: polygon( 0 0, calc(100% - var(--corner-offset)) 0, 100% var(--corner-offset), 100% 100%, 0 100%, 0 0, var(--border-width) var(--border-width), var(--border-width) calc(100% - var(--border-width)), calc(100% - var(--border-width)) calc(100% - var(--border-width)), calc(100% - var(--border-width)) calc(var(--corner-offset) + var(--border-width) / 2), calc(100% - var(--corner-offset) - var(--border-width) / 2) var(--border-width), var(--border-width) var(--border-width) ) }


/* --------------- BIGTEXT --------------- */
:is(section.has-bigtext .container, .bigtext) {
    & > h2:first-child { margin-top: 0; margin-bottom: 7rem; }
    & > p { padding-block: 1rem;  font-weight: var(--font-medium); font-size: var(--font-size-h1);  line-height: var(--line-height-medium); max-width: 25em; margin-bottom: 2rem; }
    & > p .word { color: var(--my-soft-black); transition: color 1s;  }
    & > p .word[data-lit=true] { color: var(--my-soft-white);}
}



/* --------------- PARALLAX --------------- */
p:has(img.parallax) { display: flex; }
img.parallax { --parallax-ratio: calc(var(--original-aspect) + 1.2); width: 100%; aspect-ratio: var(--parallax-ratio); object-fit: cover; animation: parallax linear both; animation-timeline: view();  }
@keyframes parallax { from { object-position: center 100%; } to { object-position: center 0%; } }
@media only screen and (max-width: 1000px) { img.parallax { --parallax-ratio: 3; } }
@media only screen and (max-width: 600px)  { img.parallax { --parallax-ratio: 2; } }
@media (prefers-reduced-motion: reduce)    { img.parallax { animation: none; } }


div.crafts .images img,
section.fullwidth-image img:not(.parallax) {
    animation: parallax linear both;
    animation-timeline: view();
}
@media (prefers-reduced-motion: reduce) {
    div.crafts .images img,
    section.fullwidth-image img:not(.parallax) { animation: none; }
}


/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; color: var(--main-color); padding-block: var(--header-padding-block); user-select: none; transition: transform 0.3s ease; }
header::before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--background-color);}
header .container { margin-block: 0; width: calc(100% - var(--header-gutter-side) * 2); max-width: var(--header-max-width); }
header .container nav { display: flex; justify-content: space-between; align-items: center; }
header .container nav ul { display: flex; gap: var(--nav-gap); padding-top: 1.1rem; }
header a { font-weight: var(--font-medium); user-select: none; text-decoration: none; }
header button { display: none; width: 2.4rem; height: 2.4rem; background: url(/img/menu.svg) center center / contain no-repeat; color: transparent; overflow: hidden; cursor: pointer; position: relative; left: 0.4rem; }

header .container nav ul li.active a { opacity: .5; }

body.header-hidden header { transform: translateY(-100%); }
body.menuopen header button { background: url('/img/close.svg') center center / contain no-repeat; }

/* --------------- TAALWISSELAAR --------------- */
header nav .lang { margin: 0 2rem 0 auto; padding-top: 1.1rem; }
header nav .lang div { position: relative; }
header nav .lang span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; background: var(--background-color); font-weight: var(--font-medium); pointer-events: none; transition: color .2s ease-in-out; }
header nav .lang span svg { display: inline-block; width: .35em; height: auto; margin-left: .4em; transform: rotate(90deg); transition: opacity .2s ease-in-out; }
header nav .lang div:hover span { color: rgba(0, 0, 0, 0.5); }
header nav .lang div:hover span svg { opacity: .5; }
header nav .lang select { padding: 0 .65rem; border: none; border-radius: 0; appearance: none; -webkit-appearance: none; background: transparent url('/img/dropdown-arrow.svg') 100% 52% / .4rem .4rem no-repeat; font: inherit; font-weight: var(--font-regular); line-height: 1.15; text-transform: uppercase; text-align: center; cursor: pointer; }

@media (max-width: 1000px) {
    header button { display: block; }
    header nav .lang { padding-top: 0; margin-right: 0; }
    header .container nav ul { position: absolute; bottom: 0; left: calc(var(--header-gutter-side) * -1); width: calc(100% + var(--header-gutter-side) * 2);  flex-direction: column; justify-content: center; text-align: center; gap: 0; margin: 0; padding-block: 0 1rem; background: var(--background-color); pointer-events: none; transition: transform 0.25s ease-in-out; transform: translateY(0%); z-index: -1; }
    header .container nav ul li { opacity: 0; pointer-events: none; transition: none; }
    header .container nav ul li a { display: block; padding-block: 0.35rem; font-size: var(--font-size-h5); }
   
    body.menuopen header .container nav ul { transform: translateY(100%); opacity: 1; pointer-events: all; }
    body.menuopen header .container nav ul li { opacity: 1; pointer-events: all; transition: opacity 0.3s ease-in-out; transition-delay: 0.15s; }
}


/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { color: var(--footer-color); background: var(--my-black); font-size: var(--footer-font-size); overflow: clip;}
footer a { text-decoration: none;}
footer .container { display: grid; grid-template-columns: 1fr; margin: 0 auto; }
footer .left { grid-row: span 2; padding-block: 3rem;  grid-template-columns: auto auto; display: grid;  grid-gap: 3rem; max-width: 35rem; }
footer .left .logo { filter: brightness(0) invert(1); width: var(--footer-logo-width); position: relative; display: block; grid-column: -1/1; }
footer .left .logo :is(svg, img) { width: 100%; }
footer .left > ul > li:first-of-type { font-weight: var(--font-medium); }
footer .left > ul > li { margin-bottom: .33rem;}
footer .left address strong { font-weight: var(--font-medium);}
footer .left address em { opacity: .5;}

footer .left:has(ul > li:nth-of-type(7)) { grid-template-columns: 1fr;}
footer .left > ul:has(li:nth-of-type(7)) { display: grid; grid-template-columns: auto 1fr 1fr; grid-column: -1/1; grid-gap: 0 2rem;}
footer .left > ul:has(li:nth-of-type(7)) > li:first-of-type { grid-column: 1; }
footer .left > ul:has(li:nth-of-type(7)) > li:not(:first-of-type) a { opacity: .6;}
footer .left > ul:has(li:nth-of-type(7)) > li:not(:first-of-type) a:hover { opacity: 1;}
footer .left > ul:has(li:nth-of-type(7)) > li:nth-of-type(2n+2) { grid-column: 2; }

footer .large { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem; align-items: center;  font-size: var(--footer-large-font-size); line-height: var(--line-height-tiny); padding: var(--footer-large-padding);  position: relative; transition: color 250ms; font-weight: var(--footer-large-font-weight);   }
footer ul.large {display: flex; }
footer a.large:hover { color: var(--my-white-40);}
footer a.large:hover::after { opacity: .4;}
footer a.large::after { content: ''; width: 4rem; height: 3.5rem; background: url('/img/arrow-right-new.svg') center center / contain no-repeat; display: inline-block;  margin-left: auto;  transition: opacity 250ms;}
footer a.large:nth-child(2):last-child { grid-row: span 1;}

footer .postfooter { background: var(--my-full-black); padding-block: var(--postfooter-padding-block); font-size: var(--postfooter-font-size);}
footer .postfooter .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
footer .postfooter p { margin-bottom: 0;}
footer .postfooter ul { display: flex; gap: 1rem; }

@media only screen and (min-width: 1025px) {
    footer .container { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;}
    footer .left { padding-right: 2rem; border-right: 1px solid var(--my-white-40); max-width: unset; }
    footer .large:nth-child(2)::before { content: ""; position: absolute; bottom: 0; left: 0; width: 50vw; background: var(--my-white-40); height: 1px; }
    footer .large:last-child::before { display: none;}
}

@media only screen and (max-width: 1024px) {
    footer .large:nth-child(2)::before { position: absolute; top: 0; left: calc(var(--gutter-side) * -1); width: calc(100% + var(--gutter-side) * 2); height: 100%; border-block: 1px solid var(--my-white-40); content: "";  }
}

@media only screen and (max-width: 768px) {
    footer .left { grid-template-columns: 1fr;}
    /* Twee kolommen lezen verkeerd op een telefoon: dan gewoon één linkse lijst. */
    footer .left > ul:has(li:nth-of-type(7)) { display: block; }
    footer a.large { font-size: var(--font-size-huge); padding-inline: 0;}
    footer a.large::after { width: 3rem; height: 2rem;}
    footer .postfooter .container { display: flex; flex-direction: column; align-items: center; }
    footer .postfooter ul { justify-content: center; flex-wrap: wrap; width: 100%;  order: -1; gap: .5rem 1.5rem; margin-bottom: 2rem;  }
    footer .socials { display: flex; justify-content: center; }
}


/* =========================================================== */
/* ======================== HAS-VIDEO ======================== */
/* =========================================================== */
section.has-video:first-of-type { 
    padding-block: 0 2rem;

    & + section { padding-top: 2rem;}
    & .container { display: flex; flex-direction: column; }
}
iframe.vimeo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* =========================================================== */
/* ====================== HEADER-BRICK ======================== */
/* =========================================================== */
section.header h1 { max-width: 22em; margin-top: 2rem;}
section.header h1:last-child { margin-bottom: 0;}

section.header .container > svg { position: absolute; top: 2.5rem; right: 2.5rem; width: 2.5rem; height: auto;  z-index: 2; }
section.header .media { overflow: clip; }
section.header .media > :is(img, video) { display: block; }

@keyframes slow-zoom { from { scale: 1; } to { scale: 1.15; } }

@media (prefers-reduced-motion: no-preference) {
    section.header .media > img {
        transform-origin: 50% 50%;
        animation: slow-zoom 20s forwards;
    }
    @media (max-width: 999px) {
        section.header .container > :not(.media,svg) { animation: fade-in 1.25s var(--delay, .5s) backwards; }
        section.header .container > :not(.media,svg):nth-child(3)   { --delay: .6s; }
        section.header .container > :not(.media,svg):nth-child(4)   { --delay: .7s; }
        section.header .container > :not(.media,svg):nth-child(n+5) { --delay: .8s; }
        section.header .container > svg {top: .75rem; right: .75rem; width: 1.5rem; }
    }
}

@media only screen and (min-width: 769px) {
    section.header h2 ~ * { margin-left: var(--margin-left);}    
}



/* =========================================================== */
/* ========================= BLOCKS ========================== */
/* ========================= CAREERS ========================= */
/* ======================== COUNTERS ========================= */
/* =========================================================== */
/* =========================================================== */
section.has-blocks { 
    & h1 { font-size: var(--font-size-h2); max-width: 28em;}
    & h2 ~ :not(.blocks) { max-width: 40em;}
    & ul.blocks {  
        display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-top: 2.5rem; cursor: pointer; 

        &:has(> *:last-of-type:nth-of-type(odd):not(:nth-of-type(3))) > *:nth-child(2) {grid-column: span 2; aspect-ratio: auto;}
        & > li { 
            background: var(--my-soft-black); aspect-ratio: 1/1; color: var(--my-soft-white); padding: 1.5rem 1rem; position: relative; display: flex; flex-direction: column; justify-content: flex-end; 
            
            &::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(28,28,28,1) 0%, rgba(28,28,28,0) 75%);}
            & a { text-decoration: none; position: static;}
            & a:hover { opacity: 1;}
            & a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
            & ul { padding-left: .8rem;}
            & ul li { margin-bottom: .5rem;}
            & ul li::before { content: '>'; display: block; position: absolute; margin-left: -.8rem;}
            
            & > * { position: relative; z-index: 2; }

            & > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 333ms; overflow: clip;}
            & > div > * { min-height: 0;}
            &:is(.active,:hover) > div { grid-template-rows: 1fr;}
        
        }
    }
    & a.button { position: absolute; right: 0; top: -.3em; text-decoration: none; display: flex; align-items: center; }
    & a.button::after { content: ""; height: 2em; width: 2em; display: inline-flex; justify-content: center; align-items: center; background: transparent url('/img/arrow-right-new.svg') 100% 50% / 1.1rem auto no-repeat; background-color: transparent; filter: invert(1); transition: border-radius 250ms, transform 250ms, background-position 250ms;}

    & ul.careers { grid-auto-rows: 1fr;}
    & ul.careers > li:nth-of-type(4n+3) { grid-row: span 2; aspect-ratio: unset;  }
    & ul.careers > li:nth-of-type(4n+4) { grid-column: span 2; aspect-ratio: unset;  }

    & ul.counters > li > div { grid-template-rows: 1fr;}

    @media screen and (max-width: 1450px) {
        & ul.blocks {grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));}
    }
    @media screen and (max-width: 1250px) {
        & ul.blocks { display: flex; flex-wrap: wrap; }
        & ul.blocks > li {flex: 1; min-width: min(20rem, 100%); aspect-ratio: 1!important;}
    }
    @media (pointer: coarse) {
        & ul.blocks > li div { grid-template-rows: 1fr;}
    }
}


/* =========================================================== */
/* ======================= LARGE LIST ======================== */
/* =========================================================== */
section.large-list .container {
    & > ul { margin-top: 2.75rem; margin-left: var(--margin-left); }
    & > ul > li { border-bottom: 1px solid var(--faded-color); padding: 1.25rem 0; }
    & > ul > li:first-child { border-top: 1px solid var(--faded-color); }
    & > ul > li strong:first-child { font-weight: var(--font-medium); font-size: var(--font-size-h5); display: block; }
    & > ul > li a { text-decoration: none; }
    & > ul > li > p:first-child:not(:last-child) { margin-bottom: .8em; }
    & > ul > li ul { padding-left: .8rem;}
    & > ul > li ul li { margin-bottom: .25em;}
    & > ul > li ul li::before { content: '>'; display: block; position: absolute; margin-left: -.8rem;}
    
    
    @media only screen and (max-width: 768px) {
        & > ul > li strong:first-child { font-size: var(--font-size-h3); margin-bottom: .2em;}
    }
} 



/* =========================================================== */
/* ======================== FACILITY ========================= */
/* =========================================================== */
div.facility {
    display: grid; grid-template-columns: 1fr 20rem; padding: 0 !important; align-items: flex-start; grid-gap: 1rem; 
     
    & figure {position: relative; display: flex; align-items: flex-start;  }
    & img { width: 100%;  }
    
    & .dots {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
    & .dots li { position: absolute; left: var(--left); top: var(--top);  padding: 0; width: 1rem; height: 1rem; clip-path: none;
        &::before { display: none; }
        & button { position: relative; width: 100%; height: 100%;  transform: translate(-50%, -50%); border-radius: 50%; background: #494949; transition: background 333ms;  border: none; cursor: pointer; }
        & button::before { position: absolute; top: 50%; left: 50%; width: 160%; height: 160%; border-radius: 50%; border: 1px solid #CB4520; content: ""; transform: translate(-50%, -50%) scale(var(--scale, 0)); transition: transform 333ms, border-color 333ms; }
        & button::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; border-radius: 50%; content: ""; }
        & button:is(:hover,.active) { background: #CB4520; }
        &:has(button.active) { z-index: 2; }
    }
    & .dots li button.active::before { --scale: 1;  }
    
    & .captions { height: 100%;  margin-inline: auto;  width: 100%; }
    & .captions > li { padding: 1rem .5rem; height: 100%; animation: fade-in 500ms forwards;   display: none; }
    & .captions > li.active {  display: block;  }
    & .captions > li::before { display: none; }
    & .captions > li > * {padding-inline: .5rem;}
    & .captions > li h3 { max-width: unset; margin-block: unset; position: relative;  font-size: 1rem; font-weight: var(--font-bold);}
    & .captions > li h2 { padding-block: .5rem 2rem; margin-bottom: 1rem; padding-right: 2rem;  display: flex;  margin-top: 0;}
    & .captions > li h2::before { position: relative; display: block; margin-right: 1rem; margin-top: .5rem;  content: ""; flex-shrink: 0; width: .9rem; height: .9rem;  border-radius: 50%; background: #CB4520; box-shadow: 0 0 0 4px #1c1c1c, 0 0 0 5px #CB4520;}
    & .captions > li hr { padding-block: 1rem; margin-block: auto; height: 1px; border-top: 1px solid rgba(255, 255, 255, 0.4); }

    .buttons { position: absolute; bottom: 0.5rem; right: 0.5rem;  display: flex; gap: .25rem; }

    @media only screen and (max-width: 1024px) {
         grid-template-columns: 1fr;
        & .dots li { width: 0.8rem; height: 0.8rem; }
    }
}


/* =========================================================== */
/* ==================== CURTAIN CAROUSEL ===================== */
/* =========================================================== */
/* --------------- CARROUSEL --------------- */
section.has-carousel { padding-block: 0; background: var(--my-black); overflow: clip; }
section.has-carousel .container {width: 100%;  }
figure.curtain-carousel { display: flex; position: relative; flex-direction: column; 
    
    & .slider { position: relative; }
    & .slider ul { display: flex; overflow: auto; scroll-snap-type: x mandatory;  margin: 0;  -ms-overflow-style: none; scrollbar-width: none;  scroll-behavior: smooth;}
    & .slider ul::-webkit-scrollbar { display: none; } 

    & .slider ul > li { flex-shrink: 0; width: 100%; scroll-snap-align: center; display: flex; }
    & .slider li img { user-select: none;}
    
    & .buttons { position: relative; }
    
    & .indicators { position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 2; bottom: .8em;  display: flex; justify-content: center; gap: .6em;  pointer-events: none; }
    & .indicators > button { --_size: .8em; width: var(--_size); height: var(--_size);  border-radius: 50%;  transition: transform 500ms; pointer-events: all; position: relative; border: none; background: var(--my-soft-white);   opacity: .5; cursor: pointer; }
    & .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); }
    & .indicators > button[data-active=true] {  transform: scale(1.3);   opacity: 1;}
    
    & .bottom { display: grid; grid-template-columns: 1fr auto; color: var(--my-soft-white); padding: 2rem var(--gutter-side) 2rem var(--gutter-side);  }
    & .bottom .buttons { margin-top: 2.5rem; gap: 1rem;  }
    
    & .bottom h3 { position: relative; max-width: unset; }
    & .bottom > ul { position: relative; margin: 0; display: grid; max-width: 35rem; }
    & .bottom > ul > li { grid-area:-1/1; opacity: 0; transition: opacity 333ms 125ms;}
    & .bottom > ul > li[data-active=true] { opacity: 1; transition: opacity 333ms 0ms}
    
    &[data-pos="left"] .bottom .buttons button:first-of-type,
    &[data-pos="right"] .bottom .buttons button:last-of-type {opacity: .3; pointer-events: none;}

    & .slider::before,
    & .slider::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: var(--my-black);  z-index: 3;  transition: transform 500ms 500ms;}
    & .slider::after { right: 0; left: unset;}
    &.in-view .slider::before { transform: translateX(-100%);}
    &.in-view .slider::after { transform: translateX(100%);}

    @media only screen and (max-width: 768px) {
        & .bottom { padding: 1rem;  align-items: flex-start; gap: 1rem; }
        & .bottom .buttons { margin-top: 0; }
        & .bottom h3 { margin-bottom: .8rem;}
        & .bottom h3:last-child { margin-bottom: 0; }
    }
}


/* =========================================================== */
/* ===================== FULLWIDTH IMAGE ===================== */
/* =========================================================== */
section.fullwidth-image { padding: 0; }
section.fullwidth-image .container { width: 100%; max-width: var(--max-width-ultra-wide);}

/* =========================================================== */
/* ====================== FEATURED IMAGE ===================== */
/* =========================================================== */
section.featured-image {
    & .container:last-child { display: flex; }
    & .container:last-child > div:first-child { width: 50%; min-width: 50%; padding-right: var(--gap); }
    & .container:last-child > div:last-child { min-width: 0; }

    @media (max-width: 1000px) {
        & .container:last-child { flex-direction: column; }
        & .container:last-child > div:first-child { width: 100%; min-width: 0; padding: 0 0 var(--gap); }
    }
}

/* =========================================================== */
/* ======================= LEADERSHIP ======================== */
/* =========================================================== */
.leadership {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 3rem 1rem;

    li h3{position: relative; font-size: 1.3rem; max-width: 100%; font-weight: 600;}
    li img {width: 100%; height: auto; margin-bottom: 0.81rem;}
}

/* =========================================================== */
/* ========================== PAGE =========================== */
/* =========================================================== */
body:has(section.page) header .logo svg { filter: brightness(0) invert(1);}
body:has(section.page),
body:has(section.page) header,
section.page { background: var(--my-black); color: var(--my-soft-white);}
section.page .container { max-width: 45rem; padding-block: 3rem;}
body:has(section.page) header::before,
body:has(section.page) header .container nav ul,
body:has(section.page) header nav .lang span { background: var(--my-black); }
body:has(section.page) header nav .lang span svg path { fill: currentColor; }
body:has(section.page) header nav .lang div:hover span { color: rgba(255, 255, 255, 0.5); }
body:has(section.page) header nav .lang select { color: var(--my-soft-white); background-image: url('/img/dropdown-arrow-white.svg'); }
body:has(section.page) header nav .lang select option { color: var(--my-black); }



/* =========================================================== */
/* ===================== HAS SHIP OUTLINE ==================== */
/* =========================================================== */
section.has-bigtext:has(+section.has-outline) { padding-bottom: 0; display: flex; flex-direction: column; background: var(--my-black);}
section.has-outline .container h2 { margin-top: 0; }
section.has-outline .container h2 ~ *:not(p:has(img.ship-outline)) { max-width: 30em;}
section:is(.has-outline, .has-bigtext) img.ship-outline { opacity: .5; margin-top: -20%; }

@media only screen and (min-width: 769px) {
    section.has-outline .container { padding-bottom: 12rem;}
    section:is(.has-outline, .has-bigtext) img.ship-outline { position: absolute;  top: 4rem; bottom: 0; right: 0; width: calc(100% - 10em); margin-top: 0; max-width: 50rem; }
    section:is(.has-outline, .has-bigtext) img.ship-outline.fade-in { opacity: .5; }
}


/* =========================================================== */
/* ===================== TEXT AND VIDEO ====================== */
/* =========================================================== */
section .split { display: grid;  align-items: center; grid-gap: 2rem; max-width: 40rem; margin-inline: auto;  }
section .split:not(:last-of-type) { margin-bottom: 6rem; }

@media only screen and (min-width: 1025px) {
    section .split {grid-template-columns: 1fr 1fr; max-width: unset;}
    section .split:not(:last-of-type) { margin-bottom: 4rem; }
}


/* =========================================================== */
/* ======================== TABBABLE ========================= */
/* =========================================================== */
.tabbable {
    & .top { display: flex; justify-content: space-between; gap: 2rem; margin-block: 3.5rem 2rem; }
    & .tabbable-nav { display: flex; gap: 3rem; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
    & .tabbable-nav button { font-size: var(--font-size-h5); font-weight: var(--font-medium); white-space: nowrap; background: none; color: var(--faded-color); padding-bottom: .75rem; border-bottom: 2px solid transparent; transition: 250ms; transition-property: border-color, color; }
    & .tabbable-nav button:hover { color: var(--my-black); }
    & .tabbable-nav button.active { color: var(--my-black); border-color: var(--my-black); }
    .dark & .tabbable-nav button { color: var(--my-white-40); }
    .dark & .tabbable-nav button:hover { color: var(--my-soft-white); }
    .dark & .tabbable-nav button.active { color: var(--my-white); border-color: var(--my-white); }
    & .buttons { flex-shrink: 0; }

    & .tabbable-items { display: grid; }
    & .tabbable-items > li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 500ms 300ms, visibility 0s 800ms; }
    & .tabbable-items > li.active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 2; }

    @media only screen and (max-width: 768px) {
        & .top { gap: 1rem; margin-left: calc(var(--gutter-side) * -1);  width: calc(100% + var(--gutter-side) * 2);}
        & .top > ul { padding-inline: var(--gutter-side); scroll-snap-type: x mandatory;}
        & .top > ul > li { scroll-snap-align: start; scroll-margin-left: var(--gutter-side);}
        & .buttons { display: none; }
    }
}


/* =========================================================== */
/* ========================= CRAFTS ========================== */
/* =========================================================== */
section.has-crafts { --overlap: 10rem; --arrows-below: 0rem; background: linear-gradient(var(--my-black) calc(100% - var(--margin-y) - var(--overlap)), var(--my-soft-white) 0); }
div.crafts {
    position: relative; 
    & .images > li { overflow: clip; }
    & .images picture { overflow: clip;}
    & .images img { display: block; aspect-ratio: 16 / 9; object-fit: cover; }

    & .md { max-width: 50rem;}
    & .prose > h3:first-child { position: relative; margin-block: 2rem 1rem; font-size: var(--font-size-h6); font-family: var(--mono-font);  text-transform: uppercase;  display: flex; gap: .8rem; align-items: flex-start;   grid-column: -1/1;}
    & .prose > h3:first-child::before { content: ""; width: 1.1em; height: 1.1em; border-radius: 100vmin; background: var(--my-red); outline: 2px solid var(--my-red); outline-offset: .2em; margin-inline: calc(.2em + 2px); transform: translateY(.0em);  flex-shrink: 0;}
    
    & .split { width: 100%; max-width: unset;  margin-block: 3rem;  gap: 0;}

    @media (prefers-reduced-motion: no-preference) {
        & .images > li.active img { transform-origin: 50% 50%; }
        .reveal.visible & .images > li.active img {
            animation: slow-zoom 20s calc(var(--delay, 0s) + .8s) forwards;
        }
    }
    @media only screen and (min-width: 769px) {
        .images h3.h6 { display: none; }
        & .split { display: grid; padding-block: 1.5rem 1rem; grid-template-columns: 1fr 1fr; align-items: flex-start;  border-top: 1px solid var(--my-white-40); }
        & .split > * { margin-top: 0;}
    }

    /* Op mobiel geen tabs: alle crafts onder elkaar, met hun eigen kop. */
    @media only screen and (max-width: 768px) {
        .top { display: none;}
        & .images { display: block; }
        & .images > li { opacity: 1; visibility: visible; }
        & .images > li:not(:last-of-type) { margin-bottom: 3rem;}
        & .images > li + li { padding-top: 3rem; border-top: 1px solid var(--faded-color);}
        & .prose.split > ul  { margin-top: 0.5rem;}
        & .prose > h3:first-child::before { transform: translateY(.3em); }
    }
}
@media only screen and (max-width: 768px) {
    section.has-crafts {--overlap: 6rem; }
}


/* =========================================================== */
/* ========================== TABS =========================== */
/* =========================================================== */
section.has-tabs { padding-top: 0px; display: flex; flex-direction: column;  --overlap: 6rem; background: linear-gradient(var(--my-soft-white) calc(100% - var(--margin-y) - var(--overlap)), var(--my-black) 0);  }
div.tabs {
    & .tabs-items > li { display: grid; gap: 2rem 0rem; align-items: start; background: var(--my-white); }
    & .tabs-items :is(video, img) { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    & .md { max-width: 40rem; padding: 2rem;  margin-top: auto; }

    @media only screen and (min-width: 1025px) {
        & .tabs-items > li:has(> :is(video, picture)) { grid-template-columns: 1fr 1fr; }
    }
}


/* =========================================================== */
/* ======================== ACCORDION ======================== */
/* =========================================================== */
section.has-accordion .container > h2:first-child ~ * { margin-left: var(--margin-left);}
ul.accordion {
    margin-top: 2.75rem; 
    & > li { border-bottom: 1px solid var(--faded-color); }
    & > li:first-child { border-top: 1px solid var(--faded-color); }
    & > li > :first-child { position: relative; max-width: 100%; margin: 0; font-size: var(--font-size-h4); }
    & > li > :first-child > button { position: relative; display: flex; align-items: center; width: 100%; padding-block: 2rem; padding-right: 2.5rem; font: inherit; font-weight: var(--font-medium); color: inherit; background: none; border: none; text-align: left; }
    & > li > :first-child > button::after { content: ""; position: absolute; right: .2rem; width: 1.7rem; height: 1.7rem; background: url(/img/plus-white.svg) center / contain no-repeat; filter: invert(1); transition: transform .1s; }
    & > li > :first-child > button[aria-expanded=true]::after { transform: rotate(-45deg); }

    & > li > div { display: flex; flex-direction: column; width: 100%; overflow: hidden; transition: padding .25s, max-height .25s; }
    & > li > div[aria-hidden=true] { max-height: 0; }
    & > li > div[aria-hidden=false] { max-height: var(--height, unset); }
    & > li > div > :first-child { padding-bottom: 2rem; }
    & > li > div > :last-child { margin-bottom: 0; }

    /* Variant: alles open, zonder knop. */
    &.expanded > li > :first-child > button { padding-bottom: .5rem; cursor: text; pointer-events: none; }
    &.expanded > li > :first-child > button::after { content: none; }
    &.expanded > li > div { max-height: var(--height, unset); }
    &.expanded.tight > li > :first-child > button { padding-top: 1.25rem; }
    &.expanded.tight > li > div > :first-child { padding-bottom: 1.25rem; }
}


/* --------------- TEAM --------------- */
section.has-team { background: var(--my-white); }
ul.accordion.team {
    margin-top: 0;
    & > li:first-child { border-top: none; }
    & > li > :first-child { font-size: inherit; }
    & > li > :first-child > button::after { filter: none; }
    & strong { font-weight: 700; }
    & > li > :first-child > button { gap: 2rem; padding-block: 1rem; }
    & > li > :first-child img { width: 5rem; aspect-ratio: 1; object-fit: cover; }
    & > li > :first-child button div { display: flex; flex-direction: column; font-size: 1.1rem; font-weight: var(--font-medium); }
    & > li > :first-child button div span { font-weight: var(--font-regular); }
    & > li > div > div { max-width: 50rem; padding-left: 7rem; }
    & > li > div > div p:last-of-type { margin-bottom: 0; }
}


/* --------------- CONTACT ACCORDIONS --------------- */
section.has-contact-accordions { padding-block: 2rem 10rem; background: var(--my-white); }
ul.accordion.contact-accordion {
    margin: 0;
    & > li { border-bottom: none; }
    & > li:first-child { border-top: none; }
    & > li > :first-child > button { margin-top: 1.5rem; padding-block: .4rem; border-bottom: 1px solid var(--my-black-40); font-family: var(--mono-font); font-size: 1.2rem; font-weight: 400; text-transform: uppercase; }
    & > li > :first-child > button::after { top: 0; filter: none; }
    & .inner { margin: 0; padding-top: 2rem; }
    & .inner:last-child { padding-bottom: 5rem; }
    & h4 { margin: 0; padding-bottom: .25rem; font-size: 1.5rem; font-weight: var(--font-medium); line-height: 1.2; }
    & .h1 { margin-bottom: .5em; font-size: 2.5rem; line-height: 1.2; }

    & .locations { display: grid; gap: 2rem; }
    & .locations > div { display: grid; grid-template-columns: 1fr 1fr; align-items: flex-start; }
    & .locations > div + div { padding-top: 2rem; border-top: 1px solid var(--my-black-20); }
    & address { padding-right: 1rem; }
    & address a { display: block; max-width: max-content; }

    & .contacts ul { display: grid; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
    & .contacts li { min-height: 7.2rem; margin: 0; padding: 1rem; background: var(--my-white); border: 1px solid var(--my-black-20); color: var(--my-body); font-size: .85rem; font-weight: 400; }
    & .contacts li::before { content: none; }
    & .contacts li.empty { min-height: 0; padding: 0; border: 0; }
    & .contacts li strong { font-weight: 400; color: var(--my-black); }
    & .contacts li p { margin: 0; }
    & .contacts li a { display: block; margin-top: 0; color: inherit; text-decoration: none; }

    & .text { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
    & .text li { margin: 0; }
    & .text ul + p { margin-top: 1.4rem; }
    & .text div a { color: inherit; }
    & .text div :is(h4, strong) { color: var(--my-black); }
    & .text div h4 { margin-bottom: .5em; }
    & article { padding: 1.5rem; background: var(--my-soft-white); }
    & article p { max-width: 20em; }
    & article .btn { display: flex; max-width: max-content; margin: 1.5rem 0 0 auto; }

    @media only screen and (max-width: 768px) {
        & .text { grid-template-columns: 1fr; gap: 2rem; }
        & .text .h1 { margin-bottom: calc(.5em - 2rem); }
        & .locations > div { grid-template-columns: 1fr; gap: 1rem; }
    }
    @media only screen and (max-width: 600px) {
        & .contacts li.empty { position: absolute; pointer-events: none; }
    }
}


/* =========================================================== */
/* ========================== NEWS =========================== */
/* =========================================================== */
section.has-news { background: var(--my-white); }
ul.news {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-top: 2.5rem;
    & > li { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr; gap: 1rem .5rem; align-items: start; padding: 1.75rem; background: var(--my-soft-white); color: var(--my-soft-black); }
    & > li > img { width: 3rem; height: auto; border-radius: 50%; }
    & .md img { display: block; width: 100%; height: auto; margin-top: 1rem; }
    & .meta { display: flex; flex-direction: column; align-self: center; font-size: var(--font-size-small); line-height: 1.3; }
    & .author { font-weight: var(--font-bold); }
    & time { opacity: .5; }
    & .linkedin { display: block; width: 1.75rem; height: 1.75rem; padding: .25rem; border-radius: .1em; color: var(--my-white); background: #0072b1; }
    & .linkedin svg { display: block; width: 100%; height: auto; fill: currentColor; }
    & a::after { content: ""; position: absolute; inset: 0; }
    & .md { grid-column: 1 / -1; }
    & .type, & .title { display: none; }
}
ul.news > li[hidden] { display: none; }
.news-more { margin-top: 2rem; text-align: center; }
section.has-news h2 + p:has(.btn) { position: absolute; top: 0; right: 0; margin: -.2rem 0 0; }


/* =========================================================== */
/* ========================= NUMBERS ========================= */
/* =========================================================== */
section.has-numbers { background: var(--my-white); }
ul.numbers {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin-top: 2.5rem;
    & > li { display: flex; flex-direction: column; padding: 1.33rem; background: var(--my-black); color: var(--my-white); }
    & h3 { font-size: var(--font-size-h1); font-weight: 500; margin: 0 0 1rem; }
    & p { margin: 0 0 1.5rem; }
    & img { width: 100%; aspect-ratio: 800/425; object-fit: cover; margin-top: auto; }
    @media only screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        & > li { padding: 2rem 1rem; }
    }
}


/* =========================================================== */
/* ========================== PAGES ========================== */
/* =========================================================== */
section:has(nav.pages) .container { padding-bottom: 3rem; }
nav.pages {
    & ul { display: grid; grid-auto-flow: column; gap: 1rem; }
    & li { position: relative; }
    & li::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 33%; background: linear-gradient(to top, var(--my-full-black), transparent); opacity: .5; transition: opacity 250ms; pointer-events: none; }
    & li:hover::after { opacity: .7; }
    & a:hover { opacity: 1; }
    & img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
    & h3 { position: absolute; bottom: 1.5rem; z-index: 2; width: 100%; max-width: none; margin: 0; padding-inline: 1.2rem; font-size: 1.2rem; color: var(--my-white); }
    & ~ p { max-width: 35em; margin-top: 2rem; }

    @media only screen and (max-width: 1250px) {
        margin-inline: calc(-1 * var(--gutter-side)); padding-inline: var(--gutter-side); overflow: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        &::-webkit-scrollbar { display: none; }
        & li { min-width: 17.5rem; scroll-snap-align: start; scroll-margin-left: var(--gutter-side); }
        & ul::after { content: ""; width: calc(var(--gutter-side) - 1rem); }
    }
    @media only screen and (max-width: 768px) {
        & h3 { font-size: 1rem; }
    }
}


/* =========================================================== */
/* ======================== TIMELINE ========================= */
/* =========================================================== */
section.has-timeline .container { max-width: none; }
section.has-timeline .top h2 { border-color: var(--my-white-20); }
.timeline { position: relative; margin-inline: auto;
    & h3 { position: relative; max-width: 13em; margin-bottom: 4rem; font-size: 3rem; line-height: 1.2; }
    & .inner-container { max-width: var(--max-width-medium); margin-inline: auto; }
    & .top { position: relative; }
    & .buttons { position: absolute; top: -.5rem; right: 0; z-index: 2; display: flex; gap: .5rem; }
    & .arrow { width: 2.2rem; height: 2.2rem; border: 1px solid var(--my-soft-white); border-radius: 50%; background: url(/img/arrow-right-white.svg) center / 1rem auto no-repeat; cursor: pointer; transition: .25s; transition-property: color, background, opacity; }
    & .arrow.prev { rotate: -180deg; }
    & .arrow:hover { background-color: var(--my-white); background-image: url(/img/arrow-right-black.svg); }
    &[data-scrollable=""] .buttons, &[data-scrollable="right"] .prev, &[data-scrollable="left"] .next { opacity: .5; }

    & .slider { margin-inline: calc(-1 * var(--gutter-side)); padding-inline: var(--gutter-side); overflow: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
    & .slider::-webkit-scrollbar { display: none; }
    & .slider ul { display: flex; gap: 5rem; max-width: var(--max-width-medium); margin: 0 auto; }
    & .slider ul::after { content: ""; flex-shrink: 0; width: var(--gutter-side); }
    & .slider li { position: relative; flex-shrink: 0; width: clamp(12rem, calc(100% / 4 - 1.5rem), 19rem); padding: 0; scroll-snap-align: center; scroll-margin-left: var(--gutter-side); }
    & .slider li::after { content: ""; position: absolute; top: 1.85rem; left: 0; width: calc(100% + 5rem); height: 1px; background: var(--my-white-20); }
    & .slider li:last-of-type::after { display: none; }
    & .slider li > strong { position: relative; z-index: 2; display: block; max-width: max-content; margin: 0 0 1.5rem -1rem; padding: .3rem 1rem; font-size: 1.8rem; font-weight: var(--font-medium); background: var(--my-black); }
    & .slider li p { color: var(--my-white-50); }
    & .slider li p strong { color: var(--my-white); font-weight: var(--font-medium); }

    @media only screen and (max-width: 500px) {
        & .top h2 { padding-bottom: 1rem; margin-bottom: 2rem; }
        & .slider li { scroll-snap-align: start; }
    }
}


/* =========================================================== */
/* ======================= GET IN TOUCH ====================== */
/* =========================================================== */
section.has-getintouch { padding-bottom: 6rem; background: var(--my-white);
    & .container { padding-top: 1rem; }
    & h1 ~ :not(div) { max-width: 30em; }
    & .getintouch { float: right; max-width: 20rem; margin-left: 6.5rem; padding-left: 1.25rem; border-left: 1px solid var(--my-black-20); }
    & .getintouch h2 { max-width: none; margin: 0 0 .15em; padding-bottom: 0; border-bottom: none; font-family: var(--header-font); font-size: 1.5rem; font-weight: var(--font-medium); text-transform: none; letter-spacing: 0; color: var(--my-black); }
    & .getintouch a:not(.btn) { color: inherit; transition: color 250ms; }
    & .getintouch a.btn { margin-top: 1rem; }

    @media only screen and (max-width: 768px) {
        & .container { display: grid; }
        & .getintouch { order: 1; margin: 4rem 0 -3rem; padding-left: 0; border-left: 0; }
    }
    @media only screen and (max-width: 600px) {
        & .container { padding-top: 0; }
        & .getintouch a.btn { display: flex; width: max-content; margin-top: .75rem; }
    }
}


/* =========================================================== */
/* ========================= PROJECTS ======================== */
/* =========================================================== */
div.projects {
    & > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); gap: 4rem 2.25rem; }
    & > ul > li { margin: 0; padding: 0; background: var(--my-white); }
    & > ul > li::before { content: none; }
    & img.parallax { --parallax-ratio: 1.8; margin-bottom: 4rem; }
    & .text { padding: 0 2.25rem 4rem; }
    & h3 { position: relative; max-width: 100%; margin: 0 0 1rem; }
    & h4 { margin: 4rem 0 1.5rem; padding-bottom: .4rem; line-height: var(--line-height-regular); border-bottom: 1px solid var(--my-black-40); font-family: var(--mono-font); font-size: 1.2rem; font-weight: 400; letter-spacing: .025em; text-transform: uppercase; }
    & .text > :last-child { margin-bottom: 0; }
    & .readmore input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    & .readmore-content { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
    & .readmore input:checked ~ .readmore-content { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
    & .readmore label { display: inline-block; margin-top: .75rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; transition: opacity 250ms; }
    & .readmore label:hover { opacity: .6; }
    & .readmore input:focus-visible ~ label { outline: 2px solid currentColor; outline-offset: 2px; }
    & .readmore input:checked ~ label { display: none; }

    @media only screen and (max-width: 600px) {
        & .text { padding-inline: 1.75rem; }
    }
}
section.has-projects:nth-of-type(odd) div.projects > ul > li { background: var(--my-soft-white); }


/* =========================================================== */
/* ======================== DELIVERIES ======================= */
/* =========================================================== */
section.has-deliveries { background: var(--my-white);
    & h2 ~ p { max-width: 40rem; }
}
.deliveries-filters { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin-bottom: 1.5rem;
    & button { padding: .3rem .7rem; border: 1px solid transparent; border-radius: .3rem; background: var(--my-soft-white); color: inherit; font: inherit; font-size: .7rem; cursor: pointer; transition: background .15s, border-color .15s; }
    & button span { color: var(--my-dark-gray); }
    & button:hover { border-color: var(--my-black-20); }
    & button.active { background: var(--my-slate); border-color: var(--my-slate); color: var(--my-white); }
    & button.active span { color: var(--my-white-50); }

    @media only screen and (max-width: 768px) {
        flex-wrap: nowrap; overflow: auto; margin-inline: calc(-1 * var(--gutter-side)); padding-inline: var(--gutter-side); scroll-snap-type: x mandatory; scrollbar-width: none;
        & button { flex-shrink: 0; scroll-snap-align: start; scroll-margin-left: var(--gutter-side); }
    }
}
.deliveries-count { margin-bottom: .75rem; font-size: .9rem; color: var(--my-dark-gray);
    & strong { font-weight: var(--font-medium); color: inherit; }
}
table.deliveries { width: 100%; text-align: left; border-collapse: separate; border-spacing: 0; --border: 1px solid var(--my-black-10);
    & th { font-weight: var(--font-medium); }
    & thead th { padding: .5rem .75rem; }
    & tbody { display: block; max-height: clamp(20rem, 85vh, 50rem); overflow: auto; border: var(--border); }
    & tr { display: grid; grid-template-columns: 6rem 6rem 1fr 1fr 1fr; }
    & tbody td { padding: .75rem; }
    & tbody td:nth-of-type(3) { font-weight: var(--font-medium); }
    & tbody tr:not(:last-of-type) td { border-bottom: var(--border); }
    & tbody tr[hidden] { display: none; }
    & tbody tr.last td { border-bottom: 0; }

    @media only screen and (max-width: 768px) {
        & thead { display: none; }
        & tbody { max-height: none; overflow: visible; }
        & tbody tr { grid-template-columns: auto auto; gap: .2rem; padding: 1rem; }
        & tbody tr:not(:last-of-type) { border-bottom: var(--border); }
        & tbody td { display: inline; padding: 0; border: none !important; }
        & tbody td:last-of-type { display: none; }
        & tbody td:nth-of-type(2) { margin-left: auto; }
        & tbody td:nth-of-type(2)::before { content: "No. "; }
        & tbody td:nth-of-type(2) ~ * { grid-column: -1 / 1; }
        & tbody td:nth-of-type(3) { font-size: 1.2rem; }
    }
}
.deliveries-more { display: none; }
@media only screen and (max-width: 768px) {
    .deliveries-more { display: flex; justify-content: center; margin-top: 1.5rem; }
    .deliveries-more[hidden] { display: none; }
}


/* =========================================================== */
/* ========================== FORMS ========================== */
/* =========================================================== */
form { display: flex; flex-wrap: wrap; gap: 2rem; color-scheme: dark;
    & > div { display: flex; flex-direction: column; justify-content: flex-start; gap: .5rem; width: 100%; }
    & > div.half { width: calc(50% - 1rem); }
    & > div label { display: block; }
    & label a { text-decoration: underline; }
    & > div:not(.half) > h2:first-child { margin-top: 5rem; }
    & > div :is(textarea, select, input:not(.btn)) { padding: .5rem .75rem; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background-color: rgba(255, 255, 255, .07); color: var(--my-white); font-family: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.4; transition: .1s all ease-in-out; }
    & > div :is(input:placeholder-shown, select:invalid, select:has(option[value=""]:checked), textarea:placeholder-shown) { border-color: var(--my-white-40); background-color: transparent; }
    & > div:is(.checkbox, .radio, .multiselect) input { margin-right: .35rem; }
    & > div.checkbox + div.checkbox, & > div.radio + div.radio { margin-top: -1.45rem; }
    & > div:is(.checkbox, .radio):not(:has(+ div:is(.checkbox, .radio))) > label:first-child, & > div:is(.checkbox + .checkbox, .radio + .radio) > label:first-child { display: none; }
    & > div textarea { min-height: calc(3.7rem + 1px); overflow-y: hidden; resize: none; }
    & > div select { padding-right: 2rem; background: url('/img/dropdown-arrow-white.svg') right .75rem center / .5rem .5rem no-repeat; appearance: none; }
    & > div select option { color: var(--my-black); }
    & > div input::-webkit-outer-spin-button, & > div input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
    & > div input[type=number] { -moz-appearance: textfield; }
    & > div.multiselect > label { display: flex; justify-content: space-between; align-items: center; }
    & > div.multiselect fieldset { display: block; padding: .5rem .75rem; border: 1px solid var(--my-white-40); }
    & > div.multiselect fieldset label { display: block; padding: .15rem 0; cursor: pointer; }
    & .multiselect-toggle { display: inline-block; width: 1.3em; aspect-ratio: 1; padding: 0; border: none; background: none; color: inherit; font-family: monospace; font-size: 1.2rem; line-height: 1; cursor: pointer; }
    & label .info { display: inline-flex; justify-content: center; align-items: center; width: 1.15em; aspect-ratio: 1; margin-left: .4em; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; opacity: .6; font-family: inherit; font-size: .75em; font-style: italic; line-height: 1; vertical-align: middle; cursor: pointer; }
    & label .info:is(:hover, :focus-visible) { opacity: 1; }
    & .btn { min-width: 10rem; margin-top: 2rem; }
    & .btn.reversed, & .btn.reversed:not(:hover) { padding: .75em 3rem .75em 1.5rem; border-radius: .3rem; background: var(--my-white); color: var(--my-black); }
    & button.btn.reversed::after { right: 1.25rem; background-image: url('/img/arrow-right-black.svg'); }
    &.submitted > div:has(:invalid) :is(input, select, textarea) { border-color: #e05555 !important; }
    &.submitted > div:has(:invalid), &.submitted > div:has(:invalid) a { color: #e05555; text-decoration-color: #e0555577; }

    @media (hover: hover) {
        & .btn.reversed:hover { background: var(--my-soft-white); }
    }
    @media only screen and (max-width: 600px) {
        & > div :is(textarea, select, input:not(.btn)) { border-color: transparent !important; background-color: rgba(255, 255, 255, .07) !important; }
        & > div.half { width: 100%; }
    }
}
section.dark .frc-i-widget { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.frc-banner a { text-decoration: none !important; }


/* =========================================================== */
/* ========================== STEPS ========================== */
/* =========================================================== */
section.steps { background: var(--my-white); }
section.steps .container ol { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2rem; counter-reset: step; overflow: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none;
    &::-webkit-scrollbar { display: none; }
    & > li { display: flex; flex-direction: column; align-items: flex-start; min-width: 14rem; margin: 0; padding: 0 0 0 .8rem; border-left: 1px solid var(--my-soft-white); counter-increment: step; scroll-snap-align: start; }
    & > li::before { content: counter(step); display: grid; place-items: center; width: 2.2em; aspect-ratio: 1; margin-bottom: 1.8rem; background: var(--my-soft-white); font-size: 1.8rem; font-weight: var(--font-medium); }
    & h3 { position: relative; max-width: 10em; margin-block: 0 1rem; font-size: 1.2rem; }
    & p { margin: 0; }

    @media only screen and (max-width: 1024px) {
        margin-inline: calc(-1 * var(--gutter-side)); padding-inline: var(--gutter-side);
        & > li { scroll-margin-left: var(--gutter-side); }
    }
}


/* =========================================================== */
/* ========================== TILES ========================== */
/* =========================================================== */
section.tiles .container ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .8rem; margin-right: 1px;
    & > li { padding: 2rem; background: var(--my-white); color: var(--my-dark-gray); }
    & > li::before { content: none; }
    & strong { font-weight: var(--font-medium); color: var(--my-black); }

    @media only screen and (max-width: 768px) {
        & > li { padding: 2rem 1rem; }
    }
    @media only screen and (max-width: 600px) {
        grid-template-columns: 1fr;
    }
}
/* Tegels steken af tegen de sectie: grijs op wit, wit op grijs. */
section.tiles:nth-of-type(odd) .container ul > li { background: var(--my-soft-white); }


/* =========================================================== */
/* ========================= OVERLAY ========================= */
/* =========================================================== */
section.overlay { padding: 0; background: var(--my-black); color: var(--my-soft-white);
    & > img { display: block; --parallax-ratio: 3; }
    & .container > div { padding-block: 2rem; }
    & p { margin-bottom: 0; }
    & .container h2 { max-width: none; margin: .5rem 0 1rem; padding-bottom: var(--label-padding-bottom); font-size: 1.5rem; letter-spacing: -.02em; }

    @media only screen and (max-width: 768px) {
        & .container > div { padding-bottom: 2.5rem; }
    }
    @media only screen and (max-width: 600px) {
        & > img { --parallax-ratio: 1; }
    }
}


/* =========================================================== */
/* ====================== PUBLICATIONS ======================= */
/* =========================================================== */
section.image-header + section.has-publications { padding-top: 0;}
section.has-publications { background: var(--my-white);}
section.has-publications .publications { 
     display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem 2rem;
     & li { display: flex; flex-direction: column; padding: 1rem; background: var(--my-soft-white);  position: relative;  transition: background 333ms var(--my-ease);}
     & li:hover { background: var(--my-black-10);}
     & span { order: -1; display: block;  font-size: var(--font-size-h6);}
     & h3 { margin-block: 2rem; transition: color 250ms; }
     & a { display: inline-block; margin: auto 0 0 auto;  }
     & a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
     & a::before { content: ''; display: block;  width: 2.75rem; height: 2.75rem; background: url('/img/arrow-right-black.svg') 40% 50% / 60% 60% no-repeat; border-radius: 50%;  transition: background 250ms;}
     
     & a:hover { opacity: 1;}


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

/* =========================================================== */
/* ==================== TITLE LIST SPLIT ===================== */
/* =========================================================== */
section.title-list-split li { display: flex; }

@media only screen and (min-width: 768px) {   
    section.title-list-split .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem;}
    section.title-list-split ul { margin-top: 0.5em;}
}


/* =========================================================== */
/* ======================= WIDE SPLIT ======================== */
/* =========================================================== */
section.wide.split h3 ~ *:not(h3) { margin-left: var(--margin-left-large); }
section.wide.split h3 { max-width: 50%;}

@media only screen and (min-width: 769px) {
    section.wide.split h3 + * { margin-top: calc(var(--line-height-small) * var(--font-size-h3) * -1);  }   
}











/* --------------- LEGAL --------------- */
body.legal { --background-color: var(--my-black); --main-color: var(--my-soft-white); --faded-color: var(--my-white-40); }
body.legal :is(.logo, header button) { filter: brightness(0) invert(1)}
body.legal section.wide .container { max-width: 40rem; padding-top: 2rem; }
body.legal footer { border-top: 1px solid var(--my-white-40);}

/* --------------- POSTS --------------- */
body.posts main section { background: var(--background-color); }
body.posts main section .container { max-width: 58rem; }
body.posts section.intro { padding-bottom: 0; }
body.posts section.intro time { font-family: var(--mono-font); color: var(--faded-color); }

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



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


/* MAX */
@media only screen and (min-width: 769px) {
    :root { 
        --margin-left: 30%; 
        --margin-left-large: 50%;
    }
}
@media only screen and (max-width: 768px) {
    :root { 
        --gutter-top: 1rem; 
        --gutter-side: 1rem; 

        --font-size-huge:  2.5rem;             
        --font-size-h1:    1.5rem;           
        --font-size-h2:    1.4rem;             
        --font-size-h3:    1.3rem;           
        --font-size-h4:    1.2rem;           
        --font-size-h5:    1.1rem;           
        --font-size-h6:    1rem;     
    }
}

@media only screen and (max-width: 350px) {
    :root { 
        --root-font-size: 4.575vw;
        --font-size-body:  .8rem;  
        --font-size-small: .7rem;  
        --font-size-tiny:  .6rem;  
    }
}

/* --------------- REVEAL --------------- */
.reveal .line-wrap { display: block; overflow: hidden; }
.reveal .line-inner { display: block; white-space: nowrap; transform: translateY(110%); }
.reveal.visible .line-inner {
    transform: translateY(0);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s);
}


.reveal .fade-in { opacity: 0; }
.reveal.visible .fade-in { opacity: 1; transition: opacity .8s ease var(--delay, 0s); }

.reveal :is(h1, h2, h3) { border-color: transparent; }
.reveal.visible :is(h1, h2, h3) { border-color: var(--faded-color); transition: border-color 1.5s ease var(--delay, 0s); }
.reveal.dark.visible :is(h1, h2, h3) { border-color: var(--my-white-40); }
.reveal li::before { opacity: 0; }
.reveal.visible li::before { opacity: 1; transition: opacity .6s ease var(--delay, 0s); }

.reveal .prose ul > li:has(> .line-wrap)::before { content: none; }
.reveal .prose ul > li > .line-wrap:first-child .line-inner::before { content: ">"; display: inline-block; margin-right: .3em; }

@media (prefers-reduced-motion: reduce) {
    .reveal .line-inner { transform: none; }
    .reveal :is(li::before, .fade-in) { opacity: 1; }
}


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

/* --------------- ANIMATIONS --------------- */
@view-transition {navigation: auto;}
@keyframes fade-in  {
    from { opacity: 0; transform: translateY(1rem);}
    to { opacity: 1; transform: none;}
}