/*
Theme Name: Code765
*/

:root {
	--achtergrond: #f6f8f4;
	--vlak: #ffffff;
	--vlak-zacht: #edf4ef;
	--tekst: #16201f;
	--gedempt: #5a6863;
	--lijn: #d7dfd8;
	--zeegroen: #006b68;
	--groen: #4d8b31;
	--geel: #f2c94c;
	--koraal: #d65f4a;
	--blauw: #326f9f;
	--schaduw: 0 18px 45px rgba(22, 32, 31, .11);
	--hoek: 8px;
	--inhoud: 1160px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--achtergrond);
	color: var(--tekst);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

a {
	color: inherit;
}

.site-schil {
	min-height: 100vh;
	overflow-x: hidden;
}

.site-kop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.navigatie {
	width: min(var(--inhoud), calc(100% - 32px));
	margin: 0 auto;
	padding: 22px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	color: #fff;
}

.merk {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	font-weight: 750;
	letter-spacing: 0;
}

.merk-teken {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .42);
	border-radius: var(--hoek);
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .12);
	backdrop-filter: blur(12px);
}

.merk-teken svg {
	width: 25px;
	height: 25px;
}

.merk-naam {
	display: grid;
	line-height: 1.05;
}

.merk-naam small {
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
	font-weight: 650;
}

.navigatie-links {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.navigatie-links a {
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: var(--hoek);
	color: rgba(255, 255, 255, .86);
	text-decoration: none;
	font-size: 14px;
	font-weight: 650;
}

.navigatie-links a:hover,
.navigatie-links a:focus-visible {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	outline: none;
}

.held {
	position: relative;
	min-height: 92vh;
	display: grid;
	align-items: end;
	padding: 112px 0 58px;
	color: #fff;
	background-image:
		linear-gradient(90deg, rgba(10, 35, 35, .94) 0%, rgba(10, 35, 35, .82) 38%, rgba(10, 35, 35, .38) 70%, rgba(10, 35, 35, .18) 100%),
		url("assets/code765-hero.png");
	background-position: center;
	background-size: cover;
}

.held::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(180deg, rgba(246, 248, 244, 0), var(--achtergrond));
	pointer-events: none;
}

.held-binnen {
	position: relative;
	z-index: 1;
	width: min(var(--inhoud), calc(100% - 32px));
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 640px) minmax(220px, 1fr);
	gap: 42px;
	align-items: end;
}

.labeltje {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 32px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--hoek);
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .86);
	font-size: 13px;
	font-weight: 700;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	margin-bottom: 18px;
	font-size: clamp(42px, 7vw, 86px);
	line-height: .96;
	letter-spacing: 0;
	max-width: 760px;
}

.held-tekst {
	max-width: 610px;
	margin-bottom: 28px;
	color: rgba(255, 255, 255, .86);
	font-size: clamp(18px, 2.2vw, 22px);
}

.held-acties {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.knop {
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: var(--hoek);
	text-decoration: none;
	font-weight: 760;
	line-height: 1.2;
}

.knop svg {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
}

.knop-primair {
	background: #fff;
	color: #123432;
	box-shadow: var(--schaduw);
}

.knop-secundair {
	border-color: rgba(255, 255, 255, .38);
	color: #fff;
	background: rgba(255, 255, 255, .08);
}

.overzicht-paneel {
	margin-bottom: 8px;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: var(--hoek);
	background: rgba(10, 35, 35, .52);
	backdrop-filter: blur(14px);
}

.overzicht-paneel strong {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
}

.overzicht-lijst {
	display: grid;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.overzicht-lijst li {
	display: grid;
	grid-template-columns: 12px minmax(0, 1fr);
	gap: 9px;
	align-items: center;
	color: rgba(255, 255, 255, .86);
	font-size: 14px;
}

.overzicht-lijst li::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--geel);
}

.sectie {
	padding: 76px 0;
}

.sectie-compact {
	padding-top: 28px;
}

.omhulsel {
	width: min(var(--inhoud), calc(100% - 32px));
	margin: 0 auto;
}

.sectie-kop {
	max-width: 760px;
	margin-bottom: 32px;
}

.sectie-kop h2 {
	margin-bottom: 10px;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.05;
	letter-spacing: 0;
}

.sectie-kop p {
	margin-bottom: 0;
	color: var(--gedempt);
	font-size: 18px;
}

.oplossingen-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.oplossing-kaart {
	min-height: 390px;
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var(--lijn);
	border-radius: var(--hoek);
	background: var(--vlak);
	box-shadow: 0 10px 24px rgba(22, 32, 31, .05);
}

.kaart-pictogram {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
	border-radius: var(--hoek);
	background: var(--vlak-zacht);
	color: var(--zeegroen);
}

.oplossing-kaart:nth-child(2) .kaart-pictogram {
	color: var(--groen);
}

.oplossing-kaart:nth-child(3) .kaart-pictogram {
	color: var(--koraal);
}

.oplossing-kaart:nth-child(4) .kaart-pictogram {
	color: var(--blauw);
}

.kaart-pictogram svg {
	width: 24px;
	height: 24px;
}

.oplossing-kaart h3 {
	margin-bottom: 10px;
	font-size: 21px;
	line-height: 1.18;
}

.oplossing-kaart p {
	margin-bottom: 16px;
	color: var(--gedempt);
}

.punten-lijst {
	display: grid;
	gap: 8px;
	padding: 0;
	margin: 0 0 18px;
	list-style: none;
	color: var(--tekst);
	font-size: 14px;
}

.punten-lijst li {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 8px;
	align-items: start;
}

.punten-lijst li::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: 8px;
	border-radius: 999px;
	background: var(--geel);
	box-shadow: 0 0 0 4px rgba(242, 201, 76, .18);
}

.kaart-label {
	margin-top: auto;
	width: fit-content;
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 5px 9px;
	border-radius: var(--hoek);
	background: var(--vlak-zacht);
	color: var(--zeegroen);
	font-size: 13px;
	font-weight: 760;
}

.principes {
	background: #172422;
	color: #fff;
}

.principes-raster {
	display: grid;
	grid-template-columns: .82fr 1.18fr;
	gap: 44px;
	align-items: start;
}

.principes h2 {
	margin-bottom: 14px;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.05;
}

.principes p {
	color: rgba(255, 255, 255, .72);
}

.principes-lijst {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.principe-item {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: var(--hoek);
	background: rgba(255, 255, 255, .045);
}

.principe-item strong {
	display: block;
	margin-bottom: 7px;
}

.principe-item span {
	color: rgba(255, 255, 255, .68);
}

.contact-band {
	background: var(--vlak);
}

.contact-blok {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
	padding: 30px;
	border: 1px solid var(--lijn);
	border-radius: var(--hoek);
	background:
		linear-gradient(135deg, rgba(0, 107, 104, .08), rgba(242, 201, 76, .12)),
		var(--vlak);
}

.contact-blok h2 {
	margin-bottom: 8px;
	font-size: clamp(28px, 3vw, 42px);
	line-height: 1.08;
}

.contact-blok p {
	margin-bottom: 0;
	color: var(--gedempt);
	max-width: 760px;
}

.voet {
	padding: 34px 0;
	background: #101716;
	color: rgba(255, 255, 255, .72);
}

.voet-binnen {
	width: min(var(--inhoud), calc(100% - 32px));
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.voet a {
	color: #fff;
	text-decoration: none;
}

@media (max-width: 980px) {
	.held-binnen,
	.principes-raster {
		grid-template-columns: 1fr;
	}

	.overzicht-paneel {
		max-width: 520px;
	}

	.oplossingen-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.navigatie {
		align-items: flex-start;
	}

	.navigatie-links {
		display: none;
	}

	.held {
		min-height: 88vh;
		padding-top: 104px;
		background-position: 62% center;
	}

	.held-binnen {
		gap: 24px;
	}

	.held-acties,
	.contact-blok {
		display: grid;
		grid-template-columns: 1fr;
	}

	.knop {
		width: 100%;
	}

	.oplossingen-raster,
	.principes-lijst {
		grid-template-columns: 1fr;
	}

	.oplossing-kaart {
		min-height: 0;
	}

	.sectie {
		padding: 56px 0;
	}

	.contact-blok {
		padding: 22px;
	}
}