/* ==========================================================================
   Wolters Kassenbouw — reset and base elements
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font: var(--type-body);
	color: var(--text-body);
	background: var(--surface-page);
	-webkit-font-smoothing: antialiased;
	overflow-y: scroll;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); }
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }
h4, h5, h6 { font: var(--type-label); }

p { margin: 0 0 var(--space-6); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--text-link);
	text-decoration: none;
	transition: var(--transition-control);
}
a:hover { color: var(--text-link-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--border-focus);
	outline-offset: 2px;
}

img { max-width: 100%; display: block; border: 0; }

figure { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

code, kbd, samp { font: var(--type-mono); }

strong, b { font-weight: var(--weight-semibold); color: var(--text-strong); }

hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-9) 0; }

table { border-collapse: collapse; border-spacing: 0; }

button { font-family: inherit; }

::selection { background: var(--wk-green-100); }

/* Every number, code, dimension and count is mono. */
.mono { font: var(--type-mono); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}
.container_narrow { max-width: var(--container-narrow); }

.section { padding-top: var(--pad-section); padding-bottom: var(--pad-section); }
.section_subtle { background: var(--surface-subtle); border-top: 1px solid var(--border-subtle); }
.section_dark { background: var(--surface-dark); color: var(--text-inverse-muted); }

/* The cube flattened: blue > red > green, always that order.
   The brand's signature graphic device. */
.rule {
	display: flex;
	height: 4px;
	width: 100%;
	flex: 0 0 auto;
}
.rule span { flex: 1; }
.rule span:nth-child(1) { background: var(--wk-blue-500); }
.rule span:nth-child(2) { background: var(--wk-red-500); }
.rule span:nth-child(3) { background: var(--wk-green-500); }
/* Card / section marker: 160px wide, 6px tall, drawn left to right on entrance. */
.rule_marker { width: 160px; height: 6px; }

/* 12px bold uppercase at 0.14em, green, above section headings. */
.eyebrow {
	display: block;
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-brand);
}
.eyebrow_inverse { color: rgba(255, 255, 255, .85); }

/* Display headings: bold, uppercase, wide and structural, like the wordmark.
   The written copy stays sentence case so it survives without the transform. */
.display {
	font: var(--weight-bold) var(--text-4xl)/1.08 var(--font-sans);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-strong);
}
.lead {
	font: var(--type-body-lg);
	color: var(--text-body);
	max-width: 640px;
}

/* --------------------------------------------------------------------------
   Scroll entrance. One primitive, so wk-rise-in is the only scroll animation
   anyone reaches for. Without JS the content simply shows.
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; }
.js .reveal.is_visible {
	opacity: 1;
	animation: var(--anim-rise);
	animation-delay: calc(var(--stagger) * var(--stagger-step));
}
/* Printing never scrolls, so nothing would ever be revealed. */
@media print {
	.js .reveal { opacity: 1 !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   CMS page content. Everything the customer types in Velifact lands in here.
   -------------------------------------------------------------------------- */
.prose { font: var(--type-body); color: var(--text-body); max-width: var(--container-narrow); }
.prose > *:first-child { margin-top: 0; }
.prose h1 { font: var(--weight-bold) var(--text-3xl)/1.1 var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin: var(--space-12) 0 var(--space-6); }
.prose h2 { font: var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-sans); margin: var(--space-11) 0 var(--space-5); }
.prose h3 { font: var(--type-h3); margin: var(--space-9) 0 var(--space-4); }
.prose h4, .prose h5, .prose h6 { font: var(--type-label); margin: var(--space-8) 0 var(--space-4); }
.prose p { margin: 0 0 var(--space-6); }
.prose a { color: var(--text-link); border-bottom: 1px solid rgba(0, 127, 58, .3); }
.prose a:hover { color: var(--text-link-hover); border-bottom-color: var(--text-link-hover); }
.prose ul, .prose ol { margin: 0 0 var(--space-6); padding-left: var(--space-7); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-3); }
.prose li::marker { color: var(--color-brand); }
.prose img { margin: var(--space-8) 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-media); }
.prose blockquote {
	margin: var(--space-8) 0;
	padding: var(--space-5) var(--space-7);
	border-left: 4px solid var(--color-brand);
	background: var(--surface-subtle);
	color: var(--text-strong);
}
.prose table { width: 100%; margin: var(--space-8) 0; font: var(--type-small); }
.prose th, .prose td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); text-align: left; }
.prose th { font: var(--type-label); color: var(--text-strong); background: var(--surface-inset); }
.prose iframe { max-width: 100%; border: 0; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.visually_hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mobile_only { display: none; }

@media only screen and (max-width: 900px) {
	.display { font-size: var(--text-3xl); }
	.desktop_only { display: none !important; }
	.mobile_only { display: block; }
}

@media only screen and (max-width: 640px) {
	.display { font-size: var(--text-2xl); }
	.lead { font: var(--type-body); }
	.prose h1 { font-size: var(--text-2xl); }
	.prose h2 { font-size: var(--text-lg); }
}