/* ==========================================================================
   MorsinQ — morsinq.nl
   Palet: warme heritage-tinten (perzik, caramel, kastanje, grijsblauw),
   geïnspireerd op klassieke Nederlandse gevelkleuren.
   Typografie: Hanken Grotesk (sans) · Instrument Serif italic (accenten)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — zelf gehost (was Google Fonts). Bespaart twee DNS/TLS-handshakes op
   het kritieke pad, houdt bezoekers-IP's bij Google vandaan en maakt de CSP
   strakker. Hanken Grotesk is variabel: één bestand dekt 400 t/m 800.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("/assets/fonts/hanken-grotesk-latin.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: "Hanken Grotesk";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("/assets/fonts/hanken-grotesk-latin-ext.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: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/instrument-serif-italic-latin.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: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/instrument-serif-italic-latin-ext.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: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/instrument-serif-latin.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: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/assets/fonts/instrument-serif-latin-ext.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;
}

:root {
	--bg: #f4ecdf;          /* cream — basis, iets dieper zodat kaarten kunnen knallen */
	--bg-soft: #eedbbd;     /* perzik-band */
	--glass: rgba(253, 248, 238, 0.52); /* glaskaarten: warm ivoor, halfdoorschijnend */
	--glass-edge: rgba(255, 255, 255, 0.7);
	--ivory: #fbf5ea;       /* dekkende kaartvulling */
	/* lichtval over het glas: sterk aan de bovenrand, uitdovend naar onder */
	--glass-sheen: linear-gradient(166deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.04) 100%);
	--glass-sheen-strong: linear-gradient(166deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2) 46%, rgba(255, 255, 255, 0.06) 100%);
	--peach: #f0c79e;       /* Maria Maior — fotokader, chips, accenten op donker */
	--tan: #c6a283;         /* Singel Licht — subtiele randen */
	--bluegray: #d3dadb;    /* Singel Donker — referentie-band, quote, tegels */
	--bluegray-soft: #e3e9ea; /* lichtere variant voor gradients */
	--caramel: #b96f24;     /* Boudin/Eijk — display-accenten (alleen groot) */
	--accent-text: #7d4a06; /* AA-contrast op cream; voor kleine accenttekst */
	--chestnut: #6e3413;    /* Cronenburch — donkere secties, knoppen */
	--chestnut-deep: #421d06; /* Reus Bruin — hero, footer, hover */
	--ink: #221709;
	--ink-muted: #5b4a37;
	--line: rgba(34, 23, 9, 0.14);

	--font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-accent: "Instrument Serif", Georgia, serif;

	--radius: 12px;
	--radius-sm: 4px;
	--container: 78rem;
	--header-h: 4.25rem;
}

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

html {
	scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* de <picture>-wrapper verdwijnt uit de layout: de img blijft direct kind */
picture {
	display: contents;
}

a {
	color: inherit;
}

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Toegankelijkheid
   -------------------------------------------------------------------------- */

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--chestnut);
	color: var(--bg);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--radius) var(--radius);
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 0;
}

:focus-visible {
	outline: 3px solid var(--chestnut);
	outline-offset: 3px;
}

.contact :focus-visible {
	outline-color: var(--peach);
}

/* --------------------------------------------------------------------------
   Typografie-bouwstenen
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
	font-family: var(--font-sans);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

h2 {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.375rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Het font-contrast: accentwoorden in koppen krijgen de serif-italic */
h1 em,
h2 em {
	font-family: var(--font-accent);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	font-size: 1.06em;
	color: var(--caramel);
}

.eyebrow {
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--accent-text);
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn-primary {
	background: var(--chestnut);
	color: var(--bg);
}

.btn-primary:hover {
	background: var(--chestnut-deep);
}

.btn-ghost {
	color: var(--ink);
	border: 1.5px solid rgba(34, 23, 9, 0.35);
}

.btn-ghost:hover {
	border-color: var(--caramel);
	color: var(--accent-text);
}

.contact .btn-primary {
	background: var(--peach);
	color: var(--chestnut-deep);
}

.contact .btn-primary:hover {
	background: #f6d7b6;
}

.btn-small {
	padding: 0.55rem 1.25rem;
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Header & navigatie
   -------------------------------------------------------------------------- */

/* Menubalk: transparant bovenaan, glas zodra je scrolt. De balk hangt over de
   hero heen (main wordt omhoog getrokken), zodat de achtergrond eronder
   doorloopt en er geen randje ontstaat. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}

.site-header.is-scrolled {
	background: rgba(249, 244, 235, 0.6);
	backdrop-filter: blur(22px) saturate(1.4);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	border-bottom-color: rgba(255, 255, 255, 0.65);
	box-shadow: 0 1px 22px rgba(66, 29, 6, 0.07);
}

/* Met het menu open loopt de balk dekkend door in het uitklappaneel: geen
   glasrand tussen de twee */
.nav-open .site-header,
.nav-open .site-header.is-scrolled {
	background: var(--bg);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
	box-shadow: none;
}

#main {
	margin-top: calc(-1 * var(--header-h));
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
}

.wordmark {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-decoration: none;
	line-height: 1;
	display: flex;
	align-items: baseline;
}

/* De Q in de sierlijke serif, maar rechtop */
.wordmark .q {
	font-family: var(--font-accent);
	font-style: normal;
	font-weight: 400;
	font-size: 1.2em;
	letter-spacing: 0;
	color: var(--caramel);
}

.wordmark-sub {
	margin-left: 0.6rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
}

.nav-menu a:not(.btn) {
	color: var(--ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-menu a:not(.btn):hover {
	color: var(--accent-text);
	border-bottom-color: var(--caramel);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin-inline: auto;
	background: var(--ink);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* --------------------------------------------------------------------------
   Hero — licht en warm, met peach-gloed
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	background: var(--bg);
	color: var(--ink);
	overflow: hidden;
}

/* Gloeden op een eigen laag die naar onderen uitdooft */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(52rem 34rem at 90% -12%, rgba(240, 199, 158, 0.3), transparent 64%),
		radial-gradient(40rem 28rem at -2% 104%, rgba(211, 218, 219, 0.36), transparent 64%);
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-block: calc(clamp(2.5rem, 6vw, 5rem) + var(--header-h)) clamp(3.5rem, 8vw, 7rem);
}

.hero h1 {
	font-size: clamp(2.125rem, 5.6vw, 4.5rem);
	margin-bottom: 1.5rem;
}

.hero-lead {
	font-size: clamp(1.125rem, 1.8vw, 1.3125rem);
	line-height: 1.65;
	color: var(--ink-muted);
	max-width: 34rem;
	margin-bottom: 2.25rem;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.hero-photo {
	position: relative;
	justify-self: end;
	width: min(100%, 27rem);
}

.hero-photo::before {
	content: "";
	position: absolute;
	inset: 1.25rem -1.25rem -1.25rem 1.25rem;
	background: var(--chestnut);
	border-radius: var(--radius);
}

.hero-photo img {
	position: relative;
	border-radius: var(--radius);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top;
	/* zelfde warme tint als de projectfoto's */
	filter: saturate(0.5) sepia(0.32) hue-rotate(-6deg) contrast(1.08) brightness(0.97);
}

/* --------------------------------------------------------------------------
   Secties
   -------------------------------------------------------------------------- */

.section {
	padding-block: clamp(4rem, 9vw, 7.5rem);
}

/* --------------------------------------------------------------------------
   Sectietinten: elke gekleurde laag zit op een ::before met een verticaal
   masker, zodat alle overgangen uitvloeien in het cream van de body.
   -------------------------------------------------------------------------- */

.section-soft,
.section-wash,
.section-wash-alt,
.section-sun {
	position: relative;
	isolation: isolate;
}

.section-soft::before,
.section-wash::before,
.section-wash-alt::before,
.section-sun::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* zelfde uitsnede als het beginbeeld van de oude drift, zodat de tinten
	   precies blijven zoals ze waren */
	background-size: 220% 220%;
	background-position: 0% 50%;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 66%, transparent 100%);
}

.section-soft::before {
	background-image: linear-gradient(115deg, rgba(238, 219, 189, 0.42), rgba(243, 223, 192, 0.26) 45%, rgba(240, 199, 158, 0.34));
}

/* Blauw-gele wash die de glaskaarten draagt */
.section-wash::before {
	background-image: linear-gradient(115deg, rgba(211, 218, 219, 0.34), rgba(244, 236, 223, 0.16) 48%, rgba(240, 199, 158, 0.3));
}

.section-wash-alt::before {
	background-image: linear-gradient(115deg, rgba(240, 199, 158, 0.3), rgba(244, 236, 223, 0.16) 52%, rgba(211, 218, 219, 0.34));
}

/* Opdrachtgevers: geel met grijsblauwe accenten */
.section-sun::before {
	background-image:
		radial-gradient(34rem 24rem at 90% 14%, rgba(203, 214, 217, 0.42), transparent 64%),
		radial-gradient(30rem 22rem at 6% 88%, rgba(211, 218, 219, 0.26), transparent 64%),
		linear-gradient(115deg, rgba(240, 219, 183, 0.42), rgba(247, 232, 207, 0.26) 52%, rgba(240, 199, 158, 0.38));
}

.section-intro {
	max-width: 46rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-intro p:not(.eyebrow) {
	color: var(--ink-muted);
	font-size: 1.125rem;
}

/* Aanpak: titel over de volledige breedte, kraan-beeld naast de tekst */

.aanpak-head {
	max-width: 46rem;
	margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

/* Het kraan-beeld staat als afbeelding naast de tekst; de tekst loopt eronder
   door, zodat er nooit een gat naast het beeld valt. */
.aanpak-body::after {
	content: "";
	display: block;
	clear: both;
}

.aanpak-text p + p {
	margin-top: 1.25rem;
}

/* De kraan-animatie doet dienst als beeld */

.kraan-figure {
	float: left;
	width: min(44%, 25rem);
	margin: 0.35rem clamp(1.5rem, 3.5vw, 3rem) 1.5rem 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--glass);
	border: 1px solid var(--glass-edge);
	border-radius: var(--radius);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
	box-shadow: 0 12px 34px rgba(66, 29, 6, 0.1);
}

.kraan-scene {
	max-width: 17rem;
	margin-inline: auto;
}

.kraan-scene svg {
	width: 100%;
	height: auto;
	display: block;
}

.kraan-figure figcaption {
	margin-top: 1.25rem;
	font-family: var(--font-accent);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--ink-muted);
	text-align: center;
	text-wrap: balance;
}

.kraan-figure figcaption em {
	font-style: italic;
	color: var(--accent-text);
}

/* Statisch beginbeeld: glas staat onder de kraan, half vol */
.kraan-glass,
.kraan-stream,
.kraan-water {
	transform-box: fill-box;
}

.kraan-water {
	transform-origin: bottom;
	transform: scaleY(0.5);
}

.kraan-stream {
	transform-origin: top;
	transform: scaleY(0);
}

/* De kruk draait om de verticale as van de kraan. In dit zijaanzicht betekent
   dat: de dwarsstang wordt smaller tot hij op zijn kant staat en weer breder.
   transform-box blijft view-box, zodat de as precies op het midden ligt. */
.kraan-kruk {
	transform-origin: 60px 12px;
}

@media (prefers-reduced-motion: no-preference) {
	.kraan-figure.in .kraan-glass {
		animation: kraan-glass 9s ease-in-out infinite;
	}

	.kraan-figure.in .kraan-kruk {
		animation: kraan-kruk 9s ease-in-out infinite;
	}

	.kraan-figure.in .kraan-stream {
		animation: kraan-stream 9s ease-in-out infinite;
	}

	.kraan-figure.in .kraan-water {
		animation: kraan-water 9s ease-in-out infinite;
	}
}

@keyframes kraan-glass {
	0% { transform: translateX(-140px); opacity: 0; }
	5% { opacity: 1; }
	16% { transform: translateX(0); }
	94% { transform: translateX(0); opacity: 1; }
	100% { transform: translateX(0); opacity: 0; }
}

/* Eén hele slag om open te draaien en later één om dicht te draaien: twee keer
   op zijn kant per slag. */
@keyframes kraan-kruk {
	0%, 19% { transform: scaleX(1); }
	22% { transform: scaleX(0.05); }
	25% { transform: scaleX(1); }
	28% { transform: scaleX(0.05); }
	31%, 62% { transform: scaleX(1); }
	65% { transform: scaleX(0.05); }
	68% { transform: scaleX(1); }
	71% { transform: scaleX(0.05); }
	74%, 100% { transform: scaleX(1); }
}

@keyframes kraan-stream {
	0%, 22% { transform: scaleY(0); }
	27%, 63% { transform: scaleY(1); }
	70%, 100% { transform: scaleY(0); }
}

@keyframes kraan-water {
	0%, 25% { transform: scaleY(0.5); }
	66%, 100% { transform: scaleY(0.94); }
}

/* Kwaliteiten */

.quality-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	list-style: none;
}

/* Glaskaarten: knipoog naar het glas onder de kraan. De sheen-laag bovenop
   het halfdoorschijnende ivoor geeft de lichtval van echt glas. */
.quality-card {
	padding: 1.75rem;
	border: 1px solid var(--glass-edge);
	border-radius: var(--radius);
	background: var(--glass-sheen), var(--glass);
	-webkit-backdrop-filter: blur(26px) saturate(1.5);
	backdrop-filter: blur(26px) saturate(1.5);
	box-shadow:
		0 12px 34px rgba(66, 29, 6, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.72),
		inset 0 -1px 0 rgba(255, 255, 255, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.quality-card:hover {
	transform: translateY(-4px);
	background: var(--glass-sheen-strong), rgba(253, 248, 238, 0.68);
	border-color: rgba(255, 255, 255, 0.92);
	box-shadow:
		0 18px 42px rgba(71, 34, 10, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

.quality-card .icon {
	width: 3rem;
	height: 3rem;
	padding: 0.65rem;
	background: var(--peach);
	border-radius: 10px;
	color: var(--chestnut-deep);
	margin-bottom: 1.1rem;
}

.quality-card h3 {
	font-size: 1.1875rem;
	margin-bottom: 0.5rem;
	color: var(--chestnut);
}

.quality-card p {
	font-size: 0.9375rem;
	color: var(--ink-muted);
	line-height: 1.6;
}

/* Quote band — de tekst staat naast de weg, niet erop */

.quote-band {
	background: transparent;
	color: var(--ink);
	padding-block: clamp(3rem, 6vw, 5rem) 0;
	text-align: center;
}

.quote-band blockquote p {
	font-family: var(--font-accent);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.625rem, 4vw, 2.625rem);
	line-height: 1.3;
	text-wrap: balance;
	max-width: 38rem;
	margin-inline: auto;
	color: var(--chestnut-deep);
}

/* Het kader is hoger dan de weg zelf: onder het asfalt is ruimte nodig waar de
   voetstappen het beeld uit kunnen lopen. Hoogte volgt de viewBox van 200, dus
   de weg blijft even dik als bij de oude 150. */
.road svg {
	display: block;
	width: 100%;
	height: clamp(6.67rem, 13.3vw, 12rem);
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
	overflow: visible;
}

.road-shoulder {
	stroke: rgba(198, 162, 131, 0.4);
}

.road-surface {
	stroke: var(--chestnut);
}

/* Voetstappen die van het asfalt af lopen: buiten de gebaande paden. Op het
   asfalt licht, ernaast donker, zodat ze op beide ondergronden leesbaar zijn. */
/* De stappen verschijnen één voor één terwijl de weg in beeld scrolt. JS zet
   .is-walking; zonder JS of bij prefers-reduced-motion staan ze er meteen. */
.road.is-walking use {
	opacity: 0;
	transition: opacity 0.45s ease;
}

.road.is-walking use.is-stepped {
	opacity: 1;
}

/* Eén gele tint, leesbaar op het donkere asfalt én op het cream ernaast */
.road-steps {
	fill: #dfa95e;
}

/* Diensten (wat ik doe) */

/* Krappe tussenruimte en padding, zodat de rolchips twee-aan-twee op één
   regel passen zonder dat de sectie breder hoeft te zijn dan de rest */
.field-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

/* Volledig gevuld ivoor, geen doorschijnend glas en geen witte rand: de
   schaduw geeft de kaart genoeg definitie op het cream */
.field-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ivory);
	border-radius: var(--radius);
	padding: 1.75rem;
	box-shadow: 0 14px 36px rgba(66, 29, 6, 0.1);
}

.card-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--accent-text);
	margin: 1.5rem 0 0.6rem;
}


.field-card h3 {
	margin-bottom: 0.75rem;
	color: var(--chestnut);
}

.field-card > p {
	font-size: 0.9375rem;
	color: var(--ink-muted);
	margin-bottom: 1.5rem;
}

/* Twee naast elkaar in gelijke kolommen: rustiger dan los wrappen */
.chip-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	list-style: none;
}

.chip-list + .check-list {
	margin-top: 1.25rem;
}

.chip-list li {
	display: grid;
	place-items: center;
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.4rem 0.9rem;
	border-radius: var(--radius-sm);
	background: var(--peach);
	color: var(--chestnut-deep);
	text-align: center;
}

.check-list {
	list-style: none;
	font-size: 0.9375rem;
}

.check-list li {
	position: relative;
	padding-left: 1.5rem;
	line-height: 1.55;
}

.check-list li + li {
	margin-top: 0.65rem;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 2px;
	background: var(--caramel);
	transform: rotate(45deg);
}

/* Rollen uitgeschreven: wat elke rol inhoudt. Twee kolommen op desktop, één
   op smalle schermen. dt/dd zitten per paar in een div, zoals bij de
   contactgegevens, zodat het raster op paren kan werken. */
.role-detail {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Kop in dezelfde maat als de sectiekoppen, inclusief het serif-accentwoord */
.role-detail h3 {
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.role-detail h3 em {
	font-family: var(--font-accent);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	font-size: 1.06em;
	color: var(--caramel);
}

/* Zes rollen in drie kolommen: twee volle regels */
.role-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
}

.role-list dt {
	font-weight: 700;
	font-size: 1rem;
	color: var(--accent-text);
}

.role-list dd {
	margin-top: 0.3rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-muted);
}

/* Projecten in beeld — foto's in de sitekleuren, kleurtegels waar geen foto is */

.project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	list-style: none;
}

.project-card {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(66, 29, 6, 0.12);
}

.project-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--chestnut-deep);
	overflow: hidden;
}

.project-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* warm getint richting het palet, maar nog steeds een echte foto */
	filter: saturate(0.55) sepia(0.34) hue-rotate(-6deg) contrast(1.1) brightness(0.96);
	transition: filter 0.5s ease, transform 0.6s ease;
}

/* Kleurtegels voor opdrachten zonder beeld; ruimte onderin voor de caption */
.project-media.is-tile {
	display: grid;
	place-items: center;
	padding-bottom: 3.25rem;
}

/* Eigen sfeerillustraties, kleuren volgen de tegel via currentColor */
.tile-art {
	width: 78%;
	height: auto;
	opacity: 0.5;
	transition: opacity 0.4s ease, transform 0.6s ease;
}

.tile-peach {
	background: linear-gradient(150deg, #f7ddc0, var(--peach));
	color: var(--chestnut-deep);
}

.tile-blue {
	background: linear-gradient(150deg, var(--bluegray-soft), #c2cdcf);
	color: var(--chestnut);
}

.tile-tan {
	background: linear-gradient(150deg, #ddc5ab, var(--tan));
	color: var(--chestnut-deep);
}

.tile-deep {
	background: linear-gradient(150deg, var(--chestnut), var(--chestnut-deep));
	color: var(--peach);
}

/* Glas-effect caption: knipoog naar de kraan */
.project-body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.95rem 1.25rem 1.05rem;
	background: rgba(50, 21, 3, 0.72);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	border-top: 1px solid rgba(253, 247, 238, 0.25);
	color: #fdf7ee;
}

.project-role {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--peach);
	margin-bottom: 0.15rem;
}

.project-body strong {
	display: block;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.project-note {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(253, 247, 238, 0.85);
}

/* Plusje op de kaart: opent de toelichting. Alleen op mobiel en tablet, waar
   de caption compact moet blijven zodat het beeld de kaart mag vullen. */
.project-more {
	display: none;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	background: rgba(253, 247, 238, 0.14);
	border: 1px solid rgba(240, 199, 158, 0.55);
	border-radius: 50%;
	color: var(--peach);
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.project-more::before {
	content: "+";
}

.project-card.is-open .project-more::before {
	content: "\2212";
}

.project-more:hover,
.project-more:focus-visible {
	background: rgba(240, 199, 158, 0.28);
	border-color: var(--peach);
}

/* Op apparaten met hover: info verschijnt bij hover, foto krijgt kleur terug */
@media (hover: hover) {
	.project-note {
		max-height: 0;
		margin-top: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
	}

	.project-card:hover .project-note,
	.project-card:focus-within .project-note {
		max-height: 7rem;
		margin-top: 0.35rem;
		opacity: 1;
	}

	.project-card:hover .project-media img,
	.project-card:focus-within .project-media img {
		filter: saturate(1) sepia(0.05) contrast(1.02);
		transform: scale(1.04);
	}

	.project-card:hover .tile-art,
	.project-card:focus-within .tile-art {
		opacity: 0.68;
		transform: scale(1.05);
	}
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
	.project-card:hover .project-media img,
	.project-card:focus-within .project-media img,
	.project-card:hover .tile-art,
	.project-card:focus-within .tile-art {
		transform: none;
	}
}

/* Zonder hover (touch): de toelichting staat er gewoon */
@media (hover: none) {
	.project-note {
		margin-top: 0.3rem;
	}
}

/* Het plusje staat op elke breedte. Op desktop opent hover de toelichting,
   maar hover is geen toetsenbord: zonder deze knop heeft .project-card daar
   geen enkel focusbaar element en komt een toetsenbordgebruiker er nooit bij. */
.project-more {
	display: grid;
	position: absolute;
	right: 1.1rem;
	bottom: 1rem;
}

.project-body {
	padding-right: 3.5rem;
}

/* Eenmaal via de knop geopend blijft het open, ook als de muis wegloopt.
   Zelfde specificiteit als de hover-regel, dus de volgorde beslist. */
.project-card.is-open .project-note {
	max-height: 12rem;
	margin-top: 0.35rem;
	opacity: 1;
}

/* Knop onder het raster: op mobiel en tablet staan er eerst vier opdrachten,
   de rest komt met deze knop tevoorschijn. */
.projects-more {
	display: none;
	margin: 1.75rem auto 0;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.5rem;
	background: none;
	border: 1px solid var(--tan);
	border-radius: 999px;
	color: var(--chestnut);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.projects-more::before {
	content: "+";
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.9rem;
	line-height: 1;
}

.project-grid.is-expanded + .projects-more::before {
	content: "\2212";
}

.projects-more:hover,
.projects-more:focus-visible {
	background: var(--chestnut);
	border-color: var(--chestnut);
	color: #fdf7ee;
}

/* WCAG 2.2 SC 2.5.8 vraagt 24x24; deze links waren 22 resp. 18 px hoog */
.contact-details a,
.site-footer a {
	display: inline-block;
	padding-block: 0.15rem;
}

/* Referenties / logo-wall */

.section-sun .eyebrow {
	color: var(--chestnut);
}

.section-sun h2 em {
	color: var(--accent-text);
}

/* 14 logo's: zeven per rij op desktop, dus twee volle rijen. Flexbox zodat een
   onvolledige laatste rij netjes centreert op kleinere schermen. */
.logo-grid {
	--logo-gap: 1rem;
	--logo-per-row: 7;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--logo-gap);
	list-style: none;
}

/* Geen tegels: de logo's staan los op de achtergrond. Standaard monochroom en
   licht, zodat veertien huisstijlen samen één rustig vlak vormen; op hover
   komt de eigen kleur van het logo terug. */
.logo-grid li {
	flex: 0 0 auto;
	width: calc((100% - (var(--logo-per-row) - 1) * var(--logo-gap)) / var(--logo-per-row));
	display: grid;
	place-items: center;
	height: 5rem;
	padding: 0.5rem;
}

.logo-grid img {
	width: auto;
	height: auto;
	max-height: 2.5rem;
	max-width: min(6.25rem, 100%);
	object-fit: contain;
	filter: grayscale(1) sepia(0.4) brightness(0.82) contrast(1);
	opacity: 0.55;
	transition: filter 0.35s ease, opacity 0.35s ease;
}

.logo-grid li:hover img {
	filter: saturate(0.95);
	opacity: 1;
}

/* Contact */

.contact {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}

/* Het donkere blok is een grote kaart op het cream */
.contact-card {
	border-radius: clamp(14px, 2vw, 24px);
	padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.75rem, 4vw, 4rem);
	background:
		radial-gradient(44rem 26rem at 6% 112%, rgba(240, 199, 158, 0.16), transparent 62%),
		linear-gradient(200deg, var(--chestnut) -12%, var(--chestnut-deep) 100%);
	color: #fdf7ee;
	box-shadow: 0 30px 72px -14px rgba(66, 29, 6, 0.3);
}

.contact .eyebrow {
	color: var(--peach);
}

.contact h2 em {
	color: var(--peach);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}

.contact h2 {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
}

.contact-lead {
	color: rgba(253, 247, 238, 0.85);
	font-size: 1.1875rem;
	margin-bottom: 2rem;
	max-width: 28rem;
}

.contact-details {
	font-style: normal;
	background: rgba(253, 247, 238, 0.06);
	border: 1px solid rgba(253, 247, 238, 0.18);
	border-radius: var(--radius);
	padding: 2rem;
}

.contact-details dl > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: 0.85rem;
}

.contact-details dl > div + div {
	border-top: 1px solid rgba(253, 247, 238, 0.14);
}

.contact-details dt {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--peach);
}

.contact-details dd a {
	color: #fdf7ee;
	text-decoration-color: rgba(240, 199, 158, 0.7);
	text-underline-offset: 3px;
}

.contact-details dd a:hover {
	color: var(--peach);
}

/* Footer */

/* Footer: geen eigen achtergrond, zodat de schaduw van de contactkaart
   eronder kan uitlopen in plaats van hard afgekapt te worden */
.site-footer {
	padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
	font-size: 0.875rem;
	color: var(--ink-muted);
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.site-footer a {
	color: inherit;
	text-underline-offset: 3px;
}

.site-footer a:hover {
	color: var(--chestnut);
}

/* --------------------------------------------------------------------------
   Reveal-animaties (uit bij prefers-reduced-motion; JS voegt .in toe)
   -------------------------------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 78rem) {
	.project-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.logo-grid {
		--logo-per-row: 5;
	}
}

@media (max-width: 68rem) {
	.field-grid {
		grid-template-columns: 1fr;
		max-width: 44rem;
	}

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

	.quality-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Hero blijft twee kolommen: foto naast de tekst, ook op tablet */
/* Mobiel en tablet: eerst vier opdrachten, toelichting achter het plusje */
@media (max-width: 64rem) {
	.project-grid.is-clamped > li:nth-child(n+5) {
		display: none;
	}

	.projects-more {
		display: flex;
		width: fit-content;
	}

	/* Alleen verbergen als het plusje er ook is: dat wordt door JS gemaakt, dus
	   zonder JS blijft de toelichting gewoon staan */
	.js .project-note {
		display: none;
	}

	/* max-height/opacity terugzetten: op smalle schermen mét hover (touch-laptop,
	   klein desktopvenster) geldt de hover-regel hierboven ook */
	.js .project-card.is-open .project-note {
		display: block;
		max-height: none;
		margin-top: 0.35rem;
		opacity: 1;
		overflow: visible;
	}

}

@media (max-width: 62rem) {
	.hero-grid {
		grid-template-columns: 1.05fr 0.95fr;
		gap: clamp(1.5rem, 4vw, 2.5rem);
	}

	.hero-photo {
		width: 100%;
	}

	.kraan-figure {
		width: min(48%, 22rem);
	}

	.quality-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.logo-grid {
		--logo-per-row: 4;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 56rem) {
	.nav-toggle {
		display: flex;
	}

	.nav-menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
		gap: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 34px -12px rgba(66, 29, 6, 0.16);
		padding: 0.75rem clamp(1.25rem, 4vw, 2.5rem) 1.25rem;
		display: none;
	}

	.nav-open .nav-menu {
		display: flex;
	}

	.nav-menu li {
		padding-block: 0.4rem;
	}

	.nav-menu a:not(.btn) {
		display: block;
		padding: 0.5rem 0;
		font-size: 1.0625rem;
	}

	.nav-menu .btn {
		margin-top: 0.75rem;
		text-align: center;
	}

	.nav-open .nav-toggle span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.nav-open .nav-toggle span:nth-child(2) {
		opacity: 0;
	}

	.nav-open .nav-toggle span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

@media (max-width: 48rem) {
	/* Smalle kolom: knoppen onder elkaar en even breed */
	.hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-actions .btn {
		text-align: center;
	}

	/* Twee-aan-twee blijft staan tot de telefoon; wel iets minder padding */
	.quality-card {
		padding: 1.4rem;
	}

	.field-card {
		padding: 1.75rem;
	}

	/* Mobiel: extra beeld boven de tekst */
	.project-media {
		aspect-ratio: 4 / 3;
	}

	.project-body {
		padding: 0.8rem 3.4rem 0.95rem 1.1rem;
	}

	/* Footer gecentreerd op mobiel */
	.footer-inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.4rem;
	}

	.logo-grid {
		--logo-per-row: 3;
		--logo-gap: 0.75rem;
	}

	.logo-grid li {
		padding: 0.9rem;
	}

	.contact-details dl > div {
		flex-direction: column;
		gap: 0.15rem;
	}
}

/* Alleen op de kleinste schermen stapelt de hero, links uitgelijnd */
@media (max-width: 34rem) {
	.kraan-figure {
		float: none;
		width: 100%;
		max-width: 22rem;
		margin: 0 0 2rem;
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.hero-photo {
		justify-self: start;
		width: min(100%, 19rem);
	}

	.project-grid {
		grid-template-columns: 1fr;
	}

	.quality-grid {
		grid-template-columns: 1fr;
	}

	.role-list {
		grid-template-columns: 1fr;
	}
}