/*	COLORS ------------------------------------- */

:root {
	--teal-10: #0C2527;
	--teal-20: #194B4D;
	--teal-30: #257074;
	--teal-40: #31959B;
	--teal-50: #3EBBC1;
	--teal-60: #64C8CE;
	--teal-70: #8BD6DA;
	--teal-80: #B2E4E6;
	--teal-90: #D8F1F3;

	--blue-10: #0B1628;
	--blue-20: #162C50;
	--blue-30: #214278;
	--blue-40: #2C58A0;
	--blue-50: #376FC8;
	--blue-60: #5F8BD3;
	--blue-70: #87A8DE;
	--blue-80: #AFC5E9;
	--blue-90: #D7E2F4;

	--grey-10: #16191D;
	--grey-20: #2D3239;
	--grey-30: #434A56;
	--grey-40: #5A6372;
	--grey-50: #707C8F;
	--grey-60: #707C8F;
	--grey-70: #A9B0BC;
	--grey-80: #C6CBD2;
	--grey-90: #E2E5E9;

	--greyblue-10-rgb: 19, 24, 32;

	--greyblue-10: #131820;
	--greyblue-12: #161D27;
	--greyblue-14: #1A212E;
	--greyblue-16: #1E2634;
	--greyblue-18: #222B3A;
	--greyblue-20: #253041;
	--greyblue-22: #293548;
	--greyblue-24: #2C394E;
	--greyblue-26: #303E54;
	--greyblue-28: #34435B;
	--greyblue-30: #384861;
}

:root {
	--text-base: white;
}


/*	RESET -------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

img, picture, svg, video {
  display: block;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

em {
	font-style: normal;
	color: var(--teal-70);
}

ul {
	list-style: none;
}

button {
	cursor: pointer;
}


/*	SCALING ------------------------------------ */

/*	Font-size */
                             html { font-size: 14.60px; }
@media (min-width: 400px)  { html { font-size: 15.00px; } }
@media (min-width: 600px)  { html { font-size: 15.40px; } }
@media (min-width: 800px)  { html { font-size: 15.80px; } }
@media (min-width: 1000px) { html { font-size: 16.20px; } }
@media (min-width: 1200px) { html { font-size: 16.60px; } }
@media (min-width: 1400px) { html { font-size: 17.00px; } }
@media (min-width: 1600px) { html { font-size: 17.40px; } }
@media (min-width: 1800px) { html { font-size: 17.80px; } }
@media (min-width: 2000px) { html { font-size: 18.20px; } }
@media (min-width: 2200px) { html { font-size: 18.60px; } }
@media (min-width: 2400px) { html { font-size: 19.00px; } }

                             :root { --h1-font-size: 2.00rem; }
@media (min-width: 400px)  { :root { --h1-font-size: 2.00rem; } }
@media (min-width: 600px)  { :root { --h1-font-size: 2.40rem; } }
@media (min-width: 800px)  { :root { --h1-font-size: 2.60rem; } }
@media (min-width: 1000px) { :root { --h1-font-size: 2.80rem; } }
@media (min-width: 1200px) { :root { --h1-font-size: 3.00rem; } }
@media (min-width: 1400px) { :root { --h1-font-size: 3.20rem; } }
@media (min-width: 1600px) { :root { --h1-font-size: 3.40rem; } }
@media (min-width: 1800px) { :root { --h1-font-size: 3.60rem; } }
@media (min-width: 2000px) { :root { --h1-font-size: 3.80rem; } }
@media (min-width: 2200px) { :root { --h1-font-size: 4.00rem; } }
@media (min-width: 2400px) { :root { --h1-font-size: 4.20rem; } }

                             :root { --h2-font-size: 2.00rem; }
@media (min-width: 400px)  { :root { --h2-font-size: 2.00rem; } }
@media (min-width: 600px)  { :root { --h2-font-size: 2.10rem; } }
@media (min-width: 800px)  { :root { --h2-font-size: 2.20rem; } }
@media (min-width: 1000px) { :root { --h2-font-size: 2.30rem; } }
@media (min-width: 1200px) { :root { --h2-font-size: 2.40rem; } }
@media (min-width: 1400px) { :root { --h2-font-size: 2.50rem; } }
@media (min-width: 1600px) { :root { --h2-font-size: 2.60rem; } }
@media (min-width: 1800px) { :root { --h2-font-size: 2.70rem; } }
@media (min-width: 2000px) { :root { --h2-font-size: 2.80rem; } }
@media (min-width: 2200px) { :root { --h2-font-size: 2.90rem; } }
@media (min-width: 2400px) { :root { --h2-font-size: 3.00rem; } }

                             :root { --h3-font-size: 1.24rem; }
@media (min-width: 400px)  { :root { --h3-font-size: 1.30rem; } }
@media (min-width: 600px)  { :root { --h3-font-size: 1.36rem; } }
@media (min-width: 800px)  { :root { --h3-font-size: 1.42rem; } }
@media (min-width: 1000px) { :root { --h3-font-size: 1.48rem; } }
@media (min-width: 1200px) { :root { --h3-font-size: 1.52rem; } }
@media (min-width: 1400px) { :root { --h3-font-size: 1.58rem; } }
@media (min-width: 1600px) { :root { --h3-font-size: 1.62rem; } }
@media (min-width: 1800px) { :root { --h3-font-size: 1.68rem; } }
@media (min-width: 2000px) { :root { --h3-font-size: 1.74rem; } }
@media (min-width: 2200px) { :root { --h3-font-size: 1.80rem; } }
@media (min-width: 2400px) { :root { --h3-font-size: 1.86rem; } }

:root {
	--font-size-small: max(0.9em, 14.6px);
}

/*	Body padding */
                             :root { --body-padding-horizontal: 1.00rem; }
@media (min-width: 600px)  { :root { --body-padding-horizontal: 2.00rem; } }
@media (min-width: 800px)  { :root { --body-padding-horizontal: 2.75rem; } }
@media (min-width: 1000px) { :root { --body-padding-horizontal: 3.50rem; } }
@media (min-width: 1200px) { :root { --body-padding-horizontal: 4.25rem; } }
@media (min-width: 1400px) { :root { --body-padding-horizontal: 5.00rem; } }
@media (min-width: 1600px) { :root { --body-padding-horizontal: 5.75rem; } }
@media (min-width: 1800px) { :root { --body-padding-horizontal: 6.50rem; } }
@media (min-width: 2000px) { :root { --body-padding-horizontal: 7.25rem; } }
@media (min-width: 2200px) { :root { --body-padding-horizontal: 8.00rem; } }
@media (min-width: 2400px) { :root { --body-padding-horizontal: 8.25rem; } }

                             :root { --body-padding-vertical: 3.00rem; }
@media (min-width: 600px)  { :root { --body-padding-vertical: 3.40rem; } }
@media (min-width: 800px)  { :root { --body-padding-vertical: 3.80rem; } }
@media (min-width: 1000px) { :root { --body-padding-vertical: 4.20rem; } }
@media (min-width: 1200px) { :root { --body-padding-vertical: 4.60rem; } }
@media (min-width: 1400px) { :root { --body-padding-vertical: 5.00rem; } }
@media (min-width: 1600px) { :root { --body-padding-vertical: 5.40rem; } }
@media (min-width: 1800px) { :root { --body-padding-vertical: 5.80rem; } }
@media (min-width: 2000px) { :root { --body-padding-vertical: 6.20rem; } }
@media (min-width: 2200px) { :root { --body-padding-vertical: 6.60rem; } }
@media (min-width: 2400px) { :root { --body-padding-vertical: 7.00rem; } }

/*	Nav */
                             :root { --nav-padding-horizontal: 1.00rem; }
@media (min-width: 600px)  { :root { --nav-padding-horizontal: 2.00rem; } }

                             :root { --nav-padding-vertical: 1.50rem; }
@media (min-width: 600px)  { :root { --nav-padding-vertical: 2.00rem; } }

                             :root { --logo-height: 3.00rem; }
@media (min-width: 400px)  { :root { --logo-height: 3.01rem; } }
@media (min-width: 600px)  { :root { --logo-height: 3.18rem; } }
@media (min-width: 800px)  { :root { --logo-height: 3.27rem; } }
@media (min-width: 1000px) { :root { --logo-height: 3.36rem; } }
@media (min-width: 1200px) { :root { --logo-height: 3.45rem; } }
@media (min-width: 1400px) { :root { --logo-height: 3.55rem; } }
@media (min-width: 1600px) { :root { --logo-height: 3.64rem; } }
@media (min-width: 1800px) { :root { --logo-height: 3.73rem; } }
@media (min-width: 2000px) { :root { --logo-height: 3.82rem; } }
@media (min-width: 2200px) { :root { --logo-height: 3.91rem; } }
@media (min-width: 2400px) { :root { --logo-height: 4.00rem; } }

:root {
	--logo-width: calc(var(--logo-height) / 560 * 1550);
	--nav-height: calc(var(--logo-height) + var(--nav-padding-vertical));
}


/*	GLOBAL ------------------------------------- */

body {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #FFFFFF;
	letter-spacing: 0.03em;	
	background: var(--greyblue-10);
}

::-moz-selection {
	background-color: var(--blue-50);
	color: var(--text-base);
}

::selection {
	background-color: var(--blue-50);
	color: var(--text-base);
}

a {
	color: white;
	text-decoration: underline;
}

a:is(:hover, :active, :focus-visible) {
	text-decoration: none;
}

a:focus-visible {
	outline: 2px dotted white;
}


/* Uppercase */
:root {	
	--upper-font-size: 0.75em;
	--upper-font-family: 'Montserrat', 'Poppins', sans-serif;
	--upper-font-weight: 600;
	--upper-letter-spacing: 0.2em;
}


/*	BUTTONS AND FORM ELEMENTS ------------------ */

.button {
	display: flex;
	padding: 0.75em 1em;
	line-height: 1.25;
	background-color: var(--blue-50);
	color: white;
	border: none;
	border-radius: 0.5em;
	overflow: hidden;
	text-decoration: none;
}

.button:is(:hover, :active, :focus-visible) {
	background: linear-gradient(to bottom, var(--blue-50), var(--blue-40))
}

.button:focus-visible {
	outline: 1px solid white;
}

.button span {	
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

label {
	display: block;
	font-family: var(--upper-font-family);
	font-size: var(--upper-font-size);
	font-weight: var(--upper-font-weight);
	letter-spacing: var(--upper-letter-spacing);
	text-transform: uppercase;
	color: var(--grey-80);
	margin-bottom: 0.5em;
}

label .error {
	color: var(--teal-50);
}

input[type='text'],
input[type='email'],
textarea {
	display: block;
	width: 100%;
	border: none;
	color: #FFFFFF;
	background-color: var(--greyblue-10);
	padding: 0.5em;
	border-radius: 0.25rem;
	letter-spacing: inherit;
}

input[type='text']::placeholder,
input[type='email']::placeholder,
textarea::placeholder {
	color: var(--grey-60);
}

input[type='text']:focus-visible,
input[type='email']:focus-visible,
textarea:focus-visible {
	outline: 1px solid white;
}

input[type='text']:user-invalid,
input[type='email']:user-invalid,
textarea:user-invalid {
	outline: 1px solid lightcoral;
}


/*	NAV ---------------------------------------- */

.nav {
	display: grid;
	grid-template-columns: minmax(1px, var(--logo-width)) 1fr minmax(1px, var(--logo-width));
	grid-template-areas: 'logo nav button';
	align-items: center;
	height: var(--nav-height);
	padding: var(--nav-padding-vertical) var(--nav-padding-horizontal) 0 var(--nav-padding-horizontal);
	position: sticky;
	top: 0;
	z-index: 1000;
	background: linear-gradient(to bottom, var(--greyblue-10), transparent);
	background: linear-gradient(
		rgb(var(--greyblue-10-rgb)) 0%,
		rgba(var(--greyblue-10-rgb), 0.738) 19%,
		rgba(var(--greyblue-10-rgb), 0.541) 34%,
		rgba(var(--greyblue-10-rgb), 0.382) 47%,
		rgba(var(--greyblue-10-rgb), 0.278) 56.5%,
		rgba(var(--greyblue-10-rgb), 0.194) 65%,
		rgba(var(--greyblue-10-rgb), 0.126) 73%,
		rgba(var(--greyblue-10-rgb), 0.075) 80.2%,
		rgba(var(--greyblue-10-rgb), 0.042) 86.1%,
		rgba(var(--greyblue-10-rgb), 0.021) 91%,
		rgba(var(--greyblue-10-rgb), 0.008) 95.2%,
		rgba(var(--greyblue-10-rgb), 0.002) 98.2%,
		rgba(var(--greyblue-10-rgb), 0) 100%
	);
}

.nav__logo {
	grid-area: logo;
}

.nav__anchor {
	grid-area: nav;
	flex-wrap: nowrap;
	display: none;
	justify-content: center;
	gap: 0.5rem;
}

@media (min-width: 1000px) {
	.nav__anchor {
		display: flex;
	}
}

.nav__anchor a {
	display: block;
	font-family: var(--upper-font-family);
	font-size: var(--upper-font-size);
	font-weight: var(--upper-font-weight);
	letter-spacing: var(--upper-letter-spacing);
	text-transform: uppercase;
	padding: 0.75em;
	text-decoration: none;
}

.nav__anchor a:is(:hover, :active, :focus-visible) {
	color: var(--teal-50);
}

.nav__anchor a.active {
	color: var(--teal-50);
}

.nav__contact {
	grid-column: button;
	font-size: 0.9em;
	justify-self: end;
}


/*	HEADER FONT-SIZES ------------------I------- */

[class$="__header"] h1 {
	font-size: var(--h1-font-size);
	line-height: 1.1;
	font-weight: 700;
}

[class$="__header"] h2 {
	font-size: var(--h2-font-size);
	line-height: 1.1;
	font-weight: 400;
}

[class$="__header"] h3 {
	font-size: var(--h3-font-size);
	line-height: 1.1;
	font-weight: 400;
}


/*	SECTION: GRID ------------------------------ */

.section,
.footer {
	display: grid;
	grid-template-columns: var(--body-padding-horizontal) repeat(15, 1fr) var(--body-padding-horizontal);
}


/*	SECTION: HOME ------------------------------ */

.section--home {	
	min-height: calc(100vh - var(--nav-height));
	min-height: calc(100dvh - var(--nav-height));
	display: grid;
	grid-template-rows: minmax(var(--body-padding-vertical), 1fr) auto minmax(var(--body-padding-vertical), 1fr) auto;
	position: relative;
	z-index: 1;
	padding-top: var(--nav-height);
	margin-top: calc(var(--nav-height) * -1);
}


.section--home::after {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	top: calc(var(--nav-height) * -1);
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(at bottom center, var(--teal-30), var(--greyblue-10));
	z-index: -1;
}

.home__header {
	grid-column: 2/-2;
	grid-row: 2/3;
	text-align: center;
}

.home__header h1 {
	margin-bottom: 0.5em;
}

.home__header p {
	color: var(--grey-80);
	text-wrap: pretty;
}

@media (min-width: 600px) {
	.home__header {
		grid-column: 3/-3;
	}
}

@media (min-width: 1400px) {
	.home__header {
		grid-column: 4/-4;
	}
}

.home__img {
	grid-row: 4/5;
	grid-column: 2/-1;
	aspect-ratio: 1/1;
	position: relative;
	background-color: var(--teal-30);
	background-image: url(/img/diagnostic-suite.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;	
	box-shadow: 0 0 var(--body-padding-vertical) var(--teal-30);
}

@media (orientation: portrait) {
	.home__img {
		aspect-ratio: 1/1;
		border-radius: 0.25rem 0 0 0;
	}
}

@media (orientation: portrait) and (min-width: 600px) {
	.home__img {
		grid-column:3/-1;
	}
}

@media (orientation: landscape) {
	.home__img {
		aspect-ratio: 2.5/1;
		border-radius: 0.25rem 0.25rem 0 0;
	}
}

@media (orientation: landscape) and (min-width: 600px) {
	.home__img {
		grid-column:3/-3;
	}
}

.home__img::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	bottom: 0;
	background: linear-gradient(to top, var(--greyblue-10), transparent);
	opacity: 0.75;
}



/*	SECTION: DIAGNOSTIC SUITE ------------------ */

.section--ds {
	padding-top: calc(var(--body-padding-vertical) + var(--nav-height));
	padding-bottom: calc((var(--body-padding-vertical) + var(--nav-height)) - var(--nav-padding-vertical));
	position: relative;
	z-index: 2;
	background: linear-gradient(to bottom, var(--greyblue-12), var(--greyblue-16));
}

.ds__header {
	grid-column: 2/-2;	
	margin-bottom: var(--body-padding-vertical);
}

.ds__header :is(h1, h2, h3) {
	margin-bottom: 0.5em;
	font-weight: 500;
}

.ds__header p {
	color: var(--grey-80);
	text-wrap: pretty;
}

@media (min-width: 600px) {
	.ds__header {
		grid-column: 3/-3;
		text-align: center;
	}
}

@media (min-width: 1400px) {
	.ds__header {
		grid-column: 4/-4;
	}
}


/*	Cards */

.ds__cards {
	grid-column: 2/-2;
}

.ds__cards section {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-columns: 1fr;
	padding-bottom: var(--nav-padding-vertical);
}

[class^="card--"] {
	display: grid;
	align-items: center;
	border-radius: 1rem;
	position: relative;
}

.ds__cards > section:not(:first-child) [class^="card--"]::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--nav-padding-vertical) * -1);
	height: calc(var(--nav-padding-vertical) + 1rem);
	background: linear-gradient(to top, var(--greyblue-16), transparent);
	z-index: -1;
	opacity: 0.5;
}

.card--traditioneel {
	background: linear-gradient(to bottom right, var(--teal-20), var(--greyblue-16));
}

.card--maatschap {
	background: linear-gradient(to top right, var(--teal-20), var(--greyblue-22));
}

.card--zelfstandig {
	background: linear-gradient(to bottom right, var(--teal-20), var(--greyblue-22));
}


/*	Text */

.card__text {
	grid-area: text;
}

.card__text h3 {
	font-size: var(--h3-font-size);
	line-height: 1.1;
}

.card__text li {
	text-wrap: pretty;
}

.card__text h4 {
	display: inline;
	font-family: var(--upper-font-family);
	font-size: var(--upper-font-size);
	font-weight: var(--upper-font-weight);
	letter-spacing: var(--upper-letter-spacing);
	text-transform: uppercase;
	color: var(--teal-70);
}

.card__text p {
	display: inline;
}


/*	Flowchart */

.card__flowchart {
	grid-area: flowchart;
	align-self: stretch;	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: stretch;
	justify-content: stretch;
}

.card__flowchart picture {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
	background: url(/img/flowchart-dot.svg);
	background-repeat: repeat;
	background-position: center center;
	border-radius: 1rem;
}

.card__flowchart img {
	grid-column: 1/-1;
	grid-row: 1/-1;
}


/*	Breakpoints: Sticky (Als er tekst aangepast wordt, moet de queries handmatig gecontroleerd worden) */

@media (min-width: 300px)  and (max-width: 349px)  and (min-height: 750px),
       (min-width: 350px)  and (max-width: 374px)  and (min-height: 700px),
       (min-width: 375px)  and (max-width: 399px)  and (min-height: 635px),
       (min-width: 400px)  and (max-width: 449px)  and (min-height: 650px),
       (min-width: 450px)  and (max-width: 499px)  and (min-height: 625px),
       (min-width: 500px)  and (max-width: 599px)  and (min-height: 700px),
       (min-width: 600px)  and (max-width: 699px)  and (min-height: 775px),
       (min-width: 700px)  and (max-width: 799px)  and (min-height: 750px),
       (min-width: 800px)  and (max-width: 899px)  and (min-height: 600px),
       (min-width: 900px)  and (max-width: 999px)  and (min-height: 560px),
       (min-width: 1000px) and (max-width: 1099px) and (min-height: 700px),
       (min-width: 1100px) and (max-width: 1199px) and (min-height: 575px),
       (min-width: 1200px) and (max-width: 1299px) and (min-height: 600px),
       (min-width: 1300px) and (max-width: 1399px) and (min-height: 575px),
       (min-width: 1400px) and (max-width: 1499px) and (min-height: 600px),
       (min-width: 1500px) and (max-width: 1599px) and (min-height: 600px),
       (min-width: 1600px) and (min-height: 700px) {
	.ds__cards section {
		position: sticky;
		top: calc(var(--nav-height) + var(--nav-padding-vertical));
		height: calc(100vh - var(--nav-height) - var(--nav-padding-vertical));
		height: calc(100lvh - var(--nav-height) - var(--nav-padding-vertical));
	}
}


/*	Breakpoints: Cards */

[class^="card--"] {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: 'text' 'flowchart';
}

@media (min-width: 800px) {
	[class^="card--"] {
		grid-template-columns: 4fr 5fr;
		grid-template-rows: 1fr;
		grid-template-areas: 'flowchart text';
		
	}
}

@media (min-width: 1000px) {
	[class^="card--"] {
		grid-template-columns: 5fr 4fr;
	}
}


/*	Breakpoints: Text */

.card__text {
	--padding-vertical: 1.5rem;
	--padding-horizontal: 1rem;
	padding-top:    var(--padding-vertical);
	padding-bottom: var(--padding-vertical);	
	padding-left:   var(--padding-horizontal);
	padding-right:  var(--padding-horizontal);
}

@media (min-width: 600px) { .card__text { --padding-horizontal: 2rem; } }
@media (min-width: 800px) { .card__text { --padding-vertical: 2rem; } }

.card__text li {
	margin-top: 0.5rem;
}

@media (min-width: 800px) { .card__text li { margin-top: 1rem; } }


/*	Breakpoints: Flowcharts */

.card__flowchart {
	--flowchart-width: calc(1462px / 2); /* 731px */
	--flowchart-height: calc(952px / 2); /* 476px */
	--flowchart-dot: 323px;
	--flowchart-zoom: 0.20;
}

.card__flowchart picture {
	background-size:
		calc(var(--flowchart-dot) * var(--flowchart-zoom))
		calc(var(--flowchart-dot) * var(--flowchart-zoom));
}

.card__flowchart img {
	width: calc(var(--flowchart-width) * var(--flowchart-zoom));
	height: calc(var(--flowchart-height) * var(--flowchart-zoom));
}

@media (min-width: 300px)  { .card__flowchart picture { --flowchart-zoom: 0.30; } } /* Portrait cards */
@media (min-width: 350px)  { .card__flowchart picture { --flowchart-zoom: 0.35; } } /* Portrait cards */
@media (min-width: 500px)  { .card__flowchart picture { --flowchart-zoom: 0.50; } } /* Portrait cards */
@media (min-width: 600px)  { .card__flowchart picture { --flowchart-zoom: 0.60; } } /* Portrait cards */
@media (min-width: 800px)  { .card__flowchart picture { --flowchart-zoom: 0.35; } } /* Landscape cards */
@media (min-width: 1000px) { .card__flowchart picture { --flowchart-zoom: 0.50; } } /* Landscape cards */
@media (min-width: 1200px) { .card__flowchart picture { --flowchart-zoom: 0.60; } } /* Landscape cards */
@media (min-width: 1400px) { .card__flowchart picture { --flowchart-zoom: 0.75; } } /* Landscape cards */
@media (min-width: 1600px) { .card__flowchart picture { --flowchart-zoom: 1.00; } } /* Landscape cards */


/*	SECTION: ABOUT ----------------------------- */

.section--about {
	padding-top: calc(var(--body-padding-vertical) + var(--nav-height));
	padding-bottom: calc(var(--body-padding-vertical) + var(--nav-height));
	position: relative;
	background-color: var(--greyblue-10);
}

.section--about::before {
	content: '';
	background: url('/img/scan.webp');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	background-blend-mode: lighten;
	background-color: var(--greyblue-10);
	opacity: 0.15;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--body-padding-vertical) + var(--nav-height));
	bottom: 0;
	z-index: 1;
}

.section--about::after {
	content: '';
	background: linear-gradient(to bottom, var(--greyblue-10), transparent);
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--body-padding-vertical) + var(--nav-height));
	height: calc(var(--body-padding-vertical) + var(--nav-height));
	z-index: 2;
}

.section--about > * {
	z-index: 3;
}

.about__header {
	grid-column: 2/-2;
	position: relative;
}

.about__header :is(h1, h2, h3) {
	margin-bottom: 0.5em;
	font-weight: 600;
}

.about__content {
	grid-column: 2/-2;
	counter-reset: diensten;
}

@media (min-width: 600px) {
.about__header,
.about__content {
	grid-column: 3/-3;
}
}

@media (min-width: 800px) {
	.about__header {
		grid-column: 2/9;
	}

	.about__content {
		grid-column: 10/-2;
	}

	.about__header :is(h1, h2, h3) {
		position: sticky;
		top: calc(var(--nav-height) + var(--nav-padding-vertical));
	}
}

@media (min-width: 1200px) {
	.about__header {
		grid-column: 3/9;
	}

	.about__content {
		grid-column: 10/-2;
	}
}


/*	Content */

.intro {
	
	margin-bottom: 3rem;
}

.intro p {
	text-wrap: pretty;
}

.diensten section + section {
	margin-top: 3rem;
}

.about__content :is(h2, h3, h4) {
	font-size: var(--h3-font-size);
	position: relative;
	margin-bottom: 0.25em;
}

.about__content :is(h2, h3, h4)::before {
	counter-increment: diensten;
	content: counter(diensten) ".\2002";
	color: var(--teal-70);
}

@media (min-width: 800px) {
	.about__content :is(h2, h3, h4)::before {
		position: absolute;
		left: -2em;
		width: 2em;
		text-align: right;
	}
}


/*	SECTION: PLAIN ----------------------------- */

.section--plain {
	padding-top: var(--body-padding-vertical);
	padding-bottom: calc(var(--body-padding-vertical) + var(--nav-height));
}

.plain__header {
	grid-column: 2/-2;	
	text-align: left;
}

.plain__header :is(h1, h2, h3) {
	margin-bottom: 0.5em;
	font-weight: 500;
	font-size: var(--h3-font-size);
}

.plain__content {
	grid-column: 2/-2;	
}

@media (min-width: 600px) {
	.plain__header,
	.plain__content {
		grid-column: 3/-3;
	}
}

@media (min-width: 1400px) {
	.plain__header,
	.plain__content {
		grid-column: 5/-5;
	}
}

.plain__content p + p                     { margin-top: 1.6em; }
.plain__content p + ul                    { margin-top: 1.6em; }
.plain__content p + address               { margin-top: 1.6em; }
.plain__content p + :is(h1, h2, h3, h4)   { margin-top: 3.2em; }
.plain__content ul + p                    { margin-top: 1.6em; }
.plain__content ul + ul                   { margin-top: 1.6em; }
.plain__content ul + address               { margin-top: 1.6em; }
.plain__content ul + :is(h1, h2, h3, h4)  { margin-top: 3.2em; }
.plain__content :is(h1, h2, h3, h4)       { margin-bottom: 0.5em; }

.plain__content :is(h1, h2, h3, h4) {
	font-family: var(--upper-font-family);
	font-size: var(--upper-font-size);
	font-weight: var(--upper-font-weight);
	letter-spacing: var(--upper-letter-spacing);
	text-transform: uppercase;
	color: var(--teal-70);
}

.plain__content ul {
	margin-left: 1.6em;
}

.plain__content ul li {
	position: relative;
	padding-left: 1em;
}

.plain__content ul li::before {
	content: '-';
	display: block;
	width: 1em;
	position: absolute;
	left: 0;
}




/*	FOOTER ------------------------------------- */

.main-footer {
	position: relative;
}

.main-footer::after {
	content: '';
	z-index: -1;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: radial-gradient(at center right, var(--teal-20), transparent);
}


/*	FOOTER: CONTACT ---------------------------- */

.footer--contact {
	padding-top: var(--body-padding-vertical);
	padding-bottom: var(--body-padding-vertical);
}

.contact__header {
	grid-column: 2/-2;
}

.contact__form {
	grid-column: 2/-2;
}

@media (min-width: 600px) {
	.contact__header {
		grid-column: 3/-3;
	}

	.contact__form {
		grid-column: 3/-3;
	}
}

@media (min-width: 800px) {
	.contact__header {
		grid-column: 2/11;
	}

	.contact__form {
		grid-column: 2/11;
	}
}

@media (min-width: 1200px) {
	.contact__header {
		grid-column: 3/10;
	}

	.contact__form {
		grid-column: 3/10;
	}
}

.contact__header :is(h1, h2, h3) {
	margin-bottom: 0.5em;
}

.contact__header p {
	color: var(--grey-80);
	text-wrap: pretty;
}

.contact__img {
	grid-column: 12/-1;
	grid-row: 1/3;
	align-self: stretch;
	z-index: 1000;
	position: relative;
	border-radius: 0.25rem 0 0 0;
	box-shadow: 0 0 var(--body-padding-vertical) var(--teal-20);
	display: none;
}

.contact__img::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: calc(var(--body-padding-vertical) * -1);
	background-image: url(/img/diagnostic-suite.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left top;
	border-radius: 0.25rem 0 0 0;
	z-index: 2;
	overflow: hidden;
}

.contact__img::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	bottom: calc(var(--body-padding-vertical) * -1);
	background: linear-gradient(to top, var(--greyblue-10), transparent);
	opacity: 0.5;
	z-index: 3;
}

@media (min-width: 800px) {
	.contact__img {
		display: block;
	}
}	


/*	Form */

.contact__form {
	margin-top: 2rem;
}

.contact__form form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto auto;
	grid-template-areas: 
		'name mail'
		'message message'
		'button button';
	gap: 1rem;	
}

.form__name    { grid-area: name; }
.form__mail    { grid-area: mail; }
.form__message { grid-area: message; }
.form__button  { grid-area: button; }
.form__altcha  { grid-area: altcha; }

.form__button button {
	margin: 0 auto;
}

.message--success,
.message--fail {
	text-align: center;
	font-size: var(--font-size-small);
	color: #FFFFFF !important;
	padding: 1rem;
	border-radius: 0.25rem;
}

.message--success {
	background-color: var(--teal-50);
	color: var(--grey-10) !important;
}

.message--fail {
	background-color: #ED375E;
}

p:has(+ p.message--success),
p:has(+ p.message--fail) {
	display: none;
}

.form__button {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1rem auto;
	grid-template-areas: "altcha" "." "button";
	align-items: start;
	justify-content: center;
	justify-items: center;
}

@media (min-width: 500px) {
	.form__button {
		grid-template-columns: auto minmax(1rem, 1fr) auto;
		grid-template-areas: "button . altcha";
	}
}

.form__button .button {
	grid-area: button;
}

.form__button altcha-widget {
	grid-area: altcha;
}

altcha-widget label {
	font-size: 1rem !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-family: 'Poppins', sans-serif !important;
	margin: 0 !important;
	font-weight: normal !important;
}

altcha-widget .altcha-footer {
	display: none !important;
}


/*	FOOTER: INFORMATION ------------------------ */

.footer--information {
	grid-template-rows: auto auto auto;
	row-gap: 2rem;
	border-top: 1px solid var(--grey-40);
	padding-top: var(--body-padding-vertical);
	font-size: var(--font-size-small);
}

@media (min-width: 600px) {
	.footer--information {
		grid-template-rows: auto auto;
	}
}


/*	Details */

.information__details {
	grid-column: 2/-2;
	grid-row: 1/2;
}

@media (min-width: 600px) {
	.information__details {
		grid-column: 1/9;
		grid-row: 1/2;
		padding-left: var(--nav-padding-horizontal);
	}
}

.details__logo {
	display: block;
	width: var(--logo-width);
	margin-bottom: 1rem;
}

.details__address {
	margin-bottom: 1rem;
}

.details__socials {
	display: flex;
	justify-content: start;
	gap: 1rem;
}

.details__socials a {
	display: block;
	padding: 0.5em;
	background-color: var(--teal-50);
	border-radius: 0.25rem;
}

.details__socials a:is(:hover, :active, :focus-visible) {
	background: linear-gradient(to bottom, var(--teal-50), var(--teal-40));
}

.details__socials a:focus-visible {
	outline: 1px solid #FFFFFF;
}

.details__socials svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: #FFFFFF;
}


/*	Links */

.information__links {
	grid-column: 2/-2;
	grid-row: 2/3;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.information__links:has(section:only-child) {
	display: block;
}

@media (min-width: 600px) {
	.information__links {
		grid-column: 12/-2;
		grid-row: 1/2;
	}
}

.information__links :is(h1, h2, h3, h4) {
	font-family: var(--upper-font-family);
	font-size: var(--upper-font-size);
	font-weight: var(--upper-font-weight);
	letter-spacing: var(--upper-letter-spacing);
	text-transform: uppercase;
	color: var(--teal-70);
}


/*	Copy */

.information__copy {
	grid-column: 1/-1;
	grid-row: 3/4;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: var(--nav-padding-horizontal);
	padding-right: var(--nav-padding-horizontal);
	color: var(--grey-80);
	background-color: var(--greyblue-10);
}

@media (min-width: 600px) {
	.information__copy {
		grid-row: 2/3;
	}
}

.information__copy a {
	color: inherit;
}

.information__copy li {
	display: inline;
}

.information__copy li + li::before {
	content: '· ';
}