/* ============================================================
   Studio Sediment — main stylesheet
   Alleen: reset + basis + header + hero (5 multiply-cirkels).
   ============================================================ */

/* ----------  Eric Meyer's Reset CSS v2.0 ---------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* De reset zet 'font: inherit' op strong/b/u/i, wat vet/onderlijning uit
   WYSIWYG-content wegslaat. Hier terugzetten zodat het overal werkt. */
strong, b { font-weight: 600; }
u, ins    { text-decoration: underline; }

/* ----------  Palette + tokens ---------- */
:root {
	--c-grey:   #C4C2B7;
	--c-yellow: #FAFFAC;
	--c-green:  #DFECD7;
	--c-blue:   #B7D1DB;
	--c-mauve:  #C7BBC4;

	--c-ink:    #000000;
	--c-paper:  #ffffff;
	--c-line:   #000000;            /* exact zwart voor de 1px-lijnen (cirkels + slide-borders) */

	--font-sans:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	--font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

	/* Site-brede padding — proportioneel met viewport-breedte.
	   2.083vw = 30px op 1440-breed scherm (ontwerp-referentie). */
	--pad: clamp(16px, 2.083vw, 32px);
}

/* ----------  Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	background: var(--c-paper);
	color-scheme: light;
}
body {
	background: var(--c-paper);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-weight: 400;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
button { font: inherit; cursor: pointer; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: 8px; top: 8px; z-index: 9999;
	background: var(--c-ink); color: var(--c-paper);
	padding: 8px 12px; text-decoration: none;
	transform: translateY(-150%);
	transition: transform 200ms;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--c-yellow); }

/* ----------  Header (vaste topbalk) ---------- */
.header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: baseline;
	gap: 3.33vw;                          /* proportioneel — 48px @1440 */
	padding: calc(var(--pad) / 2) var(--pad) var(--pad);
	font-size: clamp(12px, 0.833vw, 15px);                   /* proportioneel — 12px @1440 */
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-ink);
	pointer-events: none;
}
.header > * { pointer-events: auto; }
.header__wordmark {
	justify-self: start;
	font-weight: 500;
	letter-spacing: 0;
	transform: translateY(100vh);
	will-change: transform;
}
.header__tagline  { justify-self: center; text-align: center; }
.header__menu     { justify-self: end; display: flex; align-items: baseline; gap: 0.2vw; }

.header__toggle {
	background: transparent;
	border: 0;
	color: inherit;
	padding: 0;
	font: inherit;
	letter-spacing: 0;
	text-transform: uppercase;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 3em;                 /* breedte van MENU — voorkomt jump bij × */
	cursor: pointer;
}
.header__toggle:focus-visible { outline: none; }
/* Beide labels stacken op dezelfde plek — wisselen via opacity, géén shift. */
.header__toggle-label { transition: opacity 200ms ease; }
.header__toggle-label--open {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;          /* rechts uitgelijnd net als MENU */
	font-size: 1.6em;
	line-height: 1;
	letter-spacing: 0;
	opacity: 0;
	pointer-events: none;
}
.header__menu[data-open="true"]  .header__toggle-label--open   { opacity: 1; }
.header__menu[data-open="true"]  .header__toggle-label--closed { opacity: 0; }

/* Items expanden één-voor-één vanaf rechts (cascade) — elk LI groeit van
   max-width 0 naar zijn natuurlijke breedte, met stagger-delay. */
.header__items {
	display: flex;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
}
.header__menu[data-open="true"] .header__items { pointer-events: auto; }
.header__items li {
	overflow: hidden;
	max-width: 0;
	padding-right: 0;
	opacity: 0;
	transition:
		max-width    140ms cubic-bezier(0.2, 0.7, 0.2, 1),
		padding-right 140ms cubic-bezier(0.2, 0.7, 0.2, 1),
		opacity      140ms ease;
}
.header__menu[data-open="true"] .header__items li {
	max-width: 10vw;
	padding-right: 0.6vw;
	opacity: 1;
}
.header__menu[data-open="true"] .header__items li:last-child { padding-right: 0; }
/* Openen: één voor één — stagger == duration, geen overlap, geen gap */
.header__menu[data-open="true"] .header__items li:nth-child(1) { transition-delay: 0ms; }
.header__menu[data-open="true"] .header__items li:nth-child(2) { transition-delay: 140ms; }
.header__menu[data-open="true"] .header__items li:nth-child(3) { transition-delay: 280ms; }
/* Sluiten: omgekeerde stagger — laatste item gaat eerst weg, item-per-item */
.header__menu[data-open="false"] .header__items li:nth-child(3) { transition-delay: 0ms; }
.header__menu[data-open="false"] .header__items li:nth-child(2) { transition-delay: 140ms; }
.header__menu[data-open="false"] .header__items li:nth-child(1) { transition-delay: 280ms; }
.header__items a:hover,
.header__items a:focus-visible { text-shadow: 0.025em 0 currentColor; }


/* ----------  Hero (eerste slide in de stack) ---------- */
.hero {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
	background: var(--c-paper);
}

/* Autoplay-slideshow: full-bleed (volle window-hoogte en -breedte),
   cross-fade tussen slides via opacity-transitie. */
.hero__slideshow {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
}
.hero__slide.is-active { opacity: 1; }

/* 9×6 grid van de cirkels — past zich aan aan de viewport.
   Op breed scherm: hoogte-gebonden (volle hero-hoogte minus padding, breedte = 1.5 × hoogte).
   Op smal scherm (waar 1.5 × hoogte niet meer in de viewport past): breedte-gebonden,
   hoogte = breedte / 1.5. Links-bovenaan verankerd.
   Multiply zit per-cirkel zodat overlappende cirkels onderling blenden. */
.hero__circles {
	position: absolute;
	top: var(--pad);
	left: var(--pad);
	width: min(
		calc(100vw - var(--pad) * 2),
		calc((100svh - var(--pad) * 2) * 9 / 6)
	);
	aspect-ratio: 9 / 6;
	z-index: 1;
	pointer-events: none;
}
.hero__circles > svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;   /* zodat de 1px-stroke aan top/bottom/links/rechts niet wordt geclipt door de viewBox-grens */
}
.hero__circles circle {
	mix-blend-mode: multiply;
	transition: opacity 700ms ease;
}
.hero__circles circle.is-hidden { opacity: 0; }

/* Wordmark: SEDIMENT vult de viewport-breedte minus 2 × --pad (zie
   initFitWordmark in main.js). STUDIO erft dezelfde font-size en is dus
   naturally korter. */
.hero__wordmark {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;            /* spans krijgen content-breedte (zo kan JS meten) */
	justify-content: center;
	padding: 0 var(--pad);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 18vw;                    /* CSS-fallback voor JS-loading */
	line-height: 0.85;
	letter-spacing: 0;
	color: var(--c-ink);
	white-space: nowrap;
}
.hero__wordmark span { display: block; }

/* ============================================================
   STACK + SLIDES — sticky-stack na de hero
   Elke slide is 100svh hoog en kleeft top:0. Latere slides
   stapelen visueel óver eerdere (sediment-metafoor).
   ============================================================ */

.stack { position: relative; }

.slide {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100svh;
	overflow: hidden;
	background: var(--c-paper);
	border-top: 1px solid var(--c-line);   /* zelfde 1px lijn als de cirkels */
}
.hero.slide { border-top: 0; }              /* hero is bovenaan, geen lijn boven */
.slide:first-child { border-top: 0; }       /* losse slide (bv. 404) krijgt geen lijn bovenaan */
.slide[data-tone="green"]  { background: var(--c-green);  }
.slide[data-tone="yellow"] { background: var(--c-yellow); }
.slide[data-tone="grey"]   { background: var(--c-grey);   }
.slide[data-tone="mauve"]  { background: var(--c-mauve);  }
.slide[data-tone="blue"]   { background: var(--c-blue);   }

.slide__content {
	height: 100%;
	padding: calc(var(--pad) * 2.5) var(--pad) var(--pad);   /* extra top voor de header */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ---------- Typografie voor statement-slides ---------- */
.title-xl {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 9vw;
	line-height: 0.95;
	letter-spacing: 0;
	margin: 0;
}
.title-xl span { display: block; }
.title-xl__italic em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
}

.lead {
	font-size: clamp(18px, 1.25vw, 24px);
	line-height: 1.5;
	max-width: 38em;
	margin: 2vw 0 0;
}

/* Inline-link binnen lopende tekst (o.a. 404-pagina) */
.ss-inline-link {
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.05em;
}
.ss-inline-link:hover { text-shadow: 0.025em 0 currentColor; }

/* ---------- Praktijk-slide: titel centraal, lead + meta onderaan ---------- */
.slide--praktijk .slide__content {
	display: grid;
	grid-template-columns: 1fr;        /* overschrijft flex/justify-content uit base */
	grid-template-rows: 1fr auto;
	row-gap: var(--pad);
	justify-content: start;            /* idem, voor de zekerheid */
}
.slide--praktijk .title-xl {
	align-self: center;
	justify-self: start;
}

.praktijk-footer {
	display: grid;
	grid-template-columns: 3fr 2fr;     /* 60 / 40 */
	align-items: start;
	column-gap: 4vw;
	margin-bottom: 12vh;                /* duwt footer omhoog vanaf de slide-bodem */
}

.praktijk-lead {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(16px, 1.05vw, 20px);
	line-height: 1.45;
	margin: 0;
	padding-top: calc(0.6vw + 1px);     /* compenseer meta border + padding-top — lead-eerste-regel valt op gelijke hoogte als "Opgericht" */
}

/* Meta-blok (Opgericht / Werkgebied) — alleen lijn boven dit blok */
.meta-row {
	margin: 0;
	display: grid;
	grid-template-columns: max-content max-content;
	row-gap: 0.35vw;
	column-gap: 3vw;
	border-top: 1px solid var(--c-line);
	padding-top: 0.6vw;
}
.meta-row__item {
	display: contents;                  /* dt + dd worden directe grid-cellen */
}
.meta-row dt {
	font-family: var(--font-sans);
	font-size: clamp(13px, 0.764vw, 15px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-ink);
	opacity: 0.6;
	align-self: center;
}
.meta-row dd {
	font-family: var(--font-sans);
	font-size: clamp(15px, 1vw, 18px);
	align-self: center;
}

/* ============================================================
   SLIDE-VARIANT: PROJECT (fullbleed beeld + voettekst overlay)
   ============================================================ */

.slide--project { background: var(--c-paper); }
.slide--project .slide__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--c-ink);
	text-decoration: none;
}
.slide--project .slide__image-wrap {
	flex: 0 0 92.5%;
	overflow: hidden;
	position: relative;
}
.slide--project .slide__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.slide__footer {
	flex: 0 0 7.5%;
	padding: 0 var(--pad);
	display: flex;
	justify-content: space-between;
	gap: var(--pad);
	align-items: center;
	color: var(--c-ink);
	font-size: clamp(13px, 0.833vw, 16px);
	letter-spacing: 0;
	text-transform: uppercase;
}
.slide__footer-name {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-width: 0;
}
.slide__footer-logo {
	height: 2.8em;
	width: auto;
	flex-shrink: 0;
	display: block;
}
.slide__footer-locatie em {
	font-family: var(--font-serif);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	font-size: clamp(14px, 0.972vw, 18px);
}
.slide__footer-more {
	text-transform: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.15vw;
	justify-self: end;
}

/* ============================================================
   SLIDE-VARIANT: PROJECT-GRID (mauve, 3 kolommen)
   ============================================================ */

/* Pin-and-scroll: de slide is in z'n natuurlijke flow hoger dan 100svh, zodat
   de page-scroll er gewoon doorheen kan; --grid-extra wordt door JS gezet op
   het bedrag waarmee de projecten-grid overloopt, en de grid zelf wordt via
   transform: translateY meebewogen met de scrollpositie. Resultaat: trackpad-
   momentum blijft behouden, geen wheel-onderschepping. */
.slide--grid {
	height: calc(100svh + var(--grid-extra, 0px));
}
.slide--grid .slide__content {
	height: 100svh;
	overflow: hidden;
	justify-content: flex-start;
	padding: calc(var(--pad) * 1.5) var(--pad) var(--pad);   /* extra top: de ruimte tussen viewport-top en header (= header padding-top, --pad/2) bovenop de standaard --pad */
}
.slide--grid .grid-projects {
	will-change: transform;
}
.grid-projects {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2vw var(--pad);
}
.grid-project {
	display: block;
	color: inherit;
	text-decoration: none;
}
.grid-project__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 0.7vw;
}
.grid-project__media img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.grid-project__name {
	font-size: clamp(12px, 0.833vw, 15px);
	letter-spacing: 0;
	text-transform: uppercase;
}
.grid-project__locatie em {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(12px, 0.972vw, 16px);
}

/* ============================================================
   SLIDE-VARIANT: CONTACT (geel — titel+formulier links, portret+info rechts)
   ============================================================ */

.slide--contact .slide__content {
	display: grid;
	grid-template-columns: 1fr;
	justify-content: start;
	padding: calc(var(--pad) * 2.5) var(--pad) var(--pad);
}

.contact-grid {
	display: grid;
	grid-template-columns: 3fr 2fr;        /* 60 / 40 */
	column-gap: var(--pad);
	height: 100%;
}

/* ----- Linker kolom: titel boven, form onder ----- */
.contact-col--left {
	display: grid;
	grid-template-rows: 1fr auto;
	row-gap: var(--pad);
}
.contact-col--left .title-xl {
	align-self: center;
	justify-self: start;
}

.contact-form-wrap { width: 100%; max-width: 35vw; margin-bottom: 12vh; }
.contact-form-wrap__placeholder { font-size: clamp(15px, 0.97vw, 18px); }

/* CF7-form styling — werkt met deze CF7-template-markup:
   <p><span class="cf-label">NAAM</span>[text* your-name]</p>
   <p><span class="cf-label">E-MAIL</span>[email* your-email]</p>
   <p><span class="cf-label">TELEFOON</span>[tel your-tel]</p>
   <p><span class="cf-label">BERICHT</span>[textarea* your-message rows:2]</p>
   <p class="cf-submit">[submit "VERSTUUR"]</p>
*/
.contact-form-wrap .wpcf7-form { display: grid; row-gap: 0.8vw; }
.contact-form-wrap .wpcf7-form > p {
	margin: 0;
	display: grid;
	grid-template-columns: 6vw 1fr;
	align-items: end;
	column-gap: 2vw;
	font-size: clamp(15px, 0.97vw, 18px);
}
.contact-form-wrap .cf-label {
	font-size: clamp(13px, 0.764vw, 15px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.6);
	align-self: end;
}
.contact-form-wrap .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	font-size: clamp(15px, 0.97vw, 18px);
	border-bottom: 1px solid var(--c-line);   /* lijn alleen onder de input, niet onder het label */
}
.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form input[type="tel"],
.contact-form-wrap .wpcf7-form textarea {
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	padding: 0.2vw 0;
	width: 100%;
	font-size: clamp(15px, 0.97vw, 18px);
}
.contact-form-wrap .wpcf7-form textarea {
	resize: none;
	height: 1.6em;
	min-height: 1.6em;
	line-height: 1.4;
	overflow: hidden;
}
.contact-form-wrap .wpcf7-form input:focus,
.contact-form-wrap .wpcf7-form textarea:focus { outline: none; }

/* Submit-rij: geen border-bottom, geen grid */
.contact-form-wrap .wpcf7-form > p.cf-submit,
.contact-form-wrap .wpcf7-form > p:last-of-type:has(input[type="submit"]) {
	display: block;
	border-bottom: 0;
	padding: 0;
	margin-top: 1vw;
}
.contact-form-wrap .wpcf7-form input[type="submit"] {
	background: transparent;
	color: var(--c-ink);
	border: 1px solid var(--c-ink);
	padding: 0.7vw 3vw;
	font: inherit;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: clamp(13px, 0.833vw, 16px);
	cursor: pointer;
	margin-left: calc(6vw + 2vw);           /* uitlijnen met inputkolom */
	transition: background 150ms ease, color 150ms ease;
}
.contact-form-wrap .wpcf7-form input[type="submit"]:hover,
.contact-form-wrap .wpcf7-form input[type="submit"]:focus-visible {
	background: var(--c-ink);
	color: var(--c-paper);
	outline: none;
}

/* CF7-response onderaan */
.contact-form-wrap .wpcf7-response-output {
	margin: 1vw 0 0;
	padding: 0.6vw 1vw;
	border: 1px solid var(--c-line);
	font-size: clamp(13px, 0.833vw, 16px);
}

/* ----- Rechter kolom: portret + naam/rol boven, contact-lijnen onder ----- */
.contact-col--right {
	display: grid;
	grid-template-rows: auto 1fr auto;     /* boven, spacer, onder */
	row-gap: var(--pad);
	justify-items: end;                    /* alle content uitgelijnd rechts */
}

.contact-person__top {
	display: grid;
	row-gap: 1vw;
	width: 18vw;                           /* portret-blokbreedte */
}
.contact-person__portrait {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.contact-person__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.contact-person__info { display: grid; row-gap: 0.2vw; }
.contact-person__name  { font-size: clamp(16px, 1.1vw, 21px); letter-spacing: 0; }
.contact-person__role  { font-size: clamp(15px, 0.97vw, 18px); }
.contact-person__role em { font-family: var(--font-serif); font-style: italic; }

.contact-person__lines {
	display: grid;
	row-gap: 0.6vw;
	padding-top: 0.6vw;
	border-top: 1px solid var(--c-line);
	font-size: clamp(15px, 0.97vw, 18px);
	align-self: end;
	justify-self: stretch;                 /* vult de volle rechter-kolom */
	width: auto;
}
.contact-person__lines > div {
	display: grid;
	grid-template-columns: 5vw 1fr;
	column-gap: 1vw;
	align-items: baseline;
}
.contact-person__lines .k {
	font-size: clamp(13px, 0.764vw, 15px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.6;
}
.contact-person__lines a:hover { text-shadow: 0.025em 0 currentColor; }

/* ============================================================
   SITE FOOTER — helemaal onderaan, na de sticky-stack
   ============================================================ */
.site-footer {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--pad);
	padding: 0.3vw var(--pad);
	background: var(--c-paper);
	color: var(--c-ink);
	font-size: clamp(13px, 0.7vw, 15px);
	letter-spacing: 0;
	border-top: 1px solid var(--c-line);
}
.site-footer__left,
.site-footer__right {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5vw;
}
.site-footer__sep { opacity: 0.5; }
.site-footer a:hover { text-shadow: 0.025em 0 currentColor; }

/* ----------  Single project: beelden-stroom (links) + sticky meta (rechts) ---------- */
.project-page {
	background: var(--c-paper);
	color: var(--c-ink);
}

.project-page__layout {
	display: grid;
	grid-template-columns: 1fr 27.5vw;
	gap: var(--pad);
	padding: calc(var(--pad) * 1.5) var(--pad) var(--pad);
	align-items: start;
	min-height: 100svh;
}

.project-page__media {
	display: flex;
	flex-direction: column;
	gap: var(--pad);
	min-width: 0;
}

.project-page__row {
	margin: 0;
}
.project-page__img {
	display: block;
	width: 100%;
	height: auto;
}

.project-page__row--portraits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pad);
}

.project-page__meta {
	position: sticky;
	top: calc(var(--pad) * 1.5);
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: calc(var(--pad) / 2);
	min-width: 0;
}

.project-page__logo {
	width: 10vw;
	max-width: 220px;
}
.project-page__logo svg,
.project-page__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.project-page__title {
	font-family: var(--font-sans);
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
}

.project-page__edit {
	margin: var(--pad) 0 0;
	padding-top: var(--pad);
	border-top: 1px solid var(--c-line);
	font-family: var(--font-sans);
	font-size: clamp(13px, 0.833vw, 16px);
	letter-spacing: 0;
	text-transform: uppercase;
	opacity: 0.6;
}
.project-page__edit a { color: inherit; text-decoration: underline; }
.project-page__edit:hover { opacity: 1; }

.project-page__meta-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-sans);
	font-size: clamp(14px, 0.85vw, 17px);
	line-height: 1.25;
}
.project-page__meta-list li {
	margin: 0;
}

.project-page__desc {
	font-family: var(--font-serif);
	font-size: clamp(14px, 0.85vw, 17px);
	line-height: 1.25;
}
.project-page__desc p {
	margin: 0;
}
.project-page__desc p + p {
	margin-top: 1em;
}

/* ============================================================
   GENERIEKE PAGINA (privacybeleid, e.d.)
   ============================================================ */
.page {
	background: var(--c-paper);
	color: var(--c-ink);
	padding: calc(var(--pad) * 3.5) var(--pad) calc(var(--pad) * 2);
	min-height: 100svh;
}
.page__header {
	max-width: 50em;
	margin: 0 0 calc(var(--pad) * 1.5);
}
.page__title {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: clamp(30px, 4.5vw, 68px);
	line-height: 1;
	letter-spacing: 0;
	margin: 0;
}
.page__body {
	max-width: 38em;
	font-size: clamp(16px, 1.05vw, 20px);
	line-height: 1.5;
}
.page__body h2 {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(18px, 1.25vw, 24px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 2.5em 0 0.6em;
}
.page__body h3 {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(18px, 1.4vw, 26px);
	margin: 2em 0 0.4em;
}
.page__body p { margin: 0 0 1em; }
.page__body p:last-child { margin-bottom: 0; }
.page__body a {
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.05em;
}
.page__body a:hover { text-shadow: 0.025em 0 currentColor; }
.page__body ul,
.page__body ol {
	margin: 0 0 1em 1.4em;
	padding: 0;
}
.page__body ul { list-style: disc; }
.page__body ol { list-style: decimal; }
.page__body li { margin: 0 0 0.3em; }
.page__body strong { font-weight: 500; }
.page__body em { font-family: var(--font-serif); font-style: italic; }

.page__edit {
	max-width: 38em;
	margin: calc(var(--pad) * 2) 0 0;
	padding-top: var(--pad);
	border-top: 1px solid var(--c-line);
	font-family: var(--font-sans);
	font-size: clamp(13px, 0.833vw, 16px);
	letter-spacing: 0;
	text-transform: uppercase;
	opacity: 0.6;
}
.page__edit a { text-decoration: underline; }
.page__edit:hover { opacity: 1; }

/* ============================================================
   RESPONSIVE — breakpoints op 960px (tablet) en 600px (telefoon).
   Boven 960px blijft alles vw-proportioneel zoals ontworpen. Hieronder
   vallen meerkoloms-layouts terug naar één kolom en worden vaste
   vw-breedtes losgelaten. Tekst heeft al een leesbare ondergrens via
   clamp() hierboven, dus hier alleen layout.
   ============================================================ */

/* ----------  Tablet  ---------- */
@media (max-width: 960px) {
	/* Projecten-grid: 3 → 2 kolommen */
	.grid-projects { grid-template-columns: repeat(2, 1fr); }
}

/* ----------  Telefoon  ---------- */
@media (max-width: 600px) {

	/* Header: tagline weg (botst met menu), menu-items volledig zichtbaar,
	   grotere tap-targets. */
	/* Tagline verborgen -> 2-koloms grid zodat het menu rechts blijft i.p.v. in
	   de (nu lege) middenkolom te vallen. */
	.header { gap: 1rem; grid-template-columns: 1fr auto; }
	.header__tagline { display: none; }
	.header__toggle { padding-block: 0.4em; }
	.header__items a { display: inline-block; padding: 0.3em 0; }
	.header__menu[data-open="true"] .header__items li {
		max-width: 60vw;
		padding-right: 1.2em;
	}

	/* Hero-cirkels: geen multiply-blend op telefoon (rendert daar minder mooi);
	   cirkels + wegfaden blijven verder gewoon werken. */
	.hero__circles circle { mix-blend-mode: normal; }

	/* Praktijk-slide: lead + meta onder elkaar. */
	.praktijk-footer {
		grid-template-columns: 1fr;
		row-gap: var(--pad);
		margin-bottom: var(--pad);
	}

	/* Project-slide (fullbleed beeld + voettekst): beeld vult, voettekst onderaan. */
	.slide--project .slide__image-wrap { flex: 1 1 auto; }
	.slide__footer {
		flex: 0 0 auto;
		flex-wrap: wrap;
		row-gap: 0.2em;
		padding-block: 0.9em;
	}

	/* Tekst-zware slides niet langer op 100svh pinnen — inhoud die hoger is dan
	   de viewport zou anders worden afgekapt. Ze scrollen nu volledig mee. */
	.slide--praktijk,
	.slide--contact {
		position: relative;
		height: auto;
		min-height: 100svh;
		overflow: visible;
	}

	/* Contact: titel, formulier en persoon onder elkaar in één kolom. */
	.slide--contact .slide__content { padding-top: calc(var(--pad) * 3); }
	.contact-grid {
		grid-template-columns: 1fr;
		height: auto;
		row-gap: calc(var(--pad) * 1.5);
	}
	.contact-col--left { display: block; }
	.contact-col--left .title-xl { margin-bottom: var(--pad); }
	.contact-form-wrap { max-width: 100%; margin-bottom: 0; }
	.contact-form-wrap .wpcf7-form > p {
		grid-template-columns: 1fr;
		row-gap: 0.2em;
	}
	.contact-form-wrap .wpcf7-form input[type="submit"] { margin-left: 0; }
	.contact-col--right { display: block; justify-items: start; }
	.contact-person__top { width: 100%; max-width: 280px; margin-bottom: var(--pad); }
	.contact-person__lines > div { grid-template-columns: 4.5rem 1fr; }

	/* Single-project: beelden + meta onder elkaar, meta eerst, niet sticky. */
	.project-page__layout {
		grid-template-columns: 1fr;
		gap: calc(var(--pad) * 1.5);
	}
	.project-page__meta { position: static; order: -1; }
	.project-page__logo { width: 40vw; max-width: 180px; }

	/* Generieke pagina + site-footer. */
	.page { padding-top: calc(var(--pad) * 4); }
	.site-footer { flex-wrap: wrap; row-gap: 0.3em; }
}