/*
 * Web&Wij: the design of webwij.nl.
 *
 * Taken from the clickable design in 00_webwij/02_ontwerp/00_website/ (all pages). What differs: projects and services
 * show real screenshots instead of drawn websites, the menu also works without JavaScript, and the sections of the
 * base theme (text, text with image, call to action) get the same look. The cookie banner of the Web&Wij plugin gets
 * the colors and fonts of the brand through its --wwcb-* variables.
 */

/* ---------- Fonts: from this theme, never from another server ---------- */
@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/unbounded-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/*
 * Until the fonts above have arrived the browser shows a font of the computer. These two are made as wide and as high
 * as the fonts of the brand, so the text breaks in the same places and nothing moves when they arrive. Measured in
 * Chrome on the texts of the website: Manrope is as wide as Arial, Unbounded 11% wider than Arial Black.
 */
@font-face {
	font-family: "Manrope fallback";
	font-weight: 200 549;
	src: local("Arial"), local("ArialMT");
	size-adjust: 100.42%;
	ascent-override: 106.55%;
	descent-override: 29.87%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Manrope fallback";
	font-weight: 550 800;
	src: local("Arial Bold"), local("Arial-BoldMT");
	size-adjust: 98.44%;
	ascent-override: 108.69%;
	descent-override: 30.47%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Unbounded fallback";
	font-weight: 200 900;
	src: local("Arial Black"), local("Arial-Black");
	size-adjust: 111.09%;
	ascent-override: 90.02%;
	descent-override: 22.5%;
	line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
	color-scheme: dark;
	--navy: #0e1f3d;
	--navy-2: #172c52;
	--navy-3: #0a1830;
	--paper: #f4f1ec;
	--paper-card: #fbf9f6;
	--sub: #aeb9cc;
	--dim: #7f8ca6;
	--ink-soft: #46546f;
	--line: rgba(244, 241, 236, .10);
	--line-2: rgba(244, 241, 236, .20);
	--line-dark: rgba(14, 31, 61, .14);
	--orange: #ff6b2c;
	--orange-hi: #ff8450;
	--display: "Unbounded", "Unbounded fallback", "Arial Black", system-ui, sans-serif;
	--text: "Manrope", "Manrope fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ok: #48c98b;
	--ok-ink: #1d7a4e;
	--err: #ff9494;
	--err-ink: #b8323b;
	--gutter: clamp(16px, 4vw, 48px);
	--max: 1320px;
	--head-top: 10px;

	/* The cookie banner of the Web&Wij plugin, in the colors of the brand. Accept and refuse look the same. */
	--wwcb-bg: #172c52;
	--wwcb-text: #f4f1ec;
	--wwcb-muted: #aeb9cc;
	--wwcb-border: rgba(244, 241, 236, .20);
	--wwcb-accent: #ff6b2c;
	--wwcb-accent-text: #0e1f3d;
	--wwcb-secondary-bg: #0e1f3d;
	--wwcb-secondary-text: #f4f1ec;
	--wwcb-focus: #ff6b2c;
	--wwcb-font: var(--text);
	--wwcb-heading-font: var(--display);
	--wwcb-radius: 18px;
	--wwcb-button-radius: 12px;
	--wwcb-shadow: 0 34px 70px -24px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(244, 241, 236, .10);
	--wwcb-max-width: 560px;
	--wwcb-z: 80;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--navy); scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	margin: 0; background: var(--navy); color: var(--paper);
	font-family: var(--text); font-size: 16px; line-height: 1.6;
	padding-inline: var(--gutter); overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin-inline: auto; }
.bleed { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.skip-link { border-radius: 10px; font-weight: 800; }
.site-content { min-height: 0; }

/* The admin bar of WordPress pushes the sticky bar down. */
.admin-bar { --head-top: 42px; }
@media (max-width: 782px) { .admin-bar { --head-top: 56px; } }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px 22px; border: 0; border-radius: 12px; cursor: pointer;
	font-family: var(--text); font-weight: 800; font-size: 15.5px; line-height: 1.2;
	text-decoration: none; white-space: nowrap;
	transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: var(--orange-hi); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }
.btn-navy { background: var(--navy); color: var(--paper); }
.btn-navy:hover { background: #1a3160; transform: translateY(-1px); }
.btn-sm { padding: 10px 16px; font-size: 14.5px; border-radius: 10px; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sub);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; color: var(--orange); text-decoration: none; }
.more svg { width: 18px; height: 18px; transition: transform .2s ease; }
.more:hover svg { transform: translateX(4px); }
.amp { color: var(--orange); }

/* ---------- Header and menu ---------- */
.site-head { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--head-top)); z-index: 50; margin-top: 10px; }
.nav {
	position: relative; max-width: var(--max); margin-inline: auto;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	padding: 8px 8px 8px 14px; border-radius: 16px;
	background: rgba(19, 40, 76, .84);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: inset 0 0 0 1px var(--line), 0 14px 34px -20px rgba(0, 0, 0, .8);
}
.wwnl-js .nav { flex-wrap: nowrap; }
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo img { display: block; width: auto; height: 34px; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu > li > a, .drop-btn {
	display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 0; border-radius: 10px;
	background: transparent; color: var(--sub); cursor: pointer; text-decoration: none;
	font: inherit; font-weight: 700; font-size: 15px;
}
.menu > li > a:hover, .drop-btn:hover, .has-drop.open .drop-btn { color: var(--paper); background: rgba(244, 241, 236, .07); }
.menu > li > a[aria-current="page"], .drop-btn.is-current {
	color: var(--paper);
	text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.drop-btn svg { width: 14px; height: 14px; transition: transform .2s ease; }
.has-drop { position: static; }
.has-drop.open .drop-btn svg { transform: rotate(180deg); }
.drop {
	position: absolute; top: calc(100% + 10px); left: 50%; z-index: 2;
	width: min(820px, calc(100vw - 2 * var(--gutter)));
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px;
	padding: 8px; border-radius: 18px; background: var(--navy-2);
	box-shadow: inset 0 0 0 1px var(--line), 0 34px 70px -24px rgba(0, 0, 0, .9);
	opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.drop-single { width: min(520px, calc(100vw - 2 * var(--gutter))); grid-template-columns: minmax(0, 1fr); }
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.has-drop.open .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.drop-main { display: grid; align-content: start; }
.drop-list { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; }
.drop-list a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center;
	padding: 12px 14px; border-radius: 12px; text-decoration: none;
}
.drop-list a:hover, .drop-list a:focus-visible { background: rgba(244, 241, 236, .06); }
.dl-t { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.03em; color: var(--paper); }
.dl-d { grid-column: 1; font-size: 14px; line-height: 1.45; color: var(--sub); }
.dl-go {
	grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; color: var(--orange);
	opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease;
}
.dl-go svg { width: 18px; height: 18px; }
.drop-list a:hover .dl-go, .drop-list a:focus-visible .dl-go { opacity: 1; transform: none; }
.drop-all { margin: 6px 14px 10px; font-size: 14.5px; }
.drop-side { display: grid; gap: 8px; grid-template-rows: 1fr auto; }
.drop-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 14px; background: var(--orange); color: var(--navy); }
.drop-card p { margin: 0; font-weight: 600; font-size: 15px; }
.drop-card .drop-card-t { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: -0.04em; }
.drop-card .btn { margin-top: auto; align-self: flex-start; }
.drop-bureau {
	display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; text-decoration: none;
	box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 800; color: var(--paper);
}
.drop-bureau span { color: var(--sub); font-weight: 600; }
.drop-bureau:hover { box-shadow: inset 0 0 0 1px var(--paper); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.menu-btn {
	display: none; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-radius: 10px; cursor: pointer;
	font: inherit; font-weight: 700; font-size: 14.5px; color: var(--paper); background: rgba(244, 241, 236, .07);
}
.menu-btn svg { width: 18px; height: 18px; }
.cta-short { display: none; }
/* The language switch with flags: right in the bar, on a phone at the bottom of the menu. */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); }
.lang-opt { display: grid; place-items: center; padding: 7px; border-radius: 7px; line-height: 0; transition: background-color .2s ease; }
.lang-opt img { display: block; width: 22px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(244, 241, 236, .28); }
.lang-opt[aria-current="true"] { background: rgba(244, 241, 236, .12); }
a.lang-opt img { opacity: .45; filter: saturate(.5); transition: opacity .2s ease, filter .2s ease; }
a.lang-opt:hover img, a.lang-opt:focus-visible img { opacity: 1; filter: none; }
.nav-right .lang { margin-left: 4px; }
.menu > li.lang-li { display: none; }
@media (max-width: 900px) {
	.nav-right .lang { display: none; }
	.menu > li.lang-li { display: block; margin: 10px 8px 6px; }
}
@media (max-width: 1080px) and (min-width: 901px) {
	.menu > li > a, .drop-btn { padding-inline: 9px; font-size: 14.5px; }
	.site-head .logo img { height: 30px; }
}
@media (max-width: 900px) {
	/* Without JavaScript the menu is a row under the logo. With JavaScript it folds away behind the menu button. */
	.menu { order: 3; flex-basis: 100%; }
	.drop {
		position: static; width: auto; display: none; grid-template-columns: 1fr;
		padding: 0 0 8px; background: transparent; box-shadow: none;
		opacity: 1; visibility: visible; transform: none; transition: none;
	}
	.has-drop.open .drop, .has-drop:focus-within .drop { display: grid; transform: none; }
	.drop::before { display: none; }
	.wwnl-js .menu {
		display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
		flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 8px; border-radius: 16px;
		background: var(--navy-2); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -20px rgba(0, 0, 0, .85);
		max-height: calc(100vh - 110px); overflow: auto;
	}
	.wwnl-js .nav.open .menu { display: flex; }
	.wwnl-js .menu > li > a, .wwnl-js .drop-btn { width: 100%; justify-content: space-between; padding: 14px; font-size: 17px; color: var(--paper); }
	.wwnl-js .menu-btn { display: inline-flex; }
}
@media (max-width: 480px) {
	.cta-long { display: none; }
	.cta-short { display: inline; }
	.logo img { height: 28px; }
}
@media (max-width: 400px) {
	.nav { gap: 10px; }
	.site-head .logo img { height: 26px; }
}

/* ---------- Opening block ---------- */
.hero { padding-block: clamp(44px, 6vw, 96px) clamp(56px, 7vw, 100px); }
.h1 {
	margin: clamp(22px, 3vw, 40px) 0 0;
	font-family: var(--display); font-weight: 700;
	font-size: clamp(42px, 12vw, 172px); line-height: .92; letter-spacing: -0.055em;
}
.h1 .ln { display: block; animation: up .9s cubic-bezier(.2, .7, .1, 1) both; }
.h1 .ln-2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 .13em; animation-delay: .12s; }
.h-mark { display: block; flex: none; width: .84em; height: .84em; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.h1:hover .h-mark { transform: rotate(-9deg) scale(1.05); }
@keyframes up { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
.hero-bottom {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end;
	margin-top: clamp(36px, 5vw, 64px);
}
@media (max-width: 800px) { .hero-bottom { grid-template-columns: 1fr; } }
.lead { margin: 0; max-width: 40ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--sub); }
.lead strong { color: var(--paper); font-weight: 700; }
.hero-act { display: grid; gap: 14px; justify-items: end; }
@media (max-width: 800px) { .hero-act { justify-items: start; } }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 0; font-size: 14.5px; color: var(--dim); }

/* ---------- Band ---------- */
.band { overflow: hidden; background: var(--paper); color: var(--navy); padding-block: clamp(14px, 1.6vw, 22px); }
.band-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.band-track span, .band-track i {
	margin-right: .55em; white-space: nowrap; font-style: normal;
	font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.04em;
}
.band-track i { color: var(--orange); font-weight: 800; }
.band:hover .band-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section heads ---------- */
.section { padding-block: clamp(80px, 10vw, 140px) 0; }
.sec-head {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 20px 56px; align-items: end;
	margin-bottom: clamp(32px, 4vw, 56px);
}
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }
.h2 {
	margin: 16px 0 0; font-family: var(--display); font-weight: 700;
	font-size: clamp(34px, 5.6vw, 84px); line-height: .98; letter-spacing: -0.05em; text-wrap: balance;
}
.sec-intro { margin: 0; max-width: 44ch; font-size: 17.5px; color: var(--sub); }

/* ---------- Services ---------- */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.svc-list > li { border-bottom: 1px solid var(--line-2); }
.svc {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 14px clamp(24px, 4vw, 64px); align-items: center;
	padding: clamp(26px, 3.2vw, 44px) clamp(8px, 1.6vw, 24px);
	color: var(--paper); text-decoration: none;
}
.svc::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: var(--navy-2);
	transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
a.svc:hover::before, a.svc:focus-visible::before { transform: scaleY(1); }
.svc-q { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); }
.svc-title {
	margin: 0; font-family: var(--display); font-weight: 600;
	font-size: clamp(28px, 4vw, 60px); line-height: 1; letter-spacing: -0.05em; text-wrap: balance;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
a.svc:hover .svc-title { transform: translateX(10px); }
.svc-body p { margin: 0; max-width: 44ch; font-size: 16.5px; color: var(--sub); }
.svc-go {
	display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
	color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2);
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.svc-go svg { width: 22px; height: 22px; transition: transform .25s ease; }
.svc:hover .svc-go { background: var(--orange); color: var(--navy); box-shadow: none; }
.svc:hover .svc-go svg { transform: rotate(-45deg); }
@media (max-width: 820px) {
	.svc { grid-template-columns: minmax(0, 1fr) auto; }
	.svc-head { grid-column: 1; grid-row: 1; }
	.svc-go { grid-column: 2; grid-row: 1; width: 46px; height: 46px; }
	.svc-body { grid-column: 1 / -1; grid-row: 2; }
}
.also { display: flex; flex-wrap: wrap; gap: 14px 48px; margin-top: 30px; }
.also p { display: flex; gap: 12px; align-items: baseline; margin: 0; max-width: 50ch; font-size: 15.5px; color: var(--sub); }
.also p::before { content: "&"; flex: none; font-family: var(--display); font-weight: 800; color: var(--orange); }
.also strong { color: var(--paper); }
.also a { color: inherit; text-decoration: none; }
.also a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.svc-more { margin: 28px 0 0; }

.svc-preview {
	position: fixed; left: 0; top: 0; z-index: 35; width: 360px;
	pointer-events: none; opacity: 0; transition: opacity .25s ease; will-change: transform;
}
.svc-preview.show { opacity: 1; }
.pv { display: none; }
.pv.on { display: block; }
.pv-frame { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(244, 241, 236, .1); }
.pv .viewport { aspect-ratio: 16 / 11; }
.svc-preview.show .pv.on .shot { animation: pvscroll 7s ease-in-out infinite alternate; }
@keyframes pvscroll { 0%, 12% { object-position: 50% 0; } 88%, 100% { object-position: 50% 100%; } }
.pv-cap { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--sub); }
@media (hover: none), (max-width: 900px) { .svc-preview { display: none; } }

/* ---------- Screenshot in a browser window ---------- */
.bar { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 8px 11px; background: #e9edf3; border-bottom: 1px solid #d5dbe5; }
.dots { display: flex; gap: 5px; flex: none; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #c3cbd8; }
.url { flex: 1; min-width: 0; padding: 3px 10px; border-radius: 6px; background: #fff; color: #51607a; font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewport { position: relative; overflow: hidden; background: #fff; }
.shot {
	position: absolute; inset: 0; display: block; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 0;
	transition: object-position 3.2s cubic-bezier(.45, .05, .2, 1);
}

/* ---------- Recent work ---------- */
.pf { position: relative; }
.pf-sticky {
	position: sticky; top: 0; height: 100vh; overflow: hidden;
	margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
	display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 32px);
	padding-top: 92px; padding-bottom: 28px;
}
.pf-head { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.pf .h2 { margin-top: 12px; font-size: clamp(34px, 4.6vw, 68px); }
.pf-ctrl { display: flex; align-items: center; gap: 10px; }
.pf-count { margin-right: 8px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--dim); font-variant-numeric: tabular-nums; }
.pf-count b { color: var(--paper); font-weight: 700; }
.arrow-btn {
	display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
	background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2);
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.arrow-btn svg { width: 20px; height: 20px; }
.arrow-btn:hover:not(:disabled) { background: var(--orange); color: var(--navy); box-shadow: none; }
.arrow-btn:disabled { opacity: .35; cursor: default; }
.pf-track {
	position: relative; display: flex; gap: clamp(16px, 2vw, 28px);
	margin-inline: calc(-1 * var(--gutter));
	padding-inline: calc(var(--gutter) + max(0px, (100% - var(--max)) / 2));
	will-change: transform;
}
.pf-card {
	flex: none; display: flex; flex-direction: column; gap: 16px; scroll-snap-align: start;
	width: clamp(280px, min(42vw, (100vh - 460px) * 1.45), 640px);
}
.frame {
	position: relative; display: block; overflow: hidden; border-radius: 16px; text-decoration: none;
	background: var(--navy-2); box-shadow: 0 0 0 1px var(--line);
	transition: transform .35s ease, box-shadow .35s ease;
}
.pf-card:hover .frame { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line-2), 0 34px 50px -26px rgba(0, 0, 0, .8); }
.frame .viewport { aspect-ratio: 16 / 11; }
.pf-card:hover .shot, .frame:focus-visible .shot { object-position: 50% 100%; }
.card-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-meta h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -0.03em; }
.card-meta p { margin: 4px 0 0; font-size: 14.5px; color: var(--sub); }
.labels { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; }
.labels li { padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.end-box {
	display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
	aspect-ratio: 16 / 11.9; padding: clamp(22px, 2.4vw, 34px); border-radius: 16px;
	background: var(--paper); color: var(--navy); text-decoration: none;
}
.end-box h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.02; letter-spacing: -0.05em; }
.end-box p { margin: 12px 0 0; font-weight: 600; color: var(--ink-soft); }
.end-go {
	align-self: flex-end; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
	background: var(--navy); color: var(--paper); transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.end-go svg { width: 26px; height: 26px; }
.end-box:hover .end-go { background: var(--orange); color: var(--navy); transform: rotate(-45deg); }
.pf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pf-bar { flex: 1 1 240px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--line-2); }
.pf-bar span { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(.04); }
.pf-hint { margin: 0; font-size: 13px; color: var(--dim); }
.pf.is-native .pf-sticky { position: static; height: auto; overflow: visible; justify-content: flex-start; padding-top: clamp(80px, 10vw, 140px); padding-bottom: 0; }
.pf.is-native .pf-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; padding-bottom: 6px; }
.pf.is-native .pf-track::-webkit-scrollbar { display: none; }
.pf.is-native .pf-card { width: clamp(270px, 78vw, 480px); }
@media (max-width: 560px) { .labels { justify-content: flex-start; } .card-meta { flex-direction: column; gap: 10px; } }

/* ---------- Clear agreements (light) ---------- */
.deal { background: var(--paper); color: var(--navy); padding-block: clamp(80px, 10vw, 140px); margin-top: clamp(80px, 10vw, 140px); }
.deal .eyebrow, .deal .sec-intro { color: var(--ink-soft); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }
.stat { display: flex; flex-direction: column; gap: 6px; padding: clamp(22px, 2.4vw, 32px); border-radius: 20px; background: var(--paper-card); box-shadow: inset 0 0 0 1px var(--line-dark); }
.stat-n { font-family: var(--display); font-weight: 700; font-size: clamp(64px, 7.4vw, 116px); line-height: .9; letter-spacing: -0.06em; }
.stat .unit { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.03em; }
.stat p { margin: 10px 0 0; font-size: 15px; color: var(--ink-soft); }
.stat-dark { background: var(--navy); color: var(--paper); box-shadow: none; }
.stat-dark .stat-n { color: var(--orange); }
.stat-dark p { color: var(--sub); }
.steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--line-dark); }
.steps li { position: relative; display: grid; gap: 10px; align-content: start; }
.step-n {
	position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--navy); color: var(--paper); box-shadow: 0 0 0 6px var(--paper);
	font-family: var(--display); font-weight: 700; font-size: 16px;
}
.steps li:first-child .step-n { background: var(--orange); color: var(--navy); }
.steps h3 { margin: 8px 0 0; font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.035em; }
.steps p { margin: 0; max-width: 30ch; font-size: 15.5px; color: var(--ink-soft); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } .steps::before { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.deal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line-dark); }
.deal-foot p { margin: 0; font-weight: 600; color: var(--ink-soft); }
.deal .more { color: var(--navy); }
.deal .more svg { color: var(--orange); }

/* ---------- About me ---------- */
.about { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: center; }
.about-solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }
.photo-wrap { position: relative; width: 100%; max-width: 480px; }
.photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; background: var(--navy-2); }
.photo-tile {
	position: absolute; right: -22px; bottom: -22px; display: block;
	width: clamp(96px, 11vw, 150px); height: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .45));
}
.sticker {
	position: absolute; left: -14px; top: 28px; transform: rotate(-5deg); padding: 10px 14px; border-radius: 12px;
	background: var(--paper); color: var(--navy); font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
	box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .7);
}
@media (max-width: 560px) { .photo-tile { right: -8px; bottom: -14px; } .sticker { left: -6px; } }
.about-text p { margin: 20px 0 0; max-width: 52ch; font-size: 17.5px; color: var(--sub); }
.loves { list-style: none; display: grid; gap: 12px; margin: 30px 0 0; padding: 0; }
.loves li { display: flex; align-items: baseline; gap: 14px; font-size: 17px; font-weight: 600; }
.loves li::before { content: "&"; flex: none; font-family: var(--display); font-weight: 800; color: var(--orange); }
.about-text .sig { margin-top: 34px; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -0.035em; color: var(--paper); }

/* ---------- Contact ---------- */
.contact {
	position: relative; overflow: hidden; isolation: isolate;
	margin-top: clamp(80px, 10vw, 140px); padding-block: clamp(72px, 9vw, 128px);
	background: var(--orange); color: var(--navy);
}
.contact-amp {
	position: absolute; z-index: -1; right: -4vw; bottom: -12%; width: clamp(280px, 38vw, 600px); height: auto;
	opacity: .08; pointer-events: none; user-select: none;
}
.contact .eyebrow { color: var(--navy); }
.contact .eyebrow::before { background: var(--navy); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-h { margin: 18px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 7.4vw, 116px); line-height: .92; letter-spacing: -0.055em; }
.contact-lead { margin: 24px 0 0; max-width: 32ch; font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; }
.contact-side { display: grid; gap: 28px; justify-items: start; }
.direct { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.direct li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
/* .85 instead of the .72 of the design: enough contrast on the orange (4.8, the norm is 4.5). */
.direct .lbl { width: 92px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.direct a { font-weight: 800; font-size: clamp(19px, 1.8vw, 24px); color: var(--navy); text-decoration: none; }
.direct a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* With the short form, as in the design: WhatsApp and e-mail under the text, the form on the right. */
.contact-has-form .contact-grid { align-items: start; }
.contact-has-form .direct { margin-top: 36px; }
.contact-has-form .direct a { font-size: 19px; }

/*
 * The lower blocks of the homepage and the footer are only laid out when they come near the screen. That makes the
 * first view about a third lighter on a phone (measured with Lighthouse). The size is an estimate until the block has
 * been shown once. Not for Services and Recent work: their screenshot follows the mouse or the block stays pinned. Not
 * for About me either: the sticker and the icon stick out of the photo and would be cut off at the edge of the block.
 */
.home main > .deal, .home main > .deal ~ .section:not(.about-section), .home main > .contact, .foot { content-visibility: auto; }
.home main > .deal { contain-intrinsic-size: auto 1400px; }
.home main > .deal ~ .section:not(.about-section) { contain-intrinsic-size: auto 950px; }
.home main > .contact { contain-intrinsic-size: auto 900px; }
.foot { contain-intrinsic-size: auto 850px; }

/* =====================================================================
   The other pages: services, way of working, portfolio, contact and more
   ===================================================================== */
.screen-reader-text:focus { position: static !important; width: auto; height: auto; clip: auto; }
.btn-line { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(14, 31, 61, .32); }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn-line svg { width: 20px; height: 20px; }

/* ---------- Heading of the other pages ---------- */
.h1-sub { font-size: clamp(38px, 9vw, 132px); }
.h1-sub .ln-2 { flex-wrap: wrap; row-gap: 0; }
.h1-contact { font-size: clamp(40px, 5.8vw, 88px); text-wrap: balance; }

/* ---------- Orange block at the bottom ---------- */
.deal + .contact { margin-top: 0; }
.cta-end .contact-h { max-width: 16ch; margin-top: 0; font-size: clamp(38px, 6.2vw, 96px); text-wrap: balance; }
.cta-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Page Diensten ---------- */
.svc-page { padding-top: 0; }

/* ---------- Heading on the left, rows on the right ---------- */
.split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px clamp(40px, 7vw, 120px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split .h2 { margin-top: 0; }
.split .sec-intro { margin-top: 20px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); counter-reset: r; }
.rows li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 14px; padding: clamp(20px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line-2); counter-increment: r; }
.rows li::before { content: "&"; grid-row: 1 / span 2; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.3; color: var(--orange); }
.rows-num li::before { content: counter(r); }
.rows h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; letter-spacing: -0.035em; }
.rows p { margin: 0; max-width: 52ch; font-size: 16.5px; color: var(--sub); }
.note { margin: 28px 0 0; max-width: 60ch; font-size: 16px; color: var(--sub); }

/* ---------- The large picture of a service ---------- */
.show { margin: 0; }
.show .bar .url:empty, .dev .bar .url:empty, .mv-win .bar .url:empty { visibility: hidden; }

/* Sketch and website to compare */
.cmp {
	--split: 50%;
	position: relative; overflow: hidden; border-radius: 20px; background: #fff;
	box-shadow: 0 0 0 1px var(--line), 0 50px 90px -50px rgba(0, 0, 0, .9);
}
.cmp-view { aspect-ratio: 16 / 9; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp-single .cmp-view { cursor: default; }
.cmp-img { transition: none; }
.cmp-sketch { object-position: 50% 50%; }
.cmp-top { clip-path: inset(0 0 0 var(--split)); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 2; width: 2px; margin-left: -1px; background: var(--orange); pointer-events: none; }
.cmp-knob {
	position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px;
	border-radius: 50%; background: var(--orange); color: var(--navy); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6);
}
.cmp-knob svg { width: 24px; height: 24px; }
.cmp-range:focus-visible + .cmp-view .cmp-knob { outline: 2px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 7px var(--paper); }
.cmp-tag {
	position: absolute; bottom: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px; pointer-events: none;
	background: rgba(10, 24, 48, .86); color: var(--paper); font-size: 13px; font-weight: 800;
}
.cmp-tag-l { left: 16px; }
.cmp-tag-r { right: 16px; }

/* One website on three screens */
.devices { position: relative; aspect-ratio: 16 / 9.4; }
.dev { position: absolute; overflow: hidden; background: #fff; }
.dev-desk { top: 0; left: 9%; width: 76%; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 50px 90px -50px rgba(0, 0, 0, .9); }
.dev-desk .viewport { aspect-ratio: 16 / 10; }
.dev-tab, .dev-phone { border: 8px solid #07112a; box-shadow: 0 0 0 1px rgba(244, 241, 236, .16), 0 40px 70px -30px rgba(0, 0, 0, .9); }
.dev-tab { left: 0; bottom: 0; width: 26%; border-radius: 22px; }
.dev-tab .viewport { aspect-ratio: 3 / 4; }
.dev-phone { right: 4%; bottom: 0; width: 15%; border-width: 6px; border-radius: 24px; }
.dev-phone .viewport { aspect-ratio: 9 / 19; }
.devices-duo .dev-desk { left: 0; width: 82%; }
.devices-duo .dev-phone { right: 2%; width: 17%; }
.devices.go .shot { animation: devscroll 11s ease-in-out infinite alternate; }
@keyframes devscroll { 0%, 12% { object-position: 50% 0; } 88%, 100% { object-position: 50% 100%; } }

/* A form that talks to other systems */
.lnk {
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .9fr); align-items: center;
	padding: clamp(24px, 5vw, 72px); border-radius: 20px;
	background: radial-gradient(circle, rgba(244, 241, 236, .08) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--navy-3);
	box-shadow: inset 0 0 0 1px var(--line);
}
.lnk-site { justify-self: end; width: 100%; max-width: 420px; overflow: hidden; border-radius: 14px; background: #f2faf9; color: #0f3b45; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.lnk-form { display: grid; gap: 10px; padding: 20px; }
.lnk-form p { margin: 0; }
.lnk-form-t { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.lnk-in { display: grid; padding: 9px 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #cfe7e3; font-size: 15px; font-weight: 700; line-height: 1.35; }
.lnk-in span { font-size: 12px; font-weight: 700; color: #5b7f86; }
.lnk-btn { padding: 11px 14px; border-radius: 9px; background: #139a8e; color: #fff; font-size: 14px; font-weight: 800; text-align: center; }
.lnk-hub { display: flex; align-items: center; }
.lnk-wire { position: relative; width: clamp(24px, 4vw, 64px); height: 2px; overflow: hidden; background: var(--line-2); }
.lnk-wire i { position: absolute; top: -2px; left: -10px; width: 10px; height: 6px; border-radius: 3px; background: var(--orange); animation: wire-x 1.8s linear infinite; }
.lnk-mark + .lnk-wire i { animation-delay: .9s; }
@keyframes wire-x { to { left: 100%; } }
@keyframes wire-y { to { top: 100%; } }
.lnk-mark { display: block; flex: none; width: clamp(56px, 6vw, 84px); height: auto; }
.lnk-sys { position: relative; list-style: none; display: grid; gap: 12px; max-width: 360px; margin: 0; padding: 0 0 0 22px; }
.lnk-sys::before { content: ""; position: absolute; left: 0; top: calc((100% - 24px) / 6); bottom: calc((100% - 24px) / 6); width: 2px; background: var(--line-2); }
.lnk-sys li { position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 42px; border-radius: 14px; background: var(--navy-2); }
.lnk-sys li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 2px; background: var(--line-2); }
.lnk-sys li::after {
	content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
	background: var(--ok); box-shadow: 0 0 0 4px rgba(72, 201, 139, .16); animation: ping 3s ease-in-out infinite;
}
.lnk-sys li:nth-child(2)::after { animation-delay: .5s; }
.lnk-sys li:nth-child(3)::after { animation-delay: 1s; }
@keyframes ping { 0%, 60%, 100% { box-shadow: 0 0 0 4px rgba(72, 201, 139, .16); } 20% { box-shadow: 0 0 0 9px rgba(72, 201, 139, .05); } }
.lnk-sys b { font-size: 16px; font-weight: 800; }
.lnk-sys span { font-size: 14px; color: var(--sub); }
@media (max-width: 700px) {
	.lnk { grid-template-columns: 1fr; justify-items: center; }
	.lnk-site { justify-self: stretch; max-width: none; }
	.lnk-hub { flex-direction: column; }
	.lnk-wire { width: 2px; height: 26px; }
	.lnk-wire i { top: -10px; left: -2px; width: 6px; height: 10px; animation-name: wire-y; }
	.lnk-sys { width: 100%; max-width: none; padding-left: 0; }
	.lnk-sys::before, .lnk-sys li::before { display: none; }
}

/* A website that moves to a new place */
.mv {
	padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 72px) clamp(56px, 7vw, 96px); border-radius: 20px;
	background: radial-gradient(circle, rgba(244, 241, 236, .08) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--navy-3);
	box-shadow: inset 0 0 0 1px var(--line);
}
.mv-row { position: relative; display: grid; grid-template-columns: 30% 40% 30%; align-items: center; }
.mv-box { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; }
.mv-old { background: repeating-linear-gradient(135deg, rgba(244, 241, 236, .035) 0 10px, transparent 10px 20px); box-shadow: inset 0 0 0 2px var(--line-2); }
.mv-new { background: var(--navy-2); box-shadow: inset 0 0 0 2px var(--orange); }
.mv-k { position: absolute; top: calc(100% + 14px); left: 0; right: 0; text-align: center; font-size: clamp(13px, 1.3vw, 16px); font-weight: 800; color: var(--sub); }
.mv-new .mv-k { color: var(--paper); }
.mv-logo { position: absolute; right: 10px; bottom: 10px; width: clamp(22px, 2.6vw, 36px); height: auto; }
.mv-path { position: relative; height: 2px; margin: 0 8%; background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 18px); }
.mv-check {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 999px; background: var(--navy-2); box-shadow: inset 0 0 0 1px var(--line-2);
	font-size: clamp(12px, 1.2vw, 15px); font-weight: 800; white-space: nowrap;
}
.mv-check svg { width: 15px; height: 15px; color: var(--ok); }
.mv-site { position: absolute; top: 0; left: 0; width: 30%; transform: translateX(233.333%); pointer-events: none; }
.mv-win { width: 70%; margin: 8% auto 0; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .85); }
.mv-win .bar { gap: 6px; min-height: 0; padding: 5px 8px; }
.mv-win .dots i { width: 6px; height: 6px; }
.mv-win .url { padding: 2px 8px; font-size: 10px; }
.mv-win .viewport { aspect-ratio: 4 / 3; }
@media (max-width: 640px) {
	.mv-check { padding: 7px; }
	.mv-check-t { display: none; }
	.mv-win { width: 76%; margin-top: 12%; }
	.mv-win .bar { display: none; }
}
.mv.arm .mv-site { transform: none; }
.mv.arm .mv-check svg { opacity: 0; }
.mv.arm.go .mv-site { transform: translateX(233.333%); transition: transform 1.9s cubic-bezier(.65, 0, .25, 1) .3s; }
.mv.arm.go .mv-check svg { opacity: 1; transition: opacity .3s ease 1.2s; }

/* ---------- Plans of hosting ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.plan { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 40px); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line-2); }
.plan-plus { background: var(--paper); color: var(--navy); box-shadow: none; }
.plan-t { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.045em; }
.plan-d { margin: 0; font-size: 17px; color: var(--sub); }
.plan-plus .plan-d { color: var(--ink-soft); }
.plan-f { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--sub); }
.plan-plus .plan-f { border-color: var(--line-dark); color: var(--ink-soft); }
.amp-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; font-size: 16.5px; }
.amp-list li { display: flex; align-items: baseline; gap: 12px; }
.amp-list li::before { content: "&"; flex: none; font-family: var(--display); font-weight: 800; font-size: .85em; color: var(--orange); }

/* ---------- Light block: figures, signs and two blocks ---------- */
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-2, .stats-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .stats-3, .stats-2 { grid-template-columns: 1fr; } }
.sym {
	display: grid; place-items: center; width: clamp(60px, 5.6vw, 80px); height: clamp(60px, 5.6vw, 80px); margin-bottom: 18px; border-radius: 50%;
	font-family: var(--display); font-weight: 800; font-size: clamp(28px, 2.6vw, 38px); line-height: 1;
}
.sym svg { width: 44%; height: 44%; }
.sym-ok { background: var(--ok-ink); color: #fff; }
.sym-warn { background: var(--orange); color: var(--navy); }
.sym-ask { background: var(--paper); color: var(--navy); }
.stat-t { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.04em; }
.steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }
.pair > div { padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: var(--paper-card); box-shadow: inset 0 0 0 1px var(--line-dark); }
.pair h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.045em; }
.pair p { margin: 14px 0 0; max-width: 44ch; font-size: 17px; color: var(--ink-soft); }
.pair .pair-dark { background: var(--navy); color: var(--paper); box-shadow: none; }
.pair .pair-dark p { color: var(--sub); }

/* ---------- Real projects as examples ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(16px, 2.2vw, 32px); }
.work-page .work-grid { margin-top: clamp(28px, 3.4vw, 44px); }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }
.work { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.work.in { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.work .frame .viewport { aspect-ratio: 16 / 10; }
.work:hover .frame { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line-2), 0 34px 50px -26px rgba(0, 0, 0, .8); }
.work:hover .shot { object-position: 50% 100%; }
.work-more { margin: clamp(36px, 4.4vw, 56px) 0 0; }
.work-what { margin: 0; font-size: 15.5px; color: var(--sub); }
.work-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--orange); text-decoration: none; }
.work-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.work-link:hover svg { transform: translate(2px, -2px); }
.work-note { display: flex; align-items: baseline; gap: 12px; max-width: 66ch; margin: clamp(48px, 6vw, 72px) 0 0; padding-top: 24px; border-top: 1px solid var(--line-2); color: var(--sub); }
.work-note::before { content: "&"; flex: none; font-family: var(--display); font-weight: 800; color: var(--orange); }
.work-note strong { color: var(--paper); }

/* ---------- Portfolio: filter ---------- */
/* Only with JavaScript: the class wwnl-js is set in the head, before anything is shown, so nothing moves later. */
.filters, .filter-note { display: none; }
.wwnl-js .filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wwnl-js .filter-note { display: block; }
.chip {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2);
	font: inherit; font-weight: 700; font-size: 15px; line-height: 1.2;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.chip span { font-size: 12px; font-weight: 800; color: var(--dim); font-variant-numeric: tabular-nums; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }
.chip[aria-pressed="true"] { background: var(--orange); color: var(--navy); box-shadow: none; }
.chip[aria-pressed="true"] span { color: var(--navy); opacity: .65; }
.filter-note { min-height: 1.6em; margin: 16px 0 0; font-size: 16px; color: var(--sub); }
.filter-note p { margin: 0; }
.filter-note a { margin-left: 2px; color: var(--orange); font-weight: 800; text-decoration: none; white-space: nowrap; }
.filter-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Way of working: the steps ---------- */
.srows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.srows li {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: minmax(56px, .28fr) minmax(0, .9fr) minmax(0, 1.2fr); gap: 10px clamp(24px, 4vw, 64px); align-items: baseline;
	padding: clamp(26px, 3.2vw, 44px) clamp(8px, 1.6vw, 24px); border-bottom: 1px solid var(--line-2);
}
.srows li::before {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: var(--navy-2);
	transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.srows li:hover::before { transform: scaleY(1); }
.sr-n { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.8vw, 40px); line-height: 1; letter-spacing: -0.05em; color: var(--dim); font-variant-numeric: tabular-nums; transition: color .3s ease; }
.srows li:hover .sr-n { color: var(--orange); }
.srows h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.05em; }
.srows p { margin: 0; max-width: 50ch; font-size: 16.5px; color: var(--sub); }
@media (max-width: 820px) {
	.srows li { grid-template-columns: auto minmax(0, 1fr); gap: 12px 18px; }
	.srows p { grid-column: 2; }
}

/* ---------- Way of working: how fast you hear from me (light) ---------- */
.resp { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.resp li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--line-dark); }
.resp-s { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.035em; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.pill-hot { background: var(--navy); color: var(--paper); }
.pill-hot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.pill-calm { background: rgba(14, 31, 61, .07); color: var(--navy); }
.resp-note { margin: 20px 0 0; max-width: 72ch; font-size: 15px; color: var(--ink-soft); }
.quote-row { margin-top: clamp(56px, 7vw, 104px); }
.quote-row.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 860px) { .quote-row.has-photo { grid-template-columns: 1fr; } }
.big-quote { margin: 0; max-width: 22ch; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.05em; text-wrap: balance; }
.quote-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }

/* ---------- Frequently asked questions ---------- */
.qa-more { margin: 32px 0 0; font-size: 17px; color: var(--sub); }
.qa-more a { color: var(--orange); font-weight: 700; }
.qa { border-top: 1px solid var(--line-2); }
.qa:last-child { border-bottom: 1px solid var(--line-2); }
.qa summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; cursor: pointer; list-style: none;
	font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.25; letter-spacing: -0.03em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--orange-hi); }
.qa-i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: transform .25s ease, background-color .2s ease, color .2s ease; }
.qa-i svg { width: 16px; height: 16px; }
.qa[open] .qa-i { transform: rotate(45deg); background: var(--orange); color: var(--navy); box-shadow: none; }
.qa-a { padding: 0 4px 26px; }
.qa-a p { margin: 0 0 12px; max-width: 62ch; font-size: 17px; color: var(--sub); }
.qa-a p:last-child { margin-bottom: 0; }
.qa-a .qa-link { font-size: 15.5px; }

/* ---------- Contact ---------- */
.cp { padding-block: clamp(44px, 6vw, 96px) 0; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 6vw, 104px); align-items: start; }
.cp-solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .cp-grid { grid-template-columns: 1fr; } }
.cp-intro .lead { margin-top: 28px; }
.direct-t { margin: 40px 0 0; font-family: var(--text); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.direct-dark { margin-top: 40px; }
.direct-t + .direct-dark { margin-top: 16px; }
.direct-dark .lbl { color: var(--dim); opacity: 1; }
.direct-dark a { color: var(--paper); }
.val-sm { font-weight: 600; color: var(--sub); }
.cp-photo { display: block; width: 100%; height: auto; margin-top: 44px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }
.cp-photo-side { margin-top: 0; aspect-ratio: 4 / 5; }
@media (max-width: 960px) { .cp-photo-side { aspect-ratio: 3 / 2; } }

/* The form on light paper. The Web&Wij plugin sets data-state and fills the messages. */
.form { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--navy); color: var(--paper); box-shadow: 0 34px 70px -34px rgba(14, 31, 61, .9); }
.form-paper { background: var(--paper); color: var(--navy); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85); }
.form-fields { display: grid; gap: 16px; }
.form .form-t { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.035em; }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-size: 13.5px; font-weight: 700; color: var(--sub); }
.form-paper .field label, .form-paper legend { color: var(--ink-soft); }
.field input, .field select, .field textarea {
	width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 12px;
	background: var(--navy-2); color: var(--paper); font: inherit; font-size: 16px;
}
/* The list to choose from opens dark too, so the choices stay readable. */
.field select { color-scheme: dark; }
.form-paper .field input, .form-paper .field textarea { background: #fff; color: var(--navy); border-color: rgba(14, 31, 61, .18); }
.form-paper .field input::placeholder { color: #737e92; }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.form-paper .field input:focus, .form-paper .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(255, 107, 44, .35); }
fieldset.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field legend { margin-bottom: 8px; padding: 0; }
/* start: a long message under one field does not push the other field down. */
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.opt { margin-left: 4px; font-weight: 600; color: #5f6a7e; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; }
.chip-opt span {
	display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 999px; cursor: pointer;
	box-shadow: inset 0 0 0 1.5px rgba(14, 31, 61, .2); font-weight: 700; font-size: 14.5px; line-height: 1.2;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip-opt:hover span { box-shadow: inset 0 0 0 1.5px var(--navy); }
.chip-opt input:checked + span { background: var(--navy); color: var(--paper); box-shadow: none; }
.chip-opt input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.field-err { font-size: 13px; font-weight: 700; color: var(--err-ink); }
.field-err:empty { display: none; }
.field:has([aria-invalid="true"]) :is(input, select, textarea) { border-color: var(--err-ink); }
.field:has([aria-invalid="true"]) .chip-opt span { box-shadow: inset 0 0 0 1.5px var(--err-ink); }
.form .btn { width: 100%; margin-top: 4px; }
.form[data-state="sending"] .btn { opacity: .6; pointer-events: none; }
.form-status { min-height: 1.2em; margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.form-status:empty { display: none; }
.form[data-state="error"] .form-status, .form-status.is-error { color: var(--err-ink); }
/* Without JavaScript the plugin shows its message at the top of the form. */
.form .webwij-form-notice { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; font-weight: 700; }
.form .webwij-form-notice p, .form .webwij-form-notice ul { margin: 0; }
.form .webwij-form-notice ul { margin-top: 6px; padding-left: 20px; font-weight: 600; }
.form .webwij-form-notice--error { background: rgba(184, 50, 59, .10); color: var(--err-ink); }
.form .webwij-form-notice--sent { background: rgba(29, 122, 78, .12); color: var(--ok-ink); }
/* The short form on the night blue: the messages in the light colors of the design. */
.form:not(.form-paper) .field-err { color: var(--err); }
.form:not(.form-paper) .field:has([aria-invalid="true"]) :is(input, select, textarea) { border-color: var(--err); }
.form:not(.form-paper) .form-status { color: var(--orange); }
.form:not(.form-paper)[data-state="error"] .form-status, .form:not(.form-paper) .form-status.is-error { color: var(--err); }
.form:not(.form-paper) .webwij-form-notice--error { background: rgba(255, 148, 148, .14); color: var(--err); }
.form:not(.form-paper) .webwij-form-notice--sent { background: rgba(29, 122, 78, .35); color: var(--paper); }

/* ---------- Thank-you page ---------- */
.thanks { display: grid; justify-items: start; gap: 18px; padding-block: clamp(56px, 8vw, 120px) 0; }
.thanks .h1 { margin: 8px 0 0; }
.thanks p { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 21px); color: var(--sub); }
.thanks .sig { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -0.035em; color: var(--paper); }
.thanks .hero-ctas { margin-top: 14px; }
.done-mark { display: block; width: 64px; height: 64px; }

/* ---------- Legal pages: calm and easy to read ---------- */
.legal { padding-block: clamp(44px, 6vw, 96px) 0; }
.legal-head { max-width: 72ch; }
.h1-legal { margin-top: 0; font-size: clamp(36px, 6vw, 80px); line-height: 1; text-wrap: balance; }
.legal-head .lead { margin-top: 28px; max-width: 60ch; }
.updated { margin: 16px 0 0; font-size: 14px; color: var(--dim); }
.legal-text { max-width: 72ch; margin-top: clamp(40px, 5vw, 64px); font-size: 17px; line-height: 1.7; color: var(--sub); }
.legal-text h2 { margin: 2em 0 .5em; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.035em; color: var(--paper); }
.legal-text h3 { margin: 1.6em 0 .4em; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; color: var(--paper); }
.legal-text p, .legal-text ul, .legal-text ol { margin: 0 0 1em; }
.legal-text li { margin-bottom: .4em; }
.legal-text strong { color: var(--paper); }
.legal-text a { color: var(--orange); }
.legal-text table { width: 100%; margin: 0 0 1.5em; border-collapse: collapse; font-size: 15px; }
/* On a phone a wide table scrolls sideways within the text, never the whole page. */
@media (max-width: 760px) { .legal-text table { display: block; overflow-x: auto; } }
.legal-text { overflow-wrap: break-word; }
.legal-text th, .legal-text td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.legal-text th { color: var(--paper); font-weight: 800; }
.legal-cookies { margin-top: 2em; overflow-x: auto; }

/* ---------- Footer: the button for the cookie settings looks like the links next to it ---------- */
.foot-legal button { padding: 0; border: 0; background: none; color: var(--dim); font: inherit; text-decoration: underline; cursor: pointer; }
.foot-legal button:hover { color: var(--paper); }

/* ---------- Sections of the base theme, in the same look ---------- */
.page-title, .entry__title { margin: clamp(40px, 6vw, 88px) 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(38px, 7vw, 96px); line-height: .96; letter-spacing: -0.05em; }
.page-title, .entry { width: auto; max-width: var(--max); }
.entry__content, .section__content { max-width: 68ch; font-size: 17.5px; color: var(--sub); }
.entry__content a, .section__content a { color: var(--orange); }
.entry__content h2, .entry__content h3, .section__content h2, .section__content h3 { color: var(--paper); font-family: var(--display); letter-spacing: -0.035em; }
.section--text .section__inner, .section--text-image .section__inner, .section--cta .section__inner { width: auto; max-width: var(--max); }
.section__heading { margin: 0 0 20px; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.05em; color: var(--paper); text-wrap: balance; }
.section__image { border-radius: 20px; }
.section--cta {
	margin-top: clamp(80px, 10vw, 140px); margin-inline: calc(-1 * var(--gutter)); padding: clamp(72px, 9vw, 128px) var(--gutter);
	background: var(--orange); color: var(--navy); text-align: left;
}
.section--cta .section__heading { color: var(--navy); font-size: clamp(40px, 6.4vw, 96px); }
.section--cta p { max-width: 40ch; font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; }

/* ---------- Footer ---------- */
.foot { overflow: hidden; padding-top: clamp(64px, 8vw, 104px); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand .logo img { height: 40px; }
.foot-brand p { margin: 16px 0 0; max-width: 34ch; color: var(--sub); }
.foot h2 { margin: 0 0 14px; font-family: var(--text); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.foot ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.foot ul a { color: var(--paper); font-weight: 600; text-decoration: none; }
.foot ul a:hover { color: var(--orange); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.foot-legal a { color: var(--dim); }
.foot-mark { display: block; width: 100%; height: auto; margin: clamp(36px, 5vw, 64px) 0 -3.4%; user-select: none; }

/* ---------- Landing pages ---------- */
.h1-lp { font-size: clamp(30px, 7.4vw, 108px); overflow-wrap: break-word; hyphens: manual; }
.h1-lp .ln-2 { display: block; text-align: right; }
.h1-lp-long { font-size: clamp(28px, 5.2vw, 76px); }
@media (max-width: 600px) {
	.h1-lp .ln, .h1-lp .ln-2 { display: inline; text-align: left; }
}
.nowrap { white-space: nowrap; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(32px, 4.4vw, 64px); }
@media (max-width: 900px) { .lp-grid { grid-template-columns: 1fr; } }
.lp-grid .lead { max-width: 34ch; }
.lp-form, .lp-direct { scroll-margin-top: 96px; }
.lp-form textarea { min-height: 96px; }
.lp-form-note { margin: 0; font-size: 14px; color: var(--ink-soft); }
.lp-form-note a { color: var(--navy); font-weight: 800; }
.lp-direct { padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--paper); color: var(--navy); }
/* Smaller headings where a long place name has to fit, such as Sint-Michielsgestel. */
.h2-md, .lp .about-text .h2 { font-size: clamp(28px, 3.4vw, 48px); overflow-wrap: break-word; }
.loves-facts li { font-weight: 500; color: var(--sub); }
.loves-facts b { margin-right: 6px; font-weight: 800; color: var(--paper); }
.updated { margin: 16px 0 0; font-size: 14px; color: var(--dim); }
.prose p { margin: 0 0 1.1em; max-width: 62ch; font-size: 17.5px; line-height: 1.65; color: var(--sub); }
.prose p:last-of-type { margin-bottom: 0; }
.tags { margin-top: 32px; }
.tags-t { margin: 0 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tags .labels { justify-content: flex-start; }
.rel-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 0; padding: 0; }
.rel {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; padding: 18px 22px;
	border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--paper); font-weight: 700;
	text-decoration: none; transition: box-shadow .2s ease;
}
.rel svg { flex: none; width: 18px; height: 18px; color: var(--orange); transition: transform .2s ease; }
.rel:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }
.rel:hover svg { transform: translateX(4px); }
.lp .site-content > .section ~ .section:not(.about-section), .lp .site-content > .deal, .lp .site-content > .contact { content-visibility: auto; contain-intrinsic-size: auto 760px; }

/* The bar at the bottom of a landing page on a phone: hidden while the form is in view. */
.lp-bar { display: none; }
@media (max-width: 760px) {
	.lp-bar {
		position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 46;
		display: flex; gap: 8px; padding: 8px; border-radius: 18px;
		background: rgba(19, 40, 76, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0, 0, 0, .8);
		transition: transform .3s ease, opacity .3s ease;
	}
	.lp-bar .btn-primary { flex: 1; }
	.lp-bar.is-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
	.lp-wa { padding-inline: 16px; }
	.lp-wa svg { width: 22px; height: 22px; color: #25d366; }
	body.lp .wa { display: none; }
	body.lp .foot { padding-bottom: 88px; }
}

/* ---------- WhatsApp ---------- */
.wa {
	position: fixed; z-index: 45; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px 12px 14px; border-radius: 999px;
	background: var(--paper); color: var(--navy); text-decoration: none; font-weight: 800; font-size: 14.5px;
	box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .7); transition: transform .2s ease;
}
.wa:hover { transform: translateY(-2px); }
.wa svg { width: 22px; height: 22px; color: #25d366; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}