/* ==========================================================================
   Marcotte Style - Realisatie (magazine)
   1:1 overgenomen van de Shopify-projectpagina
   marcottestyle.store/nl/pages/project-villa-knokke (sections/mcs-project-case.liquid).
   Variabelen, kleuren, rasters en ritme komen letterlijk uit die pagina.
   Alles gescopet onder .pc-section zodat het nooit elders doorwerkt.
   ========================================================================== */

.pc-section {
	--pc-bg: #1a1816;
	--pc-cream: #f4efe6;
	--pc-gold: #ac8c5d;
	--pc-gold-rgb: 172, 140, 93;
	--pc-gold-soft: #c5a065;
	--pc-mut: rgba(244, 239, 230, 0.72);
	--pc-serif: "Playfair Display", Georgia, serif;
	--pc-sans: "Montserrat", system-ui, sans-serif;
	--pc-max: 1320px;
	--pc-gut: 1.5rem;

	background: var(--pc-bg);
	color: var(--pc-cream);
	font-family: var(--pc-serif);
	padding: 2.5rem 0 6rem;
	overflow-x: clip;
}

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

.pc-wrap {
	max-width: var(--pc-max);
	margin-inline: auto;
	padding-inline: var(--pc-gut);
}

/* --- Hero ---------------------------------------------------------------- */

/*
 * Banner exact zoals op marcottestyle.store/pages/project-villa-knokke:
 * 21:9, BINNEN de container (dus niet schermbreed), overflow hidden,
 * titel absoluut onderaan met 40px padding, enkel een tekstschaduw en geen verloop.
 */
.pc-hero {
	position: relative;
	overflow: hidden;
	margin: 0 0 clamp(2rem, 5vw, 4rem);
}

.pc-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center;
}

/*
 * Verduistering onderaan. Zonder dit valt de titel weg op een lichte foto,
 * zoals op de houtwand van dit project. Loopt over de onderste helft zodat
 * het beeld bovenaan onaangeroerd blijft.
 */
.pc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(20, 18, 16, 0) 38%,
		rgba(20, 18, 16, 0.35) 62%,
		rgba(20, 18, 16, 0.78) 88%,
		rgba(20, 18, 16, 0.9) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.pc-hero-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px;
	text-align: left;
	z-index: 2;
}

/* Broodkruimel boven de banner, zoals op de Shopify-projectpagina. */
.pc-kruimels {
	font-family: var(--pc-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--pc-gold-rgb), 0.75);
	margin: 0 0 1.25rem;
}

.pc-kruimels a {
	color: rgba(var(--pc-gold-rgb), 0.75);
	text-decoration: none;
}

.pc-kruimels a:hover {
	color: var(--pc-gold-soft);
}

.pc-kruimels .separator {
	margin: 0 0.5rem;
	opacity: 0.6;
}

.pc-hero .pc-title--hero {
	color: #fff;
	margin: 0;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.pc-hero-body .mag-kicker {
	color: var(--pc-gold-soft);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
	margin-bottom: 0.9rem;
}

@media (max-width: 720px) {

	/* 21:9 is op een telefoon een reepje; daar wordt het 4:3. */
	.pc-hero img {
		aspect-ratio: 4 / 3;
	}

	.pc-hero-body {
		padding: 20px;
	}

	.pc-title--hero {
		font-size: clamp(1.5rem, 6vw, 2rem);
	}
}

/* --- Kop van het artikel ------------------------------------------------- */

.mag-lead {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 2rem;
	margin-top: 3rem;
	align-items: start;
}

@media (min-width: 768px) {

	.mag-lead {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		margin-top: 5.5rem;
	}

	/* Begint op kolom 1: een lege marge van een volle kolom oogt als een gat. */
	.mag-lead-text {
		grid-column: 1 / 8;
	}

	.mag-lead-rail {
		grid-column: 9 / 13;
		margin-top: 4.75rem;
	}
}

.mag-kicker {
	font-family: var(--pc-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-gold);
	margin: 0 0 1.5rem;
}

.pc-title {
	font-family: var(--pc-serif);
	font-weight: 400;
	color: var(--pc-cream);
	margin: 0 0 1.5rem;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
	line-height: 1.1;
	letter-spacing: normal;
}

.mag-standfirst {
	font-family: var(--pc-serif);
	font-weight: 400;
	color: var(--pc-cream);
	margin: 0;
	max-width: 32ch;
	font-size: clamp(1.35rem, 1.02rem + 1.35vw, 2.05rem);
	line-height: 1.45;
}

.mag-lead-body {
	margin-top: 1.75rem;
	max-width: 44ch;
}

.mag-lead-body p {
	font-family: var(--pc-sans);
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--pc-mut);
	margin: 0 0 1.1em;
}

.mag-lead-body a {
	color: var(--pc-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mag-lead-rail {
	margin-top: 2.75rem;
}

.mag-rail-head {
	font-family: var(--pc-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--pc-gold-rgb), 0.8);
	margin: 0 0 0.9rem;
}

.pc-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.28);
}

.pc-facts li {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.28);
	font-family: var(--pc-sans);
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--pc-cream);
}

.pc-facts li::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--pc-gold);
	flex: 0 0 auto;
	transform: translateY(-4px);
}

/* --- Beeldstroom --------------------------------------------------------- */

.mag-flow {
	margin-top: clamp(3.25rem, 8vw, 7rem);
}

.mag-blk {
	margin: 0;
}

.mag-blk + .mag-blk {
	margin-top: clamp(2.75rem, 6.5vw, 6.5rem);
}

.mag-blk + .mag-a,
.mag-a + .mag-blk {
	margin-top: clamp(3.25rem, 8vw, 8rem);
}

/*
 * Een staand beeld alleen over de volle kolombreedte wordt loodrecht te hoog
 * (1320px breed betekent ruim 1700px hoog). Begrenzen en centreren.
 */
.mag-a.is-portret {
	max-width: 620px;
	margin-inline: auto;
}

/*
 * Geen enkel los beeld mag hoger worden dan het scherm: dan moet je scrollen
 * binnen één foto en verlies je het overzicht. Breedte volgt de hoogte, dus
 * er wordt nog steeds niets bijgesneden.
 */
/*
 * De figure krimpt mee met het beeld (fit-content) in plaats van de volle
 * kolombreedte te houden. Zo begint het bijschrift exact onder de linkerrand
 * van de foto en niet ergens links in het niets.
 */
.mag-a:not(.mag-bleed) {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.mag-a:not(.mag-bleed) .mag-img {
	max-height: 82vh;
	width: auto;
	max-width: 100%;
}

/* Een full-bleed beeld blijft schermbreed, maar wordt een band in plaats van een muur. */
.mag-bleed .mag-img {
	max-height: 86vh;
	object-fit: cover;
}

@media (max-width: 720px) {

	.mag-a.is-portret {
		max-width: 100%;
	}

	.mag-a:not(.mag-bleed) .mag-img {
		max-height: none;
		width: 100%;
	}

	.mag-bleed .mag-img {
		max-height: 70vh;
	}
}

.mag-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.03);
}

.mag-cap {
	display: block;
	font-family: var(--pc-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.65;
	color: rgba(var(--pc-gold-rgb), 0.82);
	margin-top: 0.7rem;
	max-width: 52ch;
}

/* Over de volle schermbreedte. */
.mag-bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.mag-capwrap {
	display: flex;
	max-width: var(--pc-max);
	margin: 0 auto;
	padding: 0 var(--pc-gut);
}

.mag-capwrap.is-right {
	justify-content: flex-end;
}

/* --- Ruimtekop ----------------------------------------------------------- */

.mag-room {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.mag-room .room-rule {
	flex: 0 0 auto;
	width: 38px;
	height: 1px;
	background: rgba(var(--pc-gold-rgb), 0.55);
}

.mag-room .room-label {
	margin: 0;
	font-family: var(--pc-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
}

.mag-blk + .mag-room {
	margin-top: clamp(3rem, 7.5vw, 7.5rem);
}

.mag-room + .mag-blk,
.mag-room + .mag-a,
.mag-room + .mag-roomtext {
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.mag-roomtext {
	max-width: 44ch;
}

.mag-roomtext p {
	font-family: var(--pc-sans);
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--pc-mut);
	margin: 0 0 1.1em;
}

/* --- Twee naast elkaar, asymmetrisch en versprongen ---------------------- */

.mag-b {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 760px) {

	.mag-b {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(1.5rem, 3vw, 3rem);
		align-items: start;
	}

	.mag-b .b-b {
		margin-top: clamp(2rem, 6vw, 6.5rem);
	}

	.mag-b.is-swap {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.mag-b.is-swap .b-a {
		order: 2;
		margin-top: clamp(2rem, 6vw, 6.5rem);
	}

	.mag-b.is-swap .b-b {
		order: 1;
		margin-top: 0;
	}
}

.mag-b figure {
	margin: 0;
}

/*
 * Ook in de kolommen nooit hoger dan het scherm. Op een gewoon scherm verandert
 * dit niets; het vangt enkel de extreme gevallen op (staand beeld in de brede kolom).
 * Breedte volgt de hoogte, dus opnieuw geen bijsnijding.
 */
.mag-b figure,
.mag-f figure {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.mag-b .mag-img,
.mag-f .mag-img {
	max-height: 88vh;
	width: auto;
	max-width: 100%;
}

/* Titel op het herobeeld moet de latere .pc-title-regel overrulen. */
.pc-hero .pc-title--hero {
	color: #fff;
}

/* --- Drie naast elkaar --------------------------------------------------- */

.mag-f {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 760px) {

	.mag-f {
		grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
		gap: clamp(1rem, 2vw, 2rem);
		align-items: start;
	}

	.mag-f .f-2 {
		margin-top: clamp(2.5rem, 7vw, 7rem);
	}

	.mag-f .f-3 {
		margin-top: clamp(1rem, 3vw, 3rem);
	}

	.mag-f.is-swap {
		grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
	}

	.mag-f.is-swap .f-1 {
		margin-top: clamp(1.5rem, 4vw, 4rem);
	}

	.mag-f.is-swap .f-2 {
		margin-top: 0;
	}

	.mag-f.is-swap .f-3 {
		margin-top: clamp(2.5rem, 7vw, 7rem);
	}
}

.mag-f figure {
	margin: 0;
}

/* --- Voor en na ---------------------------------------------------------- */

.mag-ba {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.28);
	padding-top: 1.5rem;
}

@media (min-width: 760px) {

	.mag-ba {
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	.mag-ba .ba-cell + .ba-cell {
		border-left: 1px solid rgba(var(--pc-gold-rgb), 0.28);
		padding-left: clamp(1rem, 2vw, 2rem);
	}

	.mag-ba .ba-cell:first-child {
		padding-right: clamp(1rem, 2vw, 2rem);
	}
}

.mag-ba .ba-cell {
	margin: 0;
	min-width: 0;
}

.mag-ba .ba-label {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--pc-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
}

.mag-ba .ba-note {
	grid-column: 1 / -1;
	margin-top: 1rem;
}

/* --- Pull quote ---------------------------------------------------------- */

.mag-quote {
	max-width: 44ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 0;
}

.mag-quote .q-rule {
	display: block;
	width: 74px;
	height: 1px;
	background: rgba(var(--pc-gold-rgb), 0.6);
	margin: 0 auto;
}

.mag-quote p {
	font-family: var(--pc-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--pc-gold);
	font-size: clamp(1.3rem, 0.95rem + 1.5vw, 2.05rem);
	line-height: 1.42;
	margin: clamp(1.4rem, 3vw, 2.4rem) auto;
}

/* --- Verwante realisaties ------------------------------------------------ */

.pc-related {
	margin-top: clamp(3.5rem, 9vw, 7rem);
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.3);
	padding-top: 2.5rem;
}

.pc-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	margin-top: 1.5rem;
}

.pc-related-card {
	display: block;
	text-decoration: none;
	color: var(--pc-cream);
}

.pc-related-card .mag-img {
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-related-card:hover .mag-img {
	opacity: 0.78;
}

.pc-related-card span {
	display: block;
	margin-top: 0.8rem;
	font-family: var(--pc-sans);
	font-size: 0.8rem;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.pc-related-card:hover span {
	color: var(--pc-gold-soft);
}

/* --- Afsluiter ----------------------------------------------------------- */

/* ==========================================================================
   Overzichtspagina met alle realisaties
   ========================================================================== */

.pc-index-kop {
	max-width: 62ch;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.pc-index-kop .pc-title {
	margin-bottom: 1.25rem;
}

.pc-index-lijn {
	font-family: var(--pc-sans);
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--pc-mut);
	margin: 0;
	max-width: 56ch;
}

/* Filterbalk met de telling rechts. */
.pc-filterbalk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.22);
}

.pc-index-teller {
	font-family: var(--pc-sans);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pc-mut);
	margin: 0;
}

.pc-index-cijfers {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin: 2.25rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.28);
}

.pc-index-cijfers li {
	display: flex;
	flex-direction: column;
}

.pc-index-cijfers strong {
	font-family: var(--pc-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
	line-height: 1;
	color: var(--pc-gold);
}

.pc-index-cijfers span {
	font-family: var(--pc-sans);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pc-mut);
	margin-top: 0.45rem;
}

/* --- Filters ------------------------------------------------------------- */

.pc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Echte links, geen knoppen: het menu wijst naar dezelfde categoriepagina's. */
.pc-filter {
	appearance: none;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	background: transparent;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.22);
	border-radius: 2px;
	padding: 11px 20px;
	min-height: 44px;
	font-family: var(--pc-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pc-mut);
	cursor: pointer;
	transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-filter:hover {
	color: var(--pc-cream);
	border-color: rgba(var(--pc-gold-rgb), 0.5);
}

.pc-filter.is-actief {
	background: var(--pc-gold);
	border-color: var(--pc-gold);
	color: var(--pc-bg);
}

/* --- Tegelraster --------------------------------------------------------- */

.pc-index-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	grid-auto-flow: dense;
}

.pc-tegel {
	grid-column: span 12;
	display: block;
	text-decoration: none;
	color: var(--pc-cream);
}

@media (min-width: 600px) {

	.pc-tegel {
		grid-column: span 6;
	}
}

@media (min-width: 900px) {

	/* Drie maten door elkaar: een raster van gelijke kaarten oogt goedkoop. */
	.pc-tegel {
		grid-column: span 4;
	}

	.pc-tegel.is-groot {
		grid-column: span 8;
	}

	.pc-tegel.is-half {
		grid-column: span 6;
	}
}

.pc-tegel-beeld {
	display: block;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
}

.pc-tegel .mag-img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.pc-tegel.is-groot .mag-img {
	aspect-ratio: 16 / 9;
}

.pc-tegel.is-half .mag-img {
	aspect-ratio: 3 / 2;
}

.pc-tegel:hover .mag-img {
	transform: scale(1.035);
	opacity: 0.9;
}

.pc-tegel-tekst {
	display: block;
	padding-top: 0.9rem;
}

.pc-tegel-eyebrow {
	display: block;
	font-family: var(--pc-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--pc-gold-rgb), 0.85);
	margin-bottom: 0.4rem;
}

.pc-tegel-titel {
	display: block;
	font-family: var(--pc-serif);
	font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem);
	line-height: 1.3;
	color: var(--pc-cream);
	transition: color 0.3s ease;
}

.pc-tegel:hover .pc-tegel-titel {
	color: var(--pc-gold-soft);
}

.pc-index-leeg {
	font-family: var(--pc-sans);
	font-size: 0.9rem;
	color: var(--pc-mut);
	margin: 2rem 0 0;
}

.pc-index .pc-cta {
	margin-top: clamp(3.5rem, 8vw, 6rem);
}

/* ==========================================================================
   Aanbod: strak genummerd dienstenraster
   ========================================================================== */

.pc-diensten {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin-bottom: clamp(3.5rem, 8vw, 6rem);
}

@media (min-width: 600px) {

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

@media (min-width: 1000px) {

	.pc-diensten {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pc-dienst {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* De naam staat OP het beeld, zodat je in één oogopslag ziet wat het is. */
.pc-dienst-beeld {
	position: relative;
	display: block;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
}

.pc-dienst-beeld .mag-img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-dienst:hover .pc-dienst-beeld .mag-img {
	transform: scale(1.04);
}

.pc-dienst-beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(20, 18, 16, 0) 40%,
		rgba(20, 18, 16, 0.55) 72%,
		rgba(20, 18, 16, 0.88) 100%
	);
	pointer-events: none;
}

.pc-dienst-beeld .pc-dienst-naam {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1rem 1.15rem;
	margin: 0;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.pc-dienst-naam {
	display: block;
	font-family: var(--pc-serif);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
	line-height: 1.25;
	color: var(--pc-cream);
	transition: color 0.3s ease;
}

.pc-dienst-naam--plat {
	padding: 0 0 0.4rem;
}

.pc-dienst:hover .pc-dienst-naam {
	color: var(--pc-gold-soft);
}

.pc-dienst-tekst {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--pc-sans);
	font-size: 0.78rem;
	line-height: 1.65;
	color: var(--pc-mut);
}

/* --- Drie stappen -------------------------------------------------------- */

.pc-stappen {
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.28);
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.pc-stappen-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 768px) {

	.pc-stappen-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pc-stap-nr {
	display: block;
	font-family: var(--pc-serif);
	font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
	line-height: 1;
	color: rgba(var(--pc-gold-rgb), 0.55);
	margin-bottom: 0.9rem;
}

.pc-stap-titel {
	font-family: var(--pc-serif);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.25;
	color: var(--pc-cream);
	margin: 0 0 0.5rem;
}

.pc-stap-tekst {
	font-family: var(--pc-sans);
	font-size: 0.82rem;
	line-height: 1.7;
	color: var(--pc-mut);
	margin: 0;
}

/* --- Materialen met stalen ----------------------------------------------- */

.pc-materialen {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

@media (min-width: 768px) {

	.pc-materialen {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.pc-materialen.is-alleen-tekst {
		grid-template-columns: minmax(0, 44ch);
	}
}

.pc-stalen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: clamp(0.6rem, 1.4vw, 1rem);
}

.pc-staal {
	margin: 0;
}

/* Vierkant uitgesneden: een staal toont het materiaal, niet de ruimte. */
.pc-staal .mag-img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.pc-staal figcaption {
	display: block;
	margin-top: 0.55rem;
	font-family: var(--pc-sans);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
}

/* ==========================================================================
   Contactformulier in de afsluiter
   WPForms brengt zijn eigen opmaak mee; hieronder wordt die binnen dit blok
   omgezet naar de donkere stijl. Alles blijft gescopet op .pc-formulier.
   ========================================================================== */

.pc-formulier {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(var(--pc-gold-rgb), 0.22);
	border-radius: 2px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* Staat er een formulier in de afsluiter, dan krijgt die de volle breedte. */
.pc-cta:has(.pc-formulier) {
	grid-template-columns: 1fr;
}

.pc-cta:has(.pc-formulier) .pc-formulier {
	grid-column: 1 / -1;
}

.pc-formulier-kop {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.22);
}

.pc-formulier-titel {
	font-family: var(--pc-serif);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.3;
	color: var(--pc-cream);
	margin: 0 0 0.4rem;
}

.pc-formulier-lijn {
	font-family: var(--pc-sans);
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--pc-gold-soft);
	margin: 0;
}

.pc-formulier .wpforms-container,
.pc-formulier .wpforms-form {
	margin: 0;
	padding: 0;
}

.pc-formulier .wpforms-field {
	padding: 0 0 1rem;
}

.pc-formulier .wpforms-field-label,
.pc-formulier .wpforms-field-sublabel {
	font-family: var(--pc-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc-mut);
	margin-bottom: 0.4rem;
}

.pc-formulier .wpforms-field-sublabel {
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: none;
	font-size: 10px;
	margin-top: 0.3rem;
}

.pc-formulier .wpforms-required-label {
	color: var(--pc-gold);
}

/*
 * WPForms brengt zijn eigen, vrij specifieke opmaak mee en laadt die na deze
 * stylesheet. Vandaar de extra klassen in de selector en !important op de
 * eigenschappen die anders overschreven worden.
 */
.pc-formulier .wpforms-container input[type="text"],
.pc-formulier .wpforms-container input[type="email"],
.pc-formulier .wpforms-container input[type="tel"],
.pc-formulier .wpforms-container input[type="url"],
.pc-formulier .wpforms-container select,
.pc-formulier .wpforms-container textarea {
	width: 100%;
	background-color: rgba(20, 18, 16, 0.55) !important;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.28) !important;
	border-radius: 2px;
	padding: 12px 14px;
	min-height: 46px;
	font-family: var(--pc-sans);
	font-size: 0.85rem;
	color: var(--pc-cream) !important;
	box-shadow: none;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.pc-formulier textarea {
	min-height: 118px;
	resize: vertical;
}

.pc-formulier input::placeholder,
.pc-formulier textarea::placeholder {
	color: rgba(244, 239, 230, 0.4);
}

.pc-formulier input:focus,
.pc-formulier textarea:focus,
.pc-formulier select:focus {
	outline: none;
	border-color: var(--pc-gold);
	background: rgba(20, 18, 16, 0.75);
}

/* Verzendknop in dezelfde taal als de andere knoppen. */
.pc-formulier .wpforms-container .wpforms-submit,
.pc-formulier .wpforms-container button[type="submit"] {
	width: 100%;
	min-height: 48px;
	background-color: var(--pc-gold) !important;
	border: 1px solid var(--pc-gold) !important;
	border-radius: 2px;
	font-family: var(--pc-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.89px;
	text-transform: uppercase;
	color: var(--pc-bg) !important;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.pc-formulier .wpforms-container .wpforms-submit:hover,
.pc-formulier .wpforms-container button[type="submit"]:hover {
	background-color: var(--pc-gold-soft) !important;
	border-color: var(--pc-gold-soft) !important;
}

.pc-formulier .wpforms-container .wpforms-field-label {
	color: var(--pc-mut) !important;
}

/*
 * Aanklikbare keuzes: de klant hoeft niet te typen. Elke optie is een vlak dat
 * je aantikt, met een tikdoel van minstens 44px.
 */
/*
 * Keuzes in meerdere kolommen. Tien opties onder elkaar in een smalle kolom
 * betekent eindeloos scrollen; zo past een vraag in één oogopslag.
 */
/*
 * WPForms zet zelf grid-template-columns op de lijst, met hogere specificiteit.
 * Vandaar div.wpforms-container in de selector plus !important.
 */
.pc-formulier div.wpforms-container .wpforms-form .wpforms-field-radio ul,
.pc-formulier div.wpforms-container .wpforms-form .wpforms-field-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
	gap: 6px !important;
}

/* Naam, telefoon en e-mail naast elkaar in plaats van onder elkaar. */
@media (min-width: 700px) {

	.pc-formulier .wpforms-container .wpforms-form {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 1rem;
	}

	.pc-formulier .wpforms-container .wpforms-field-container {
		display: contents;
	}

	.pc-formulier .wpforms-container .wpforms-field {
		grid-column: 1 / -1;
	}

	.pc-formulier .wpforms-container .wpforms-field-name,
	.pc-formulier .wpforms-container .wpforms-field-text,
	.pc-formulier .wpforms-container .wpforms-field-email {
		grid-column: span 1;
	}

	.pc-formulier .wpforms-container .wpforms-submit-container {
		grid-column: 1 / -1;
	}
}

/*
 * WPForms zet het bolletje en het label als BROERS in de li, niet genest.
 * Daarom is de li het aanklikbare vlak, niet het label. Anders zweeft het
 * bolletje buiten het kader en krimpt het vak mee met de tekstlengte.
 */
.pc-formulier .wpforms-container .wpforms-field-radio li,
.pc-formulier .wpforms-container .wpforms-field-checkbox li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.24);
	border-radius: 2px;
	background: rgba(20, 18, 16, 0.4);
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

.pc-formulier .wpforms-container .wpforms-field-radio li:hover,
.pc-formulier .wpforms-container .wpforms-field-checkbox li:hover {
	border-color: rgba(var(--pc-gold-rgb), 0.55);
	background: rgba(var(--pc-gold-rgb), 0.07);
}

.pc-formulier .wpforms-container .wpforms-field-radio li label,
.pc-formulier .wpforms-container .wpforms-field-checkbox li label {
	display: block;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pc-sans);
	font-size: 0.82rem;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	color: var(--pc-cream) !important;
	cursor: pointer;
}

.pc-formulier .wpforms-container input[type="radio"],
.pc-formulier .wpforms-container input[type="checkbox"] {
	appearance: none;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.55);
	background: transparent;
	cursor: pointer;
	position: relative;
}

.pc-formulier .wpforms-container input[type="radio"] {
	border-radius: 50%;
}

.pc-formulier .wpforms-container input[type="radio"]:checked::after,
.pc-formulier .wpforms-container input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--pc-gold);
}

.pc-formulier .wpforms-container input[type="radio"]:checked::after {
	border-radius: 50%;
}

/* Aangevinkte optie duidelijk markeren. */
.pc-formulier .wpforms-container li:has(input:checked) {
	border-color: var(--pc-gold);
	background: rgba(var(--pc-gold-rgb), 0.12);
}

.pc-formulier .wpforms-container .wpforms-field-description {
	font-family: var(--pc-sans);
	font-size: 0.72rem;
	color: var(--pc-mut);
	margin-bottom: 0.5rem;
}

.pc-formulier .wpforms-error,
.pc-formulier label.wpforms-error {
	color: #e2a08a;
	font-family: var(--pc-sans);
	font-size: 0.75rem;
}

.pc-formulier .wpforms-confirmation-container-full {
	background: rgba(var(--pc-gold-rgb), 0.12);
	border: 1px solid rgba(var(--pc-gold-rgb), 0.4);
	color: var(--pc-cream);
	font-family: var(--pc-sans);
	font-size: 0.85rem;
}

/* Bestandsupload van foto's van de bestaande situatie. */
.pc-formulier .wpforms-uploader,
.pc-formulier .dz-message {
	background: rgba(20, 18, 16, 0.55);
	border: 1px dashed rgba(var(--pc-gold-rgb), 0.35);
	color: var(--pc-mut);
	font-family: var(--pc-sans);
	font-size: 0.8rem;
}

/* ==========================================================================
   Tarieven en 3D
   ========================================================================== */

.pc-tarief-intro {
	font-family: var(--pc-sans);
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--pc-mut);
	max-width: 62ch;
	margin: 0 0 1.75rem;
}

.pc-tarieftabel {
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.28);
}

.pc-tariefrij {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 1.25rem;
	align-items: baseline;
	padding: 1.15rem 0;
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.28);
}

/* Het nultarief is het verkoopargument, dus krijgt nadruk. */
.pc-tariefrij.is-uitgelicht {
	background: rgba(var(--pc-gold-rgb), 0.07);
	padding-inline: clamp(0.75rem, 2vw, 1.25rem);
	margin-inline: clamp(-0.75rem, -2vw, -1.25rem);
}

.pc-tarief-cijfer {
	font-family: var(--pc-serif);
	font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
	line-height: 1;
	color: var(--pc-gold);
}

.pc-tariefrij.is-uitgelicht .pc-tarief-cijfer {
	color: var(--pc-gold-soft);
}

.pc-tarief-tekst {
	font-family: var(--pc-sans);
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--pc-cream);
}

.pc-tarief-voet {
	font-family: var(--pc-sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--pc-mut);
	margin: 1.25rem 0 0;
	max-width: 62ch;
}

@media (max-width: 600px) {

	.pc-tariefrij {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}
}

/* --- Btw-blok ------------------------------------------------------------ */

.pc-btwblok {
	display: flex;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	align-items: flex-start;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: rgba(255, 255, 255, 0.038);
	border: 1px solid rgba(var(--pc-gold-rgb), 0.22);
	border-radius: 2px;
}

.pc-btwblok .pc-icon-wrap--groot {
	width: 52px;
	height: 52px;
	border-color: rgba(var(--pc-gold-rgb), 0.45);
	background: rgba(var(--pc-gold-rgb), 0.07);
	color: var(--pc-gold);
	flex: 0 0 auto;
}

.pc-btwblok .pc-icon-wrap--groot .pc-icon {
	width: 26px;
	height: 26px;
}

.pc-btw-titel {
	font-family: var(--pc-serif);
	font-weight: 400;
	font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
	line-height: 1.3;
	color: var(--pc-cream);
	margin: 0 0 0.6rem;
}

.pc-btw-tekst {
	font-family: var(--pc-sans);
	font-size: 0.85rem;
	line-height: 1.75;
	color: var(--pc-mut);
	margin: 0;
	max-width: 68ch;
}

/*
 * Links in de lopende tekst erven anders de themakleur en vallen weg op de
 * donkere grond. Ze waren pas zichtbaar bij hover.
 */
.pc-btw-tekst a,
.pc-tarief-voet a,
.pc-tarief-intro a,
.pc-tijdlijn-tekst a,
.pc-tijdlijn-feiten a,
.pc-waarom-lijn a,
.pc-vraag p a,
.pc-index-lijn a {
	color: var(--pc-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.25s ease;
}

.pc-btw-tekst a:hover,
.pc-tarief-voet a:hover,
.pc-tarief-intro a:hover,
.pc-tijdlijn-tekst a:hover,
.pc-tijdlijn-feiten a:hover,
.pc-waarom-lijn a:hover,
.pc-vraag p a:hover,
.pc-index-lijn a:hover {
	color: var(--pc-cream);
}

/* --- Stappenplan met tijdlijn -------------------------------------------- */

.pc-stappenplan {
	margin-top: clamp(3rem, 7vw, 6rem);
}

.pc-tijdlijn {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.pc-tijdlijn-stap {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	padding: 0 0 clamp(2rem, 4vw, 3rem) 0;
}

@media (min-width: 768px) {

	.pc-tijdlijn-stap {
		grid-template-columns: 92px 1fr;
		gap: clamp(1.5rem, 3vw, 2.5rem);
		padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
	}

	/* Ruggengraat: flauwe lijn als basis. */
	.pc-tijdlijn-stap::before {
		content: "";
		position: absolute;
		left: 27px;
		top: 3.2rem;
		bottom: 0;
		width: 1px;
		background: rgba(var(--pc-gold-rgb), 0.18);
	}

	/* Gouden lijn die van boven naar beneden invult zodra de stap in beeld komt. */
	.pc-tijdlijn-stap::after {
		content: "";
		position: absolute;
		left: 27px;
		top: 3.2rem;
		bottom: 0;
		width: 1px;
		background: var(--pc-gold);
		transform: scaleY(0);
		transform-origin: top center;
		transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.pc-tijdlijn-stap.is-bereikt::after {
		transform: scaleY(1);
	}

	.pc-tijdlijn-stap:last-child::before,
	.pc-tijdlijn-stap:last-child::after {
		display: none;
	}
}

/* Het cijfer kleurt mee in zodra de stap bereikt is. */
.pc-tijdlijn-nr {
	transition: border-color 0.6s ease, background-color 0.6s ease, color 0.6s ease;
}

.pc-tijdlijn-stap.is-bereikt .pc-tijdlijn-nr {
	border-color: var(--pc-gold);
	background: rgba(var(--pc-gold-rgb), 0.14);
	color: var(--pc-gold-soft);
}

.pc-tijdlijn-stap .pc-tijdlijn-titel,
.pc-tijdlijn-stap .pc-tijdlijn-tekst,
.pc-tijdlijn-stap .pc-tijdlijn-feiten {
	opacity: 0.55;
	transition: opacity 0.7s ease;
}

.pc-tijdlijn-stap.is-bereikt .pc-tijdlijn-titel,
.pc-tijdlijn-stap.is-bereikt .pc-tijdlijn-tekst,
.pc-tijdlijn-stap.is-bereikt .pc-tijdlijn-feiten {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.pc-tijdlijn-stap::after {
		transform: scaleY(1);
	}

	.pc-tijdlijn-stap .pc-tijdlijn-titel,
	.pc-tijdlijn-stap .pc-tijdlijn-tekst,
	.pc-tijdlijn-stap .pc-tijdlijn-feiten {
		opacity: 1;
	}
}

.pc-tijdlijn-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.45);
	background: var(--pc-bg);
	border-radius: 50%;
	font-family: var(--pc-serif);
	font-size: 1.1rem;
	color: var(--pc-gold);
	position: relative;
	z-index: 1;
}

.pc-tijdlijn-titel {
	font-family: var(--pc-serif);
	font-weight: 400;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
	line-height: 1.25;
	color: var(--pc-cream);
	margin: 0.35rem 0 0.5rem;
}

.pc-tijdlijn-tekst {
	font-family: var(--pc-sans);
	font-size: 0.85rem;
	line-height: 1.75;
	color: var(--pc-mut);
	margin: 0 0 1.25rem;
	max-width: 66ch;
}

/* Drie vaste feiten per stap: wat krijgt u, kan u stoppen, wat betaalt u. */
.pc-tijdlijn-feiten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	margin: 0;
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.2);
	padding-top: 1rem;
}

@media (min-width: 900px) {

	.pc-tijdlijn-feiten {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(1rem, 2vw, 2rem);
	}
}

.pc-tijdlijn-feiten dt {
	font-family: var(--pc-sans);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--pc-gold-rgb), 0.85);
	margin-bottom: 0.35rem;
}

.pc-tijdlijn-feiten dd {
	margin: 0;
	font-family: var(--pc-sans);
	font-size: 0.8rem;
	line-height: 1.65;
	color: var(--pc-cream);
}

/* --- Maatwerk ------------------------------------------------------------ */

.pc-maatwerk {
	margin-top: clamp(3rem, 7vw, 6rem);
}

.pc-maatwerk-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (min-width: 768px) {

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

.pc-maatwerk-lijn {
	font-family: var(--pc-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(var(--pc-gold-rgb), 0.8);
	margin: clamp(2rem, 4vw, 3rem) 0 1rem;
}

/* Aanpasbare eigenschappen als icoonraster, veel leesbaarder dan losse pillen. */
.pc-aanpasbaar {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.2);
	padding-top: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 700px) {

	.pc-aanpasbaar {
		grid-template-columns: repeat(4, 1fr);
	}
}

.pc-aanpasbaar-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
}

.pc-aanpasbaar-item .pc-icon-wrap {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-color: rgba(var(--pc-gold-rgb), 0.4);
	color: var(--pc-gold);
}

.pc-aanpasbaar-item .pc-icon {
	width: 21px;
	height: 21px;
}

.pc-aanpasbaar-tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pc-aanpasbaar-tekst strong {
	font-family: var(--pc-serif);
	font-weight: 400;
	font-size: 1.02rem;
	line-height: 1.2;
	color: var(--pc-cream);
}

.pc-aanpasbaar-tekst em {
	font-family: var(--pc-sans);
	font-style: normal;
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--pc-mut);
	margin-top: 0.2rem;
}

/* De voetnoot onder de tijdlijn mag de volle breedte gebruiken. */
.pc-stappenplan .pc-tarief-voet {
	max-width: none;
}

/* Losse plaatjes met de aanpasbare eigenschappen. */
.pc-chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.pc-chips li {
	font-family: var(--pc-sans);
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--pc-cream);
	padding: 9px 16px;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.28);
	border-radius: 999px;
	background: rgba(var(--pc-gold-rgb), 0.05);
}

/* --- Van 3D naar plan naar realisatie ------------------------------------ */

.pc-keten {
	margin-top: clamp(3rem, 7vw, 6rem);
}

.pc-keten-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2.5vw, 2rem);
}

@media (min-width: 768px) {

	.pc-keten-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.pc-keten-stap {
	margin: 0;
}

.pc-keten-stap .mag-img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.pc-keten-stap figcaption {
	display: block;
	padding-top: 0.9rem;
}

.pc-keten-stap figcaption strong {
	display: block;
	font-family: var(--pc-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
	margin-bottom: 0.4rem;
}

.pc-keten-stap figcaption span {
	display: block;
	font-family: var(--pc-sans);
	font-size: 0.82rem;
	line-height: 1.7;
	color: var(--pc-mut);
	max-width: 46ch;
}

.pc-keten-noot {
	font-family: var(--pc-sans);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--pc-mut);
	margin: 1.25rem 0 0;
}

.pc-keten .pc-related-grid {
	margin-top: 1rem;
}

/* --- Veelgestelde vragen ------------------------------------------------- */

.pc-faq {
	margin-top: clamp(3rem, 7vw, 6rem);
}

.pc-vraag {
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.22);
}

.pc-vraag summary {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 2.5rem 1.15rem 0;
	font-family: var(--pc-serif);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
	line-height: 1.35;
	color: var(--pc-cream);
	transition: color 0.3s ease;
}

.pc-vraag summary::-webkit-details-marker {
	display: none;
}

.pc-vraag summary:hover {
	color: var(--pc-gold-soft);
}

/* Plusteken dat kantelt bij openen. */
.pc-vraag summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 13px;
	height: 1px;
	background: var(--pc-gold);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-vraag summary::before {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 1px;
	height: 13px;
	margin-top: -6px;
	background: var(--pc-gold);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-vraag[open] summary::before {
	opacity: 0;
	transform: rotate(90deg);
}

.pc-vraag p {
	font-family: var(--pc-sans);
	font-size: 0.85rem;
	line-height: 1.8;
	color: var(--pc-mut);
	margin: 0 0 1.4rem;
	max-width: 74ch;
}

/* --- Waarom-band (tussen de ruimtes) ------------------------------------- */

/*
 * Eigen paneel met een lichte opklaring, zodat de band echt uit de pagina komt
 * in plaats van weg te vallen in het donker.
 */
.pc-waarom {
	background: rgba(255, 255, 255, 0.038);
	border: 1px solid rgba(var(--pc-gold-rgb), 0.2);
	border-radius: 2px;
	padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
}

.pc-waarom-kop {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.pc-waarom-eyebrow {
	font-family: var(--pc-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--pc-gold);
	margin: 0 0 0.75rem;
}

.pc-waarom-titel-groot {
	font-family: var(--pc-serif);
	font-weight: 400;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
	line-height: 1.2;
	color: var(--pc-cream);
	margin: 0;
}

.pc-waarom-titel-groot::after {
	content: "";
	display: block;
	width: 58px;
	height: 1px;
	margin: 1.1rem auto 0;
	background: rgba(var(--pc-gold-rgb), 0.6);
}

/*
 * Vast op drie kolommen vanaf tablet: zes tegels vallen dan in twee volle rijen.
 * Met automatisch vullende kolommen wordt het op een breed scherm vijf, en dan
 * blijft er één tegel alleen achter op de laatste rij.
 */
.pc-waarom-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 721px) {

	.pc-waarom-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/*
	 * Bij vier tegels twee kolommen: drie op de eerste rij en een wees op de
	 * tweede laat een gat vallen. Twee rijen van twee vullen netjes uit.
	 */
	.pc-waarom-grid--duo {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 4vw, 4rem);
	}
}

.pc-waarom-tegel {
	text-align: left;
}

/* Extra klasse in de selector, anders overschrijft de latere basisregel dit weer. */
.pc-waarom .pc-icon-wrap--groot {
	width: 52px;
	height: 52px;
	margin-bottom: 1rem;
	border-color: rgba(var(--pc-gold-rgb), 0.45);
	background: rgba(var(--pc-gold-rgb), 0.07);
	color: var(--pc-gold);
}

.pc-waarom .pc-icon-wrap--groot .pc-icon {
	width: 26px;
	height: 26px;
}

.pc-waarom-titel {
	font-family: var(--pc-serif);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--pc-cream);
	margin: 0 0 0.4rem;
}

.pc-waarom-lijn {
	font-family: var(--pc-sans);
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--pc-mut);
	margin: 0;
}

.pc-waarom-actie {
	margin-top: clamp(2rem, 4vw, 3rem);
	justify-content: center;
}

/* --- Afsluiter in twee kolommen ------------------------------------------ */

.pc-cta {
	margin-top: clamp(3.5rem, 9vw, 7rem);
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.3);
	padding-top: 3rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 768px) {

	.pc-cta {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	}
}

.pc-cta-tekst {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}

/* Drie cijferblokken uit het contract. */
.pc-troeven {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.pc-troef {
	border: 1px solid rgba(var(--pc-gold-rgb), 0.22);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	display: flex;
	flex-direction: column;
}

.pc-troef-cijfer {
	font-family: var(--pc-serif);
	font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
	line-height: 1;
	color: var(--pc-gold);
	margin: 0;
}

.pc-troef-label {
	font-family: var(--pc-sans);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
	margin: 0.5rem 0 1rem;
}

.pc-troef-uitleg {
	font-family: var(--pc-sans);
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--pc-mut);
	margin: 0;
}

.pc-cta h2 {
	font-family: var(--pc-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
	color: var(--pc-cream);
	margin: 0;
}

.pc-cta-line {
	font-family: var(--pc-sans);
	color: var(--pc-mut);
	margin: 0;
	max-width: 52ch;
	line-height: 1.7;
	font-size: 0.9rem;
}

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

.pc-btn {
	display: inline-block;
	font-family: var(--pc-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 1.89px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 22px;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.22);
	border-radius: 2px;
	color: var(--pc-gold);
	background: transparent;
	transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-btn:hover {
	background: var(--pc-gold);
	border-color: var(--pc-gold);
	color: var(--pc-bg);
}

/* Gevulde knop: één duidelijke eerste actie per blok. */
.pc-btn--solid {
	background: var(--pc-gold);
	border-color: var(--pc-gold);
	color: var(--pc-bg);
}

.pc-btn--solid:hover {
	background: var(--pc-gold-soft);
	border-color: var(--pc-gold-soft);
}

.pc-btn--ghost {
	color: var(--pc-cream);
}

/* --- Oproep halverwege --------------------------------------------------- */

.pc-midcta {
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.28);
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.28);
	padding: clamp(2rem, 4vw, 3rem) 0;
	max-width: 52ch;
	margin-inline: auto;
	text-align: center;
}

.pc-midcta-title {
	font-family: var(--pc-serif);
	font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
	line-height: 1.3;
	color: var(--pc-cream);
	margin: 0 0 0.75rem;
}

.pc-midcta-line {
	font-family: var(--pc-sans);
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--pc-mut);
	margin: 0 0 1.6rem;
}

.pc-midcta .pc-cta-actions {
	justify-content: center;
}

/* --- Argumenten in de afsluiter ------------------------------------------ */

.pc-cta-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.pc-cta-points li {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-family: var(--pc-sans);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--pc-cream);
}

/* Icoon in een cirkel met dunne gouden rand, zodat de rij rustig blijft. */
.pc-icon-wrap {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.32);
	border-radius: 50%;
	color: var(--pc-gold-soft);
	transition: border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-cta-points li:hover .pc-icon-wrap {
	border-color: rgba(var(--pc-gold-rgb), 0.7);
	color: var(--pc-gold);
}

.pc-icon {
	display: block;
}

.pc-troef-tekst {
	padding-top: 0.55rem;
}

.pc-cta-points a {
	color: var(--pc-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pc-cta-foot {
	font-family: var(--pc-sans);
	font-size: 0.8rem;
	line-height: 1.7;
	color: var(--pc-mut);
	margin: 0.5rem 0 0;
}

.pc-cta-foot a {
	color: var(--pc-gold-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (min-width: 721px) and (max-width: 1024px) {

	.pc-section {
		padding: 2rem 0 4rem;
	}

	/* 21:9 is te vlak op een tablet; 16:9 houdt het beeld leesbaar. */
	.pc-hero img {
		aspect-ratio: 16 / 9;
	}

	.pc-hero-body {
		padding: 28px;
	}

	.mag-lead {
		margin-top: 3rem;
	}

	.pc-waarom-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.pc-troeven {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Ook op een tablet bedien je met je vinger, dus hetzelfde tikdoel. */
	.pc-btn {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==========================================================================
   Mobiel
   ========================================================================== */

@media (max-width: 720px) {

	.pc-section {
		padding: 1.25rem 0 3rem;
	}

	/* Broodkruimel op één regel die je opzij kan schuiven, in plaats van vijf regels. */
	.pc-kruimels {
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
		font-size: 10px;
		letter-spacing: 0.14em;
		margin-bottom: 0.9rem;
		padding-bottom: 2px;
	}

	.pc-kruimels::-webkit-scrollbar {
		display: none;
	}

	.pc-hero-body {
		padding: 18px 16px 20px;
	}

	.pc-title--hero {
		font-size: clamp(1.45rem, 6.4vw, 1.9rem);
		line-height: 1.2;
	}

	.pc-hero-body .mag-kicker {
		font-size: 10px;
		margin-bottom: 0.55rem;
	}

	.mag-lead {
		margin-top: 2rem;
	}

	.mag-standfirst {
		font-size: 1.2rem;
		line-height: 1.4;
		max-width: none;
	}

	.mag-lead-body,
	.mag-roomtext {
		max-width: none;
	}

	.mag-lead-rail {
		margin-top: 2rem;
	}

	/* Twee per rij: zes onder elkaar maakt de band eindeloos lang. */
	.pc-waarom {
		padding: 1.75rem 1.25rem;
	}

	.pc-waarom-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 1rem;
	}

	.pc-waarom .pc-icon-wrap--groot {
		width: 42px;
		height: 42px;
		margin-bottom: 0.7rem;
	}

	.pc-waarom .pc-icon-wrap--groot .pc-icon {
		width: 21px;
		height: 21px;
	}

	.pc-waarom-titel {
		font-size: 1rem;
	}

	.pc-waarom-lijn {
		font-size: 0.75rem;
	}

	/*
	 * Drie blokken passen niet naast elkaar op 375px, en twee plus een wees
	 * laat een gat. Dus elk blok over de volle breedte, maar horizontaal
	 * opgebouwd: cijfer links, uitleg rechts. Rustig en zonder leegte.
	 */
	.pc-troeven {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.pc-troef {
		display: grid;
		grid-template-columns: 78px 1fr;
		grid-template-areas:
			"cijfer uitleg"
			"label  uitleg";
		column-gap: 1.1rem;
		border: 0;
		border-top: 1px solid rgba(var(--pc-gold-rgb), 0.22);
		padding: 1.15rem 0;
	}

	.pc-troef:last-child {
		border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.22);
	}

	.pc-troef-cijfer {
		grid-area: cijfer;
		font-size: 1.9rem;
	}

	.pc-troef-label {
		grid-area: label;
		margin: 0.3rem 0 0;
	}

	.pc-troef-uitleg {
		grid-area: uitleg;
		align-self: start;
	}

	.pc-stalen {
		grid-template-columns: repeat(3, 1fr);
	}

	.pc-staal figcaption {
		font-size: 9.5px;
		letter-spacing: 0.1em;
	}

	/* Tikdoel van minstens 48px, anders mis je de knop met je duim. */
	.pc-btn {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 12px 24px;
	}

	.pc-cta-actions {
		width: 100%;
	}

	.pc-cta-actions .pc-btn {
		flex: 1 1 auto;
		text-align: center;
	}

	.mag-quote p {
		font-size: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pc-section * {
		transition: none !important;
	}
}

/* ============================================================
   Uitvoeringsplan bij een kamer
   Plannen staan op wit papier. Een lichte kaart op de donkere
   pagina leest beter dan een plan dat in de achtergrond wegvalt.
   ============================================================ */

.pc-plan {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	align-items: center;
	margin-top: clamp(2rem, 5vw, 4rem);
	padding: clamp(1.1rem, 2.4vw, 2rem);
	background: rgba(244, 239, 230, 0.05);
	border: 1px solid rgba(var(--pc-gold-rgb), 0.22);
}

.pc-plan-beeld {
	margin: 0;
	background: #fff;
	padding: clamp(0.6rem, 1.4vw, 1.1rem);
}

.pc-plan-beeld img {
	display: block;
	width: 100%;
	height: auto;
}

.pc-plan-kicker {
	margin: 0 0 0.55rem;
	font-family: var(--pc-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
}

.pc-plan-titel {
	margin: 0 0 0.7rem;
	font-family: var(--pc-serif);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--pc-cream);
}

.pc-plan-lijn {
	margin: 0 0 1rem;
	font-family: var(--pc-sans);
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(244, 239, 230, 0.8);
}

.pc-plan-lijst {
	margin: 0 0 1.35rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.pc-plan-lijst li {
	position: relative;
	padding-left: 1.4rem;
	font-family: var(--pc-sans);
	font-size: 0.88rem;
	line-height: 1.6;
	color: rgba(244, 239, 230, 0.74);
}

.pc-plan-lijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.6rem;
	height: 1px;
	background: var(--pc-gold);
}

/* Kleuren en stoffen: echte vlakken, geen namen die je moet raden. */
.pc-kleuren-kop {
	margin: 0 0 0.7rem;
	font-family: var(--pc-sans);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(244, 239, 230, 0.55);
}

.pc-kleurenrij {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: 0.85rem;
}

.pc-kleur-vlak {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 0.4rem;
	border: 1px solid rgba(244, 239, 230, 0.16);
}

.pc-kleur-naam {
	display: block;
	font-family: var(--pc-sans);
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--pc-cream);
}

.pc-kleur-rol {
	display: block;
	font-family: var(--pc-sans);
	font-size: 0.66rem;
	line-height: 1.35;
	color: rgba(244, 239, 230, 0.5);
}

@media (max-width: 860px) {
	.pc-plan {
		grid-template-columns: 1fr;
		gap: 1.35rem;
	}
}

/* ============================================================
   Portfolio: rijen met beeld en tekst, om de beurt gespiegeld
   ============================================================ */

.pc-rijen {
	display: grid;
	gap: clamp(3rem, 7vw, 6.5rem);
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.pc-rij {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
}

.pc-rij.is-omgekeerd .pc-rij-beeld {
	order: 2;
}

.pc-rij-beeld {
	display: block;
	position: relative;
	overflow: hidden;
	background: rgba(244, 239, 230, 0.04);
}

.pc-rij-beeld img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-rij:hover .pc-rij-beeld img,
.pc-rij:focus-within .pc-rij-beeld img {
	transform: scale(1.03);
}

/* Dunne gouden lijn die meegroeit bij hover: rustiger dan een kader. */
.pc-rij-beeld::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: var(--pc-gold);
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-rij:hover .pc-rij-beeld::after,
.pc-rij:focus-within .pc-rij-beeld::after {
	width: 100%;
}

.pc-rij-tekst {
	max-width: 34rem;
}

.pc-rij-nr {
	margin: 0 0 0.9rem;
	font-family: var(--pc-serif);
	font-size: clamp(2rem, 4.5vw, 3.1rem);
	line-height: 1;
	color: rgba(var(--pc-gold-rgb), 0.32);
}

.pc-rij-eyebrow {
	margin: 0 0 0.6rem;
	font-family: var(--pc-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
}

.pc-rij-punt {
	margin: 0 0.4em;
	color: rgba(var(--pc-gold-rgb), 0.55);
}

.pc-rij-titel {
	margin: 0 0 0.8rem;
	font-family: var(--pc-serif);
	font-size: clamp(1.5rem, 3vw, 2.35rem);
	font-weight: 400;
	line-height: 1.16;
}

.pc-rij-titel a {
	color: var(--pc-cream);
	text-decoration: none;
	background-image: linear-gradient(var(--pc-gold), var(--pc-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-rij-titel a:hover,
.pc-rij-titel a:focus-visible {
	background-size: 100% 1px;
}

.pc-rij-lijn {
	margin: 0 0 1.15rem;
	font-family: var(--pc-sans);
	font-size: 0.95rem;
	line-height: 1.75;
	color: rgba(244, 239, 230, 0.72);
}

.pc-rij-link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--pc-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
}

.pc-rij-link::after {
	content: "";
	width: 1.9rem;
	height: 1px;
	background: currentColor;
	transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-rij:hover .pc-rij-link::after,
.pc-rij:focus-within .pc-rij-link::after {
	width: 3.1rem;
}

/* Tablet: beeld blijft breder dan de tekst, maar de kolommen komen dichter. */
@media (max-width: 1080px) {
	.pc-rij {
		grid-template-columns: 6fr 5fr;
		gap: clamp(1.25rem, 3vw, 2.25rem);
	}
}

/* Mobiel: beeld boven, tekst onder. Spiegeling vervalt. */
@media (max-width: 760px) {
	.pc-rij,
	.pc-rij.is-omgekeerd {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}

	.pc-rij.is-omgekeerd .pc-rij-beeld {
		order: 0;
	}

	.pc-rijen {
		gap: clamp(2.5rem, 9vw, 3.5rem);
	}

	.pc-rij-nr {
		margin-bottom: 0.5rem;
		font-size: 1.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-rij-beeld img,
	.pc-rij-beeld::after,
	.pc-rij-link::after,
	.pc-rij-titel a {
		transition: none;
	}
}

/* Twee plannen naast elkaar (gelijkvloers en verdieping). */
.pc-plan-beelden.is-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(0.6rem, 1.4vw, 1.1rem);
}

.pc-plan.is-breed {
	grid-template-columns: 8fr 4fr;
}

@media (max-width: 860px) {
	.pc-plan.is-breed {
		grid-template-columns: 1fr;
	}

	.pc-plan-beelden.is-duo {
		grid-template-columns: 1fr;
	}
}

/* Het thema zet een kleinere root op mobiel, waardoor rem-maten te klein
   uitvallen. Leesteksten daarom in px vastzetten. */
@media (max-width: 760px) {
	.pc-rij-lijn {
		font-size: 15px;
		line-height: 1.7;
	}

	.pc-rij-titel {
		font-size: 24px;
	}

	.pc-rij-eyebrow {
		font-size: 11px;
	}

	.pc-rij-link {
		font-size: 11px;
	}

	.pc-plan-lijn {
		font-size: 15px;
	}

	.pc-plan-lijst li {
		font-size: 14px;
	}

	.pc-plan-titel {
		font-size: 21px;
	}

	.pc-kleur-naam {
		font-size: 12px;
	}

	.pc-kleur-rol {
		font-size: 11px;
	}
}

/* Een plan van 300 px breed leest niemand. Tik erop voor het volle formaat. */
.pc-plan-beeld a {
	display: block;
	position: relative;
	color: inherit;
	text-decoration: none;
}

.pc-plan-vergroot {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	padding: 0.42em 0.85em;
	background: rgba(26, 24, 22, 0.86);
	color: var(--pc-cream);
	font-family: var(--pc-sans);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.pc-plan-beeld a:hover .pc-plan-vergroot,
.pc-plan-beeld a:focus-visible .pc-plan-vergroot {
	opacity: 1;
}

/* Op touch bestaat hover niet, dus daar staat het label er altijd op. */
@media (hover: none) {
	.pc-plan-vergroot {
		opacity: 1;
		font-size: 11px;
	}
}

/* Inhoudstafel in de rail: springen naar een ruimte. */
.pc-inhoud {
	display: grid;
	gap: 0.1rem;
	margin-bottom: 1.35rem;
}

.pc-inhoud-link {
	display: block;
	padding: 0.42rem 0;
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.14);
	font-family: var(--pc-sans);
	font-size: 0.82rem;
	line-height: 1.35;
	color: rgba(244, 239, 230, 0.78);
	text-decoration: none;
	transition: color 0.3s ease, padding-left 0.3s ease;
}

.pc-inhoud-link:hover,
.pc-inhoud-link:focus-visible {
	padding-left: 0.45rem;
	color: var(--pc-gold-soft);
}

.pc-inhoud-link:last-child {
	border-bottom: 0;
}

/* De vaste kopbalk van het thema mag de aankomst niet afsnijden. */
.mag-room[id] {
	scroll-margin-top: 6rem;
}

@media (max-width: 760px) {
	.pc-inhoud {
		grid-template-columns: 1fr 1fr;
		gap: 0 0.9rem;
	}

	.pc-inhoud-link {
		font-size: 13px;
	}
}

/* ============================================================
   Hover: één duidelijke reactie per link, niet vijf halve
   ============================================================ */

/* Projectrij: titel wordt goud, streep loopt onder de titel door,
   het volgnummer licht op en de pijl schuift uit. */
.pc-rij:hover .pc-rij-titel a,
.pc-rij:focus-within .pc-rij-titel a {
	color: var(--pc-gold-soft);
	background-size: 100% 1px;
}

.pc-rij-nr {
	transition: color 0.45s ease;
}

.pc-rij:hover .pc-rij-nr,
.pc-rij:focus-within .pc-rij-nr {
	color: rgba(var(--pc-gold-rgb), 0.72);
}

.pc-rij-link {
	transition: color 0.35s ease, letter-spacing 0.45s ease;
}

.pc-rij:hover .pc-rij-link,
.pc-rij:focus-within .pc-rij-link {
	color: var(--pc-cream);
	letter-spacing: 0.22em;
}

/* Beeld iets rustiger inzoomen dan eerst, met een warme sluier eroverheen. */
.pc-rij-beeld::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(var(--pc-gold-rgb), 0);
	transition: background 0.5s ease;
	pointer-events: none;
}

.pc-rij:hover .pc-rij-beeld::before,
.pc-rij:focus-within .pc-rij-beeld::before {
	background: rgba(var(--pc-gold-rgb), 0.08);
}

/* Toetsenbordgebruikers moeten zien waar ze staan. */
.pc-rij-titel a:focus-visible,
.pc-inhoud-link:focus-visible,
.pc-filter:focus-visible {
	outline: 2px solid var(--pc-gold-soft);
	outline-offset: 4px;
}

/* Filterknoppen: vullen op in plaats van alleen van kleur wisselen. */
.pc-filter {
	position: relative;
	overflow: hidden;
	transition: color 0.35s ease, border-color 0.35s ease;
}

.pc-filter::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pc-gold);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-filter:hover::before,
.pc-filter:focus-visible::before {
	transform: scaleY(1);
}

.pc-filter:hover,
.pc-filter:focus-visible {
	color: var(--pc-bg);
	border-color: var(--pc-gold);
}

.pc-filter.is-actief::before {
	transform: scaleY(1);
}

/* Inhoudstafel: streepje dat vooruit schuift, duidelijker dan enkel kleur. */
.pc-inhoud-link {
	position: relative;
}

.pc-inhoud-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 1px;
	background: var(--pc-gold);
	transform: translateY(-50%);
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-inhoud-link:hover::before,
.pc-inhoud-link:focus-visible::before {
	width: 0.28rem;
}

.pc-inhoud-link:hover,
.pc-inhoud-link:focus-visible {
	padding-left: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
	.pc-rij-nr,
	.pc-rij-link,
	.pc-rij-beeld::before,
	.pc-filter::before,
	.pc-inhoud-link::before {
		transition: none;
	}
}

/* ============================================================
   Ruimtebalk: sprongkoppen over de volle breedte, met iconen
   ============================================================ */

.pc-ruimtes {
	margin: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem);
	padding: clamp(1.4rem, 3vw, 2.4rem) 0;
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.22);
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.22);
}

.pc-ruimtes-kop {
	margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
	font-family: var(--pc-sans);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
}

.pc-ruimtes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1px;
	background: rgba(var(--pc-gold-rgb), 0.16);
	border: 1px solid rgba(var(--pc-gold-rgb), 0.16);
}

.pc-ruimte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding: clamp(1rem, 2.2vw, 1.5rem) 0.6rem;
	background: var(--pc-bg);
	text-align: center;
	text-decoration: none;
	transition: background 0.4s ease;
}

.pc-ruimte-icoon svg {
	display: block;
	width: 34px;
	height: 34px;
	stroke: var(--pc-gold);
	stroke-width: 1;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-ruimte-naam {
	font-family: var(--pc-sans);
	font-size: 0.82rem;
	line-height: 1.3;
	color: var(--pc-cream);
	transition: color 0.4s ease;
}

.pc-ruimte-meta {
	font-family: var(--pc-sans);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	color: rgba(244, 239, 230, 0.45);
}

.pc-ruimte:hover,
.pc-ruimte:focus-visible {
	background: rgba(var(--pc-gold-rgb), 0.1);
}

.pc-ruimte:hover .pc-ruimte-icoon svg,
.pc-ruimte:focus-visible .pc-ruimte-icoon svg {
	stroke: var(--pc-gold-soft);
	transform: translateY(-2px);
}

.pc-ruimte:hover .pc-ruimte-naam,
.pc-ruimte:focus-visible .pc-ruimte-naam {
	color: var(--pc-gold-soft);
}

.pc-ruimte:focus-visible {
	outline: 2px solid var(--pc-gold-soft);
	outline-offset: -2px;
}

@media (max-width: 640px) {
	.pc-ruimtes-grid {
		grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	}

	.pc-ruimte {
		padding: 0.9rem 0.4rem;
	}

	.pc-ruimte-icoon svg {
		width: 26px;
		height: 26px;
	}

	.pc-ruimte-naam {
		font-size: 12px;
	}

	.pc-ruimte-meta {
		font-size: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-ruimte,
	.pc-ruimte-icoon svg,
	.pc-ruimte-naam {
		transition: none;
	}
}

/* ============================================================
   Lichtbak
   ============================================================ */

figure.is-zoombaar {
	position: relative;
	cursor: zoom-in;
}

figure.is-zoombaar img {
	cursor: zoom-in;
}

.pc-lichtbak {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(14, 13, 12, 0.96);
}

.pc-lichtbak.is-open {
	display: flex;
}

.pc-lb-kader {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.pc-lb-kader img {
	max-width: min(1500px, 92vw);
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.pc-lb-kader figcaption {
	max-width: 46rem;
	font-family: var(--pc-sans);
	font-size: 0.86rem;
	line-height: 1.6;
	text-align: center;
	color: rgba(244, 239, 230, 0.78);
}

.pc-lb-sluit,
.pc-lb-vorige,
.pc-lb-volgende {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: rgba(244, 239, 230, 0.06);
	border: 1px solid rgba(var(--pc-gold-rgb), 0.3);
	color: var(--pc-cream);
	font-family: var(--pc-sans);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.pc-lb-sluit:hover,
.pc-lb-vorige:hover,
.pc-lb-volgende:hover {
	background: rgba(var(--pc-gold-rgb), 0.22);
	border-color: var(--pc-gold);
}

.pc-lb-sluit {
	top: clamp(0.75rem, 2.5vw, 1.75rem);
	right: clamp(0.75rem, 2.5vw, 1.75rem);
}

.pc-lb-vorige {
	left: clamp(0.5rem, 2vw, 1.75rem);
	top: 50%;
	transform: translateY(-50%);
}

.pc-lb-volgende {
	right: clamp(0.5rem, 2vw, 1.75rem);
	top: 50%;
	transform: translateY(-50%);
}

.pc-lb-teller {
	position: absolute;
	left: 50%;
	bottom: clamp(0.6rem, 2vw, 1.4rem);
	margin: 0;
	transform: translateX(-50%);
	font-family: var(--pc-sans);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	color: rgba(244, 239, 230, 0.5);
}

/* Het label op de plannen wordt overbodig zodra alles klikbaar is. */
.pc-plan-vergroot {
	display: none;
}

/* ============================================================
   Mobiel: 76 foto's onder elkaar werd 54 schermen scrollen.
   De kleine blokken blijven daarom ook op een telefoon naast
   elkaar staan; enkel de grote beelden lopen over de volle breedte.
   ============================================================ */

@media (max-width: 760px) {
	.mag-a figcaption {
		font-size: 13px;
		line-height: 1.55;
	}

	.mag-blk {
		margin-top: 0.9rem;
	}

	/* De ruimtebalk mag wat royaler: dit is de kaart van de pagina. */
	.pc-ruimtes-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.pc-ruimte {
		position: relative;
		padding: 1.1rem 0.35rem 0.95rem;
	}

	.pc-ruimte::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 0;
		height: 2px;
		background: var(--pc-gold);
		transform: translateX(-50%);
		transition: width 0.35s ease;
	}

	.pc-ruimte:hover::before,
	.pc-ruimte:focus-visible::before {
		width: 60%;
	}

	.pc-ruimte-icoon svg {
		width: 30px;
		height: 30px;
	}

	.pc-ruimte-naam {
		font-size: 11.5px;
		line-height: 1.25;
	}
}

/* Heel smalle toestellen: twee kolommen leest beter dan drie. */
@media (max-width: 380px) {
	.pc-ruimtes-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   Rustiger ritme en warmer goud
   Meer lucht tussen de beelden, tekst met een gouden ondertoon
   in plaats van vlak wit.
   ============================================================ */

.mag-flow .mag-blk {
	margin-top: clamp(2.5rem, 6vw, 6rem);
}

.mag-flow .mag-blk.mag-bleed {
	margin-top: clamp(3.5rem, 8vw, 8rem);
	margin-bottom: clamp(1rem, 2.5vw, 2rem);
}

.mag-room {
	margin-top: clamp(4rem, 10vw, 9rem);
}

/* Bijschriften: goud, kleiner, met meer letterafstand. Piet Boon houdt die
   bewust klein zodat het beeld het werk doet. */
.mag-cap {
	margin-top: 0.9rem;
	font-family: var(--pc-sans);
	font-size: 0.78rem;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: var(--pc-gold-soft);
	max-width: 46ch;
}

/* Lopende tekst een warme ondertoon geven in plaats van koel wit. */
.mag-roomtext p,
.mag-lead-body p,
.pc-materialen .mag-roomtext p {
	color: #ded2bd;
}

.mag-standfirst {
	color: #f0e6d5;
}

.room-label {
	color: var(--pc-cream);
}

.pc-facts li {
	color: #d6c8b1;
}

.pc-plan-lijn,
.pc-plan-lijst li {
	color: #d6c8b1;
}

/* Zacht verschijnen bij het scrollen. Alleen actief wanneer het script
   draait; zonder JavaScript staat alles gewoon zichtbaar. */
.mcs-onthult .mcs-verschijnt {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.mcs-onthult .mcs-verschijnt.is-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mcs-onthult .mcs-verschijnt {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Eén bijschriftmaat op de hele pagina, ongeacht het blok waarin het staat.
   In px, omdat het thema op mobiel een kleinere root gebruikt. */
.mag-cap,
.mag-a .mag-cap,
.mag-b .mag-cap,
.mag-f .mag-cap,
.ba-note {
	font-size: 14px;
	line-height: 1.7;
}

@media (max-width: 760px) {
	.mag-cap,
	.mag-a .mag-cap,
	.mag-b .mag-cap,
	.mag-f .mag-cap,
	.ba-note {
		font-size: 13px;
	}
}

/* ============================================================
   Bijschrift in de linkermarge, met een fijne gouden lijn
   Om de beurt; de andere blijven onder het beeld staan.
   ============================================================ */

.mag-a.heeft-zijschrift {
	display: grid;
	grid-template-columns: minmax(8rem, 1.6fr) minmax(0, 7fr);
	gap: clamp(1.25rem, 3vw, 2.75rem);
	align-items: center;
}

.mag-a.heeft-zijschrift .mag-img {
	grid-column: 2;
	grid-row: 1;
}

.mag-a.heeft-zijschrift .mag-cap {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	margin: 0;
	padding-left: clamp(0.9rem, 1.6vw, 1.4rem);
	border-left: 1px solid rgba(var(--pc-gold-rgb), 0.55);
	max-width: 28ch;
}

/* Onder 900 px is de marge te smal voor tekst; dan weer onder het beeld. */
@media (max-width: 900px) {
	.mag-a.heeft-zijschrift {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mag-a.heeft-zijschrift .mag-img {
		grid-column: 1;
		grid-row: 1;
	}

	.mag-a.heeft-zijschrift .mag-cap {
		grid-column: 1;
		grid-row: 2;
		margin-top: 0.9rem;
		padding-left: 0.9rem;
		max-width: 46ch;
	}
}

/* ============================================================
   Uitnodigingen onderweg. Drie stuks over de pagina, elk met
   een eigen boodschap. Bewust smal, zodat ze het beeldritme
   onderbreken zonder het te verdringen.
   ============================================================ */

.pc-onderbreking {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.25rem, 3vw, 3rem);
	align-items: center;
	margin-top: clamp(3rem, 7vw, 6rem);
	padding: clamp(1.5rem, 3.5vw, 2.75rem) 0;
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.28);
	border-bottom: 1px solid rgba(var(--pc-gold-rgb), 0.28);
}

.pc-onderbreking.is-gevuld {
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
	background: rgba(var(--pc-gold-rgb), 0.07);
	border: 1px solid rgba(var(--pc-gold-rgb), 0.26);
}

.pc-onderbreking-kicker {
	margin: 0 0 0.5rem;
	font-family: var(--pc-sans);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pc-gold-soft);
}

.pc-onderbreking-titel {
	margin: 0 0 0.65rem;
	font-family: var(--pc-serif);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--pc-cream);
}

.pc-onderbreking-lijn {
	margin: 0;
	max-width: 52ch;
	font-family: var(--pc-sans);
	font-size: 15px;
	line-height: 1.7;
	color: #ded2bd;
}

.pc-onderbreking-knop {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.95em 1.6em;
	border: 1px solid var(--pc-gold);
	font-family: var(--pc-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pc-cream);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	transition: color 0.35s ease;
}

.pc-onderbreking-knop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--pc-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-onderbreking-knop::after {
	content: "";
	width: 1.5rem;
	height: 1px;
	background: currentColor;
	transition: width 0.4s ease;
}

.pc-onderbreking-knop:hover,
.pc-onderbreking-knop:focus-visible {
	color: var(--pc-bg);
}

.pc-onderbreking-knop:hover::before,
.pc-onderbreking-knop:focus-visible::before {
	transform: scaleX(1);
}

.pc-onderbreking-knop:hover::after,
.pc-onderbreking-knop:focus-visible::after {
	width: 2.4rem;
}

@media (max-width: 720px) {
	.pc-onderbreking {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	.pc-onderbreking-knop {
		justify-content: center;
		font-size: 11px;
	}

	.pc-onderbreking-titel {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-onderbreking-knop,
	.pc-onderbreking-knop::before,
	.pc-onderbreking-knop::after {
		transition: none;
	}
}

/* Bijschrift in het wit, met de kern in goud. */
.mag-cap,
.mag-a .mag-cap,
.mag-b .mag-cap,
.mag-f .mag-cap {
	color: #ece4d6;
}

.pc-accent {
	color: var(--pc-gold-soft);
}

.mag-a.heeft-zijschrift .mag-cap {
	color: #ece4d6;
}

/* ============================================================
   Doorverwijzing naar de webshop, per ruimte
   ============================================================ */

.pc-winkel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem 1.35rem;
	margin-top: clamp(1rem, 2.5vw, 1.6rem);
	padding-top: 0.9rem;
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.2);
	max-width: 62ch;
}

.pc-winkel-kop {
	font-family: var(--pc-sans);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(244, 239, 230, 0.5);
}

.pc-winkel-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.15rem;
}

.pc-winkel-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--pc-sans);
	font-size: 14px;
	color: var(--pc-gold-soft);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-winkel-link:hover,
.pc-winkel-link:focus-visible {
	background-size: 100% 1px;
}

.pc-winkel-link svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	stroke-width: 1.4;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.7;
	transition: transform 0.35s ease;
}

.pc-winkel-link:hover svg,
.pc-winkel-link:focus-visible svg {
	transform: translate(1px, -1px);
}

@media (max-width: 720px) {
	.pc-winkel {
		gap: 0.5rem 1rem;
	}

	.pc-winkel-link {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-winkel-link,
	.pc-winkel-link svg {
		transition: none;
	}
}

/* ============================================================
   Projectformulier in stappen
   ============================================================ */

.pc-formulier form.is-stapsgewijs .mcs-stap[hidden] {
	display: none;
}

.mcs-voortgang {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.mcs-bol {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
}

.mcs-bol i {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: rgba(var(--pc-gold-rgb), 0.25);
}

.mcs-bol b {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.4);
	background: var(--pc-bg);
	font-family: var(--pc-sans);
	font-size: 0.74rem;
	font-weight: 600;
	color: rgba(244, 239, 230, 0.55);
	transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.mcs-bol.is-nu b {
	background: var(--pc-gold);
	border-color: var(--pc-gold);
	color: var(--pc-bg);
}

.mcs-bol.is-gedaan b {
	border-color: var(--pc-gold);
	color: var(--pc-gold-soft);
}

.mcs-bol:last-child {
	flex: 0 0 auto;
}

.mcs-knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.25rem;
	margin-top: clamp(1.25rem, 3vw, 2rem);
	padding-top: clamp(1rem, 2.5vw, 1.5rem);
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.2);
}

.mcs-melding {
	flex: 1;
	margin: 0;
	font-family: var(--pc-sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--pc-gold-soft);
}

.mcs-terug,
.mcs-verder {
	padding: 0.9em 1.7em;
	border: 1px solid var(--pc-gold);
	background: transparent;
	font-family: var(--pc-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pc-cream);
	cursor: pointer;
	transition: background 0.35s ease, color 0.35s ease;
}

.mcs-verder {
	order: 3;
	margin-left: auto;
	background: var(--pc-gold);
	color: var(--pc-bg);
}

.mcs-terug:hover,
.mcs-verder:hover {
	background: var(--pc-gold-soft);
	color: var(--pc-bg);
}

.mcs-terug[hidden],
.mcs-verder[hidden] {
	display: none;
}

/* Even oplichten wanneer er nog niets is aangeduid. */
.mcs-stap.is-fout .wpforms-field-required > label,
.mcs-stap.is-fout .wpforms-field-required > .wpforms-field-label {
	color: var(--pc-gold-soft);
}

.mcs-stap.is-fout ul {
	animation: mcs-wiebel 0.4s ease;
}

@keyframes mcs-wiebel {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* De sublabels Voornaam en Achternaam stonden bijna zwart op zwart. */
.pc-formulier .wpforms-field-sublabel,
.pc-formulier .wpforms-field-description {
	color: rgba(244, 239, 230, 0.62) !important;
	font-size: 12px !important;
	letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
	.mcs-stap.is-fout ul {
		animation: none;
	}

	.mcs-bol b,
	.mcs-terug,
	.mcs-verder {
		transition: none;
	}
}

/* ============================================================
   Stapsgewijs formulier: het driekoloms raster van hierboven
   gold voor één lange lijst. Met stappen moet elke stap zijn
   eigen raster zijn, anders belanden de bolletjes en de knoppen
   als kolom naast de vragen.
   ============================================================ */

@media (min-width: 700px) {

	.pc-formulier .wpforms-container .wpforms-form.is-stapsgewijs {
		display: block;
	}

	.pc-formulier .wpforms-container .wpforms-form.is-stapsgewijs .wpforms-field-container {
		display: block;
	}

	.pc-formulier form.is-stapsgewijs .mcs-stap {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 1rem;
	}

	.pc-formulier form.is-stapsgewijs .mcs-stap > .wpforms-field {
		grid-column: 1 / -1;
	}

	/* Naam, e-mail en telefoon mogen wel naast elkaar. */
	.pc-formulier form.is-stapsgewijs .mcs-stap > .wpforms-field-name,
	.pc-formulier form.is-stapsgewijs .mcs-stap > .wpforms-field-email,
	.pc-formulier form.is-stapsgewijs .mcs-stap > .wpforms-field-text {
		grid-column: span 1;
	}

	.pc-formulier form.is-stapsgewijs .mcs-stap > .wpforms-field-textarea {
		grid-column: 1 / -1;
	}
}

.pc-formulier form.is-stapsgewijs .mcs-voortgang,
.pc-formulier form.is-stapsgewijs .mcs-knoppen {
	grid-column: 1 / -1;
	width: 100%;
}

.pc-formulier form.is-stapsgewijs .wpforms-submit-container {
	grid-column: 1 / -1;
	margin-top: 1.25rem;
}

/* De bolletjes stonden verspreid over de volle breedte. */
.mcs-voortgang {
	max-width: 22rem;
}

/* ============================================================
   Het thema reset knoppen en inline-elementen binnen formulieren
   met hoge voorrang. Daarom hier nadrukkelijk.
   ============================================================ */

.pc-formulier .wpforms-container .mcs-voortgang {
	display: flex !important;
	align-items: center !important;
	max-width: 20rem !important;
	margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem) !important;
	padding: 0 !important;
}

.pc-formulier .wpforms-container .mcs-bol {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.pc-formulier .wpforms-container .mcs-bol:last-child {
	flex: 0 0 auto !important;
}

.pc-formulier .wpforms-container .mcs-bol i {
	position: absolute !important;
	left: 1rem !important;
	right: 0 !important;
	top: 50% !important;
	width: auto !important;
	height: 1px !important;
	background: rgba(var(--pc-gold-rgb), 0.25) !important;
	font-style: normal !important;
}

.pc-formulier .wpforms-container .mcs-bol b {
	position: relative !important;
	z-index: 1 !important;
	display: grid !important;
	place-items: center !important;
	flex: 0 0 auto !important;
	width: 2.2rem !important;
	min-width: 2.2rem !important;
	height: 2.2rem !important;
	border-radius: 50% !important;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.45) !important;
	background: var(--pc-bg) !important;
	font-family: var(--pc-sans) !important;
	font-size: 0.76rem !important;
	font-weight: 600 !important;
	color: rgba(244, 239, 230, 0.6) !important;
	padding: 0 !important;
}

.pc-formulier .wpforms-container .mcs-bol.is-nu b {
	background: var(--pc-gold) !important;
	border-color: var(--pc-gold) !important;
	color: var(--pc-bg) !important;
}

.pc-formulier .wpforms-container .mcs-bol.is-gedaan b {
	border-color: var(--pc-gold) !important;
	color: var(--pc-gold-soft) !important;
}

.pc-formulier .wpforms-container .mcs-knoppen {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.9rem 1.25rem !important;
	width: 100% !important;
	margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
	padding-top: clamp(1rem, 2.5vw, 1.5rem) !important;
	border-top: 1px solid rgba(var(--pc-gold-rgb), 0.2) !important;
}

.pc-formulier .wpforms-container button.mcs-terug,
.pc-formulier .wpforms-container button.mcs-verder {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	min-height: 0 !important;
	padding: 0.95em 1.9em !important;
	border: 1px solid var(--pc-gold) !important;
	border-radius: 0 !important;
	font-family: var(--pc-sans) !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background 0.35s ease, color 0.35s ease !important;
}

.pc-formulier .wpforms-container button.mcs-terug {
	background: transparent !important;
	color: var(--pc-cream) !important;
}

.pc-formulier .wpforms-container button.mcs-verder {
	order: 3 !important;
	margin-left: auto !important;
	background: var(--pc-gold) !important;
	color: var(--pc-bg) !important;
}

.pc-formulier .wpforms-container button.mcs-terug:hover,
.pc-formulier .wpforms-container button.mcs-verder:hover {
	background: var(--pc-gold-soft) !important;
	color: var(--pc-bg) !important;
}

.pc-formulier .wpforms-container button.mcs-terug[hidden],
.pc-formulier .wpforms-container button.mcs-verder[hidden] {
	display: none !important;
}

.pc-formulier .wpforms-container .mcs-melding {
	flex: 1 1 12rem !important;
	margin: 0 !important;
	font-family: var(--pc-sans) !important;
	font-size: 13px !important;
	color: var(--pc-gold-soft) !important;
}

/* Wat lucht tussen de voortgangsbalk en de eerste vraag. */
.pc-formulier form.is-stapsgewijs .mcs-stap > .wpforms-field:first-child {
	margin-top: 0 !important;
}

/* ============================================================
   Formulier: opmaak volgens de vaste richtlijnen
   Raakvlak minstens 48 px, 8 px-ritme, zichtbare focus,
   gelijke keuzekaarten en een voortgangsbalk met namen.
   ============================================================ */

/* --- Voortgang met stapnamen --------------------------------- */

.pc-formulier .wpforms-container .mcs-voortgang {
	max-width: none !important;
	gap: 0 !important;
	margin-bottom: 2rem !important;
}

.pc-formulier .wpforms-container .mcs-bol {
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
	padding-right: 1rem !important;
	border-top: 2px solid rgba(var(--pc-gold-rgb), 0.2) !important;
	padding-top: 0.75rem !important;
	transition: border-color 0.35s ease !important;
}

.pc-formulier .wpforms-container .mcs-bol.is-nu,
.pc-formulier .wpforms-container .mcs-bol.is-gedaan {
	border-top-color: var(--pc-gold) !important;
}

.pc-formulier .wpforms-container .mcs-bol b {
	width: 1.75rem !important;
	min-width: 1.75rem !important;
	height: 1.75rem !important;
	font-size: 0.7rem !important;
}

.pc-formulier .wpforms-container .mcs-bol em {
	display: block !important;
	font-family: var(--pc-sans) !important;
	font-style: normal !important;
	font-size: 12px !important;
	line-height: 1.35 !important;
	letter-spacing: 0.04em !important;
	color: rgba(244, 239, 230, 0.5) !important;
}

.pc-formulier .wpforms-container .mcs-bol.is-nu em {
	color: var(--pc-cream) !important;
}

/* De verbindingslijn verdwijnt; de balk erboven doet dat werk nu. */
.pc-formulier .wpforms-container .mcs-bol i {
	display: none !important;
}

@media (max-width: 560px) {
	.pc-formulier .wpforms-container .mcs-bol em {
		display: none !important;
	}

	.pc-formulier .wpforms-container .mcs-bol.is-nu em {
		display: block !important;
	}
}

/* --- Keuzekaarten: gelijke hoogte, ruim aanklikbaar ----------- */

.pc-formulier .wpforms-container ul li {
	display: flex !important;
	align-items: center !important;
	gap: 0.85rem !important;
	min-height: 60px !important;
	padding: 0.85rem 1rem !important;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.28) !important;
	background: rgba(244, 239, 230, 0.03) !important;
	cursor: pointer !important;
	transition: border-color 0.3s ease, background 0.3s ease !important;
}

.pc-formulier .wpforms-container ul li:hover {
	border-color: rgba(var(--pc-gold-rgb), 0.6) !important;
	background: rgba(var(--pc-gold-rgb), 0.07) !important;
}

/* Aangeduid: rand en tint, niet alleen het bolletje. */
.pc-formulier .wpforms-container ul li:has( input:checked ) {
	border-color: var(--pc-gold) !important;
	background: rgba(var(--pc-gold-rgb), 0.13) !important;
}

.pc-formulier .wpforms-container ul li:has( input:focus-visible ) {
	outline: 2px solid var(--pc-gold-soft) !important;
	outline-offset: 2px !important;
}

.pc-formulier .wpforms-container ul li label {
	flex: 1 !important;
	margin: 0 !important;
	font-family: var(--pc-sans) !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: var(--pc-cream) !important;
	cursor: pointer !important;
}

.pc-formulier .wpforms-container ul li input[type="radio"],
.pc-formulier .wpforms-container ul li input[type="checkbox"] {
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	accent-color: var(--pc-gold) !important;
	cursor: pointer !important;
}

/* --- Invoervelden -------------------------------------------- */

.pc-formulier .wpforms-container input[type="text"],
.pc-formulier .wpforms-container input[type="email"],
.pc-formulier .wpforms-container input[type="tel"],
.pc-formulier .wpforms-container textarea {
	min-height: 52px !important;
	padding: 0.8rem 1rem !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: var(--pc-cream) !important;
	background: rgba(244, 239, 230, 0.04) !important;
	border: 1px solid rgba(var(--pc-gold-rgb), 0.28) !important;
	border-radius: 0 !important;
	transition: border-color 0.3s ease, background 0.3s ease !important;
}

.pc-formulier .wpforms-container textarea {
	min-height: 120px !important;
}

.pc-formulier .wpforms-container input:focus,
.pc-formulier .wpforms-container textarea:focus {
	border-color: var(--pc-gold) !important;
	background: rgba(var(--pc-gold-rgb), 0.07) !important;
	outline: 2px solid rgba(var(--pc-gold-rgb), 0.35) !important;
	outline-offset: 1px !important;
}

.pc-formulier .wpforms-container .wpforms-field-label {
	display: block !important;
	margin-bottom: 0.6rem !important;
	font-family: var(--pc-sans) !important;
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--pc-gold-soft) !important;
}

/* --- Knoppen: minstens 48 px hoog ---------------------------- */

.pc-formulier .wpforms-container button.mcs-terug,
.pc-formulier .wpforms-container button.mcs-verder,
.pc-formulier .wpforms-container .wpforms-submit {
	min-height: 52px !important;
	padding: 0 2rem !important;
}

.pc-formulier .wpforms-container button.mcs-terug:focus-visible,
.pc-formulier .wpforms-container button.mcs-verder:focus-visible,
.pc-formulier .wpforms-container .wpforms-submit:focus-visible {
	outline: 2px solid var(--pc-gold-soft) !important;
	outline-offset: 3px !important;
}

/* Melding valt op zonder rood alarm. */
.pc-formulier .wpforms-container .mcs-melding:not(:empty) {
	padding: 0.6rem 0.9rem !important;
	background: rgba(var(--pc-gold-rgb), 0.12) !important;
	border-left: 2px solid var(--pc-gold) !important;
}

@media (prefers-reduced-motion: reduce) {
	.pc-formulier .wpforms-container ul li,
	.pc-formulier .wpforms-container input,
	.pc-formulier .wpforms-container textarea,
	.pc-formulier .wpforms-container .mcs-bol {
		transition: none !important;
	}
}

/* ============================================================
   Keuzerondjes en vakjes zelf tekenen
   Standaard tekent de browser een wit gevulde cirkel op onze
   donkere achtergrond; die leest als "aangeduid" terwijl er nog
   niets gekozen is.
   ============================================================ */

.pc-formulier .wpforms-container ul li input[type="radio"],
.pc-formulier .wpforms-container ul li input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative !important;
	width: 22px !important;
	height: 22px !important;
	min-width: 22px !important;
	background: transparent !important;
	border: 1.5px solid rgba(var(--pc-gold-rgb), 0.55) !important;
	box-shadow: none !important;
	transition: border-color 0.25s ease, background 0.25s ease !important;
}

.pc-formulier .wpforms-container ul li input[type="radio"] {
	border-radius: 50% !important;
}

.pc-formulier .wpforms-container ul li input[type="checkbox"] {
	border-radius: 2px !important;
}

.pc-formulier .wpforms-container ul li:hover input[type="radio"],
.pc-formulier .wpforms-container ul li:hover input[type="checkbox"] {
	border-color: var(--pc-gold) !important;
}

/* Aangeduid: een gouden stip in het rondje. */
.pc-formulier .wpforms-container ul li input[type="radio"]:checked {
	border-color: var(--pc-gold) !important;
}

.pc-formulier .wpforms-container ul li input[type="radio"]:checked::after {
	content: "" !important;
	position: absolute !important;
	inset: 4px !important;
	border-radius: 50% !important;
	background: var(--pc-gold) !important;
}

/* Aangevinkt: gouden vlak met een vinkje erin. */
.pc-formulier .wpforms-container ul li input[type="checkbox"]:checked {
	background: var(--pc-gold) !important;
	border-color: var(--pc-gold) !important;
}

.pc-formulier .wpforms-container ul li input[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute !important;
	left: 7px !important;
	top: 3px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid var(--pc-bg) !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
}

.pc-formulier .wpforms-container ul li input[type="radio"]:focus-visible,
.pc-formulier .wpforms-container ul li input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--pc-gold-soft) !important;
	outline-offset: 2px !important;
}

/* Keuzeteksten even hoog uitlijnen ongeacht het aantal regels. */
.pc-formulier .wpforms-container ul li label {
	display: flex !important;
	align-items: center !important;
	min-height: 2.6em !important;
}

@media (prefers-reduced-motion: reduce) {
	.pc-formulier .wpforms-container ul li input {
		transition: none !important;
	}
}

/* Het thema tekent zelf een wit rondje met blauwe rand via ::before op de
   keuzevelden. Dat leest als aangeduid terwijl er niets gekozen is. Weg ermee;
   wij tekenen het rondje op het invoerveld zelf. */
.pc-formulier .wpforms-container ul li input[type="radio"]::before,
.pc-formulier .wpforms-container ul li input[type="checkbox"]::before {
	content: none !important;
	display: none !important;
	background: none !important;
	border: 0 !important;
}

/* De stip verschijnt uitsluitend bij een gekozen rondje. */
.pc-formulier .wpforms-container ul li input[type="radio"]::after {
	content: none !important;
}

.pc-formulier .wpforms-container ul li input[type="radio"]:checked::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 4px !important;
	top: 4px !important;
	right: 4px !important;
	bottom: 4px !important;
	width: auto !important;
	height: auto !important;
	border-radius: 50% !important;
	background: var(--pc-gold) !important;
	border: 0 !important;
}

.pc-formulier .wpforms-container ul li input[type="checkbox"]::after {
	content: none !important;
}

.pc-formulier .wpforms-container ul li input[type="checkbox"]:checked::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 7px !important;
	top: 3px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid var(--pc-bg) !important;
	border-width: 0 2px 2px 0 !important;
	border-radius: 0 !important;
	background: none !important;
	transform: rotate(45deg) !important;
}

.pc-formulier .wpforms-container ul li input[type="radio"]:checked,
.pc-formulier .wpforms-container ul li input[type="checkbox"]:checked {
	border-color: var(--pc-gold) !important;
}

/* ============================================================
   Lange kamerteksten
   Eén smalle kolom over een volledig scherm leest als een strook.
   Vanaf 520 tekens daarom twee kolommen, zoals in een tijdschrift.
   ============================================================ */

.mag-roomtext {
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.85;
}

.mag-roomtext p {
	margin: 0 0 1.1em;
}

.mag-roomtext p:last-child {
	margin-bottom: 0;
}

@media (min-width: 1000px) {

	.mag-roomtext.is-lang {
		max-width: none;
		columns: 2;
		column-gap: clamp(2.5rem, 5vw, 4.5rem);
		column-fill: balance;
	}

	.mag-roomtext.is-lang p {
		break-inside: avoid-column;
	}

	/* De eerste alinea mag over beide kolommen, als aanloop. */
	.mag-roomtext.is-lang p:first-child {
		column-span: none;
	}
}

@media (max-width: 999px) {
	.mag-roomtext,
	.mag-roomtext.is-lang {
		max-width: 60ch;
		columns: auto;
	}
}

@media (max-width: 640px) {
	.mag-roomtext,
	.mag-roomtext.is-lang {
		font-size: 15px;
		line-height: 1.75;
	}
}