@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
	--padding: 1.5rem;
	--color-black: #000;
	--color-white: #fff;
	--color-grey: #777;
	--color-light: #efefef;
	--color-text: var(--color-black);
	--color-text-grey: var(--color-grey);
	--color-background: var(--color-white);
	--color-code-light-grey: #cacbd1;
	--color-code-comment: #a9aaad;
	--color-code-white: #c5c9c6;
	--color-code-red: #d16464;
	--color-code-orange: #de935f;
	--color-code-yellow: #f0c674;
	--color-code-green: #a7bd68;
	--color-code-aqua: #8abeb7;
	--color-code-blue: #7e9abf;
	--color-code-purple: #b294bb;
	--font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
		Courier, monospace;
}
* {
	margin: 0;
	padding: 0;
}

html {
	/* scroll-behavior: smooth !important; */
	color: var(--color-text);
	background: var(--color-background);
}

img {
	width: 100%;
}
body {
	padding: var(--padding);
	max-width: 77rem;
	margin: 0 auto !important;
	padding-bottom: 0 !important;
}

@media (max-width: 767px) {
	body {
		padding: 0;
	}
}
/* The page used to stay hidden until window "load" (every image, reCAPTCHA,
   analytics…). Content now shows right away; motion.js handles the entrances. */

/* html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	overflow-y: scroll;

	overscroll-behavior-y: none;
} */

li {
	list-style: none;
}
a {
	color: currentColor;
	text-decoration: none;
}
button {
	font: inherit;
	background: none;
	border: 0;
	color: currentColor;
	cursor: pointer;
}
strong,
b {
	font-weight: 600;
}
small {
	font-size: inherit;
	color: var(--color-text-grey);
}

.bg-light {
	background-color: var(--color-light);
}
.color-grey {
	color: var(--color-text-grey);
}

/* .header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-right: -1rem;
	margin-left: -1rem;
	margin-bottom: 6rem;
} */

.menu {
	display: flex;
}
.menu a {
	padding: 1rem;
	display: block;
}
.menu a[aria-current] {
	text-decoration: underline;
}

.social {
	display: flex;
	padding: 0 0.5rem;
}
.social a {
	padding: 1rem 0.5rem;
}

.section {
	padding: 3rem 0;
}

.grid {
	--columns: 12;
	--gutter: 3rem;
	display: grid;
	grid-gap: var(--gutter);
	grid-template-columns: 1fr;
}
.grid > .column {
	margin-bottom: var(--gutter);
}

.autogrid {
	--gutter: 3rem;
	--min: 10rem;
	display: grid;
	grid-gap: var(--gutter);
	grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
	grid-auto-flow: dense;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.text {
	line-height: 1.5em;
}
.text a {
	text-decoration: underline;
}
.text :first-child {
	margin-top: 0;
}
.text :last-child {
	margin-bottom: 0;
}
.text p,
.text ul,
.text ol {
	margin-bottom: 1.5rem;
}
.text ul,
.text ol {
	margin-left: 1rem;
}
.text ul p,
.text ol p {
	margin-bottom: 0;
}
.text ul > li {
	list-style: disc;
}
.text ol > li {
	list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
	margin-bottom: 0;
}
.text h1,
.h1,
.intro {
	font-size: 2rem;
	margin-bottom: 3rem;
	line-height: 1.25em;
}
.text h2,
.h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1.25rem;
}
.text h3,
.h3 {
	font-weight: 600;
}
.text .codeblock {
	display: grid;
}
.text code {
	font-family: var(--font-family-mono);
	font-size: 1em;
	background: var(--color-light);
	padding: 0 0.5rem;
	display: inline-block;
	color: var(--color-black);
}
.text pre {
	margin: 3rem 0;
	background: var(--color-black);
	color: var(--color-white);
	padding: 1.5rem;
	overflow-x: scroll;
	overflow-y: hidden;
	line-height: 1.5rem;
}
.text pre code {
	padding: 0;
	background: none;
	color: inherit;
}
.text hr {
	margin: 6rem 0;
}
.text dt {
	font-weight: 600;
}
.text blockquote {
	font-size: 1.25rem;
	line-height: 1.325em;
	border-left: 2px solid var(--color-black);
	padding-left: 1rem;
	margin: 3rem 0;
	max-width: 25rem;
}
.text blockquote footer {
	font-size: 0.875rem;
	font-style: italic;
}
.text figure {
	margin: 3rem 0;
}
.text figcaption {
	padding-top: 0.75rem;
	color: var(--color-text-grey);
}
.text figure ul {
	line-height: 0;
	display: grid;
	gap: 1.5rem;
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.text figure ul li {
	list-style: none;
}

hr {
	border: 0;
	background: currentColor;
	height: 2px;
	width: 1.5rem;
	margin: 3rem auto;
}

.align-center {
	text-align: center;
}

.intro {
	max-width: 40rem;
}
.intro *:not(:last-child) {
	margin-bottom: 1em;
}

.cta {
	background: var(--color-black);
	color: var(--color-white);
	display: inline-flex;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border: 4px solid var(--color-white);
	outline: 2px solid var(--color-black);
}

.box {
	background: var(--color-light);
	padding: 1.5rem;
	border: 4px solid var(--color-white);
	outline: 2px solid var(--color-light);
}

.video,
.img {
	position: relative;
	display: block;
	--w: 1;
	--h: 1;
	padding-bottom: calc(100% / var(--w) * var(--h));
	background: var(--color-black);
}
.img img,
.video iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.img[data-contain] img {
	object-fit: contain;
}
.img-caption,
.video-caption {
	padding-top: 0.75rem;
	line-height: 1.5em;
}

.map {
	--w: 2;
	--h: 1;
	padding-bottom: calc(100% / var(--w) * var(--h));
	position: relative;
	overflow: hidden;
	background: var(--color-black);
}
.map iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.margin-s {
	margin-bottom: 0.75rem;
}
.margin-m {
	margin-bottom: 1.5rem;
}
.margin-l {
	margin-bottom: 3rem;
}
.margin-xl {
	margin-bottom: 4.5rem;
}
.margin-xxl {
	margin-bottom: 6rem;
}

@media screen and (min-width: 60rem) {
	body {
		--padding: 3rem;
	}

	.grid {
		grid-template-columns: repeat(12, 1fr);
	}
	.grid > .column {
		grid-column: span var(--columns);
	}
}

.pagination {
	display: flex;
	padding-top: 6rem;
}
.pagination > span {
	color: var(--color-text-grey);
}
.pagination > * {
	padding: 0.5rem;
	width: 3rem;
	text-align: center;
	border: 2px solid currentColor;
	margin-right: 1.5rem;
}
.pagination > a:hover {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

.note-excerpt {
	line-height: 1.5em;
}
.note-excerpt header {
	margin-bottom: 1.5rem;
}
.note-excerpt figure {
	margin-bottom: 0.5rem;
}
.note-excerpt-title {
	font-weight: 600;
}
.note-excerpt-date {
	color: var(--color-text-grey);
}

.nitras-hover-inverse {
	text-decoration: none;
	padding-bottom: 9px;
	transition: background-size 0.55s cubic-bezier(0.2, 0.75, 0.5, 1);
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 1) 0%,
		rgba(0, 0, 0, 1) 100%
	);
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: left bottom;
}
.nitras-hover-inverse:hover {
	background-size: 0% 2px;
	background-position: right bottom;
}

/* LENIS SCROLL */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* ---- motion (assets/js/motion.js)
   Start states only apply while JS runs (html.js, set in <head>) and motion is
   allowed — without JS or with "reduce motion" everything shows. */
[data-img] {
  overflow: hidden;
  border-radius: 0.75rem; /* = rounded-3xl (tailwind.config.js) */
}
/* line masks get room above and below so ascenders/descenders are never cut */
.split-line-mask,
.split-word-mask {
  padding-block: 0.18em;
  margin-block: -0.18em;
}
@media (prefers-reduced-motion: no-preference) {
  html.js [data-split],
  html.js [data-stagger],
  html.js [data-hero-badge],
  html.js [data-hero-kicker],
  html.js [data-fade-in],
  html.js [data-reveal] {
    visibility: hidden;
  }
  html.js [data-img] {
    clip-path: inset(100% 0% 0% 0% round 0.75rem);
  }
}

/* cards (Waarden, Voordelen, Diensten): border and puzzle piece light up at once and fade out slowly, so moving the
   pointer across the cards leaves a trail */
.kc-card { transition: border-color 1.8s ease; }
/* "fill: none" can't fade (it jumps), so the piece rests on a transparent purple that can */
.kc-card .random-svg-icon > * { fill: rgb(106 79 160 / 0) !important; transition: fill 1.8s ease !important; }
.kc-card:hover, .kc-card:hover .random-svg-icon > * { transition-duration: 0.15s !important; }

/* landing page: the floating sign-up steps aside near the download block (landing.php). On the card, not the <aside>,
   which motion.js fades in with inline styles */
.email-signup--float.is-away { opacity: 0; visibility: hidden; transform: translateX(24px); }

/* landing page: the floating sign-up — white, black while you hover or type in it; everything stays readable */
.email-signup--float {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.email-signup--float :is(h3, p, input, button) {
  transition: color 0.4s ease, border-color 0.4s ease, background-color 0.2s ease;
}
.email-signup--float:is(:hover, :focus-within) {
  background-color: #000;
  border-color: #000;
  color: #fff;
}
.email-signup--float:is(:hover, :focus-within) p { color: rgb(255 255 255 / 0.75); }
.email-signup--float:is(:hover, :focus-within) input[type="email"] { color: #fff; border-color: rgb(255 255 255 / 0.55); }
.email-signup--float:is(:hover, :focus-within) input[type="email"]::placeholder { color: rgb(255 255 255 / 0.6); }
.email-signup--float:is(:hover, :focus-within) button { color: #fff; border-color: #fff; background-color: transparent; }
.email-signup--float:is(:hover, :focus-within) button:is(:hover, :focus-visible) { color: #000; background-color: #fff; }
.email-signup--float:is(:hover, :focus-within) .text-green-700 { color: #86efac; }
.email-signup--float:is(:hover, :focus-within) .text-red-700 { color: #fca5a5; }
/* the beeldbank image behind it, only in the black state; the content stays on top */
.email-signup--float > :not(.email-signup__bg, script) { position: relative; }
.email-signup__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.email-signup--float:is(:hover, :focus-within) .email-signup__bg { opacity: 0.5; }

/* landing page hero: the title on a beeldbank image. The block itself is as wide as the page's grid (so the text lines up
   with everything below); its image reaches out to --hero-inset from the window edges: edge to edge on phones,
   a rounded block from tablet up */
.landing-hero { --hero-inset: 0px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 560px; padding: 3rem 0; }
.landing-hero__bg { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw + var(--hero-inset)); right: calc(50% - 50vw + var(--hero-inset)); overflow: hidden; background: #000; }
@media (min-width: 768px) {
  .landing-hero { --hero-inset: 1.5rem; padding: 4rem 0; }
  .landing-hero__bg { border-radius: 0.75rem; }
}
@media (min-width: 1024px) { .landing-hero { min-height: min(80vh, 820px); } }
.landing-hero__shade { background: linear-gradient(to top, rgb(0 0 0 / .7), rgb(0 0 0 / .25) 70%, rgb(0 0 0 / .1)); }

/* the black checklist block: its background image fades back a little on hover */
#download:hover .cta-bg:not(.opacity-0) { opacity: 0.6; }

/* sticky header: transparent at the top, frosted once you scroll */
[data-header] {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background-color 0.3s, box-shadow 0.3s, backdrop-filter 0.3s;
}
[data-header].is-scrolled {
  background-color: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
}

/* full-width footer: the black band runs edge to edge (out of the 77rem body),
   its content sits on the same grid as the page via .footer-inner */
html {
	overflow-x: clip;
}
.footer {
	margin-inline: calc(50% - 50vw);
}
.footer-inner {
	max-width: 77rem;
	margin-inline: auto;
	padding-inline: var(--padding);
}
@media (max-width: 767px) {
	.footer-inner {
		padding-inline: 0;
	}
}