* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.39vw, 24px); scroll-behavior: smooth; overscroll-behavior: none;  }
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-bold); }
p em { font-style: italic;}
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primary-font: "Aeonik", system-ui, sans-serif;
    --header-font: "Gelica", system-ui, sans-serif;

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

    /* Font sizes */
    --font-size-extra-huge: 7.5rem; /* 150px */
    --font-size-huge: 5rem;         /* 100px */
    --font-size-h1: 3rem;           /* 60px */
    --font-size-h2: 2rem;           /* 40px */
    --font-size-h3: 1.6rem;         /* 32px */
    --font-size-h4: 1rem;           /* 20px */
    --font-size-h5: .9rem;          /* 18px */
    --font-size-h6: .8rem;          /* 16px */
    --font-size-body: .8rem;        /* 16px */
    --font-size-small: .75rem;      /* 15px */
    --font-size-tiny: .65rem;       /* 13px */

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

    --my-white: #FFFFFF;
    --my-white-60: rgba(255,255,255,0.6);
    --my-white-90: rgba(255,255,255,0.9);
    --my-beige: #F5ECE4;
    --my-black: #1A171B;
    --my-dark-grey: #ADADAD; 
    --my-red: #520E35;
    --my-blue: #9AB1E5;
    --my-purple: #432E6F;
    --my-pink: #FFE5DE; 
    --my-orange: #ED6E4F;
    --my-soft-orange: #EF8D74;
    --my-yellow: #FFA103;
    --my-mint: #07FE9B;
    --my-green: #1B423D;


    --my-radial-blue-red: radial-gradient(50% 50% at 50% 50%, #520E35 62.02%, #9AB1E5 97.12%);
    --my-linear-mint-green: linear-gradient(180deg, var(--my-mint), var(--my-green));
    --my-linear-blue-purple: linear-gradient(180deg, var(--my-blue), var(--my-purple) 77%);
    --my-linear-pink-orange: linear-gradient(180deg, var(--my-pink), var(--my-orange) 77%);

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

    /* Line heights */
    --line-height-tiny: .8;
    --line-height-small: 1.05;
    --line-height-regular: 1.4;
    --line-height-large: 1.6; 

    /* Widths */
    --gutter-side: 1rem;
    --gutter-top: 1rem;
    --max-width: 64rem;
    --max-width-outer: 80rem;
    --max-width-ultra-wide: 150rem;
    --max-width-narrow: 42.5rem;
    --width: calc(100% - calc(var(--gutter-side) * 2));
    --gap: 3.6rem; 

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

    /* 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: 1rem; 
    --border-radius-large: calc(var(--border-radius) * 1.5);
    --half-border-radius: calc(var(--border-radius) / 2);
    --btn-border-radius: 1.2em; 

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

/* =========================================================== */
/* ========================= HEADERS ========================= */
/* =========================================================== */
h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6  {font-weight: var(--font-medium); font-family: var(--header-font);  line-height: var(--line-height-small); margin-bottom: 0.5em; color: var(--my-red); }
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); } 
.kicker { font-size: var(--font-size-h5); color: var(--my-blue); margin-bottom: .77em; }
.huge { font-size: var(--font-size-huge); }
.body { font-size: var(--font-size-body);}
.small { font-size: var(--font-size-small);}
.tiny { font-size: var(--font-size-tiny);}
.kicker:last-of-type { margin-bottom: .77em;}

:is(h1,.h1 ,h2,.h2 ,h3,.h3, h4,.h4, h5, .h5, h6, .h6) em { color: var(--my-orange); }

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

/* SECTIONS */
section.ultrawide { max-width: var(--max-width-ultra-wide); width: 100%; }
section.narrow { max-width: var(--max-width-narrow); }
section::before { content: ""; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg);  border-radius: var(--border-radius-large);}

section.white-to-beige { --bg: linear-gradient(180deg, var(--my-white), var(--my-beige) calc(100% - var(--border-radius-large)));  }
section.orange-to-beige { --bg: linear-gradient(180deg, var(--my-orange), var(--my-beige) calc(100% - var(--border-radius-large)));  }
section.beige-to-white { --bg: linear-gradient(180deg, var(--my-beige) var(--border-radius-large), var(--my-white));  }
section.beige-to-blue { --bg: linear-gradient(180deg, var(--my-beige) var(--border-radius-large), var(--my-blue));  }
section.beige-to-orange { --bg: linear-gradient(180deg, var(--my-beige) var(--border-radius-large), var(--my-orange));  }
section.white{ --bg: var(--my-white);}
section.none::before { display: none; }

/* ACTIVATE CHILDREN — staggered reveal; .activate is stripped on scroll-in, children ease into place */
.activate-children > * { transition: transform 400ms var(--my-ease), opacity 400ms var(--my-ease); transition-delay: calc(var(--cascade, 0) * var(--own-delay, 50ms)); }
.activate-children.activate > * { transform: translateY(1rem); opacity: 0; }


/* IMAGES */
figure, picture { position: relative;}
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
picture { display: flex; }
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 { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center; }
button,label { cursor: pointer;  user-select: none; }
.btn {  display: inline-block; user-select: none; background: var(--my-orange); color: var(--own-color, var(--my-white)); padding: var(--btn-padding); border: 1px solid var(--own-color, transparent); border-radius: var(--btn-border-radius); text-align: center;  font-size: var(--font-size-h5); transition: 250ms var(--my-ease); transition-property: border, background, color;}

.btn.white { background: var(--my-white); color: var(--my-orange); }
.btn.white-outlined { background: none; --own-color: var(--my-white); }
.btn.purple-outlined {  background: none; --own-color: var(--my-red); }
.btn.mint { background: var(--my-mint); color: var(--my-red);}
.btn.disabled {  background: none; --own-color: var(--my-dark-grey); pointer-events: none; }

.btn:hover { background: var(--my-red); color: var(--my-white); border: 1px solid var(--my-red); }

.buttons { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-top: 2rem;  }

/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { position: fixed; z-index: 10; --link-padding: 0.2em 1.1em; left: 0; right: 0; margin: 0 auto;  }
header .container { margin: var(--gutter-top) auto; background: var(--my-white-90);  border-radius: var(--border-radius); max-width: var(--max-width-outer); }
header img, header svg { width: 100%;}
nav#mobile, .burger, .mobile { display: none;  }
#skiplink { position: fixed;  left: 50%; top: -40rem; transform: translate(-50%, -50%);  text-transform: none; font-size: 1rem; background: var(--background-color);  opacity: 0; pointer-events: none; text-align: center; padding: 0.5rem;  z-index: 5; }
#skiplink:focus { top: 4rem; opacity: 1; pointer-events: all; }

/* DESKTOP NAV */
nav#desktop { position: relative; width: var(--width); margin: 0 auto; padding: .7375rem 0; display: grid; grid-template-columns: auto 1fr auto;  align-items: center;  font-size: var(--font-size-h5);  grid-gap: 3rem;}
nav#desktop > a { max-width:var(--logo-width);  display: flex; align-items: center;  color: var(--my-red); }
nav#desktop > ul { display: flex; justify-content: center; align-items: center; }
nav#desktop > ul:first-of-type { position: relative; }
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li a { display: flex; }
nav#desktop > ul > li > a:not(.btn) { padding: var(--link-padding); }
nav#desktop > ul > li > a.btn { border: none;}

nav#desktop > ul:first-of-type::before { position: absolute; bottom: 0; left: 50%; pointer-events: none; width: var(--w, 0px); height: 2px; background: var(--my-blue); content: ""; transition: transform 333ms var(--my-ease), width 333ms var(--my-ease); transform: translateX(calc(-50% + var(--l, 0px))); border-radius: 100vmin; }
:is(.loading,.resizing) nav#desktop > ul:first-of-type::before { transition: 0s; }

/* MOBILE NAV */
nav#mobile { position: fixed; flex-direction: column;  font-size: var(--font-size-h4);  top: calc(var(--gutter-top) + 4rem); transform: translateY(-2rem); width: var(--width); margin-inline: auto; right: 0; left: 0;  transition: transform 500ms var(--my-ease), opacity 500ms var(--my-ease); height: calc(100vh - var(--gutter-top) * 2 - 5rem); display: flex; flex-direction: column; align-items: center; pointer-events: none; opacity: 0;}
nav#mobile > ul { display: flex;flex-direction: column; height: auto;  padding-inline: 0.5rem; width: 100%; }
nav#mobile > ul + ul { margin-top: auto; flex-direction: row-reverse; justify-content: space-between;  align-items: center; }
nav#mobile > ul > li { display: flex; transform: translateY(-.5rem); opacity: 0; transition: 300ms var(--my-ease) calc(var(--cascade,0) * 50ms); }
nav#mobile > ul > li > a:not(.btn) { font-family: var(--header-font);  padding: 0.5rem; }

/* Burger */
button.burger {  width: 1.2rem; height: calc(0.8rem + 3px);  z-index: 99;  display: none; align-items: center;  position: relative;  }
button.burger:focus-visible { outline: 1px solid var(--main-color); outline-offset: 4px; }
button.burger::before { content: ""; position: absolute; --_excess: -.45rem;   top: var(--_excess); left: var(--_excess); width: calc(100% + var(--_excess) * -2); height: calc(100% + var(--_excess) * -2);}
button.burger > span { width: 1.2rem; height: 2.5px; border-radius: 1rem; position: absolute; background: var(--my-black); transition: transform 500ms ease; }
button.burger > span:nth-of-type(1) { transform: translateY(-.4rem); }
button.burger > span:nth-of-type(2) { transform: none }
button.burger > span:nth-of-type(3) { transform: translateY(.4rem); }

/* Burger open */
body.menu-open button.burger span:nth-of-type(1) { transform: rotate(45deg);}
body.menu-open button.burger span:nth-of-type(2) { transform: translateX(-50%) scaleX(0);}
body.menu-open button.burger span:nth-of-type(3) { transform: rotate(-45deg);}
body.menu-open nav#mobile { transform: none; opacity: 1;  pointer-events: all;}
body.menu-open nav#mobile > ul > li { transform: none; opacity: 1; }

@media only screen and (max-width: 1024px) {
    nav#desktop { grid-gap: .75rem; padding: .5rem 0;}
    nav#desktop ul { margin-left: auto; }
}

@media only screen and (max-width: 950px) {
    .buttons { gap: 0.2rem .5rem;}
    .btn { font-size: var(--font-size-body);}


    /* nav#mobile, button.burger { display: flex; } */
    /* Remove this when there's a menu again */ nav#desktop { grid-template-columns: auto 1fr;} /* remove this after */
    nav#desktop ul:first-of-type,
    nav#desktop ul:last-of-type li:not(:has(.btn)) { display: none; }
    header .container { background: none; }
    header .container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--border-radius); height: 100%; background: var(--my-white-90); transition: height 500ms var(--my-ease);}
    header .btn { font-size: var(--font-size-tiny);}

    body.menu-open header .container::before { height: calc(100vh - var(--gutter-top) * 2);}
}

/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { background: linear-gradient(155deg, var(--my-beige), var(--my-white)); max-width: var(--max-width-outer); width: var(--width);  border-radius: var(--border-radius-large); overflow: clip; margin-bottom: .5rem; }
footer .container { display: grid; grid-template-columns: auto 1fr; align-items: flex-end;  gap: 4rem 1rem; margin-block: 3rem 2rem; }
footer .container > ul { display: flex; justify-content: flex-end;   font-size: var(--font-size-tiny); gap: .25rem 1rem;}
footer svg { max-width: 10.8rem; width: 80%; color: var(--my-red);   grid-column: -1/1;}


/* footer > nav > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-gap: 1rem; }
footer > nav > p  { font-size: 0.7rem; margin-top: 1rem; text-align: center;  }
footer > nav > p a { padding: .5em .75em; border-radius: 100vmin; }
footer > nav > p a:hover  { color: var(--odf-creme); background: var(--odf-pink);  text-decoration: none;} */

/* ul.socials { display: flex; align-items: center; gap: 0.2rem; --icon-size: 1.8rem;  }
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {width: var(--icon-size); height: var(--icon-size); display: flex; justify-content: flex-start; align-items: center; }
ul.socials li svg { width: var(--icon-size); height: var(--icon-size); } */

@media only screen and (max-width: 768px) {
    footer .container { grid-template-columns: 1fr; justify-items: center; }
    footer .container > ul { flex-direction: column; align-items: center; }
}

/* --------------- SECTIONS --------------- */
/* =========================================================== */
/* ========================= LANDING ========================= */
/* =========================================================== */
section.landing {  padding-top: 0; display: flex; flex-direction: column; border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); overflow: clip; }
section.landing .container { position: relative; z-index: 2;    margin-top: 2rem;}
section.landing .media > * { object-fit: cover;  }
section.landing .h1 { margin-bottom: 0.1em; }
section.landing :is(.h1,.h2,.kicker)  { color: inherit;}
section.landing .media::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(90deg, var(--own-background-color, var(--my-soft-orange)), transparent);  }
section.landing.purple .media::after { --own-background-color: var(--my-purple); }
section.landing .prose { max-width: 22rem;  }
section.landing .buttons { margin-block: 1.75rem;}

@media only screen and (min-width: 951px) {
    section.landing :is(.media, .media > *) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
    section.landing .container { margin-top: calc(var(--margin-y) * 2.5);   color: var(--my-white);}
    section.landing .h2 em { color: inherit;}
}

@media only screen and (max-width: 950px) {
    section.landing .media { order: -1; border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); overflow: clip;}
    section.landing .btn.white:not(:hover) { background: var(--my-orange); color: var(--my-white);}
    section.landing .btn.white-outlined { --own-color: var(--my-purple);  }
    section.landing .media::after { opacity: .4;}
}

/* =========================================================== */
/* ===================== TEXT AND IMAGE ====================== */
/* =========================================================== */
section.text-image .container { display: grid; grid-template-columns: 1.04fr 0.96fr; grid-template-areas: "a f"; grid-gap: var(--gap); }
section.text-image article { max-width: 29rem; margin-top: 2.5rem;  grid-area: a;}
section.text-image figure { grid-area: f; }
section.text-image .media > * { border-radius: var(--border-radius);}
section.text-image .h1 {  max-width: 9em;}

section.text-image.left .container {  grid-template-areas: "f a"; grid-template-columns: 0.96fr 1.04fr;}

section.text-image:has(+section.counters) { margin-bottom: 0;}
section.text-image:has(+section.counters) .container { margin-bottom: 1rem;}


@media only screen and (max-width: 1024px) {
    section.text-image .container { align-items: center; }
}

@media only screen and (max-width: 950px) {
    section.text-image.text-image { max-width: 30rem; }
    section.text-image .container { grid-template-columns: 1fr; grid-template-areas: "a" "f";  margin-block: 2rem;  }
    section.text-image.left .container { grid-template-columns: 1fr;  grid-template-areas: "f" "a"; margin-block: 1rem; margin-top: 0; grid-gap: 3rem;}
    section.text-image article { margin-top: 0; }
    section.text-image figure { margin-left: calc(var(--gutter-side) * -1); width: calc(100% + var(--gutter-side) * 2); }
}

/* =========================================================== */
/* ======================== COUNTERS ========================= */
/* =========================================================== */
section.counters .container { margin-block: 3rem }
section.counters .container > ul { display: grid; grid-template-columns: repeat(4,1fr); text-align: center; grid-gap: 2rem;}
section.counters .h1 { color: var(--my-orange); font-family: var(--primary-font);  font-weight: var(--font-light); margin-bottom: 0;}
section.counters .h1 em { font: inherit;}


@media only screen and (max-width: 1024px) {
    section.counters .h1 { font-size: var(--font-size-h1);}
    section.counters .container > ul { grid-template-columns: repeat(2,1fr);}
    section.counters .container > ul li { max-width: 9em; margin-inline: auto; }
}


/* =========================================================== */
/* ========================== STEPS ========================== */
/* =========================================================== */
section.steps {  --top: calc(3.5rem + var(--gutter-top) * 2); --height: calc(100vh - var(--top));  color: var(--my-red);  margin-bottom: 0; --image-width: 15rem;}
section.steps::before { position: sticky; top: 0; height: var(--top);background: var(--my-beige); z-index: 3; border-radius: 0; }  
section.steps .top { width: 100%; position: relative; position: sticky; top: var(--top);   height: var(--height);  display: flex; flex-direction: column;  z-index: 4;   pointer-events: none;}
section.steps .top .btn { margin: auto auto 0; }

section.steps ul.indicators { position: absolute; right: 2rem;  display: flex; flex-direction: column; gap: .25rem; top: 50%; transform: translateY(-50%); height: 4rem; justify-content: center;  z-index: 11;  }
section.steps ul.indicators > li { width: .3rem; height: .3rem; background: var(--my-blue); border-radius: 100vmin;  transition: flex-grow 500ms var(--my-ease);}
section.steps ul.indicators > li[data-active=true] { flex-grow: 1;}

section.steps .container { margin-block: 2.5rem; flex: 1; display: flex; flex-direction: column; align-items: center;  z-index: 6; }
section.steps .container .steps { display: none; }
section.steps .container figure { width: var(--width); max-width: var(--max-width-narrow);  display: grid; grid-template-columns: var(--image-width) 1fr; grid-gap: 4.5rem; margin-block: auto 0; transform: translateY(calc(3.5rem + var(--perc, 0) * -3rem)); transition: 100ms var(--my-ease-out);   pointer-events: none;}
section.steps .container figure > div { position: relative;}
section.steps .container figure picture {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--my-ease); }
section.steps .container figure picture:first-of-type { position: relative; }
section.steps .container figure picture[data-active=true] { opacity: 1; }
section.steps .container figure img {   border-radius: 100vmin; }
section.steps .container > * {pointer-events: all;}

section.steps .top .orbs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: clip;  border-radius: var(--border-radius-large);}
section.steps .top .orbs::before, section.steps .top .orbs::after { content: ""; pointer-events: none; z-index: 5;  position: absolute; border-radius: var(--border-radius-large);  width: 240vw; height: calc(240vw * .9); border-radius: 0; top: 0; left: 50%; transform: translate(-50%, calc(var(--perc, 0) * -2rem));  background:  radial-gradient(circle at 50% 50%, transparent 59%, var(--my-orange) 74%), radial-gradient(circle at 50% 50%, transparent 55%, var(--my-beige) 60%); transition: transform 500ms var(--my-ease-out);}
section.steps .top .orbs::after { background: radial-gradient(circle at 50% 50%, var(--my-beige) 50%, var(--my-orange) 75%); width: 125vw; height: calc(125vw * .9); top: 80%; border-radius: 50%; transform: translate(-50%, calc(var(--perc, 0) * 3rem)); }

section.steps .prose { text-align: center; }
section.steps .prose .h1 { margin-bottom: .8rem;}
section.steps .prose .h1 ~ * { max-width: 28rem; margin-inline: auto; }
section.steps .steps { position: relative;  margin-top: calc(var(--height) * -1);   overflow: clip;  border-radius: var(--border-radius-large); }

section.steps .steps > li { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; display: grid; grid-template-columns: var(--image-width) 1fr; grid-gap: 4.5rem; margin-inline: auto;  width: var(--width); max-width: var(--max-width-narrow);  }
section.steps .steps > li .inner { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-gap: 0 2rem;   padding-right: 3rem; }
section.steps .steps > li:first-of-type .inner { margin-top: 4rem; }
section.steps .steps > li:is(:last-of-type,:first-of-type) { min-height: 80vh;}
section.steps .steps > li .h2 { color: var(--my-orange); margin-bottom: 0.2em; }
section.steps .steps > li .h1 { font-size: var(--font-size-extra-huge); color: var(--my-orange); font-family: var(--primary-font); font-weight: var(--font-light); grid-row: span 2; line-height: var(--line-height-tiny); margin: 0; }
section.steps + section { margin-top: 0;}


@media only screen and (max-width: 768px) {
    section.steps { --image-width: 20vw; height: auto; --height: unset;  }
    section.steps .container { margin-block: 3.5rem 2.5rem; }
    section.steps .top { position: relative; top: unset; height: auto; }
    section.steps .top .orbs::before { background: radial-gradient(circle at 50% 50%, transparent 52%, var(--my-orange) 74%), radial-gradient(circle at 50% 50%, transparent 50%, var(--my-beige) 52%); }
    section.steps .top .btn { margin: 4rem auto -1rem;}
    section.steps ul.indicators { display: none;  }
    section.steps .steps { display: flex; overflow: auto; max-width: 100vw; padding-inline: var(--gutter-side);  scroll-snap-type: x mandatory;  border-radius: 0; gap: 1.5rem; align-items: flex-start; }
    section.steps .steps::before { content: ""; width: var(--gutter-side); flex-shrink: 0; width: 1px; height: 1px; opacity: 0;}
    section.steps .steps > li:is(:last-of-type, :first-of-type), 
    section.steps .steps > li { min-height: unset; height: auto; scroll-snap-align: center; flex-shrink: 0; grid-template-columns: 1fr; max-width: 17rem;} 
    section.steps .steps > li .inner,
    section.steps .steps > li:first-of-type .inner { margin: 0;  padding-right: 0; }
    section.steps .steps > li > div:first-of-type { display: none; }
    section.steps > .steps { display: none;}
    section.steps .container figure { display: none; }
    section.steps .container .steps { margin-block: 2.5rem; display: flex;  }
}

/* =========================================================== */
/* ====================== MOGELIJKHEDEN ====================== */
/* =========================================================== */
section.mogelijkheden .h1 { color: var(--my-orange);  margin-bottom: 0; }
section.mogelijkheden .top { display: grid; grid-template-columns: 1fr auto; grid-gap: 1rem; align-items: flex-end; }
section.mogelijkheden .top .btn { margin-bottom: calc(var(--font-size-h1) * .15);}
section.mogelijkheden .huge { font-size: var(--font-size-extra-huge);  font-family: var(--primary-font); font-weight: var(--font-light); line-height: var(--line-height-tiny); margin-bottom: .1em; display: block; }
section.mogelijkheden .container > ul { display: grid; grid-auto-flow: column; gap: 1rem; margin-top: 2rem; margin-left: -2rem; width: calc(100% + 4rem); padding-inline: 2rem; overflow: auto; scroll-snap-type: x mandatory;}

li.mogelijkheid { border-radius: var(--border-radius-large); background: var(--my-white); display: flex; flex-direction: column;  min-width: 20rem;  flex-shrink: 0; scroll-snap-align: center; } 
li.mogelijkheid > div { padding: var(--border-radius) var(--border-radius-large);  border-radius: var(--border-radius-large); background: var(--own-gradient, var(--my-white)); color: var(--own-color, inherit); }
li.mogelijkheid > div:last-of-type {  flex: 1;}
li.mogelijkheid .h3 {color: inherit;}
li.mogelijkheid .prose { min-height: 100%; display: flex; flex-direction: column; font-size: var(--font-size-h5); }
li.mogelijkheid .prose ul { font-size: var(--font-bold);}
li.mogelijkheid .orange { --own-gradient: var(--my-linear-pink-orange);  --own-color: var(--my-pink);  }
li.mogelijkheid .grape {--own-gradient: var(--my-linear-blue-purple); --own-color: var(--my-blue);  }
li.mogelijkheid .mint {--own-gradient: var(--my-linear-mint-green); --own-color: var(--my-mint);  }
li.mogelijkheid .bottom { font-size: var(--font-size-h4); padding-top: 1rem; margin-top: auto; display: flex; justify-content: space-between; align-items: center; }


@media only screen and (max-width: 950px) {
    section.mogelijkheden .container { margin-top: 2rem; }
    section.mogelijkheden .top {  grid-template-columns: 1fr; justify-items: flex-start;  }
    li.mogelijkheid { min-width: 19rem; }
}

/* =========================================================== */
/* ====================== CERTIFICATEN ======================= */
/* =========================================================== */
section.certs .container { display: grid; grid-template-columns: 1.04fr 0.96fr; grid-gap: 2rem var(--gap);  width: 100%; }
section.certs article { max-width: 24rem;}
section.certs .h6 { font-family: var(--primary-font); font-weight: var(--font-bold); margin-bottom: 0; color: var(--main-color);}
section.certs .container > ul { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; max-width: 40rem;}
section.certs .container > ul li { padding: 1.4rem  1.7rem; background: var(--my-white); border-radius: var(--border-radius); min-height: 8.6rem; display: flex; flex-direction: column; justify-content: flex-end;  font-size: var(--font-size-tiny); will-change: transform;}
section.certs .container > ul li p { margin: 0; }


@media only screen and (min-width: 951px) {
    section.certs article { order: 2; } 
}
@media only screen and (max-width: 950px) {
    section.certs .container { grid-template-columns: 1fr; }
    section.certs .container > ul li { padding: 1rem; }
}

/* =========================================================== */
/* ===================== CALL TO ACTION ====================== */
/* =========================================================== */
section.cta { overflow: clip; border-radius: var(--border-radius-large); color: var(--my-white); text-align: center; max-width: var(--max-width-outer); --vw: min(1vw, calc(var(--max-width-outer) / 102)); } 
section.cta .h1 { color: inherit; max-width: 8em;}
section.cta .h1 em { color: var(--my-yellow); }
section.cta .container { display: flex; align-items: center; flex-direction: column;  margin-bottom: 2rem; z-index: 2; }
section.cta .usps { display: flex; align-items: center;  gap: .5rem 1.5rem;}
section.cta .usps li { display: flex; align-items: center; gap: .25rem;}
section.cta .usps li::before { content: ""; background: url('/img/icons/keyhole.svg') center center / contain no-repeat; width: .7rem; height: .7rem; display: inline-block; }
section.cta .buttons { margin-block: 5rem 1.5rem; }
section.cta .buttons .btn:hover { background: var(--my-orange); border: 1px solid var(--my-orange);}
section.cta::before { content: ""; position: absolute; left: 50%; transform: translate(-50%, calc(-78% - 15% + var(--perc, 1) * 15%)); width: calc(120 * var(--vw)); height: calc(112 * var(--vw)); background: radial-gradient(50% 50% at 50% 50%, var(--my-red) 62.02%, var(--my-blue) 97.12%);  z-index: 2; border-radius: 50%; transition: transform 1500ms var(--my-ease-out); }
section.cta::after { content: ""; position: absolute; left: 50%; transform: translate(-50%, calc(25% - 15% + var(--perc, 1) * 15%)); width: calc(170 * var(--vw)); height: calc(155 * var(--vw)); top: unset; bottom: 0; background: radial-gradient(50% 50% at 50% 50%, var(--my-red) 60%, var(--my-orange) 97.12%); transition: transform 1500ms var(--my-ease-out); }


@media only screen and (max-width: 1080px) {
    section.cta::before { width: var(--max-width-outer); height: var(--max-width-outer); }
}

@media only screen and (max-width: 768px) {
    section.cta .usps { display: grid; grid-template-columns: 1fr; justify-items: center; }
}



/* =========================================================== */
/* ======================== STANDARD ========================= */
/* =========================================================== */
section.standard article { max-width: var(--max-width-narrow); margin-inline: auto; }





/* --------------- FORM SECTION --------------- */
section.form-section { padding-block: 4rem; }
section.form-section .container { max-width: 30rem; }
section.form-section .form-text { align-self: center; }
section.form-section form.custom { margin-top: 2rem; }
section.form-section form.custom fieldset { grid-template-columns: 1fr; }
@media only screen and (max-width: 768px) {
    section.form-section .container { grid-template-columns: 1fr; gap: 2rem; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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






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


/* --------------- 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 --------------- */
/* MIN */


/* MAX */
@media only screen and (max-width: 950px) {
    :root { 
        --logo-width: 8rem; 
        --gutter-top: 1rem; 
        --gutter-side: 1rem; 


        --font-size-h1: 2.5rem;           /* 60px */
        --font-size-h2: 1.6rem;           /* 40px */
        --font-size-h3: 1.2rem;         /* 32px */
        --font-size-h4: 1.1rem;           /* 20px */
        --font-size-h5: 1rem;          /* 18px */
        --font-size-h6: .9rem;          /* 16px */
        --font-size-body: .9rem;        /* 16px */
        --font-size-small: .8rem;      /* 15px */
        --font-size-tiny: .75rem;       /* 13px */
    }
}

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

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

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