* {padding: 0; margin: 0;  border: 0; box-sizing: border-box; accent-color: var(--my-blue);}
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.39vw, 24px); scroll-behavior: smooth; overscroll-behavior: none; scrollbar-gutter: stable; }
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; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
p:last-of-type { margin-bottom: 0;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
p strong { font-weight: var(--font-semibold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: "Haffer", system-ui, sans-serif;
    --header-font: "Reckless Standard S", system-ui, sans-serif;

    /* Font weights */
    --font-light: 300; 
    --font-regular: 400; 
    --font-semibold: 600; 

    /* Font sizes */
    --font-size-huge: 7.5rem;   /* 150px */
    --font-size-h1: 3.8rem;       /* 80px */
    --font-size-h2-large: 3rem; /* 60px */
    --font-size-h2: 2.5rem;     /* 50px */
    --font-size-h3: 2rem;       /* 40px */
    --font-size-h4: 1.5rem;     /* 30px */
    --font-size-h5: 1.25rem;    /* 25px */
    --font-size-h6: 1rem;       /* 20px */
    --font-size-body: .85rem;   /* 17px */
    --font-size-small: .8rem;   /* 16px */
    --font-size-tiny: .7rem;    /* 14px */


    /* Colors */  
    --main-color: var(--my-black);
    --background-color: var(--my-white);

    --gradient-dir: 0deg; 

    --my-blue-orange-gradient: linear-gradient(90deg, #DBCCC5 0.02%, #FF5519 9.02%, #FFD1D8 21.02%, #006EB1 41.02%, #262D2E 64.02%, #000524 100.02%);
    --my-blue-orange-gradient-to-top: linear-gradient(0deg, #DBCCC5 0.02%, #FF5519 9.02%, #FFD1D8 21.02%, #006EB1 41.02%, #262D2E 64.02%, #000524 100.02%);
    --my-blue-red-beige-gradient: linear-gradient(0deg, #000524 0%, #550010 33%, #6584FF 66.5%, #DBCCC5 90%);
    --my-blue-red-gradient: linear-gradient(90deg, #550010 0%, #6584FF 100%);
    --my-red-orange-gradient: linear-gradient(90deg, #550010 0%, #FF5519 100%);
    --my-blue-button-gradient: linear-gradient(90deg, #000524 0%, #550010 50%, var(--my-blue) 100%);
    --my-white-gradient: linear-gradient(180deg, var(--my-almost-white) 0%, var(--my-white) 100%);
    --my-white-gradient-inverse: linear-gradient(0deg, var(--my-almost-white) 0%, var(--my-white) 100%);
    --my-black-gradient: linear-gradient(180deg, var(--my-almost-black) 0%, var(--my-black) 100%);
    --my-black-gradient-inverse: linear-gradient(0deg, var(--my-almost-black) 0%, var(--my-black) 100%);

    /* Dynamic gradients */
    --my-blue-beige-gradient: #DBCCC5 0%, #0047E2 100%;
    --my-red-blue-beige-gradient: #DBCCC5 9.89%, #6584FF 47.58%, #550010 109.76%, #000524 150.38%, #550010 167.52%, #FF5519 181.22%; 
    --my-orange-black-red-blue-beige-gradient: #DBCCC5 0%, #6584FF 22%, #550010 60%, #000524 82%, #550010 92%, #FF5519 100%;
    --my-orange-pink-blue-darkblue-gradient: #000524 0.02%, #262D2E 36%, #006EB1 58.99%, #FFD1D8 78.98%, #FF5519 90.98%, #DBCCC5 99.97%;
    --my-darkblue-blue-pink-gradient: #000524 0.02%, #262D2E 36%, #006EB1 58.99%, #FFD1D8 95%;
    
    
    --my-black: #000;
    --my-black-30: rgba(0,0,0,0.3);
    --my-black-60: rgba(0,0,0,0.6);
    --my-white: #FFF;
    --my-white-30: rgba(255,255,255,.3);
    --my-white-40: rgba(255,255,255,.4);
    --my-white-85: rgba(255,255,255,.85);
    --my-black-85: rgba(0,0,0,.85);
    --my-black-40: rgba(0,0,0,.4);
    --my-almost-white: #F5F5F5;
    --my-almost-black: #1A171B;
    --my-red: #550010;
    --my-orange: #FF7048;
    --my-blue: #0047E2;
    --my-blueish: #6584FF;
    --my-dark-blue: #000524;
    --my-beige: #DBCCC5;
    --my-greyish-60: rgba(235, 235, 235, .6);

    --odf-pink: #EAA0A5;
    --odf-creme: #F9F4EE;


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

    /* Widths */
    --gutter-side: 1.6rem;
    --gutter-top: 1rem;
    --max-width: 80rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 62.5rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 4rem; 
    --half-gap: calc(var(--gap) / 2); 
    --t-width: 28em;  

    /* Margins */
    --margin: var(--margin-y) auto;
    --margin-y: 5rem; 
    --padding-top: 5rem;
    --btn-padding: 0.5em 1.25em 0.5em .875em;

    /* 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: .23em; 
    

    --cut-corner-width: 3rem;
    --cut-corner-bottom-right: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-corner-width)), calc(100% - var(--cut-corner-width)) 100%, 0 100%);
    --cut-corner-bottom-left: polygon(0 0, 100% 0, 100% 100%, var(--cut-corner-width) 100%, 0 calc(100% - var(--cut-corner-width)));
    --cut-corner-top-left: polygon(var(--cut-corner-width) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut-corner-width));
    --cut-corner-top-right: polygon(0 0, calc(100% - var(--cut-corner-width)) 0, 100% var(--cut-corner-width), 100% 100%, 0 100%);


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

/* --------------- DARK MODE --------------- */
html.dark {
    --main-color: var(--my-white);
    --background-color: var(--my-black);
    --my-almost-white: var(--my-almost-black);
    --my-white-30: var(--my-black-30);
    --my-white-40: var(--my-black-40);
    --my-white-85: var(--my-black-85);
    --my-white-gradient: var(--my-black-gradient);
    --my-white-gradient-inverse: var(--my-black-gradient-inverse);
}

html.theme-transition,
html.theme-transition *, 
html.theme-transition *::before,
html.theme-transition *::after  {
    transition: background-color 300ms var(--my-ease),
                color 300ms var(--my-ease),
                border-color 300ms var(--my-ease),
                transform 300ms var(--my-ease)
                 !important;
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-regular); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em; }
h1, .h1 {font-size: var(--font-size-h1); } 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3); }
h4, .h4 {font-size: var(--font-size-h4); } 
h5, .h5 {font-size: var(--font-size-h5); } 
h6, .h6 {font-size: var(--font-size-h6); } 
.huge { font-size: var(--font-size-huge); text-transform: uppercase; font-family: var(--primary-font);}
.kicker { font-size: var(--font-size-small); color: var(--my-orange); font-family: var(--header-font);}
.body { font-family: var(--primary-font); font-weight: var(--font-regular); font-size: var(--font-size-body);}

/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
section:first-of-type { padding-top: var(--padding-top); }
header, main, footer { max-width: var(--max-width-ultra-wide); width: 100%; margin: 0 auto; position: relative; min-width: 0; }
nav#desktop, footer > nav, .container {max-width: var(--max-width); width: var(--width); margin: var(--margin); position: relative; }
section { margin: 0 auto; position: relative; }
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.ultrawide .container { max-width: unset; width: 100%;  }
section.narrow, .container.narrow { max-width: var(--max-width-narrow); }
section.light { color: var(--my-white); }
section.dark { color: var(--my-black); }

/* IMAGES */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
.media :is(img,video) { object-fit: cover;}
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; }

/* BUTTONS */
button { background: none; color: inherit; font: inherit; line-height: inherit; -webkit-appearance: none; appearance: none; touch-action: manipulation;  text-align: center; }
button,label { cursor: pointer;  user-select: none; }
.btn { background: var(--my-blue); color: var(--my-white); padding: var(--btn-padding); border-radius: var(--btn-border-radius); text-align: center;  display: inline-flex;  align-items: center;   font-weight: var(--font-semibold); gap: .75em; overflow: hidden; position: relative; }
.btn svg { width: .7rem; height: auto;  transition:  500ms var(--my-ease); transition-property: left, transform; z-index: 3; position: relative; left: 0; }
.btn span { transition: transform 500ms var(--my-ease);}
.btn::before { content: attr(data-text); display: inline-flex; align-items: center; padding-left: 1em; position: absolute; top: -1%; left: 0; width: 100%; height: 102%; background: var(--my-black); transform: translateX(-100%);  transition: border-radius 500ms var(--my-ease), transform 500ms var(--my-ease); color: var(--my-white);  z-index: 2;  border-radius: 0 2em 2em 0;  }
.btn.black { background: var(--my-black);}

:is(.target:hover .btn, .btn:hover) svg { left: calc(100% - .5em); }
:is(.target:hover .btn, .btn:hover) span { transform: translateX(1.25rem);}
:is(.target:hover .btn, .btn:hover)::before { transform: none;  border-radius: var(--btn-border-radius); }

.btn-bare { font-weight: var(--font-semibold);  display: inline-flex; position: relative;  }
.btn-bare::before { content: ""; position: absolute; bottom: 0; width: 100%; transform: scaleX(1); will-change: transform; transition: transform 500ms var(--my-ease); height: 1px; display: block;  background: var(--main-color);}
.btn-bare.activate::before { transform: scaleX(0);}
.btn-bare:hover::before { transform: translateY(.1em);}

.activate-children > * { transition: transform 500ms, opacity 500ms; transition-delay: calc(var(--cascade, 0) * var(--own-delay, 100ms)); }
.activate-children.activate > * { transform: translateY(1rem); opacity: 0;  }

/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { position: fixed; z-index: 10; --link-padding: .25rem .9rem; color: var(--my-white); }
body > .logobox {margin: 0 auto; mix-blend-mode: difference; color: var(--my-white); padding: 1rem 0; top: 0; left: 0; width: var(--logo-width); display: block; position: fixed; z-index: 11; right: 0; margin: 0 auto; width: var(--width);  transform: translateY(calc(1rem * var(--scroll-perc, 0))); transition: 333ms var(--my-ease-out); transition-property: color, transform; pointer-events: none;}
body > .logobox .logo { display: flex; max-width: var(--logo-width); width: 100%;   pointer-events: all;}
body[data-blend=false] > .logobox { mix-blend-mode: unset; }
header .container { display: grid; align-items: center; grid-template-columns: var(--logo-width) auto var(--logo-width); margin: 0 auto;  grid-gap: 5rem; transform: translateY(calc(1rem * var(--scroll-perc, 0))); transition: transform 333ms var(--my-ease-out);  z-index: 2;}
.loading :is(header .container, body > .logobox) { transition: 0s; }
header img, header svg { max-width: 100%;}
nav#mobile, .burger, .mobile { display: none;  }
#skiplink { position: absolute;  left: 50%; top: -40rem; transform: translate(-50%, -50%);  text-transform: none; font-size: 1rem; background: var(--background-color); color: var(--main-color); opacity: 0; pointer-events: none; text-align: center; padding: 0.5rem;  z-index: 5; }
#skiplink:focus { top: 4rem; opacity: 1; pointer-events: all; }

button.theme-toggle { --toggle-width: 3.6rem; width: var(--toggle-width); display: flex; gap: calc(.75 / 3.6 * var(--toggle-width)); margin-left: auto; background: var(--my-greyish-60); border-radius: 100vmin; justify-content: center; padding: calc(.3 / 3.6 * var(--toggle-width)) calc(.5 / 3.6 * var(--toggle-width));  position: relative;   backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); }
button.theme-toggle::before { content: ""; height: 100%; width: calc(1.9 / 3.6 * var(--toggle-width)); border-radius: 100vmin; background: var(--my-white-40); position: absolute; left: 0; top: 0; transition: transform 333ms var(--my-ease);  }
button.theme-toggle svg { width: calc(.95 / 3.6 * var(--toggle-width)); position: relative; z-index: 2; transition: opacity 333ms var(--my-ease) 167ms; color: var(--main-color); height: auto; }
button.theme-toggle svg:nth-of-type(1) { opacity: 1;}
button.theme-toggle svg:nth-of-type(2) { opacity: .5;  }

.resizing .dark button.theme-toggle::before { transition: 0s;}
.dark button.theme-toggle::before { transform: translateX(calc(var(--toggle-width) - 100%));  }
.dark button.theme-toggle svg:nth-of-type(1) { opacity: .5;}
.dark button.theme-toggle svg:nth-of-type(2) { opacity: 1;}

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: 1rem 0;  width: 100%; grid-column: 2; z-index: 11;  }
nav#desktop > ul { display: flex; justify-content: center; align-items: center;  position: relative; max-width: max-content; margin: 0 auto; background: var(--my-greyish-60); border-radius: 100vmin;  backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);  }
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li.active a { -webkit-text-stroke: .75px var(--main-color);}
nav#desktop > ul li a  { display: flex;  -webkit-text-stroke: 0px var(--main-color);}
nav#desktop > ul > li > a { padding: var(--link-padding); color: var(--main-color);}

nav#desktop > ul::before { position: absolute; top: 0; left: 0; width: var(--w, 0); height: 100%;  background: var(--my-white-40); content: ""; transition: transform 333ms var(--my-ease), width 333ms var(--my-ease); transform: translateX(var(--l, 0px)); border-radius: 100vmin;}
:is(.loading,.resizing) nav#desktop > ul::before { transition: 0s;}




/* MOBILE NAV */
nav#mobile { position: absolute; top: 0; background: var(--my-almost-white); pointer-events: none;  padding: 0 var(--gutter-side);  transition: 500ms var(--my-ease); transition-property: opacity, filter, transform; transform: scaleY(1.05); filter: blur(.2rem);  height: 100vh; height: 100dvh; width: 100%; flex-direction: column; align-items: center;   opacity: 0; color: var(--main-color); display: none; }
nav#mobile > ul { display: flex;flex-direction: column; margin-top: var(--padding-top); width: 100%; }
nav#mobile > ul > li { opacity: 0; transform: translateY(-1rem); transition: 333ms var(--my-ease) calc(50ms + var(--cascade, 0) * 50ms); transition-property: transform, opacity;  }
nav#mobile > ul > li > a { padding: 0.75em 0; color: var(--own-color); display: block;  font-size: var(--font-size-h5); --own-color: var(--my-black-30);  border-bottom: 1px solid var(--own-color);  }
nav#mobile > ul > li.active > a { --own-color: var(--my-black); }
nav#mobile > ul > li:has(+li.active) > a { border-bottom: 1px solid var(--my-black) }

nav#mobile .bottom { margin-top: auto; padding-block: 2rem 4rem; width: 100%;  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;  grid-gap: 1rem;}
nav#mobile .bottom p { grid-column: -1/1;}
nav#mobile .bottom p a { font-weight: var(--font-semibold);}
nav#mobile .bottom .socials li a { --icon-size: 2rem; background: var(--my-black); color: var(--my-white); padding: .5rem; }

html.dark nav#mobile > ul > li > a { --own-color: rgba(255,255,255,0.3); }
html.dark nav#mobile > ul > li.active > a { --own-color: var(--my-white); }
html.dark nav#mobile > ul > li:has(+li.active) > a { border-bottom-color: var(--my-white); }
html.dark nav#mobile .bottom .socials li a:not(:hover) { background: var(--my-white); color: var(--my-black); }

/* Burger */
button.burger {  width: 2.5rem; height: 2rem;  z-index: 99;  display: none; align-items: center; background: var(--my-greyish-60); border-radius: 100vmin; justify-content: center; backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);    transition: background 500ms var(--my-ease); margin-left: auto;  margin-top: .6rem;  }
button.burger:focus-visible { outline: 1px solid var(--main-color); outline-offset: 4px; } 
button.burger > span { width: 1.25rem; height: 2px; position: absolute; background: var(--main-color); transition: 333ms var(--my-ease); }
button.burger > span:nth-of-type(1) { transform: translateY(-.18rem); transform-origin: bottom right; }
button.burger > span:nth-of-type(2) { transform: translateY(.18rem); transform-origin: top left; }

/* Burger open */
body.menu-open button.burger { background: var(--my-white);}
body.menu-open button.burger span:nth-of-type(2) { transform: translate(0.12rem, .42rem) rotate(-45deg) translateX(.03rem);}
body.menu-open button.burger span:nth-of-type(1) { transform: translate(-0.20rem, .42rem) rotate(45deg) translateX(-.03rem); }
body.menu-open nav#mobile { opacity: 1; filter: blur(0); pointer-events: all; transform: none; }
body.menu-open nav#mobile > ul > li { transform: none; opacity: 1; }
body.menu-open .logobox { color: var(--main-color); mix-blend-mode: unset;}
html.dark body.menu-open button.burger > span { background: var(--my-black); }

@media only screen and (max-width: 1250px) {
    header .container { grid-template-columns: var(--logo-width) 1fr auto; grid-gap: 1rem; }
}

@media only screen and (max-width: 850px) {
    header .container { grid-template-columns: 1fr;}
    header .container nav#desktop { display: none; }
    header .container button.theme-toggle {  display: none; }
    header #mobile { display: flex; }
    header button.burger { display: flex;  }    
    
    button.theme-toggle { --toggle-width: 4.5rem; height: 2rem; padding-block: 0; align-items: center;  }
    header button.theme-toggle { backdrop-filter: none; -webkit-backdrop-filter: none;}
    html:not(.dark) header button.theme-toggle { background: var(--my-black-30);}
    html:not(.dark) header button.theme-toggle svg {  color: var(--my-white);}
    html.dark header button.theme-toggle { background: rgba(255,255,255,0.15);}
    html.dark header button.theme-toggle::before { background: rgba(255,255,255,0.3);}

    
}


/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { background: var(--main-color); color: var(--background-color); }
footer > .container {  margin-block: 3.5rem; display: grid; grid-template-columns: 1fr auto 1fr;  grid-gap: 2rem;}
footer nav > ul { display: grid; grid-gap: .6rem; font-weight: var(--font-semibold);}
footer nav > ul a:hover { text-decoration: underline;}
footer nav > ul > li { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
footer nav > ul a ~ a { font-weight: var(--font-regular); font-size: var(--font-size-tiny); }

footer .brand {  display: flex; align-items: center; }
footer .brand svg { max-width: 9rem;  width: 100%; margin-inline: -2.2rem; }
footer .brand span { transition: 333ms var(--my-ease); transition-property: opacity, transform; }
footer .brand span:nth-of-type(2) { transition-delay: 125ms; --x: -.5rem; }
footer .brand.activate span { transform: translateX(var(--x, .5rem)); opacity: 0;}

footer .extra { margin-top: auto; display: grid; grid-gap: .5rem;  align-items: center; max-width: 25rem; margin-left: auto;  }
footer .extra > * { display: grid;  grid-template-columns: 1fr auto; grid-gap: 2rem .75rem;}
footer .extra > * > *:last-child { margin-right: auto;  margin-left: 0;}
footer .extra a { font-weight: var(--font-semibold);}
footer .extra .review { color: var(--my-blue); background: var(--my-white); padding: var(--btn-padding); font-weight: var(--font-semibold); border-radius: 100vmin; max-width: max-content;  transition: color 250ms var(--my-ease);}
footer .extra .review:hover { color: var(--my-orange); }
footer .extra .review svg { width: 1em; height: auto; display: inline-flex; transform: translateY(.05em); margin-right: .3em;}
footer .extra nav { display: flex; flex-direction: column; grid-gap: 1rem; }
footer .extra nav > p { font-weight: var(--font-semibold);}
footer .extra nav ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: .75rem; margin-bottom: 2rem; }
footer .extra nav ul li a { font-weight: var(--font-regular); }
footer .extra nav ul li a:not(:hover) {opacity: .85; }

ul.socials { display: flex; align-items: center; gap: 0.4rem; --icon-size: 2.025rem;  }
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; padding: .5rem;  border-radius: 50%; background: var(--my-white); color: var(--my-black);  transition: 125ms var(--my-ease); transition-property: color, background-color; }
ul.socials li a:hover { color: var(--my-white); background: var(--my-orange);}

footer .postfooter { background: var(--my-white); display: flex; flex-direction: column;  color: var(--my-black); font-size: var(--font-size-tiny);}
footer .postfooter .container { margin: 1rem auto;   display: flex; justify-content: space-between;} 
footer .postfooter ul { display: flex; gap: 1rem;; }
footer .postfooter ul a:hover { text-decoration: underline;}
footer .postfooter ul:last-of-type { margin-left: auto; }
footer .postfooter .reference a:not(:hover) { opacity: .4;}

@media only screen and (max-width: 1024px) {
    footer .postfooter ul { flex-direction: column; gap: .5rem; }
    footer .postfooter ul:last-of-type { align-items: flex-end; }
}

@media only screen and (max-width: 850px) {
    footer .container { grid-template-columns: 1fr 1.5fr; }
    footer .container .brand { grid-column: -1/1; order: -1; margin: 0 auto; }
    /* footer .container .extra > * { grid-template-columns: auto auto; } */
    footer .container .extra > * > * { margin-left: 0;}
}

@media only screen and (max-width: 600px) {
    footer .container { grid-template-columns: 1fr; }
    footer .container > nav > ul:first-of-type {  margin-block: 2rem;}
    footer .extra {  max-width: unset; width: 100%; }
    footer .socials li a { --icon-size: 2rem; }
    footer .container { margin-bottom: 2rem;}
    footer .container .extra > div { align-items: center; }
    footer .container .extra > * > p { white-space: nowrap;}
    footer .container .extra > * > ul { grid-template-columns: 1fr; }
    footer .container .extra .socials { margin-left: auto; }

    footer .postfooter .container { margin-block: 1rem;}
    footer .postfooter.postfooter :is(.container, ul) { flex-direction: column; align-items: center;}
    footer .postfooter ul:last-of-type { order: -1; margin: 0 auto;  }
    footer .postfooter ul:first-of-type > li:nth-of-type(1) { margin-bottom: 1rem;}
}


/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing { padding-top: 0; display: flex; flex-direction: column; z-index: 2;  }
section.landing h1 { font-size: var(--font-size-huge); margin-bottom: 0.1em;  font-weight: var(--font-semibold); font-family: var(--primary-font);}
section.landing .container { position: absolute;  left: 0; right: 0;  width: 100%; height: auto; min-height: calc(50% + var(--font-size-huge) * .9); bottom: 0; margin: 0 auto; z-index: 2; width: var(--width); max-width: var(--max-width-narrow);  }
section.landing .media { clip-path: var(--cut-corner-bottom-right); max-height: calc(100vh - var(--cut-corner-width)); min-height: 30rem;}
section.landing .media img { object-position: 50% 15%;}
section.landing .prose { font-size: var(--font-size-h4);  max-width: 14em; }
section.landing .btn { margin-top:  2.2rem;}

section.landing + section { margin-top: calc(var(--cut-corner-width) * -1); padding-top: var(--cut-corner-width); }


@media only screen and (min-width: 851px) and (max-width: 1035px) {
    section.landing h1 {  font-size: 11.5vw;}
}

@media only screen and (max-width: 850px) {
    section.landing .media { height: calc(100vh - var(--cut-corner-width)); max-height: 60rem;}
    section.landing .container { min-height: calc(50% + var(--font-size-huge) * 1.7); text-align: center; align-items: center; display: flex; flex-direction: column; }
    section.landing h1 { max-width: 5.7em; margin-bottom: .3em;}
}

/* =========================================================== */
/* ========================= PAYOFF ========================== */
/* =========================================================== */
section.payoff { display: flex; flex-direction: column; background: var(--my-beige); }
section.payoff::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: var(--my-blue-red-beige-gradient); transform: scaleY(var(--perc,0)); transform-origin: bottom; transition: 1s var(--my-ease-out); }
section.payoff .container {  text-align: center; font-weight: var(--font-semibold); max-width: 18.5rem; color: var(--my-white);  margin-bottom: calc(var(--margin-y) * 1.6); } 
section.payoff hr { background: var(--my-white); height: 1px; margin: 2rem 0; } 
section.payoff hr ~ * { font-family: var(--header-font);  font-size: var(--font-size-h2); line-height: var(--line-height-small); font-weight: var(--font-regular);}



/* =========================================================== */
/* ============== TEXT WITH IMAGE AND GRADIENT =============== */
/* =========================================================== */
section.payoff + section.text-image-gradient { background: none; }
section.text-image-gradient { background: var(--my-almost-white); overflow-x: clip;}
section.text-image-gradient .container { display: grid; grid-template-columns: calc(50% - var(--half-gap)) min(50%, 73rem);  width: var(--width) }
section.text-image-gradient article .h1 { font-family: var(--primary-font); font-weight: var(--font-light); font-size: var(--font-size-h1); max-width: var(--t-width);}
section.text-image-gradient article.has-header-medium .h1 { font-size: var(--font-size-h2);  font-weight: var(--font-regular); font-family: var(--header-font); }
section.text-image-gradient article p { max-width: 25rem; }

section.text-image-gradient figure {display: grid; grid-template-rows: 1fr 1fr; background: var(--my-dark-blue); clip-path: var(--cut-corner-bottom-left); }
section.text-image-gradient figure div {  flex: 1; padding: 5rem 2.8rem;  display: flex; align-items: flex-end;  position: relative;  }
section.text-image-gradient figure div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-blue-orange-gradient-to-top); z-index: -1; transform-origin: 50% 70%;  animation: gradient-skadiddle 10s var(--my-ease) infinite alternate;}
section.text-image-gradient figure figcaption { color: var(--my-white); font-family: var(--header-font); font-size: var(--font-size-h3); max-width: 9em; line-height: var(--line-height-small); }
section.text-image-gradient .btn { margin-top: 2rem; }

body.jobs section.text-image-gradient { background: var(--my-white);}
body.jobs section.text-image-gradient figure div::before { background-size: 100% 100%; background-position-y: 100%;  transition: 4s var(--my-ease); transition-property: background-position, background-size; }
body.jobs section.text-image-gradient figure:not(.activate) div::before { background-size: 100% 400%; background-position-y: 74%; }

@media only screen and (min-width: 1025px) {
    section.text-image-gradient article { max-width: calc(var(--max-width-narrow) / 2); padding-right: 2rem; }
    section.text-image-gradient figure {  width: min(calc(50vw + var(--half-gap)), 73rem); }
    
}

@media only screen and (min-width: 768px) {
    section.text-image-gradient .container { margin: 0 auto;  }
    section.text-image-gradient article { margin-block: var(--margin-y); }
}

@media only screen and (max-width: 1024px) {
    section.text-image-gradient .container { grid-template-columns: 1fr;  width: 100%; }
    section.text-image-gradient article { width: var(--width); margin-inline: auto; padding-block: 2rem; }
    section.text-image-gradient article .h1 { max-width: 7em;}
}

@keyframes gradient-skadiddle {
    0% { transform: scaleY(2) translateY(50%);}
    50% { transform: scaleY(4) translateY(-20%);}
    100% { transform: scaleY(1.5) translateY(11%);}
 }




 
/* =========================================================== */
/* ================= TITLE, TEXT, ACCORDIONS ================= */
/* =========================================================== */
section.accordions { background: var(--my-white-gradient); display: flex; flex-direction: column; }
section.accordions .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: calc(var(--gap) + var(--cut-corner-width) * 2);  margin-bottom: 0;}
section.accordions .container:first-of-type { margin-bottom: 0;}
section.accordions .h2 { font-family: var(--primary-font); font-weight: var(--font-semibold); max-width: 8em;}

section.accordions .container:last-of-type { margin-top: calc(var(--margin-y) / 2); grid-template-columns: 1.25fr 1fr; grid-gap: 2.8rem; align-items: start; }
section.accordions .media-panel { clip-path: var(--cut-corner-top-right); }
section.accordions .media { clip-path: var(--cut-corner-top-right);}

/* Accordion list */
section.accordions ul.accordion {  padding-right: 3rem; }
section.accordions ul.accordion > li { border-top: 1px solid var(--my-black-30); }
section.accordions ul.accordion > li:last-child { border-bottom: 1px solid var(--my-black-30); }
section.accordions ul.accordion h3 { display: flex; align-items: center; margin: 0; padding: 1.1rem 0; cursor: pointer; font-family: var(--header-font); font-weight: var(--font-regular); font-size: var(--font-size-h3); color: var(--my-black-30); transition: color 333ms var(--my-ease); }
section.accordions ul.accordion h3:hover { color: var(--my-black-60);}
section.accordions ul.accordion .body { max-height: 0; overflow: hidden; transition: max-height 500ms var(--my-ease); }
section.accordions ul.accordion .body .inner { padding-bottom: 1.5rem; opacity: 0; transform: translateY(-1rem); transition: transform 500ms var(--my-ease), opacity 500ms var(--my-ease); }
section.accordions ul.accordion .body .btn { margin-top: 1.5rem; }

section.accordions ul.accordion > li[data-open=true] h3 { color: var(--main-color); }
section.accordions ul.accordion > li[data-open=true] .body { max-height: var(--height, unset); }
section.accordions ul.accordion > li[data-open=true] .body .inner { opacity: 1; transform: none; }

/* Dot index */
section.accordions ol.dots { display: flex; flex-direction: column; gap: .5rem;  list-style-type: none;  position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
section.accordions ol.dots > li { width: .4rem; height: .4rem; border-radius: 50%; border: 1px solid var(--main-color); transition: background 333ms var(--my-ease), transform 250ms var(--my-ease);  cursor: pointer;  position: relative; }
section.accordions ol.dots > li::before { position: absolute; top: -.25rem; left: -.25rem; width: calc(100% + .5rem); height: calc(100% + .5rem); content: ""; }
section.accordions ol.dots > li:hover { transform: scale(1.1);}
section.accordions ol.dots > li[data-active=true] { background: var(--main-color); }

html.dark section.accordions ul.accordion li[data-open=false] h3 { color: rgba(255,255,255,0.3);}
html.dark section.accordions ul.accordion h3:hover { color: rgba(255,255,255,0.6);}
html.dark section.accordions ul.accordion > li { border-top: 1px solid rgba(255,255,255,0.3); }
html.dark section.accordions ul.accordion > li:last-child { border-bottom: 1px solid rgba(255,255,255,0.3); }


@media only screen and (max-width: 1024px) {
    section.accordions .container { grid-template-columns: 1fr; grid-gap: 0; }
    section.accordions .container:last-of-type { grid-template-columns: 1fr 1fr;}
}

@media only screen and (max-width: 850px) {
    section.accordions .container { max-width: 30rem; }
    section.accordions .container:last-of-type{ grid-template-columns: 1fr;}
    section.accordions ul.accordion { padding-right: 0;}
    section.accordions ol.dots { display: none; }
}


/* =========================================================== */
/* ======================== SOME JOBS ======================== */
/* =========================================================== */
section.title-text + section.some-jobs .container { margin-top: 0;}
section.some-jobs { overflow: hidden; }
section.some-jobs .container { display: flex; flex-direction: column; align-items: center; }
section.some-jobs .container > :not(.has-slider) { max-width: 30rem; text-align: center; margin-inline: auto;  width: var(--width);}
section.some-jobs .container .h2 { max-width: var(--t-width);}
section.some-jobs .container :is(.btn,.btn-bare) { margin-top: .2rem;  width: max-content;}
section.some-jobs .h2 { font-family: var(--primary-font); font-weight: var(--font-semibold); }
section.some-jobs .slider ul .jobcard { width: clamp(10rem, 25vw, calc(var(--max-width-ultra-wide) / 4));  }


section.some-jobs .activate-children > * > * { transition: transform 333ms, opacity 333ms; transition-delay: calc(var(--cascade, 0) * 100ms); }
section.some-jobs .activate-children.activate > * > * { transform: translateY(1rem); opacity: 0;  }

.jobcard.jobcard { position: relative; display: flex; flex-direction: column; padding: 3.3rem 1.75rem 1.5rem;  overflow: hidden; color: white; aspect-ratio: 3.8/5; scroll-snap-align: start; opacity: 1; transform: none;  min-width: 17.5rem; }
.jobcard::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-blue-red-gradient); content: ""; transform: translateX(var(--x, 0%)) scaleX(1.4); z-index: -1;  transition: transform 2500ms var(--my-ease);  }
.jobcard:hover::before { transition: transform 250ms var(--my-ease-out);}
.jobcard > p { color: var(--my-blueish); order: -1; font-size: var(--font-size-tiny); font-weight: var(--font-semibold);  margin-bottom: .55rem;}
.jobcard h3 { max-width: 8em; font-weight: var(--font-regular);}
.jobcard h3:first-child { margin-top: 1.5rem;}
.jobcard a { display: flex; align-items: center; gap: 1rem; text-decoration: underline; margin-top: auto;}
.jobcard a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 231;}
.jobcard a svg { width: 1.5rem; height: auto; }
.jobcard > a :is(svg,span) { transition: transform 250ms;}
.jobcard:hover > a :is(svg,span) { transform: translateX(.25rem);}

.jobcard.category { padding-top: 2rem;}
.jobcard.category > p { color: var(--my-orange); }
.jobcard.category > a { margin-top: 1.5rem;}


section.has-controls .container { width: 100%;}
section.has-controls .has-slider { width: 100%; min-width: 0; position: relative;   margin-block: 2rem;  --own-delay: 25ms;  }
section.has-controls .has-slider:only-child { margin-block: 0; }
section.has-controls .slider { width: 100%; min-width: 0; overflow: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
section.has-controls .slider ul { display: grid; grid-auto-flow: column; }
section.has-controls .ctrl-btns { display: flex; align-items: center; justify-content: space-between;  position: absolute; width: var(--width); left: 0;right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%); max-width: calc(var(--max-width-ultra-wide) + 2rem); pointer-events: none; z-index: 2; transition: opacity 500ms var(--my-ease) 500ms; }  
section.has-controls .ctrl-btns button { width: 3rem; height: auto; color: var(--my-blue); border-radius: 50%; display: flex;  transition: color 333ms var(--my-ease), opacity 333ms var(--my-ease); pointer-events: all; opacity: 1; }
section.has-controls .ctrl-btns button:hover { color: var(--my-white); }
section.has-controls .ctrl-btns button:nth-of-type(1) { transform: scaleX(-1);  }
section.has-controls .slider:has(.activate) ~ .ctrl-btns { opacity: 0;}
section.has-controls .slider[data-has-scroll=false] ~ .ctrl-btns { opacity: 0;}
section.has-controls .slider[data-right=true] ~ .ctrl-btns button:nth-of-type(2),
section.has-controls .slider[data-left=true] ~ .ctrl-btns button:nth-of-type(1) {  opacity: 0; }


@media only screen and (max-width: 850px) {
    .jobcard.jobcard { scroll-snap-align: center;}
}

/* =========================================================== */
/* ================== THE JOURNEY - SLIDER =================== */
/* =========================================================== */
section.journey-slider.has-controls .ctrl-btns button:not(:hover) { color: var(--my-black);}
.journeycard.journeycard { padding: 1rem 1.75rem 1.25rem;}
.journeycard.journeycard::before { width: 100%; height: 100%;  transform: none; background: linear-gradient(180deg, var(--my-orange-black-red-blue-beige-gradient)); background-size: 100% 300%;   transition: background-position 500ms var(--my-ease); }
.journeycard h3 { height: 2.4em; }
.journeycard a {  text-decoration: none;}
.journeycard::after { content: ""; width: 1px; height: calc(100% - 1.75rem - 3rem); top: 1.75rem; position: absolute; right: -.5px; background: var(--my-white); z-index: 2;}
.journeycard > svg {  height: 3.75rem; width: auto; margin-top: 1rem; }
.journeycard > p:has(+p) { margin-bottom: 0;}
.jobcard .prose { margin-top: auto; color: var(--my-white); font-weight: var(--font-regular); font-size: var(--font-size-small); }
.jobcard .prose svg { width: 1.5rem; height: auto; }
.jobcard.black { background: var(--my-black);}
.jobcard.black::before { display: none; }

.journeycard.phase-1::before { background-position: 0 0%;}
.journeycard.phase-2::before { background-position: 0 50%;}
.journeycard.phase-3::before { background-position: 0 95%;}
.journeycard.phase-1:hover::before { background-position: 0 15%;}
.journeycard.phase-2:hover::before { background-position: 0 30%;}
.journeycard.phase-3:hover::before { background-position: 0 60%;}


/* =========================================================== */
/* ================ FULLWIDTH IMAGE WITH TEXT ================ */
/* =========================================================== */
section.image-cover { overflow: hidden;}
section.image-cover .container { display: flex; flex-direction: column; margin: 0 auto;  }
section.image-cover .media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.image-cover .container .container { margin: 0 auto; width: var(--width); max-width: var(--max-width-narrow); }
section.image-cover article {isolation: isolate; margin-top: 20.5rem; min-height: 15.5rem; position: relative; max-width: 45rem; padding: 2rem 2.5rem 4rem 0; display: grid; grid-template: auto 1fr / 1.2fr 1fr; grid-template-areas: "h p" "t p"; grid-gap: 0 2.5rem;}
section.image-cover article::before { content: ""; position: absolute; top: 0; right: 0; width: 100vw; height: 100%; background: var(--my-almost-white); z-index: -1; clip-path: var(--cut-corner-top-right);  }
section.image-cover article .h1 { font-family: var(--primary-font);  font-weight: var(--font-light); grid-area: h;  }
section.image-cover article > p { grid-area: t; font-family: var(--header-font); color: var(--my-blue);}
section.image-cover article .prose {  grid-area: p; margin-top: 1rem; }
section.image-cover article.has-header-medium .h1 { font-size: var(--font-size-h2); line-height: var(--line-height-regular);}
section.image-cover article blockquote { padding-left: 0; border: none; font-style: var(--font-regular); font-family: var(--header-font);}

section.text-image-gradient + section.image-cover .container { margin-top: 0;}

section.image-cover .double article { max-width: unset; grid-template-columns: .5fr 1fr; }
section.image-cover .double article::before { clip-path: var(--cut-corner-top-left); right: unset; left: calc(var(--cut-corner-width) * -1);  }
section.image-cover .double .prose { column-count: 2; column-gap: 2rem;  margin-top: 1.25rem; }
section.image-cover .double .prose > * { break-inside: avoid;}
section.image-cover .double .h1:has(+.prose) { margin-bottom: 0;}

html.dark section.image-cover article > p { color: var(--my-orange);}

@media only screen and (max-width: 850px) {
    section.image-cover .media { position: relative; height: auto; }
    section.image-cover article { margin-top: calc(var(--cut-corner-width) * -1); max-width: unset; width: calc(100% - var(--gutter-side));}
    section.image-cover .double article { grid-template-columns: 1fr;  width: 100%; padding-right: 0; padding-left: 1rem; }
    section.image-cover .double article::before { right: -2rem;   left: unset; width: calc(100% + var(--gutter-side) + 2rem);}
    section.image-cover .double .prose { column-count: 1;}

}

@media only screen and (max-width: 600px)  {
    section.image-cover article { grid-template-columns: 1fr; grid-template-areas: "h" "t" "p";}
}

/* =========================================================== */
/* ========================= REVIEWS ========================= */
/* =========================================================== */
section.reviews + section:not(.title-text) .container { margin-top: 0;}
section.reviews { height: 100vh; height: 100dvh; min-height: 30rem;  display: flex; flex-direction: column;  overflow: hidden;}
section.reviews .container { display: grid; grid-template-columns: 1fr 1fr;  grid-gap: 0 var(--gap); margin-top: calc(var(--margin-y) * 1.5); z-index: 2;  transition: 1000ms var(--my-ease); transition-property: opacity, filter; pointer-events: none; mix-blend-mode: difference; color: var(--my-white); width: var(--width);}
section.reviews .container .h2 { max-width: 10em; }
section.reviews .plane {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; --depth: -3000px;   pointer-events: none; }
section.reviews .plane figure { pointer-events: all;}
section.reviews .plane figure .inner { position: relative; }
section.reviews .plane li { translate: none; rotate: none; scale: none; animation: plane 12s linear forwards; transform: translate(-50%, -50%); width: 150%; height: 150%;   position: absolute; top: 50%; left: 50%; display: grid; grid-gap: 2rem; grid-template: repeat(4,1fr) / repeat(4,1fr); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform, opacity;   }
section.reviews .plane li span.play { font-size: var(--font-size-body); bottom: 0.75rem; left: 0.75rem; }
section.reviews .plane li figure { grid-row: var(--row); grid-column: var(--col); transition: opacity 1000ms; }
section.reviews .plane li figure img { object-fit: contain; transition: transform 333ms var(--my-ease);  pointer-events: all;}
section.reviews[data-active=false] .plane li { animation-play-state: paused;}
section.reviews .plane li figure img:hover {  cursor: pointer;  }

section.reviews .plane[data-flip=true] li { animation-play-state: paused;}
section.reviews:has(.plane[data-flip=true]) .container { opacity: 0.1; filter: blur(.15rem); transition-delay: 500ms;}
section.reviews .plane li[data-show=false] figure img { transform: scale(0);}

section.reviews[data-active=false] .plane li figure { opacity: 0; }

section.reviews .has-slider .slider { padding-inline: 1rem; margin-block: -2rem; padding-block: 2rem;}
section.reviews .has-slider .slider ul { grid-gap: .5rem;}
section.reviews .has-slider li { width: 18rem; scroll-snap-align: center; position: relative; }

@keyframes plane {
    0% { transform: translate3d(-50%, -50%, var(--depth)); opacity: 0; }
    5% { transform: translate3d(-50%, -50%, calc(var(--depth) * .95)); opacity: 0; }
    10% { transform: translate3d(-50%, -50%, calc(var(--depth) * .9)); opacity: 1; }
    100% { transform: translate3d(-50%, -50%, calc(var(--depth) * -.2)); opacity: 1; }
}

@media only screen and (min-width: 601px) {
    section.reviews .has-slider { display: none; }
}
@media only screen and (max-width: 600px) {
    section.reviews { height: auto;}
    section.reviews .container { grid-template-columns: 1fr;  margin-bottom: 1rem; }
    section.reviews .plane li picture {transform: scale(2.2);}
    section.reviews .plane { display: none; }
}

/* =========================================================== */
/* =================== HIGHLIGHTED REVIEW ==================== */
/* =========================================================== */
section.one-review .container { display: flex; flex-direction: column; align-items: center; }
section.one-review .h2 { max-width: 12em; text-align: center; font-family: var(--primary-font); font-weight: var(--font-semibold); margin-bottom: 2rem; }
section.one-review figure { max-width: 37.5rem; margin-bottom: 2rem;  display: flex;}
section.one-review figure > span { font-size: var(--font-size-body); bottom: 1rem; left: 1rem; transition: transform 250ms var(--my-ease); }
section.one-review figure:hover > span { transform: translate(10%, -10%);}


/* =========================================================== */
/* ============ IMAGE CAROUSEL WITH TEXT OVERLAY ============= */
/* =========================================================== */
section.carousel { overflow-x: clip; }
section.carousel article { position: absolute; left: 0; top: 0; width: 25vw; background: var(--my-white-85); z-index: 2; padding: 2.5rem 2rem 2.5rem; height: 100%; display: flex; flex-direction: column;  align-items: flex-start; }
section.carousel article .h3 { margin-bottom: auto;  padding-bottom: 1.5rem; }
section.carousel article .btn { margin-top: 1.5rem; }
section.carousel .has-slider { margin-block: auto; }
section.carousel .has-slider ul::before { content: ""; width: 25vw; height: 100%; background: var(--my-white);}
section.carousel .has-slider ul li { width: 50vw; scroll-snap-align: center;}
section.carousel .ctrl-btns { width: calc(75vw - var(--gutter-side) * 2); margin-right: var(--gutter-side)}

@media only screen and (max-width: 1024px) {
    section.carousel .has-slider ul::before {  display: none; }
    section.has-controls .container article { position: relative; width: 100%; max-width: 25rem;}
    section.carousel .ctrl-btns { margin: 0 auto; width: var(--width); }
}


/* =========================================================== */
/* ==================== TEXT ON GRADIENT ===================== */
/* =========================================================== */
section:has(+section.text-gradient) .container { margin-bottom: 0;}
section.text-gradient {  
    --top-gradient:linear-gradient(0deg, #DBCCC5 0.01%, #FF5519 9%, #FFD1D8 21%, #006EB1 41%, #262D2E 64%, #000524 100%);
    --bottom-gradient: linear-gradient(0deg, #DBCCC5 0%, #6584FF 22%, #550010 60%, #000524 82%, #550010 92%, #FF5519 100%);
    color: var(--my-white);
    display: flex; flex-direction: column; 
}
section.text-gradient::before, section.text-gradient::after { content: ""; height: 50%; width: 100%;  left: 0;  z-index: -1; position: absolute; transition: 500ms var(--my-ease-out); background-size: 100% calc(200% - var(--perc,0) * 100%); }
section.text-gradient::before { top: 0%;   background-image: var(--top-gradient);  }
section.text-gradient::after { top: 50%;  background-position-y: 100%; background-image: var(--bottom-gradient);  }
section.text-gradient .container { max-width: 40rem; text-align: center; margin-block: calc(var(--margin-y) * 2); }
section.text-gradient .h1 { font-family: var(--primary-font); font-weight: var(--font-semibold); margin-top: 1.525em; }
section.text-gradient svg { width: 1.1rem; display: block; margin: 2.3rem auto 0;  }
section.text-gradient .btn-bare { margin-top: .5em;}

body.loading section.text-gradient::before,body.loading section.text-gradient::after { transition: 0s;}


@media only screen and (max-width: 600px) {
    section.text-gradient .h1 { font-size: var(--font-size-h2); margin-top: 5.3em;}
    section.text-gradient .container { margin: var(--margin);}
}

/* =========================================================== */
/* ===================== TITLE AND TEXT ====================== */
/* =========================================================== */
section:is(.title-text,.text) { display: flex; flex-direction: column;  transition: background-size 1s var(--my-ease); }
section.title-text .container { text-align: center; }
section.title-text .h1  { font-family: var(--primary-font); font-weight: var(--font-regular); margin-bottom: 0;  }
section.title-text .has-text-medium .h1 { font-size: var(--font-size-h3); max-width: 21em; margin-inline: auto; font-family: var(--header-font); }
section.title-text .h1 ~ * { max-width: 28rem; margin-inline: auto; }
section.title-text .btn { margin-top: 2rem}

section.gradient-blue-beige { background: linear-gradient(0deg, var(--my-blue-beige-gradient));  color: var(--my-white);  background-size: 100% 100%; background-position: 0 0%;}
section.gradient-beige-blue { background: linear-gradient(180deg, var(--my-blue-beige-gradient));  color: var(--my-white);  background-size: 100% 100%; background-position: 0 50%;}
section.gradient-red-blue-beige { background: linear-gradient(0deg, #DBCCC5 0%, #0047E2 44.15%, #550010 120.4%, #000524 164.55%, #550010 184.61%, #FF5519 200.67%);  color: var(--my-white);  background-size: 100% 100%; background-position: 0 50%;}
section.gradient-red-black-orange { background: linear-gradient(180deg, var(--my-orange-black-red-blue-beige-gradient)); color: var(--my-white); background-size: 100% 250%; background-position: 0 100%;}
section.gradient-orange-black-red-blue-beige { background: linear-gradient(180deg, var(--my-orange-black-red-blue-beige-gradient)); color: var(--my-white); background-size: 100% 100%; background-position: 0 50%; }
section:is(.title-text,.text).activate { background-size: 100% 150%; }

/* =========================================================== */
/* ========================== INTRO ========================== */
/* =========================================================== */
section.intro {  display: flex; flex-direction: column;   color: var(--my-white); text-align: center;  overflow: clip;}
section.intro .container { margin-bottom: calc(var(--margin-y) * .5);}
section.intro .container .prose { max-width: 48rem; margin: 1rem auto var(--half-gap);}
section.intro :is(picture, picture img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;  object-fit: cover; }
section.intro picture::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: var(--my-black); opacity: .2; }
section.intro::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: linear-gradient(var(--gradient-dir, 0deg), var(--bg)); animation: wooze 8s ease-in-out infinite alternate;  }
section.intro.side::before { animation-name: woozeSideways;}
section.intro .h1 { font-family: var(--primary-font); font-weight: var(--font-semibold);  margin-top: .7rem; margin-bottom: 0; }

@media only screen and (max-width: 500px) {
    section.intro:has(picture) { padding-top: 0; aspect-ratio: 4/5;}
    section.intro .container { margin-top: auto; }
}

/* =========================================================== */
/* ================= TEXT OVERLAYED ON IMAGE ================= */
/* =========================================================== */
section.text-on-image { display: flex; }
section.text-on-image .h2 { font-family: var(--primary-font); font-weight: var(--font-semibold);}
section.text-on-image article { color: var(--my-white); max-width: 27rem; width: 80%; position: relative; z-index: 2;  }
section.text-on-image article .btn { margin-top: 1.5rem; }
section.text-on-image picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
section.text-on-image .media::after { content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(to right, var(--my-black) 50%, transparent); opacity: var(--darken);}
section.text-on-image.cut-corner .media { clip-path: var(--cut-corner-bottom-right);}


/* =========================================================== */
/* ================= GRADIENT TITLE AND TEXT ================= */
/* =========================================================== */
section.gradient-title-text .container { display: grid; grid-template-columns: min(calc(50% - var(--half-gap)), 73rem) calc(50% - var(--half-gap));}
section.gradient-title-text .container > div { justify-self: flex-end;  position: relative;  overflow: hidden; width: 100%; }
section.gradient-title-text .container > div picture { min-height: 100%;}
section.gradient-title-text .container > div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: linear-gradient(var(--gradient-dir, 0deg), var(--bg)); animation: woozeSideways 8s ease-in-out infinite alternate;   z-index: -1; }
section.gradient-title-text .container > div.side::before { animation-name: wooze;}
section.gradient-title-text .h1 { font-family: var(--primary-font);  color: var(--my-white);margin-left: calc(var(--gutter-side) / 2); margin-top: 4rem; margin-bottom: 0;  padding-bottom: 0.5em; border-bottom: 1px solid var(--my-white); margin-bottom: 1em; }
section.gradient-title-text .inner { max-width: 27rem; margin-inline: auto calc(var(--gap) - 1rem); width: 100%; }
section.gradient-title-text + section.gradient-title-text .container > div::before { animation-direction: reverse infinite;}


section.gradient-title-text blockquote { padding-left: 0; font-style: normal;  border: none; font-family: var(--header-font); line-height: var(--line-height-small); font-size: var(--font-size-body); }
section.gradient-title-text blockquote.large { font-size: var(--font-size-h3); max-width: 11em; }
section.gradient-title-text blockquote.orange { color: var(--my-orange); margin-bottom: var(--margin-y); }
section.gradient-title-text blockquote.blue { color: var(--my-blue); margin-bottom: var(--margin-y); }
section.gradient-title-text blockquote.blue { color: var(--my-blue); margin-bottom: var(--margin-y); }
section.gradient-title-text .has-title-sans-serif .h2 { font-family: var(--primary-font); max-width: 10em;}

@keyframes wooze { 
    0% { transform: translateY(0) scaleY(2); }
    30% { transform: translateY(35%) scaleY(2.35); }
    80% { transform: translateY(-60%) scaleY(2.2); }
    100% { transform: translateY(50%) scaleY(2.7); }
}

@keyframes woozeSideways { 
    0% { transform: translateX(0) scaleX(2); }
    30% { transform: translateX(35%) scaleX(2.35); }
    80% { transform: translateX(-60%) scaleX(2.2); }
    100% { transform: translateX(50%) scaleX(2.7); }
}

@media only screen and (min-width: 1025px) {
    section.gradient-title-text .container { margin: 0 auto;  }
    section.gradient-title-text .container > div {  width: min(calc(50vw - var(--half-gap)), 73rem);  } 
    section.gradient-title-text article { max-width: calc(var(--max-width-narrow) / 2); padding-left: var(--gap); margin-top: calc(var(--title-height, var(--font-size-h1) * 2 * var(--line-height-small)) + var(--font-size-h1) * .5 + 4rem);  margin-bottom: 1rem; }
    
    section.gradient-title-text.left article { order: -1; }
    section.gradient-title-text.left .container > div {  width: min(calc(50vw + var(--half-gap)), 73rem); justify-self: unset;}
    section.gradient-title-text.left article { max-width: calc(var(--max-width-narrow) / 2 - 2rem);   margin-left: auto; margin-right: var(--gap); }
    section.gradient-title-text.left .container { grid-template-columns: calc(50% - var(--half-gap)) min(calc(50% - var(--half-gap)), 73rem);   }
    section.gradient-title-text.left .inner { margin-left: var(--gap); max-width: 28rem;}
    section.gradient-title-text.left .inner .h1 { margin-left: 0;}
}

@media only screen and (max-width: 1024px) {
    section.gradient-title-text .container { width: 100%; grid-template-columns: 1fr; margin-block: 0 }
    section.gradient-title-text article { width: var(--width); margin: 0 auto;  padding-block: 2rem; max-width: 28rem; margin-left: var(--gutter-side);}

    section.text-on-image + section.gradient-title-text .container { margin-top: calc(var(--cut-corner-width) * -1); }
    section.gradient-title-text .container > div { padding-top: var(--cut-corner-width);}
}


/* =========================================================== */
/* ==================== TEXT WITH IMAGE ====================== */
/* =========== HAS BLEED FROM GRADIENT-TITLE-TEXT ============ */
/* =========================================================== */
section.text-image .container > div::before { display: none; }
section.text-image .cut-corner { clip-path: var(--cut-corner-bottom-left);}
section.text-image.right .cut-corner { clip-path: var(--cut-corner-bottom-right);}


@media only screen and (min-width: 1025px) {
    section.text-image .container { margin: 0 auto;  }
    section.text-image article { margin: auto 0; padding-block: var(--half-gap) var(--gap);  }
}

@media only screen and (max-width: 1250px) {
    section.text-image article { padding-inline: 0 2rem; margin-bottom: 2rem;  }
}

@media only screen and (max-width: 1024px) {
    section.text-image.text-image .container { grid-template-columns: 1fr; }
    section.text-image article { padding-right: 0;}
    
}



/* =========================================================== */
/* ===================== CALL TO ACTION ====================== */
/* =========================================================== */
section.cta { background: var(--my-almost-white); display: grid; }
section.cta .container { margin-block: 0; }
section.cta form.custom { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem; align-items: center; max-width: var(--max-width-narrow); width: var(--width); transform: translateY(-50%); padding: 1rem; border-radius: var(--btn-border-radius);  background: var(--my-blue);  color: var(--my-white); }
section.cta form.custom fieldset { grid-template-columns: 1fr 1fr 1fr auto;  grid-gap: 1rem; align-items: center; }
section.cta form.custom .btn { background: var(--my-orange); }
section.cta form.custom fieldset:has(.upload) { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
section.cta form.custom .upload label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
section.cta form.custom .upload { align-self: stretch; }
section.cta form.custom .upload-vak { min-height: 0; height: 100%; padding: .3rem .8rem; }
section.cta form.custom .upload-vak > p { line-height: 1.2; }
section.cta form.custom .upload-vak small { display: block; font-size: .85em; opacity: .7; }
section.cta form.custom .btn::before { background: var(--my-black);}
section.cta .h6 { max-width: 12em;  font-family: var(--primary-font); font-weight: var(--font-semibold); margin-right: 2rem;  margin-bottom: 0;}
section.cta .center { max-width: calc(var(--max-width-narrow) - 2rem); margin-inline: auto;  width: var(--width);}
section.cta .ctrl-btns { transform: none; }
section.cta .has-slider { margin-top: 0; margin-inline: auto;  max-width: 100vw;}
section.cta .slider > ul  { grid-gap: 3rem; margin-top: 1rem; }
section.cta .slider > ul > li  { width: clamp(16rem, 25vw, calc(var(--max-width-ultra-wide) / 5)); scroll-snap-align: center; display: grid; grid-template-columns: 33% 66%; grid-gap: 2.25rem; }

.scoutcard .linkedin { width: 1.6rem; height: 1.6rem; margin-top: 1em; background: var(--my-blue); display: flex; padding: 0.4rem; color: var(--my-white); border-radius: var(--btn-border-radius); transition: background 250ms var(--my-ease);}
.scoutcard .linkedin:hover { background: var(--my-orange);}
.scoutcard picture { min-width: 7rem; border-radius: .25rem; overflow: hidden;}
.scoutcard .body { margin: .5em 0 0;}
.scoutcard .body + p { color: var(--my-orange); margin-bottom: 1em;}
.scoutcard a { overflow: hidden;  max-width: 100%; display: block; text-overflow: ellipsis;}
.scoutcard a:hover { text-decoration: underline;}

@media only screen and (max-width: 850px) {
    section.cta form.custom,
    section.cta form.custom fieldset,
    section.cta form.custom fieldset:has(.upload) { grid-template-columns: 1fr; }
    section.cta form.custom { transform: none; margin: -2rem auto 3rem;  max-width: 30rem;}
    section.cta form.custom .upload-vak { min-height: 3.2rem; }
}

/* =========================================================== */
/* ========================== TEXT =========================== */
/* =========================================================== */
section.text .prose { max-width: 40rem; text-align: center;}
section.text .prose h2:first-child { margin-bottom: 2rem; max-width: var(--t-width);}
section.text .prose h2:first-child ~ *  { max-width: 30rem; margin-inline: auto;  }
section.text.none .prose h1 { font-size: var(--font-size-h3); }
section.text.none .prose h2 { font-size: var(--font-size-h4); }
section.text.none .prose h3 { font-size: var(--font-size-h5); }
section.text.none .prose h4 { font-size: var(--font-size-h6); }
section.text:not(.none) { display: flex; flex-direction: column; }
section.text:not(.none) h2 { max-width: 12em; margin-inline: auto; }
section.text.cut-corner { clip-path: var(--cut-corner-bottom-right); z-index: 2;}
body.jobs section.text .prose h2 { font-size: var(--font-size-h2);}

section.text.cut-corner + section.image-cover { margin-top: calc(var(--cut-corner-width) * -1);  }


/* =========================================================== */
/* ======================== ALL JOBS ========================= */
/* =========================================================== */
section.jobs .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: .5rem 1.2rem; align-items: flex-end; }
section.jobs .h2 { font-family: var(--primary-font); font-weight: var(--font-semibold); margin-bottom: -.1em;}
section.jobs .prose ~ * { grid-column: -1/1; }
section.jobs fieldset { margin-top: 2rem; font-weight: var(--font-semibold); display: flex; gap: .3rem .9rem; }
section.jobs fieldset > ul { display: flex; gap: .9rem; }
section.jobs fieldset > ul button { transition: color 333ms var(--my-ease); text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .2em;}
section.jobs fieldset > ul button[aria-pressed=false] { color: var(--my-black-30); text-decoration: none; }
section.jobs fieldset > ul button:hover { color: var(--main-color);}
section.jobs ul.list { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.2rem; align-items: stretch; margin-top: 0.6rem; margin-top: 1rem; }
section.jobs .prose + ul.list  { margin-top: 2rem;}
section.jobs button.more { margin-top: 1.5rem;  font-weight: var(--font-semibold); text-decoration: underline; }
section.jobs button.more[data-active=false] { display: none; }
section.jobs li.job[data-active=false] { display: none; }
section.jobs fieldset { view-transition-name: job-filter; }
::view-transition-group(job-filter) { animation-duration: 250ms; }
::view-transition-group(*) { animation-duration: 250ms; animation-timing-function: var(--my-ease); }

html.dark section.jobs fieldset > ul button[aria-pressed=false]:not(:hover) { color: rgba(255,255,255,0.6)}

.job { display: grid; grid-template-columns: 1fr auto; background: var(--my-white-gradient);  padding: 1rem;  font-size: var(--font-size-small); position: relative; }
.job :is(.h4,p.summary) { grid-column: -1/1;}
.job .summary { max-width: 27em;}
.job .kicker { color: var(--my-blue);  margin-bottom: 0.45rem; order: -2;}
.job .location { order: -1; margin-left: auto; font-size: var(--font-size-tiny); display: flex; align-items: center; }
.job .location span { width: .2em; height: .2em; background: var(--main-color); border-radius: 50%; display: inline-block; margin-inline: .5em; transform: translateY(.15em); }
.job .h4 { margin-bottom: .2em;}
.job a.target { margin: auto 0 0 auto;}
.job a.target::after {  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.job ul { margin-top: 1.7rem;  }
.job ul li { margin-bottom: .1em;}
.job ul li::before { content: ""; background: url('/img/icons/chevron.svg') 50% 50% / contain no-repeat; width: .7em; height: .7em; display: inline-block; margin-right: .5em;  }

html.dark .job ul li::before { background-image: url('/img/icons/chevron-white.svg');}

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media only screen and (max-width: 850px) {
    section.jobs .container { grid-template-columns: 1fr; }
    section.jobs .h2 { margin-bottom: .25em;}
    section.jobs fieldset { flex-direction: column;  }
    section.jobs fieldset ul {  overflow: auto; width: 100vw;  white-space: nowrap;  margin-left: calc(var(--gutter-side) * -1); }
    section.jobs fieldset ul::before,
    section.jobs fieldset ul::after { content: ""; width: var(--gutter-side); height: 1.4rem;  background: linear-gradient(to right, var(--my-white), transparent); position: sticky; margin-right: -.9rem; flex-shrink: 0; left: 0; display: block;  }
    section.jobs fieldset ul::after { margin-right: unset; margin-left: -.9rem; right: 0; left: unset; transform: scaleX(-1); }
    section.jobs ul.list { grid-template-columns: 1fr;  padding-right: 1rem; }
    section.jobs .prose + ul.list { margin-top: 0rem; }
}

@media only screen and (max-width: 500px) {
    .job ul { grid-column: -1/1;}
    .job a.target { grid-column: -1/1; width: 100%; margin-top: 1rem;}
}

/* =========================================================== */
/* =============== ALL WORKING AT TECHNIX JOBS =============== */
/* =========================================================== */
section.for-technix .h2 { margin-top: 0;}
section.for-technix .prose { text-align: center; grid-column: -1/1; max-width: 26rem; margin-inline: auto; }


/* =========================================================== */
/* =================== PROJECTS TO WORK ON =================== */
/* =========================================================== */
section.projects { display: flex; flex-direction: column;background: var(--my-almost-white);  }
section.projects .container { display: grid;   margin: 0 auto;  grid-template-columns: calc(50%) min(calc(50% - var(--half-gap)), 73rem);   }
section.projects .h1 { font-family: var(--primary-font); font-weight: var(--font-semibold); border-bottom: 1px solid var(--my-black); margin-bottom: 0; padding-top: var(--gap); }
section.projects .prose-outer { background: var(--my-white);}


@media only screen and (min-width: 851px) {
    section.projects .left { order: -1;  margin-left: auto; }
    section.projects .container > div  { min-height: 100%; display: grid; grid-template-rows: 1fr 1fr; }
    section.projects .prose { margin-top: 2rem;  max-width: 27em;  padding-bottom: 2rem; }
    section.projects .left { max-width: calc(var(--max-width-narrow) / 2); padding-right: var(--gap);}
    section.projects .right{  width: min(calc(50vw ), 73rem); }
    section.projects .prose-outer {  padding-left: var(--gap); }
}

@media only screen and (max-width: 850px) {
    section.projects .container { grid-template-columns: 1fr; gap: 2rem; }
    section.projects .container .h1 { padding-bottom: 2rem; margin-bottom: 2rem; }
    section.projects .prose-outer {  padding: 2rem; }
}

/* =========================================================== */
/* =================== NO ROLE LISTED CTA ==================== */
/* =========================================================== */
section.no-role .slider ul .jobcard { width: clamp(10rem, calc(100vw / 3), calc(var(--max-width-ultra-wide) / 3));  aspect-ratio: 4.8/5; }

/* =========================================================== */
/* ======================== JOB INTRO ======================== */
/* =========================================================== */
section.job-intro {  display: flex; flex-direction: column; overflow: hidden;  text-align: center;}
section.job-intro .container { margin-bottom: calc(var(--margin-y) * .5);}
section.job-intro .h1 { font-family: var(--primary-font);  font-weight: var(--font-semibold); margin-top: .7rem; margin-bottom: 0.2em;   }
section.job-intro .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-block: 2rem; }
section.job-intro ul.details { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: left; grid-gap: 1.5rem 3rem; max-width: 35rem; margin-inline: auto; }
section.job-intro ul.details strong { display: block; font-weight: var(--font-semibold);}


/* =========================================================== */
/* ============== RELOCATING TO THE NETHERLANDS ============== */
/* =========================================================== */
section.text:has(+section.relocate) .container { margin-bottom: 0;}
section.relocate { display: flex; flex-direction: column; margin: var(--margin); }
section.relocate .container { display: flex; flex-direction: column; align-items: center; background: var(--my-almost-white); clip-path: var(--cut-corner-bottom-right); margin: 0 auto; padding: calc(var(--margin-y) / 2) 2.25rem; } 
section.relocate .kicker { font-size: var(--font-size-h5); margin-bottom: 1em;  }
section.relocate .h2 { font-family: var(--primary-font); font-weight: var(--font-semibold);}
section.relocate .prose { max-width: 30rem; text-align: center;}
section.relocate .btn { margin-top: 2rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem,1fr)); align-items: center; grid-gap: 1.2rem;  width: 100%; margin-top: 1.6rem; }
.cards li { padding: 1.6rem; font-family: var(--header-font); color: var(--my-blue);  width: 100%;  display: grid; grid-template-columns: auto auto; align-items: center; grid-gap: 0 .8rem;  background: var(--background-color); }
.cards li span { max-width: 5em; display: block; line-height: var(--line-height-small);  text-align: center;}
.cards .icon { width: 1.6rem; height: 1.6rem; margin-left: auto;  background: linear-gradient(90deg, #6584FF 16.08%, #550010 118.85%); mask: var(--svg) center center / contain no-repeat }


@media only screen and (max-width: 600px) {
    .cards { grid-template-columns: 1fr 1fr;}
    .cards li { padding: 1rem .8rem;}
    .cards li .icon { width: 1.2rem; height: 1.2rem; }
}


/* =========================================================== */
/* =============== UNIQUE SELLING POINT CARDS ================ */
/* =========================================================== */
li.jobcard { isolation: isolate;}
li.jobcard .h3 { display: flex; align-items: flex-start;gap: .7rem; }
li.jobcard .h3 svg { width: .9em; height: auto; margin-top: .2em;  flex-shrink: 0; }
li.jobcard :is(picture, picture img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: -1; }
li.jobcard.jobcard picture { transform: none !important; opacity: 1 !important;}
li.jobcard picture::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--my-black); opacity: .3; content: "";}


/* =========================================================== */
/* =================== RELOCATION SUPPORT ==================== */
/* =========================================================== */
section.relocation-support .container { display: flex; flex-direction: column; align-items: center; }
section.relocation-support .container > :not(.cards) { max-width: 28rem; text-align: center; margin-inline: auto; }
section.relocation-support .h2 { font-family: var(--primary-font);  font-weight: var(--font-semibold);}
section.relocation-support .cards { grid-template-columns: 1fr 1fr; max-width: var(--max-width-narrow); align-items: stretch; grid-gap: 0 var(--gap); }
section.relocation-support .cards li { grid-template-columns: 1fr; padding-inline: 0; border-bottom: 1px solid var(--my-blue);}
section.relocation-support .cards .heading { display: flex; text-align: left; }
section.relocation-support .cards .heading > div { flex-shrink: 0; margin: .3em .6em 0 0;}
section.relocation-support .cards .prose { color: var(--main-color);  max-width: 24em; margin-left: 2.2rem;}

html.dark section.relocation-support .cards li { border-bottom: 1px solid var(--my-orange); color: var(--my-orange);}
html.dark section.relocation-support .cards .icon { background: var(--my-red-orange-gradient); }



@media only screen and (max-width: 850px) {
    section.relocation-support .cards { grid-template-columns: 1fr; max-width: 24rem;}
    section.relocation-support .h3 { font-size: var(--font-size-h4);}
    section.relocation-support .cards .heading > div { margin-top: 0em; }
}

/* =========================================================== */
/* ======================== COUNTERS ========================= */
/* =========================================================== */
section.counters .container { display: grid; gap: var(--half-gap); }
section.counters ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
section.counters li { background: var(--my-white-gradient-inverse); clip-path: var(--cut-corner-bottom-right); padding: 2.5rem; text-align: center; }
section.counters .counter { margin-bottom: .5rem; font-weight: var(--font-semibold); max-width: max-content; font-family: var(--primary-font); font-weight: var(--font-semibold); margin-inline: auto;  background: linear-gradient(90deg, var(--my-orange-black-red-blue-beige-gradient)); -webkit-background-clip: text; background-clip: text; color: transparent; }
section.counters .counter em { font-style: inherit;  font-weight: inherit;}
section.counters li p { margin: 0; font-family: var(--header-font); }

html.dark section.counters .counter { background-image: var(--my-blue-red-gradient); }

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


/* =========================================================== */
/* ==================== ANIMATED GALLERY ===================== */
/* =========================================================== */
section.animated-gallery { height: 50rem; overflow: hidden; position: relative; contain: layout paint; }
section.animated-gallery .track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.animated-gallery .item { position: absolute; top: 0; left: 0; will-change: transform; }
section.animated-gallery .item picture,
section.animated-gallery .item img { display: block; width: 100%; height: 100%; object-fit: cover; }

section.from-animated-gallery .container { margin-bottom: 1rem; max-width: 25rem; }
section.from-animated-gallery .h2.h2:first-child { font-family: var(--primary-font); font-weight: var(--font-semibold); margin-bottom: 0; max-width: 8em;}


/* =========================================================== */
/* ==================== WHAT WE STAND FOR ==================== */
/* =========================================================== */
section.principles .container { display: flex; flex-direction: column; align-items: center;  margin-bottom: calc(var(--margin-y) / 2);  text-align: center;}
section.principles .container > .h2 { font-family: var(--primary-font);  font-weight: var(--font-semibold); }
section.principles ul.words { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; max-width: calc(var(--max-width-narrow) - 1em); margin-top: 3rem; }
section.principles ul.words li { color: var(--end-color); margin-bottom: 0; font-weight: var(--font-regular);}
section.principles .prose { max-width: 18em; text-align: center; margin: var(--margin); margin-bottom: 0; font-weight: var(--font-semibold);}
section.principles .prose h3 { font-size: var(--font-size-h5); color: var(--my-blue); font-family: var(--header-font);}

@media only screen and (max-width: 850px) {
    section.principles ul.words li { font-size: 4.5vw;  }
}


/* =========================================================== */
/* ========================= CONTACT ========================= */
/* =========================================================== */
section.contact .container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gap);}
section.contact .h4 { color: var(--my-blue); font-weight: var(--font-regular);}

section.contact form.custom {  --form-input-background-color: var(--my-almost-white); --form-label-background-color: var(--my-almost-white);  }
html.dark section.contact form.custom { --form-main-color: var(--my-white); --form-color-focus: var(--my-white); }
section.contact form.custom .btn { grid-column: -1/1; max-width: max-content; }

section.contact .blocks > li:not(:last-of-type) { padding-bottom: 2rem; border-bottom: 1px solid var(--my-black); margin-bottom: 2rem; }
section.contact .blocks li > .btn { margin-top: 1rem; }
section.contact .socials li a { background: var(--my-black); color: var(--my-white); }
section.contact .socials li a:hover { background: var(--my-blue);}
section.contact .team ul { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1.5rem;}
section.contact .team p { max-width: 20em; }
section.contact .team h3.h4 {  margin-top: 2.5rem;}

html.dark section.contact .socials li a:not(:hover) { background: var(--my-white); color: var(--my-black);}

section:is(.team, .contact) .scoutcard { position: relative; overflow: hidden; }
section:is(.team, .contact) .scoutcard a { max-width: 10em; }
section:is(.team, .contact) .scoutcard picture { border-radius: 0; min-width: unset; width: 100%; transition: transform 500ms var(--my-ease); }
section:is(.team, .contact) .scoutcard::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  content: ""; background: var(--my-almost-white); z-index: 2; opacity: 0; transition: opacity 500ms var(--my-ease); }
section:is(.team, .contact) .scoutcard div { position: absolute; bottom: 0; z-index: 3;  font-size: var(--font-size-tiny); transform: translateY(100%); padding: 0.5rem;  backdrop-filter: blur(.5rem); -webkit-backdrop-filter: blur(.5rem); width: 100%;  transition: transform 500ms var(--my-ease);  background: var(--my-white-30); }
section:is(.team, .contact) .scoutcard div * { font-size: inherit;}
section:is(.team, .contact) .scoutcard div h4 { font-weight: var(--font-semibold);}
section:is(.team, .contact) .scoutcard div p { margin-bottom: .2em; color: var(--my-blue);}
section:is(.team, .contact) .scoutcard:hover::before { opacity: .2;}
section:is(.team, .contact) .scoutcard:hover div { transform: none;}
section:is(.team, .contact) .scoutcard:hover picture { transform: translateY(-.5rem);}
@media (hover: none), (max-width: 850px) {
    section:is(.team, .contact) .scoutcard div { transform: none; }
    section:is(.team, .contact) .scoutcard a { max-width: 100%; overflow-wrap: anywhere; }
}

@media only screen and (max-width: 850px) {
    section.contact .container { grid-template-columns: 1fr;}
    section.contact .container form.custom { max-width: 30rem; margin-left: 0; }
    section.contact .container form.custom .btn { grid-column: -1/1;}
    section.contact .team ul { grid-template-columns: 1fr 1fr;}
}


/* =========================================================== */
/* =================== THE JOURNEY - FULL ==================== */
/* =========================================================== */
section.intro:has(+section.journey) { clip-path: var(--cut-corner-bottom-right); z-index: 2; }
section.intro + section.journey { margin-top: calc(var(--cut-corner-width) * -1); }
section.journey { background: linear-gradient(360deg, #DBCCC5 0%, #6584FF 22%, #550010 60%, #000524 82%, #550010 92%, #FF5519 100%); display: flex; flex-direction: column;  color: var(--my-white);}
section.journey .top { overflow: hidden; max-width: 100vw;}
section.journey .top .prose { align-items: center; max-width: 30em; margin-inline: auto; text-align: center;}
section.journey p.animated { white-space: nowrap; transform: translateX(calc(80% - var(--perc) * 140%));  margin-block: 2rem 1.5rem;}
section.journey .bottom { margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center;}
section.journey .bottom p { font-weight: var(--font-size-h2); margin-bottom: 0;}


section.journey .long { display: grid; grid-template-columns: 1fr; grid-gap: 2rem 1rem; align-items: flex-start; }
section.journey .long aside { display: none; }

ul.steps li { min-height: 100vh; position: relative;  display: flex; flex-direction: column;  justify-content: center;  scroll-margin-top: var(--padding-top);}
ul.steps li figure { margin: var(--margin-y) auto; max-width: 18rem;   }
ul.steps li.activate > span { -webkit-text-stroke: 2px transparent; }
ul.steps li > span { font-size: 22.5rem; color: transparent; -webkit-text-stroke: 2px var(--my-white-30); transition: -webkit-text-stroke 2000ms; position: absolute; left: 50%; top: 50%; transform: translate(-70%, -70%); user-select: none; pointer-events: none;}
ul.steps li > span span { display: inline-block; }
ul.steps li > .inner { max-width: 40rem; margin-inline: auto; display: grid; grid-gap: 1rem var(--gap);  }
ul.steps li > .inner svg { width: 7.5rem; height: auto; }
ul.steps li .huge { margin-bottom: 0; font-weight: var(--font-regular); line-height: 1;}

ul.steps li.left-right .inner {  grid-template-columns: auto 1fr; }
ul.steps li.left-right .prose  { grid-row: span 2;  width: 100%; margin-top: 2.1em;  grid-column: 2; }

ul.steps li.wide .inner { grid-template-columns: auto auto; }
ul.steps li.wide .icon { position: relative; }
ul.steps li.wide .prose { grid-column: -1/1;}

ul.steps li.center .inner {  grid-template-columns: 1fr 1.2fr; max-width: 60rem; grid-gap: 2rem var(--gap); }
ul.steps li.center .h1 { grid-column: -1/1; text-align: center; order: -1; }
ul.steps li.center .icon { margin-inline: auto 4rem; }

ul.steps li.take-off h2 { white-space: nowrap; }
ul.steps li.meet .inner { grid-template-columns: auto 1fr;}

ul.steps li:is(:nth-of-type(4n+4),:nth-of-type(7n+7)) figure { max-width: 40rem; width: 100%; }
ul.steps li:is(:nth-of-type(4n+4),:nth-of-type(7n+7)) figure picture { max-width: 20rem; }
ul.steps li:nth-of-type(2n+1) > span {  margin-left: .3em;}



@media only screen and (min-width: 1025px) {
    section.journey .long { grid-template-columns: auto 1fr;  }
    section.journey .long aside { width: 8rem; position: sticky; top: 0; height: 100vh; display: flex; justify-content: center; flex-direction: column; padding-bottom: 10rem;   }
    section.journey .long aside .uls { display: flex; flex-direction: column; gap: .5rem;}
    section.journey .long aside ul { padding-left: var(--gutter-side); display: flex; flex-direction: column; gap: .5rem; position: relative;   font-size: var(--font-size-small);}
    section.journey .long aside ul li a { width: .4rem; height: .4rem; border: 1px solid var(--my-white); display: block; border-radius: 50%; position: relative; transition: 333ms var(--my-ease); transition-property: background-color; }
    section.journey .long aside ul li a:hover { background: var(--my-almost-white);}
    section.journey .long aside ul li a::before { width: 2.5rem; height: 1.25rem; top: -.33rem; left: -1rem;  content: "";   position: absolute; }
    section.journey .long aside ul li a[data-active=true] { background: var(--my-white);}
    section.journey .long aside ul > li:first-of-type { position: absolute; top: 50%; transform: translateY(-50%); left: 3rem;   white-space: nowrap;   font-weight: var(--font-semibold);}
    section.journey .long aside ul li span { font-size: var(--font-size-tiny);}
    section.journey .bottom { grid-column: 2; }

    ul.steps li.wide .prose { grid-column: -1/1; column-count: 2; column-gap: var(--gap);}
    ul.steps li.wide .prose > * { break-inside: avoid;}
}

@media only screen and (max-width: 1024px) {
    ul.steps li { min-height: 90vh;  padding-block: 4rem; }
    section.journey .long {  padding-inline: var(--gutter-side); overflow: hidden;}
    ul.steps li:nth-of-type(2n+1) .inner { margin-left: 2rem;}
    ul.steps li.wide .icon {  top: 0; }
    ul.steps li > .inner { grid-gap: 0 1rem; margin-left: 2rem;}
    ul.steps li > .inner svg { width: 5rem;}
    ul.steps li .huge { margin-bottom: .5em; }
    ul.steps li > span { font-size: 17.5rem; }

    ul.steps li:nth-of-type(2n+1) .inner { margin-left: 0;}
    ul.steps li.left-right .inner {grid-template-columns: 1fr; }
    ul.steps li.left-right .prose { grid-column: unset;}
    ul.steps li.wide .inner { grid-template-columns: 1fr; grid-gap: 1rem;}
    ul.steps li.center .inner { grid-template-columns: 1fr; }
    ul.steps li.center .inner .icon { order: -1; margin-inline: auto; }
    /* ul.steps li:not(:nth-of-type(7)) { display: none; } */
}


/* =========================================================== */
/* ========================== TEAM =========================== */
/* =========================================================== */
section.team .h2 { font-family: var(--primary-font);  font-weight: var(--font-semibold);  max-width: 8em; margin-inline: auto; }
section.team .prose { max-width: 30em; margin-inline: auto; text-align: center; }
section.team ul.team { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: .5rem; margin-top: 5rem;}
section.team ul.team .scoutcard a { max-width: 100%;}
section.team ul.team .scoutcard div { background: var(--my-white-85);}

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

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

/* --------------- FLIP --------------- */
/* disableScroll() sets data-scrollable=false. lenis.stop() alone is not enough — a wheel
   over the Vimeo iframe is cross-origin and still scrolls the page — so lock natively too.
   The reserved gutter keeps the layout from jumping when the scrollbar goes away. */
html:has(body[data-scrollable="false"]) { overflow: hidden; }
body.touch[data-scrollable="false"] { touch-action: none; }

/* Anything with data-vimeo gets .plays-video from setupVideoLightboxes() */
.plays-video { position: relative; cursor: pointer; }
.plays-video picture { display: block; overflow: hidden; }
.plays-video img { transition: transform 500ms var(--my-ease); }
span.play { position: absolute; display: flex; gap: .5em; align-items: center; white-space: nowrap; bottom: 0.33rem; left: 0.33rem; color: var(--my-white); font-size: var(--font-size-small); pointer-events: none; }
span.play svg { width: .8em; }

.flip-hidden { visibility: hidden; }
.flip-clone { will-change: left, top, width, height;  }
.flip-clone picture { width: 100%; height: 100%; }
.flip-clone picture img { width: 100%; height: 100%; object-fit: cover; }
.flip-clone .flip-close { position: absolute; top: -2.5rem; right: -2.5rem; z-index: 2; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--my-black);  border: 1px solid var(--my-black); opacity: 0; animation: fade-in 500ms forwards 750ms; }
.flip-clone .flip-close::before { content: "\00d7"; font-size: 1.25rem;}
.flip-clone.going-back .flip-close { opacity: 0; animation: none;}
.flip-clone .flip-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; opacity: 0; animation: fade-in 500ms forwards 750ms; }
.flip-clone.going-back .flip-video { opacity: 0; animation: none; }
.flip-overlay { position: fixed; inset: 0; z-index: 100; touch-action: none; background: var(--my-black-85); animation: overlay-in 500ms var(--my-ease) both; transition: background 500ms var(--my-ease); }
.flip-overlay:has(.going-back) { background: transparent; animation: none; }
.flip-overlay .flip-close { color: #FFF; border-color: #FFF; }
@keyframes overlay-in {
    0% { background: rgba(0,0,0,0); }
}
@media only screen and (max-width: 600px) {
    .flip-clone .flip-close { top: -3rem; right: 0; }
}

@keyframes fade-in { 
    0% {  opacity: 0;}
    100% { opacity: 1;}
}


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

    /* Inputs */
    --form-main-color: var(--my-black);
    --form-input-background-color: var(--my-white);
    --form-padding-x: .6em;  
    --form-padding-y: .75em;  
    --form-padding: var(--form-padding-y) var(--form-padding-x);  

    /* Borders */
    --form-border-color: transparent; 
    --form-border-width: 1px;  
    --form-border-radius: var(--btn-border-radius);
    
    /* Labels */
    --form-label-color: var(--main-color);
    --form-label-border-radius: 0.5em;
    --form-label-background-color: var(--my-white); 
    --form-label-asterisk-color: var(--form-main-color);
    --form-label-transform-distance: 100%; 
    
    /* Checkboxes */
    --form-check-border-radius: .2em;

    /* States */
    --form-color-focus: var(--my-black);
    --form-color-error: var(--my-orange);

    /* Transition */
    --form-transition: 250ms ease; 
}
/* LAYOUT */
form.custom { position: relative; max-width: 50rem; margin: 0 auto; }
form.custom fieldset { display: grid; grid-template-columns: repeat(var(--form-columns), 1fr);  grid-gap: var(--form-gap);}
form.custom fieldset > div { position: relative; }

/* INPUTS */
form.custom :is(textarea, input, select) { padding: var(--form-padding); font-family: var(--primaryFont); font-size: var(--font-size-body); color: var(--form-main-color); width: 100%; transition: border var(--form-transition), padding var(--form-transition); border: var(--form-border-width) solid var(--form-border-color);  background: var(--form-input-background-color); border-radius: var(--form-border-radius);  }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom .normal input { color: var(--form-main-color); }
form.custom div.double, form.custom small, form.custom small ~ * { grid-column: -1/1; }

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

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

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

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

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

/* SELECTS */
form.custom .select { position: relative; display: flex; align-items: center; min-height: 2.333em; background: var(--form-input-background-color);  border: var(--form-border-width) solid var(--form-border-color); border-radius: var(--form-border-radius); }
form.custom .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: transparent; border: none; cursor: pointer; }
form.custom .select span { position: absolute; top: var(--form-padding-y); left: var(--form-padding-x); pointer-events: none; transform-origin: left; transition: var(--form-transition); white-space: nowrap; color: var(--form-main-color); font-weight: var(--font-semibold); opacity: 0; }
form.custom .select[data-active=true]  span { opacity: 1; }
form.custom .select::before, form.custom .select::after { content: ""; height: 2px; top: 45%; width: .4em; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.18em); background: var(--form-main-color); right: calc(var(--form-padding-x) + .4em); border-radius: 100vmin; transition: background var(--form-transition); }
form.custom .select::after { --r: -45deg; }

/* MULTICHOICE / SINGLE CHOICE */
form.custom .field { flex-direction: column; }
form.custom .field p { margin-bottom: 0.5em; color: var(--form-label-color);}
form.custom .field ul { display: flex; flex-wrap: wrap; gap: 1em;   }
form.custom .field ul li { position: relative; display: flex;  color: var(--form-label-color);}
form.custom .field ul input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
form.custom .field ul input:focus { border: none; outline: none; }
form.custom .field ul input:focus-visible + label::before { outline: 3px solid var(--form-color-focus); }
form.custom .field ul label:hover::before { background: var(--form-color-focus); }
form.custom .field ul label { padding-left: 1.5em; }
form.custom .field ul label::before, form.custom .field ul label::after { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 1em; border: 1px solid var(--form-border-color); border-radius: var(--form-check-border-radius); transition: background 250ms; }
form.custom .field ul label::after { background: url("/img/icons/check.svg") center center / contain no-repeat; left: 0px; background-size: 60%; transform-origin: bottom; transition: transform var(--form-transition); transform: scale(0); border: none; }
form.custom .field ul input:checked ~ label::after { transform: none; }

/* UPLOAD */
form.custom .upload label { display: block; margin-bottom: .5rem; color: var(--form-label-color); }
form.custom .upload-vak { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 5rem; padding: 1.2rem; border: 1.5px dashed var(--form-main-color); color: var(--form-main-color); border-radius: var(--form-border-radius); text-align: center; background: var(--form-input-background-color); transition: background var(--form-transition), border-color var(--form-transition); }
form.custom .upload-vak > p { margin: 0 auto; max-width: 16rem; font-size: var(--font-size-tiny); }
form.custom .upload-vak.sleept { border-color: var(--my-blue); }
form.custom .upload-vak.gevuld { border-style: solid; border-color: var(--my-blue); }
form.custom .upload-vak.gevuld p:not(.naam), form.custom .upload-vak:not(.gevuld) .naam { display: none; }
form.custom .upload-vak .naam { font-weight: var(--font-semibold); overflow-wrap: anywhere; }
form.custom .upload-vak.fout { border-color: var(--form-color-error); }
form.custom .upload-vak.fout .naam { color: var(--form-color-error); }
form.custom .upload input { position: absolute; inset: 0; padding: 0; opacity: 0; cursor: pointer; }
form.custom .upload input:focus-visible + p { outline: 3px solid var(--form-color-focus); outline-offset: .2em; }

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


/* --------------- 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 ul,.prose ul ul ul ul { padding-left: 1em;  }
.prose :is(ol,ul) :is(ol,ul) { margin: .5em 0; }
.prose blockquote { position: relative; font-style: italic; font-size: 1.5rem; padding-left: .8em; border-left: .25rem solid var(--main-color);}
.prose > * strong { font-weight: var(--font-semibold); }
.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: 0.5em;}

.prose ul li::before, .prose ul ul ul li::before { width: .65em; height: .65em; display: block; margin-right: .4rem; background: url("/img/icons/chevron.svg") 0% 0% / .65em .65em no-repeat; content: "";  top: .4em;  position: relative; }
.prose ul li, .prose ul ul ul li { display: flex; text-align: left; }
.prose ul li::before { flex-shrink: 0; }
section[class*="gradient-"] .prose ul li::before { background-image: url("/img/icons/chevron-white.svg"); }
section[class*="gradient-"] .prose ul ul li::before { background-image: url("/img/icons/chevron-outline-white.svg"); }
.prose ul ul { margin-top: 0.2em;}
.prose ul ul li::before,.prose ul ul ul ul li::before {  background-image: url("/img/icons/chevron-outline.svg"); }

html.dark .prose ul li::before, html.dark .prose ul ul ul li::before { background-image: url("/img/icons/chevron-white.svg"); }
html.dark .prose ul ul li::before, html.dark .prose ul ul ul ul li::before {  background-image: url("/img/icons/chevron-outline-white.svg"); }

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


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


/* --------------- MEDIA QUERIES --------------- */
@media only screen and (max-width: 1024px) {
    :root { 
        --font-size-tiny: .8rem; 
    }
}
@media only screen and (max-width: 850px) {
    :root { 
        --logo-width: 8.5rem; 
        --gutter-top: 1rem; 
        --gutter-side: 1rem; 

        --font-size-huge: 3.75rem;
        --font-size-h1: 2.5rem;
        --font-size-h2: 2.25rem;
        --font-size-body: 1rem;   
        --font-size-small: .9rem;   
        --font-size-tiny: .8rem;    
    }
}

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

/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 0.01ms; } }