/* ==========================================================================
   Pingwin theme, hoofdstylesheet
   Waarden zijn nagemeten op pingwin.nl (Total theme + WPBakery), 1440px breed.
   Opbouw: tokens, basis, typografie, knoppen, header, secties/banden, blokken,
   footer, overzichten, responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--pw-oranje: #e7773f;        /* knoppen, links, accenten */
	--pw-oranje-fel: #f15829;    /* knoppen (oktober 2026), actieve menu-items, CTA-vlak, oranje koppen */
	--pw-oranje-donker: #d9481c; /* hover van de knoppen */
	--pw-tekst: #181818;
	--pw-kop: #222222;
	--pw-gedempt: #616161;
	--pw-grijs: #f5f6fa;
	--pw-lichtblauw: #e2f0f4;
	--pw-blauw: #acdae4;
	--pw-beige: #dfdddb;
	--pw-donker: #222222;
	--pw-footer-onder: #726658;
	--pw-footer: #000000;        /* footer en de rand van het krimpende vlak erboven */
	--pw-callout: #f7f7f7;
	--pw-teal: #2b7481;
	--pw-wit: #ffffff;

	--pw-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pw-font-handschrift: "Kalam", cursive;

	--pw-container: 1240px;
	--pw-smal: 950px;
	--pw-tekstbreedte: 900px;
	--pw-kolom-padding: 15px;
	--pw-kop-groot: clamp(38px, 31.7px + 1.619vw, 55px); /* grote blokkoppen (FAQ, diensten, portfolio; gewicht 700): 38 px op 390 breed tot 55 px vanaf 1440 breed */
}

/* --------------------------------------------------------------------------
   2. Fonts (self-hosted)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Kalam";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/kalam-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Kalam";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/kalam-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Kalam";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/kalam-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Kalam";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/kalam-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   3. Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--pw-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--pw-tekst);
	background: var(--pw-wit);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
img { vertical-align: middle; }
figure { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

a {
	color: var(--pw-oranje);
	text-decoration: none;
	text-underline-offset: 4px;
}
a:hover { text-decoration: underline; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}
.pw-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 10px 20px;
	background: var(--pw-wit);
}
.pw-skip:focus { left: 10px; top: 10px; }

.pw-container {
	width: 100%;
	max-width: min(var(--pw-container), 90%); /* bron: Total-container 90 % van het venster, maximaal 1240 */
	margin: 0 auto;
}
.pw-smal {
	max-width: var(--pw-smal);
	margin: 0 auto;
	padding: 0 var(--pw-kolom-padding);
}
.pw-kop-midden { text-align: center; }
.pw-intro {
	max-width: var(--pw-tekstbreedte);
	margin: 0 auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 20px;
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: 0.2px;
	color: var(--pw-kop);
}
h1, h2, h3, h4 { word-break: break-word; } /* bron: lange woorden in koppen breken af (mobiel) */
.pw-heel { white-space: nowrap; } /* woorden in een kop bij elkaar houden, bv. <span class="pw-heel">SEO-consultant:</span> (geen afbreking op het koppelteken; het gewone koppelteken blijft staan voor SEO) */
h1 { font-size: 40px; }
h2 { font-size: 30px; }
h3 { font-size: 20px; font-weight: 600; }
h4 { font-size: 22px; letter-spacing: 0; }
h3.pw-kop-groot { font-size: 25px; font-weight: 700; }

p, ul, ol { margin: 0 0 20px; }
.pw-rijk > :last-child { margin-bottom: 0; }
.pw-rijk h1,
.pw-rijk h2,
.pw-rijk h3 { margin-top: 30px; } /* bron: koppen in een tekstkolom hebben 30 px erboven, ook als eerste */
.pw-rijk h3 { font-size: 25px; font-weight: 700; }
.pw-rijk .pw-los { margin-top: 0; } /* kop die in de bron een losse module was */
.pw-rijk .pw-kop-los { margin-top: 0; } /* bron: kopmodule (vcex-heading) zonder marge erboven */
.pw-rijk h3.pw-kop-los { font-size: 20px; font-weight: 600; } /* bron: vcex-heading h3 */
.pw-rijk .pw-oranje { color: var(--pw-oranje-fel); }
/* bron: spacers en kolommarges tussen modules in een tekstblok */
.pw-rijk .pw-mt-5 { margin-top: 5px; }
.pw-rijk .pw-mt-10 { margin-top: 10px; }
.pw-rijk .pw-mt-15 { margin-top: 15px; }
.pw-rijk .pw-mt-20 { margin-top: 20px; }
.pw-rijk > .pw-mb-18:last-child { margin-bottom: 17.5px; } /* bron: onderste padding van een binnenrij met kolomafstand 35 */
.pw-rijk .pw-mt-25 { margin-top: 25px; }
.pw-rijk .pw-mt-30 { margin-top: 30px; }
.pw-rijk .pw-mt-35 { margin-top: 35px; }
.pw-rijk .pw-mt-40 { margin-top: 40px; }
.pw-rijk .pw-mt-45 { margin-top: 45px; }
.pw-rijk .pw-mt-50 { margin-top: 50px; }
.pw-rijk .pw-mt-55 { margin-top: 55px; }
.pw-rijk .pw-mt-60 { margin-top: 60px; }
.pw-rijk .pw-mt-70 { margin-top: 70px; }
.pw-rijk .pw-mt-80 { margin-top: 80px; }
.pw-rijk .pw-mt-90 { margin-top: 90px; }
.pw-rijk .pw-mt-100 { margin-top: 100px; }
.pw-rijk .pw-mt-110 { margin-top: 110px; }
.pw-rijk .pw-mt-120 { margin-top: 120px; }
.pw-rijk .pw-mt-130 { margin-top: 130px; }
.pw-rijk .pw-mt-140 { margin-top: 140px; }
.pw-rijk .pw-mt-150 { margin-top: 150px; }
.pw-rijk .pw-pt-5 { padding-top: 5px; }
.pw-rijk .pw-pt-10 { padding-top: 10px; }
.pw-rijk .pw-pt-15 { padding-top: 15px; }
.pw-rijk .pw-pt-20 { padding-top: 20px; }
.pw-rijk .pw-pt-25 { padding-top: 25px; }
.pw-rijk .pw-pt-30 { padding-top: 30px; }
.pw-rijk .pw-pt-35 { padding-top: 35px; }
.pw-rijk .pw-pt-40 { padding-top: 40px; }
.pw-rijk .pw-pt-45 { padding-top: 45px; }
.pw-rijk .pw-pt-50 { padding-top: 50px; }
.pw-rijk .pw-pt-60 { padding-top: 60px; }
.pw-rijk ul, .pw-rijk ol { padding: 0 0 0 30px; }
.pw-rijk li { margin: 0; }
.pw-rijk li > ul, .pw-rijk li > ol, .pw-rijk li > p { margin-bottom: 0; } /* bron: geneste lijst of alinea's in een lijstregel zonder marge */
b, strong { font-weight: 700; }

.pw-handschrift {
	font-family: var(--pw-font-handschrift);
	font-weight: 700;
	font-size: 50px;
	line-height: 1.2;
	color: var(--pw-teal);
}
.pw-handschrift-licht { /* bron (werkwijze): Kalam 400, 27,5 px, zwart, gecentreerd, zonder marge */
	margin: 0;
	font-family: var(--pw-font-handschrift);
	font-weight: 400;
	font-size: 27.5px;
	line-height: 1.375;
	color: #222222;
}

/* --------------------------------------------------------------------------
   5. Knoppen
   -------------------------------------------------------------------------- */
.pw-knop {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	flex-wrap: wrap; /* de pijl valt op een eigen regel als de tekst afbreekt (zoals de bron) */
	justify-content: center;
	padding: 12px 30px;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.pw-knop:hover { text-decoration: none; }

.pw-knop--vol {
	background: var(--pw-oranje-fel);
	color: var(--pw-wit);
	border: 0;
}
.pw-knop--vol:hover { background: var(--pw-oranje-donker); color: var(--pw-wit); }

.pw-knop--omlijnd-wit {
	font-size: 17px;
	font-weight: 600;
	border: 3px solid var(--pw-wit);
	color: var(--pw-wit);
	background: transparent;
}
.pw-knop--omlijnd-wit:hover { background: var(--pw-wit); color: var(--pw-oranje-fel); }

.pw-knop--omlijnd {
	font-size: 14px;
	font-weight: 600;
	border: 3px solid var(--pw-oranje-fel);
	color: var(--pw-oranje-fel);
	background: transparent;
}
.pw-knop--omlijnd:hover { background: var(--pw-oranje-fel); color: var(--pw-wit); }

/* Knop met pijl (hero) */
.pw-knop--pijl::after {
	content: "";
	display: inline-block;
	width: 12.25px;
	height: 23px; /* regelhoogte, zodat een pijl op een eigen regel even hoog is als een tekstregel */
	margin-left: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/></svg>") center / contain no-repeat;
}

/* Overvloeiende achtergrond (Salient Signal, oktober 2026), alleen voor lichte achtergronden: staat bij een blok
   'Achtergrond laten overvloeien' aan, dan maakt main.js de lichte banden van de pagina doorzichtig (.pw-vloei-doet) en
   krijgt de body de kleur van de band die het meest in beeld is; de body vloeit in 0,8 s over, zoals Signal.
   Zonder JavaScript houdt elk blok gewoon zijn eigen achtergrond. */
body { transition: background-color .8s ease; }
.pw-vloei-aan .pw-vloei-doet { background-color: transparent; }
/* Het krimpende vlak (FAQ) volgt de paginakleur in plaats van zijn eigen kleur, met dezelfde overgang: zo komt het blok
   zonder harde kleurrand in beeld. main.js zet --pw-paginakleur. */
.pw-vloei-aan .pw-sectie.pw-krimp { --pw-krimp-kleur: var(--pw-paginakleur); }
.pw-vloei-aan .pw-krimp::before { transition: background-color .8s ease; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.pw-header-ruimte {
	height: 78px; /* 12 + 54 + 12: de plek van de header, ook als hij vast staat */
	background: var(--pw-wit); /* altijd wit, ook als de pagina-achtergrond meevloeit (oktober 2026) */
}
.pw-header {
	position: relative;
	z-index: 1050;
	padding: 12px 30px;
}
.pw-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 54px; /* zo hoog als de navigatie en de knop: boven en onder dezelfde 12 px */
	padding: 0 20px;
	border-radius: 15px;
}
.pw-logo { display: flex; align-items: center; margin-right: 15px; }
.pw-logo__link { display: block; line-height: 0; }
.pw-logo img { width: 218px; height: auto; }
.pw-logo .pw-logo__beeldmerk { display: none; width: 51px; height: 51px; }
/* Na scrollen alleen het beeldmerk (zoals pingwin.nl: logo-img--sticky) */
.pw-header--vast .pw-logo__volledig { display: none; }
.pw-header--vast .pw-logo .pw-logo__beeldmerk { display: block; }

.pw-nav { margin-left: auto; }
.pw-menu {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 10px;
	list-style: none;
	background: var(--pw-wit);
	border-radius: 30px;
}
.pw-menu > li { position: relative; margin: 0; }
.pw-menu > li > a {
	display: block;
	padding: 17px 22.1px;
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--pw-gedempt);
	text-decoration: none;
	white-space: nowrap;
}
.pw-menu > li:hover > a,
.pw-menu > li.current-menu-item > a,
.pw-menu > li.current-menu-ancestor > a { color: var(--pw-oranje-fel); }

/* Navigatie in het midden, contactknop rechts (oktober 2026). De knop is het laatste hoofditem van het hoofdmenu
   (pw_header_knop_item); het staat daardoor niet meer in de balk. */
@media (min-width: 960px) {
	.pw-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; }
	.pw-logo { justify-self: start; margin-right: 0; }
	.pw-nav { margin-left: 0; }
	.pw-header__knop { justify-self: end; }
}
.pw-header__knop {
	display: inline-flex;
	align-items: center;
	padding: 17px 30px;
	border-radius: 30px;
	background: var(--pw-oranje-fel);
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pw-wit);
	text-decoration: none;
	transition: background .2s ease;
}
.pw-header__knop:hover,
.pw-header__knop:focus,
.pw-header__knop.is-actief { background: var(--pw-oranje-donker); color: var(--pw-wit); text-decoration: none; }

/* Pijltje bij items met submenu */
.pw-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 12px;
	margin-left: 8px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 32'><path d='M18.286 12.571q0 0.464-0.339 0.804l-8 8q-0.339 0.339-0.804 0.339t-0.804-0.339l-8-8q-0.339-0.339-0.339-0.804t0.339-0.804 0.804-0.339h16q0.464 0 0.804 0.339t0.339 0.804z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 32'><path d='M18.286 12.571q0 0.464-0.339 0.804l-8 8q-0.339 0.339-0.804 0.339t-0.804-0.339l-8-8q-0.339-0.339-0.339-0.804t0.339-0.804 0.804-0.339h16q0.464 0 0.804 0.339t0.339 0.804z'/></svg>") center / contain no-repeat;
}

/* Dropdown */
.pw-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10001;
	min-width: 310px;
	max-width: 320px;
	margin: 20px 0 0;
	padding: 20px;
	list-style: none;
	background: var(--pw-wit);
	border: 1px solid #eeeeee;
	border-radius: 30px;
	box-shadow: 0 0 24px 0 rgba(0, 0, 0, .1);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, visibility .2s;
}
/* Onzichtbare brug over de 20px tussen balk en dropdown, zodat de muis niet "valt" */
.pw-menu > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 20px;
}
.pw-menu > li:hover > .sub-menu,
.pw-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.pw-menu .sub-menu li { margin: 0; }
.pw-menu .sub-menu a {
	display: block;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--pw-gedempt);
	text-decoration: none;
}
.pw-menu .sub-menu a:hover,
.pw-menu .sub-menu .current-menu-item > a { color: var(--pw-oranje-fel); }

/* Vaste header na scrollen */
.pw-header--vast {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 12px;
	padding-bottom: 12px;
}
.pw-header--vast .pw-header__inner { background: transparent; }
.pw-header--vast .pw-menu {
	background: #f5f6f8;
	box-shadow: 0 0 25px 1px rgba(94, 98, 119, .2);
}
.pw-header--vast .pw-header__knop { box-shadow: 0 0 25px 1px rgba(94, 98, 119, .2); }
/* Contactknop in de header (oktober 2026): zwart bovenaan, oranje zodra de header vast staat, en weer zwart als hij
   boven een oranje vlak hangt (main.js zet dan .pw-header--op-oranje). */
.pw-header .pw-header__knop { background: #000000; transition: background .3s ease; }
.pw-header .pw-header__knop:hover, .pw-header .pw-header__knop:focus { background: var(--pw-oranje-fel); }
.pw-header--vast .pw-header__knop { background: var(--pw-oranje-fel); }
.pw-header--vast .pw-header__knop:hover, .pw-header--vast .pw-header__knop:focus { background: #000000; }
.pw-header--vast.pw-header--op-oranje .pw-header__knop { background: #000000; }
.pw-header--vast.pw-header--op-oranje .pw-header__knop:hover, .pw-header--vast.pw-header--op-oranje .pw-header__knop:focus { background: var(--pw-oranje-donker); }

/* Mobiele menuknop (pas zichtbaar op kleine schermen) */
.pw-menu-knop {
	display: none;
	width: 50px;
	height: 50px;
	margin: auto 0 auto 25px;
	padding: 0;
	border: 0;
	border-radius: 30px;
	background: var(--pw-wit);
	cursor: pointer;
	position: relative;
}
.pw-menu-knop__balk,
.pw-menu-knop__balk::before,
.pw-menu-knop__balk::after {
	content: "";
	position: absolute;
	left: 15px;
	width: 20px;
	height: 2px;
	background: var(--pw-kop);
}
.pw-menu-knop__balk { top: 24px; }
.pw-menu-knop__balk::before { top: -6px; left: 0; }
.pw-menu-knop__balk::after { top: 6px; left: 0; }

/* Mobiel uitschuifmenu */
.pw-mobiel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1200;
	width: 300px;
	max-width: 85vw;
	padding: 0 0 40px;
	overflow-y: auto;
	background: var(--pw-grijs);
	transform: translateX(-100%);
	transition: transform .3s;
}
.pw-mobiel--open { transform: translateX(0); }
.pw-mobiel[hidden] { display: block; }
.pw-mobiel__top { display: flex; justify-content: flex-end; padding: 10px 15px; }
.pw-mobiel__sluit {
	border: 0;
	background: none;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	color: var(--pw-kop);
}
.pw-mobiel__menu,
.pw-mobiel__menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.pw-mobiel__menu li { border-bottom: 1px solid rgba(0, 0, 0, .06); }
.pw-mobiel__menu a {
	display: block;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--pw-kop);
	text-decoration: none;
}
.pw-mobiel__menu .sub-menu a { padding-left: 35px; font-weight: 400; }
.pw-mobiel__menu .current-menu-item > a { color: var(--pw-oranje-fel); }
.pw-mobiel__achtergrond {
	position: fixed;
	inset: 0;
	z-index: 1150;
	background: rgba(0, 0, 0, .4);
}
.pw-mobiel__achtergrond[hidden] { display: none; }

/* --------------------------------------------------------------------------
   7. Secties en banden
   Elke sectie: <section class="pw-sectie pw-band--kleur" style="--pw-boven;--pw-onder">
   -------------------------------------------------------------------------- */
.pw-sectie {
	position: relative;
	padding: var(--pw-boven, 0) 0 var(--pw-onder, 0);
}
@media (min-width: 768px) and (max-width: 1024px) {
	.pw-sectie { padding-top: var(--pw-boven-t, var(--pw-boven, 0)); } /* bron: tabletspacer (alleen waar ingesteld) */
}
@media (max-width: 767px) {
	.pw-sectie { padding: var(--pw-boven-m, var(--pw-boven, 0)) 0 var(--pw-onder-m, var(--pw-onder, 0)); }
}
.pw-sectie > .pw-container { position: relative; z-index: 1; }
.pw-band--grijs { background: var(--pw-grijs); }
.pw-band--lichtblauw { background: var(--pw-lichtblauw); }
.pw-band--blauw { background: var(--pw-blauw); }
.pw-band--beige { background: var(--pw-beige); }
.pw-band--lichtbeige { background: #f9f8f7; }
.pw-band--ijsblauw { background: #eef6f8; }
.pw-band--zand { background: #eceae8; } /* bron (SEO-consultant): videoband */
.pw-band--lichtzand { background: #f1f0ef; } /* de linkerkant van de hero op home (oktober 2026) */
.pw-band--poolblauw { background: #e8f5f8; } /* bron (Freelance webdesigner) */
.pw-band--antraciet { background: #3f3f3f; } /* bron (casepagina): band achter de schermafbeelding */
.pw-band--zwart { background: var(--pw-footer); color: var(--pw-wit); }
.pw-sectie--tekst.pw-band--zwart :is(h1, h2, h3, h4, h5, h6), .pw-sectie--tekst.pw-band--zwart .pw-rijk { color: var(--pw-wit); } /* tekstblok op zwart (oktober 2026) */
.pw-sectie--tekst.pw-band--zwart .pw-tekst--breed { padding-left: 0; padding-right: 0; }
.pw-sectie--tekst.pw-band--zwart .pw-tekst--breed .pw-rijk { max-width: 900px; } /* brede tekst op zwart: links op de containerlijn, regels niet langer dan 900 px */
.pw-band--oranje { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-band--lichtoranje { background: #fbe9de; } /* oktober 2026: zachte tint van het Pingwin-oranje */

/* Lege blokken in de editor */
.pw-blok-leeg {
	padding: 20px;
	border: 1px dashed #c3c4c7;
	color: #757575;
	text-align: center;
}

/* --------------------------------------------------------------------------
   8. Blok: Hero
   -------------------------------------------------------------------------- */
.pw-sectie--hero { padding: 0; }
.pw-hero {
	--pw-hero-rand: 35px;
	position: relative;
	display: flex;
	min-height: 680px;
	margin: calc(var(--pw-hero-rand) * -1) 0 0; /* het vlak begint direct onder de header */
	padding: 0;
	border: var(--pw-hero-rand) solid transparent;
}
/* Het vlak zelf. Laadt zoals Salient (clip-path-entire-row: start 0, eind 76/30/0/30 rond 20): begint over de volle
   breedte en de volle hoogte, ook achter de header (78 px), zonder hoeken; vervaagt in en krimpt in 1,3 s naar het
   afgeronde vlak onder de header en binnen de witte rand (binnenhoek 15 px = 50 px buitenhoek min 35 px rand). */
.pw-hero::before {
	content: "";
	position: absolute;
	inset: calc(var(--pw-hero-rand) * -1);
	top: calc(var(--pw-hero-rand) * -1 - 78px);
	background: #c7e2eb;
	background: linear-gradient(228deg, #c7e2eb 38%, #f8dabc 80%);
	clip-path: inset(calc(var(--pw-hero-rand) + 78px) var(--pw-hero-rand) var(--pw-hero-rand) round 15px);
	animation: pw-hero-vlak 1.3s cubic-bezier(.25, .1, .18, 1) .1s both;
}
@keyframes pw-hero-vlak {
	from { clip-path: inset(0 round 0); opacity: 0; }
	to { clip-path: inset(calc(var(--pw-hero-rand) + 78px) var(--pw-hero-rand) var(--pw-hero-rand) round 15px); opacity: 1; }
}
/* Zoals Salient start de animatie pas als de pagina geladen is (anders loopt hij al tijdens het laden en zie je hem
   niet): de head zet .pw-js, na het laden komt .pw-klaar (zie pw_hero_start in inc/assets.php). */
.pw-js:not(.pw-klaar) .pw-hero::before,
.pw-js:not(.pw-klaar) .pw-hero__tekst,
.pw-js:not(.pw-klaar) .pw-hero__beeld { animation-play-state: paused; }
/* Daarna komen tekst en beeld 50 px van onderen in beeld (1,7 s, tekst na 0,4 s, beeld na 0,5 s). */
.pw-hero__tekst,
.pw-hero__beeld { animation: pw-hero-in 1.7s cubic-bezier(.33, 1, .68, 1) .4s both; }
.pw-hero__beeld { animation-delay: .5s; }
@keyframes pw-hero-in {
	from { opacity: 0; transform: translateY(50px); }
	to { opacity: 1; transform: none; }
}
.pw-hero__inner {
	position: relative;
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: min(1200px, calc(90% + 23px)); /* bron: kolommen samen 90 % van het venster min 40, maximaal 1200 */
	margin: 0 auto;
}
.pw-hero__tekst,
.pw-hero__beeld {
	position: relative;
	width: 50%;
	flex: 0 0 50%;
}
.pw-hero__tekst {
	z-index: 1;
	padding: 0 var(--pw-kolom-padding) 90px; /* 60 marge + 30 spacer onder; de tekst lijnt onder uit in de 680 px hoge rij */
}
.pw-hero__eyebrow {
	margin-bottom: 10px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.375;
	color: var(--pw-kop);
}
.pw-hero__kop { margin-bottom: 20px; }
.pw-hero__intro { margin-bottom: 40px; }
.pw-hero__knop { margin: 0; }
.pw-hero__beeld { align-self: stretch; }
.pw-hero__beeld::before {
	content: "";
	position: absolute;
	top: -40px;
	right: -320px;
	width: 920px;
	height: 1150px;
	background-image: var(--pw-hero-beeld);
	background-size: 85%;
	background-repeat: no-repeat;
}
/* Opmaak groot (Claude Design "Pingwin hero", variant A met de miniwereld, oktober 2026): alleen een grote H1 met
   daaronder de knop en een tekstlink, verticaal gecentreerd in het vlak; de tekstkolom is breder dan het beeld. */
.pw-hero--groot .pw-hero__inner { align-items: center; max-width: min(var(--pw-container), 90vw); } /* lijnt uit met .pw-container van de rest van de pagina */
.pw-hero--groot .pw-hero__tekst { width: 58%; flex-basis: 58%; padding-left: 0; padding-bottom: 0; }
.pw-hero--groot .pw-hero__beeld { width: 42%; flex-basis: 42%; }
/* De nieuwe miniwereld (miniworld-pinguin.webp) heeft minder lege rand dan de oude png: 76 % en 55/22 px verschoven geeft
   hetzelfde zichtbare formaat en dezelfde plek als de oude miniwereld. */
.pw-hero--groot .pw-hero__beeld::before { background-size: 76%; background-position: 55px 22px; }
.pw-hero--groot .pw-hero__kop { margin: 0 0 52px; font-size: clamp(36px, 4.6vw, 60px); /* drie regels naast het beeld */ font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: #000000; }
.pw-hero--groot .pw-hero__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-hero--groot .pw-hero__intro { max-width: 620px; margin: -24px 0 44px; } /* tekst onder de H1 (oktober 2026) */
.pw-hero--groot .pw-hero__knop { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
/* Op desktop vullen header en hero samen precies één scherm: het volgende blok valt eronder (78 px header,
   plus de WordPress-adminbalk voor ingelogde gebruikers). */
@media (min-width: 960px) {
	.pw-hero--groot { min-height: max(560px, calc(100svh - 78px - var(--pw-adminbalk, 0px) + var(--pw-hero-rand))); }
	body.admin-bar { --pw-adminbalk: 32px; }
	/* Het beeld staat precies in het verticale midden van het vlak, ook als het vlak met het scherm meegroeit. */
	.pw-hero--groot .pw-hero__beeld::before { top: -300px; bottom: -300px; height: auto; background-position: 55px center; }
}
/* Oranje vlak met video rechts (oktober 2026, home versie B): de video ligt in het vlak achter een oranje laag die
   links dicht is en naar rechts doorzichtiger wordt; kop zwart met een witte punt, zoals de oranje oproepblokken. */
.pw-hero--oranje::before { background: var(--pw-oranje-fel); }
.pw-hero__video { /* zelfde vlak en dezelfde inlaadanimatie als .pw-hero::before, zodat de video meteen afgerond in het vlak staat */
	position: absolute;
	inset: calc(var(--pw-hero-rand) * -1);
	top: calc(var(--pw-hero-rand) * -1 - 78px);
	z-index: 0;
	overflow: hidden;
	clip-path: inset(calc(var(--pw-hero-rand) + 78px) var(--pw-hero-rand) var(--pw-hero-rand) round 15px);
	animation: pw-hero-vlak 1.3s cubic-bezier(.25, .1, .18, 1) .1s both;
}
.pw-js:not(.pw-klaar) .pw-hero__video { animation-play-state: paused; }
.pw-hero--video::before { display: none; } /* het vlak zit dan in .pw-hero__video: één laag, dus geen randje tijdens het inladen */
.pw-hero--oranje .pw-hero__video { background: var(--pw-oranje-fel); }
.pw-hero__video video,
.pw-hero__video::after {
	position: absolute;
	top: calc(var(--pw-hero-rand) + 78px);
	right: var(--pw-hero-rand);
	bottom: var(--pw-hero-rand);
	left: calc(var(--pw-hero-rand) + (100% - 2 * var(--pw-hero-rand)) * .38);
}
.pw-hero__video video { display: block; width: calc((100% - 2 * var(--pw-hero-rand)) * .62); height: calc(100% - 2 * var(--pw-hero-rand) - 78px); object-fit: cover; } /* een video rekt niet mee met top/left/right/bottom */
.pw-hero__video::after { content: ""; background: linear-gradient(90deg, var(--pw-oranje-fel) 0%, rgba(241, 88, 41, .82) 35%, rgba(241, 88, 41, .62) 100%); }
.pw-hero--oranje .pw-hero__kop { color: #000000; }
.pw-hero--oranje .pw-hero__kop .pw-oranje { color: var(--pw-wit); }
.pw-hero--oranje .pw-hero__intro { color: var(--pw-wit); }
.pw-hero--oranje .pw-hero__intro a { color: inherit; text-decoration: underline; }
.pw-hero--oranje .pw-knop--vol { background: var(--pw-wit); color: var(--pw-oranje-fel); }
.pw-hero--oranje .pw-knop--vol:hover { background: #000000; color: var(--pw-wit); }
.pw-hero--oranje .pw-hero__link:hover, .pw-hero--oranje .pw-hero__link:focus-visible { color: var(--pw-wit); }
@media (max-width: 959px) {
	.pw-hero__video video,
	.pw-hero__video::after { top: calc(var(--pw-hero-rand) + 78px + (100% - 2 * var(--pw-hero-rand) - 78px) * .45); left: var(--pw-hero-rand); }
	.pw-hero__video video { width: calc(100% - 2 * var(--pw-hero-rand)); height: calc((100% - 2 * var(--pw-hero-rand) - 78px) * .55); }
	.pw-hero__video::after { background: linear-gradient(180deg, var(--pw-oranje-fel) 0%, rgba(241, 88, 41, .65) 100%); }
}
.pw-hero__link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1.5px solid currentColor; font-size: 16px; font-weight: 600; color: #000000; text-decoration: none; transition: color .3s ease; }
.pw-hero__link:hover, .pw-hero__link:focus-visible { color: var(--pw-oranje-fel); text-decoration: none; }
@media (max-width: 959px) {
	.pw-hero--groot .pw-hero__tekst, .pw-hero--groot .pw-hero__beeld { width: 100%; flex-basis: auto; }
	.pw-hero--groot .pw-hero__tekst { padding: 60px 15px 40px; }
	.pw-hero--groot .pw-hero__kop { margin-bottom: 36px; }
}
@media (max-width: 767px) {
	.pw-hero--groot .pw-hero__beeld::before { background-size: 85%; background-position: 20px 8px; } /* zelfde verhouding als op desktop */
}
/* Opmaak gesplitst (home versie B, oktober 2026, naar het aangeleverde ontwerp): twee vlakken over de volle breedte,
   direct onder de header. Links lichtbeige met de tekst, rechts oranje met label, kerncijfer en onderaan de uitgelichte
   case. Bewust uitvullend: geen witte rand, geen afgerond vlak (19 oktober 2026 even met rand en hoeken geprobeerd, teruggezet)
   en geen inlaadanimatie van het vlak; de tekst en het rechter vlak komen wel van onderen in beeld. */
.pw-hero--gesplitst {
	--pw-hero-rand: 0px;
	display: grid;
	grid-template-columns: 63fr 37fr;
	min-height: max(640px, calc(100svh - 78px - var(--pw-adminbalk, 0px)));
	background: #f1f0ef;
}
.pw-hero.pw-hero--gesplitst { margin: 0; padding: 0; border: 0; } /* ook onder 768 px geen rand of binnenmarge van .pw-hero */
.pw-hero--gesplitst::before { display: none; }
.pw-hero--gesplitst .pw-hero__inner { align-items: center; max-width: none; margin: 0; }
.pw-hero--gesplitst .pw-hero__tekst {
	width: 100%;
	flex-basis: auto;
	max-width: 960px;
	margin: 0 auto;
	padding: clamp(36px, 7vh, 90px) 6% clamp(36px, 6vh, 80px);
}
.pw-hero--gesplitst .pw-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(10px, 2vh, 18px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-gedempt);
}
.pw-hero--gesplitst .pw-hero__eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; }
.pw-hero--gesplitst .pw-hero__kop {
	margin: 0 0 clamp(18px, 3.5vh, 32px);
	font-size: clamp(40px, min(4.4vw, 7.6vh), 68px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.03em;
	color: #000000;
}
.pw-hero--gesplitst .pw-hero__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-hero--gesplitst .pw-hero__intro { max-width: 700px; margin: 0 0 clamp(22px, 4vh, 40px); font-size: 17px; line-height: 1.65; color: var(--pw-gedempt); }
.pw-hero--gesplitst .pw-hero__intro a { color: var(--pw-tekst); }
.pw-hero--gesplitst .pw-hero__knop { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.pw-hero--gesplitst .pw-knop--vol { background: #000000; color: var(--pw-wit); }
.pw-hero--gesplitst .pw-knop--vol:hover { background: var(--pw-oranje-fel); color: var(--pw-wit); }
/* Rechter vlak */
.pw-hero__vlak {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 30px 30px 28px;
	background: var(--pw-oranje-fel);
	color: var(--pw-wit);
	animation: pw-hero-in 1.7s cubic-bezier(.33, 1, .68, 1) .5s both;
}
.pw-js:not(.pw-klaar) .pw-hero__vlak { animation-play-state: paused; }
.pw-hero__vlak-kop { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pw-hero__label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pw-hero__cijfer { display: flex; flex-direction: column; gap: 16px; } /* 26 okt 2026: meer lucht tussen cijfer en regel (was 4px) */
.pw-hero__cijfer strong { display: block; font-size: clamp(64px, min(7.4vw, 13vh), 120px); font-weight: 400; line-height: .95; letter-spacing: -.05em; }
.pw-hero__cijfer span { font-size: 13px; font-weight: 500; }
/* Uitgelichte case: lichte kaart met beeld links en tekst rechts; het hele vlak is de link naar de case. */
.pw-hero__case {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 150px;
	overflow: hidden;
	border-radius: 16px; /* zelfde als de dienstentegels (.pw-dicoon__tegel) */
	background: #f9f8f7;
	color: var(--pw-tekst);
	text-decoration: none;
	transition: transform .4s cubic-bezier(.33, 1, .68, 1);
}
.pw-hero__case:hover, .pw-hero__case:focus-visible { transform: translateY(-3px); color: var(--pw-tekst); }
.pw-hero__case-beeld { display: block; overflow: hidden; }
.pw-hero__case-beeld img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; filter: grayscale(1); transition: filter .4s ease; }
.pw-hero__case:hover .pw-hero__case-beeld img { filter: grayscale(0); }
.pw-hero__case-tekst { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 18px; }
.pw-hero__case-label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pw-gedempt); }
.pw-hero__case-kop { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: #000000; }
.pw-hero__case-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 700; }
.pw-hero__case-link svg { width: 12px; height: 12px; }
/* Vanaf 960 px is de hero (met de header) nooit hoger dan het scherm: hij vult het precies; kop, cijfer en
   witruimte schalen mee met de schermhoogte (vh). */
@media (min-width: 960px) {
	.pw-hero--gesplitst { height: calc(100svh - 78px - var(--pw-adminbalk, 0px) - var(--pw-hero-rand)); min-height: 0; }
	.pw-hero--gesplitst .pw-hero__intro { font-size: clamp(15px, 2.1vh, 17px); }
	.pw-hero__case { min-height: min(150px, 18vh); }
}
@media (max-width: 1100px) {
	.pw-hero--gesplitst { grid-template-columns: 58fr 42fr; }
	.pw-hero--gesplitst .pw-hero__tekst { padding: clamp(32px, 6vh, 70px) 5% clamp(32px, 5vh, 60px); }
}
@media (max-width: 959px) {
	.pw-hero--gesplitst { grid-template-columns: 1fr; min-height: 0; }
	.pw-hero--gesplitst .pw-hero__inner { flex-direction: column; }
	.pw-hero--gesplitst .pw-hero__tekst { display: block; padding: 60px 5% 50px; }
	.pw-hero__vlak { gap: 36px; padding: 28px 5% 5%; }
	.pw-hero__cijfer strong { font-size: clamp(64px, 16vw, 96px); }
}
@media (max-width: 479px) {
	.pw-hero__case { grid-template-columns: 1fr; }
	.pw-hero__case-beeld { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   9. Blok: Tekst
   -------------------------------------------------------------------------- */
.pw-tekst { padding: 0 var(--pw-kolom-padding); }
.pw-tekst--smal { max-width: var(--pw-smal); margin: 0 auto; }
.pw-tekst--smal2 { max-width: 915px; margin: 0 auto; padding: 0 25px; } /* bron: smalblok met een binnenrij (gap 35) */
.pw-tekst--tekst { max-width: var(--pw-tekstbreedte); margin: 0 auto; padding: 0 15px; } /* bron: kolom 900, tekst 870 */
.pw-tekst--tekst2 { max-width: var(--pw-tekstbreedte); margin: 0 auto; padding: 17.5px 15px 77.5px; } /* bron: binnenrij (gap 35) in kolom 900: 17,5 boven, 17,5 + 60 onder, tekst 870 */
.pw-tekst--breed { max-width: var(--pw-container); margin: 0 auto; }
.pw-tekst--tekst3 { max-width: var(--pw-tekstbreedte); margin: 0 auto; } /* bron: tekstmodule met max. 900 px (wpex-max-w), ook op mobiel zonder binnenmarge */
/* Tekst, opmaak vlekken (Claude Design "Pingwin tekstblokken", variant 2, oktober 2026): kop links, tekst rechts, en één
   grote zachte kleurvlek achter de tekst die langzaam over de band zwerft (zoals de vlek op de Salient-demo). Het eerste
   blok op de pagina krijgt zachtblauw, elk tweede blok zacht oranje en de vlek aan de andere kant. */
.pw-tvlek { position: relative; overflow: hidden; --pw-vlek-kleur: 172, 218, 228; }
.pw-tvlek--spiegel { --pw-vlek-kleur: 231, 119, 63; }
/* De laag laat de vlek naar boven en onder zacht uitlopen, zodat hij nooit met een harde rand tegen de bandgrens wordt afgesneden. */
.pw-tvlek__laag { position: absolute; inset: 0; pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 75%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 75%, transparent 100%); }
.pw-tvlek__vlek { position: absolute; top: 50%; left: 2%; width: 1000px; height: 680px; margin-top: -340px; border-radius: 50%; pointer-events: none; will-change: transform;
	background: radial-gradient(closest-side, rgba(var(--pw-vlek-kleur), .7) 0%, rgba(var(--pw-vlek-kleur), .42) 40%, rgba(var(--pw-vlek-kleur), 0) 100%);
	filter: blur(30px); animation: pw-tvlek-zwerf 26s ease-in-out infinite; }
.pw-tvlek--spiegel .pw-tvlek__vlek { left: auto; right: 2%; --pw-vlek-r: -1; background: radial-gradient(closest-side, rgba(var(--pw-vlek-kleur), .26) 0%, rgba(var(--pw-vlek-kleur), .14) 40%, rgba(var(--pw-vlek-kleur), 0) 100%); }
@keyframes pw-tvlek-zwerf {
	0%, 100% { transform: translate(0, 0) rotate(-18deg) scale(1); }
	25% { transform: translate(calc(var(--pw-vlek-r, 1) * 14vw), -60px) rotate(8deg) scale(1.1, .9); }
	50% { transform: translate(calc(var(--pw-vlek-r, 1) * 6vw), 90px) rotate(28deg) scale(.92, 1.08); }
	75% { transform: translate(calc(var(--pw-vlek-r, 1) * -6vw), 30px) rotate(-6deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .pw-tvlek__vlek { animation: none; } }
.pw-tvlek__inhoud { position: relative; display: flex; gap: 100px; }
.pw-tvlek__kop { flex: 0 0 440px; }
.pw-tvlek__kop > * { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-tvlek__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-tvlek__tekst { flex: 1 1 auto; min-width: 0; padding-top: 10px; font-size: 17px; line-height: 1.75; }
.pw-tvlek__tekst .pw-rijk > p:first-child { font-size: 21px; line-height: 1.6; color: #000000; }
@media (max-width: 1023px) {
	.pw-tvlek__inhoud { flex-direction: column; gap: 32px; }
	.pw-tvlek__kop { flex-basis: auto; }
}
@media (max-width: 767px) {
	.pw-tvlek__vlek { width: 560px; height: 420px; margin-top: -210px; left: -120px; }
	.pw-tvlek--spiegel .pw-tvlek__vlek { right: -120px; }
	.pw-tvlek__tekst .pw-rijk > p:first-child { font-size: 19px; }
}
/* Waarom Pingwin (Claude Design "Pingwin nieuwe blokken", Waarom Pingwin B, oktober 2026): kop met intro ernaast en
   drie vlakken, zwart met zin en labels, beeld (leeg = blauw) en foto (leeg = beige) met een witte cijferkaart. */
.pw-waarom__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 80px; margin-bottom: 60px; }
.pw-waarom__titel { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-waarom__titel .pw-oranje { color: var(--pw-oranje-fel); }
.pw-waarom__intro { max-width: 460px; color: #616161; }
.pw-waarom__intro > :last-child { margin-bottom: 0; }
.pw-waarom { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; min-height: 520px; }
.pw-waarom__vlak { position: relative; overflow: hidden; border-radius: 16px; }
.pw-waarom__vlak--zwart { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 44px; background: #000000; color: #ffffff; }
.pw-waarom__vlak--blauw { background: var(--pw-blauw); }
.pw-waarom__vlak--beige { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background: var(--pw-beige); }
.pw-waarom__zin { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.35; }
.pw-waarom__labels { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pw-waarom__label { padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 30px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.pw-waarom__label--oranje { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); font-weight: 600; }
.pw-waarom__beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Middenkolom met twee USP-kaarten (oktober 2026): vier vlakken in vier kleuren, zwart, oranje, wit en blauw. */
.pw-waarom__usps { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.pw-waarom__usp { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 32px; }
.pw-waarom__usp--oranje { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-waarom__usp--wit { background: var(--pw-wit); color: #000000; }
.pw-waarom__uspkop { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.15; }
.pw-waarom__usptekst { margin: 0; font-size: 16px; line-height: 1.55; }
.pw-waarom__usp--wit .pw-waarom__usptekst { color: #444444; }
.pw-waarom__vlak--usp { background: var(--pw-blauw); }
.pw-waarom__vlak--usp .pw-waarom__kaart { padding: 8px; background: none; box-shadow: none; }
.pw-waarom__vlak--usp .pw-waarom__cijfer { font-size: 40px; line-height: 1.1; color: #000000; }
.pw-waarom__vlak--usp .pw-waarom__ktekst { font-size: 16px; }
.pw-waarom__labels--donker { margin-top: 14px; }
.pw-waarom__labels--donker .pw-waarom__label { border-color: rgba(0, 0, 0, .3); color: #000000; }
.pw-waarom__kaart { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 12px; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.pw-waarom__cijfer { font-size: 40px; font-weight: 700; line-height: 1; color: var(--pw-oranje-fel); }
.pw-waarom__ktekst { font-size: 15px; line-height: 1.5; color: #222222; }
@media (max-width: 1023px) {
	.pw-waarom__kop { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 40px; }
	.pw-waarom { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
	.pw-waarom__vlak--zwart { grid-column: 1 / -1; }
	.pw-waarom__vlak--blauw, .pw-waarom__vlak--beige { min-height: 360px; }
	.pw-waarom__usps { grid-template-rows: none; }
	.pw-waarom__usp { min-height: 170px; }
}
@media (max-width: 767px) {
	.pw-waarom { grid-template-columns: minmax(0, 1fr); }
	.pw-waarom__vlak--zwart { padding: 30px 24px; }
	.pw-waarom__zin { font-size: 22px; }
	.pw-waarom__vlak--blauw, .pw-waarom__vlak--beige { min-height: 300px; }
}

/* Klantverhalen (Claude Design "Pingwin klantverhalen", variant 3, oktober 2026): twee tegels met de website van de
   klant in een browservenster; vanaf 1024 px met muis schuift het witte paneel bij hover of focus omhoog. */
.pw-kverhalen__kop { display: flex; flex-direction: column; gap: 24px; margin-bottom: 60px; }
.pw-kverhalen__titel { margin: 0; max-width: 1100px; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-kverhalen__titel .pw-oranje { color: var(--pw-oranje-fel); }
.pw-kverhalen__intro { max-width: 760px; }
.pw-kverhalen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.pw-kverhaal { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--pw-blauw); color: #000000; }
.pw-kverhaal--beige { background: var(--pw-beige); }
.pw-kverhaal--lichtblauw { background: var(--pw-lichtblauw); }
.pw-kverhaal--wit { background: var(--pw-wit); }
.pw-kverhaal__venster { display: flex; flex-direction: column; margin: 40px 40px 0; overflow: hidden; border-radius: 14px 14px 0 0; background: var(--pw-wit); box-shadow: 0 30px 60px rgba(0, 0, 0, .12); }
.pw-kverhaal__balk { display: flex; flex: none; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #f1f1f1; }
.pw-kverhaal__balk > span:not(.pw-kverhaal__adres) { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d4; }
.pw-kverhaal__adres { margin-left: 12px; font-size: 12px; color: #5c5c5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-kverhaal__scherm { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fafafa; }
.pw-kverhaal__beeld { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pw-kverhaal__naam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; font-size: 22px; font-weight: 700; text-align: center; }
.pw-kverhaal__paneel { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px 40px 40px; background: var(--pw-wit); }
.pw-kverhaal__boven { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; } /* gelijk met of zonder pijl */
.pw-kverhaal__label { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pw-oranje-fel); }
.pw-kverhaal__pijl { display: flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto; border: 1px solid #c9c9c9; border-radius: 50%; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.pw-kverhaal__kop { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.25; color: #000000; }
.pw-kverhaal__link, .pw-kverhaal__link:hover, .pw-kverhaal__link:focus { color: inherit; text-decoration: none; }
.pw-kverhaal__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* de hele tegel is klikbaar */
.pw-kverhaal__link:focus-visible { outline: none; }
.pw-kverhaal:has(.pw-kverhaal__link:focus-visible) { outline: 2px solid var(--pw-oranje-fel); outline-offset: 4px; }
.pw-kverhaal__tekst a { position: relative; z-index: 2; } /* links in het verhaal blijven klikbaar boven de tegellink */
.pw-kverhaal--link:hover .pw-kverhaal__pijl { background: var(--pw-oranje-fel); border-color: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-kverhaal__klap { display: grid; }
.pw-kverhaal__inhoud { display: flex; min-height: 0; gap: 28px; align-items: flex-start; padding-top: 10px; border-top: 1px solid #e6e6e6; }
.pw-kverhaal__cijfer { flex: none; margin: 0; padding-top: 12px; font-size: 48px; font-weight: 700; line-height: 1; color: #000000; }
.pw-kverhaal__cijfer .pw-oranje { color: var(--pw-oranje-fel); }
.pw-kverhaal__tekst { padding-top: 10px; font-size: 15px; line-height: 1.7; }
.pw-kverhaal__tekst > :last-child { margin-bottom: 0; }
/* Vanaf 1024 px met muis: tegel met vaste hoogte, paneel half weggeschoven; bij hover of focus schuift het omhoog. */
@media (min-width: 1024px) and (hover: hover) {
	.pw-kverhaal { display: block; height: 620px; }
	.pw-kverhaal__venster { position: absolute; top: 60px; right: 60px; left: 60px; margin: 0; height: 420px; border-radius: 14px; transition: transform 1.2s cubic-bezier(.33, 1, .68, 1); }
	.pw-kverhaal__scherm { flex: 1 1 auto; aspect-ratio: auto; }
	.pw-kverhaal__paneel { position: absolute; right: 0; bottom: 0; left: 0; }
	/* Het verhaal klapt open (0fr naar 1fr), zodat het paneel omhoog groeit, ook als de kop twee regels heeft. */
	.pw-kverhaal__klap { display: grid; grid-template-rows: 0fr; margin-top: -14px; overflow: hidden; transition: grid-template-rows .7s cubic-bezier(.33, 1, .68, 1), margin-top .7s cubic-bezier(.33, 1, .68, 1); }
	.pw-kverhaal__inhoud { opacity: 0; transition: opacity .4s ease; }
	.pw-kverhaal:hover .pw-kverhaal__klap,
	.pw-kverhaal:focus-within .pw-kverhaal__klap { grid-template-rows: 1fr; margin-top: 0; }
	.pw-kverhaal:hover .pw-kverhaal__inhoud,
	.pw-kverhaal:focus-within .pw-kverhaal__inhoud { opacity: 1; transition-delay: .15s; }
	.pw-kverhaal:hover .pw-kverhaal__venster,
	.pw-kverhaal:focus-within .pw-kverhaal__venster { transform: translateY(-40px) scale(.96); }
}
@media (max-width: 1023px) {
	.pw-kverhalen { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.pw-kverhalen__kop { margin-bottom: 40px; }
}
@media (max-width: 767px) {
	.pw-kverhaal__venster { margin: 24px 24px 0; }
	.pw-kverhaal__paneel { padding: 24px; }
	.pw-kverhaal__kop { font-size: 22px; }
	.pw-kverhaal__inhoud { flex-direction: column; gap: 6px; }
	.pw-kverhaal__cijfer { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.pw-kverhaal__venster, .pw-kverhaal__klap, .pw-kverhaal__inhoud { transition: none; }
}
/* Dienstkaarten, opmaak foto (Claude Design "Pingwin diensten carrousel", variant 5, oktober 2026): zwarte band in de stijl
   van Ons werk, staande fotokaarten in een schuifbare rij; de dienst staat op de foto, de uitleg verschijnt bij hover. */
/* Dienstkaarten opmaak 'iconen' (Claude Design "Pingwin diensten carrousel", op zwart A, oktober 2026): witte tegels met
   een oranje lijnicoon op een zwarte band. */
.pw-dicoon__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 60px; flex-wrap: wrap; margin-bottom: 60px; }
.pw-dicoon__titel { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--pw-wit); }
.pw-dicoon__titel .pw-oranje { color: var(--pw-oranje-fel); }
.pw-dicoon__alle { font-size: 15px; font-weight: 600; color: var(--pw-wit); text-decoration: underline; text-underline-offset: 4px; }
.pw-dicoon__alle:hover, .pw-dicoon__alle:focus { color: var(--pw-oranje-fel); }
.pw-dicoon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pw-dicoon__tegel { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 40px; border-radius: 16px; background: var(--pw-wit); color: #181818; text-decoration: none; transition: transform .5s cubic-bezier(.33, 1, .68, 1), box-shadow .5s ease, background .35s ease; }
.pw-dicoon__tegel:hover, .pw-dicoon__tegel:focus { color: #181818; text-decoration: none; }
a.pw-dicoon__tegel:hover, a.pw-dicoon__tegel:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); background: var(--pw-oranje-fel); }
/* Hover: oranje tegel, alle inhoud en het icoon wit. */
a.pw-dicoon__tegel:hover .pw-dicoon__icoon, a.pw-dicoon__tegel:hover .pw-dicoon__naam, a.pw-dicoon__tegel:hover .pw-dicoon__tekst, a.pw-dicoon__tegel:hover .pw-dicoon__meer,
a.pw-dicoon__tegel:focus-visible .pw-dicoon__icoon, a.pw-dicoon__tegel:focus-visible .pw-dicoon__naam, a.pw-dicoon__tegel:focus-visible .pw-dicoon__tekst, a.pw-dicoon__tegel:focus-visible .pw-dicoon__meer { color: var(--pw-wit); }
a.pw-dicoon__tegel:focus-visible { outline-color: var(--pw-wit); }
.pw-dicoon__tegel:focus-visible { outline: 2px solid var(--pw-oranje-fel); outline-offset: 4px; }
.pw-dicoon__icoon { width: 40px; height: 40px; color: var(--pw-oranje-fel); transition: transform .5s cubic-bezier(.33, 1, .68, 1), color .35s ease; }
a.pw-dicoon__tegel:hover .pw-dicoon__icoon { transform: translateY(-4px); }
.pw-dicoon__icoon--beeld { width: auto; height: 85px; transition: transform .5s cubic-bezier(.33, 1, .68, 1), filter .35s ease; } /* eigen icoon (bruin, zoals op pingwin.nl) */
a.pw-dicoon__tegel:hover .pw-dicoon__icoon--beeld, a.pw-dicoon__tegel:focus-visible .pw-dicoon__icoon--beeld { filter: brightness(0) invert(1); } /* wit op de oranje tegel, net als de lijniconen */
.pw-dicoon__naam { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: #000000; transition: color .35s ease; }
.pw-dicoon__tekst { margin: 0; font-size: 15px; line-height: 1.6; color: #616161; transition: color .35s ease; }
.pw-dicoon__meer { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 14px; font-weight: 600; color: #222222; transition: color .3s ease, gap .3s ease; }
a.pw-dicoon__tegel:hover .pw-dicoon__meer { gap: 12px; }
/* Op een lichte band (SEO-consultant, oktober 2026): donkere kop, intro rechts naast de kop (zelfde maat als bij bento),
   op wit lichtgrijze tegels. De intro staat alleen op een lichte band (dienst-kaarten.php). */
.pw-dicoon__intro { max-width: 560px; font-size: 18px; line-height: 1.65; color: #616161; }
.pw-dicoon__intro > :last-child { margin-bottom: 0; }
.pw-dienst-iconen:not(.pw-band--zwart):not(.pw-band--antraciet):not(.pw-band--oranje) :is(.pw-dicoon__titel, .pw-dicoon__alle) { color: #000000; }
.pw-dienst-iconen.pw-band--wit .pw-dicoon__tegel { background: var(--pw-grijs); }
@media (max-width: 1023px) {
	.pw-dicoon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pw-dicoon__kop { margin-bottom: 40px; }
}
@media (max-width: 767px) {
	.pw-dicoon { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.pw-dicoon__tegel { padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.pw-dicoon__tegel, .pw-dicoon__icoon, .pw-dicoon__meer { transition: none; }
}
.pw-dienst-foto { --pw-df-rand: max(5%, calc((100% - var(--pw-container)) / 2)); overflow: hidden; }
.pw-dfoto { display: flex; flex-direction: column; gap: 60px; color: var(--pw-wit); }
.pw-dfoto__kopregel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 60px; padding: 0 var(--pw-df-rand); }
.pw-dfoto__titel { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--pw-wit); }
.pw-dfoto__titel .pw-oranje { color: var(--pw-oranje-fel); }
.pw-dfoto__bediening { display: flex; align-items: center; gap: 28px; }
.pw-dfoto__teller { font-size: 15px; font-weight: 500; color: #9a9a9a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-dfoto__teller span { color: var(--pw-wit); }
.pw-dfoto__balk { position: relative; width: 160px; height: 2px; overflow: hidden; background: #333333; }
.pw-dfoto__balk span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--pw-oranje-fel); transition: width .5s cubic-bezier(.33, 1, .68, 1); }
.pw-dfoto__knop { display: flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 1px solid #555555; border-radius: 50%; background: transparent; color: var(--pw-wit); cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.pw-dfoto__knop:hover, .pw-dfoto__knop:focus-visible { background: var(--pw-oranje-fel); border-color: var(--pw-oranje-fel); }
.pw-dfoto__knop:disabled { opacity: .35; cursor: default; background: transparent; border-color: #555555; }
.pw-dfoto__spoor { display: flex; gap: 24px; padding: 0 var(--pw-df-rand); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pw-df-rand); scrollbar-width: none; overscroll-behavior-x: contain; }
.pw-dfoto__spoor::-webkit-scrollbar { display: none; }
.pw-dfoto__kaart { position: relative; display: block; flex: 0 0 calc((100% - 72px) / 4); aspect-ratio: 460 / 560; overflow: hidden; border-radius: 16px; background: #1a1a1a; color: var(--pw-wit); text-decoration: none; scroll-snap-align: start; }
.pw-dfoto__kaart:hover, .pw-dfoto__kaart:focus { color: var(--pw-wit); text-decoration: none; }
.pw-dfoto__kaart:focus-visible { outline: 2px solid var(--pw-oranje-fel); outline-offset: 4px; }
.pw-dfoto__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.33, 1, .68, 1); }
.pw-dfoto__waas { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, 0) 70%); }
.pw-dfoto__inhoud { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 26px; }
.pw-dfoto__tekst { display: flex; flex-direction: column; gap: 10px; }
.pw-dfoto__naam { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--pw-wit); }
.pw-dfoto__uitleg { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.pw-dfoto__pijl { display: flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; transition: background .3s ease, border-color .3s ease, transform .4s ease; }
.pw-dfoto__kaart:hover .pw-dfoto__foto { transform: scale(1.06); }
.pw-dfoto__kaart:hover .pw-dfoto__pijl, .pw-dfoto__kaart:focus-visible .pw-dfoto__pijl { background: var(--pw-oranje-fel); border-color: var(--pw-oranje-fel); } /* 26 okt 2026: pijl wijst al naar rechts, geen draai meer */
/* Met muis: de uitleg schuift pas bij hover of focus omhoog; op touch staat hij altijd open. */
@media (hover: hover) {
	.pw-dfoto__uitleg { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s cubic-bezier(.33, 1, .68, 1), opacity .4s ease; }
	.pw-dfoto__kaart:hover .pw-dfoto__uitleg, .pw-dfoto__kaart:focus-visible .pw-dfoto__uitleg { max-height: 140px; opacity: 1; }
}
@media (max-width: 1199px) {
	.pw-dfoto__kaart { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 767px) {
	.pw-dfoto { gap: 36px; }
	.pw-dfoto__balk { display: none; }
	.pw-dfoto__kaart { flex-basis: 80vw; height: 460px; }
	.pw-dfoto__inhoud { padding: 24px; }
	.pw-dfoto__naam { font-size: 23px; }
	.pw-dfoto__knop { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	.pw-dfoto__foto, .pw-dfoto__uitleg, .pw-dfoto__pijl, .pw-dfoto__balk span { transition: none; }
}
/* bron: witte binnenrij met radius 30 op een grijze band (smalblok): padding 40/30/30 + kolom 15, 30 marge onder */
.pw-tekst--kaart,
.pw-tekst--kaart2 { max-width: 920px; margin: 0 auto 30px; padding: 40px 45px 60px; border-radius: 30px; background: var(--pw-wit); }
.pw-tekst--kaart2 { padding-left: 80px; padding-right: 80px; } /* bron: kop en tekst met 35 px extra marge */
.pw-tekst--midden { text-align: center; }
/* Tablet: een rij in de bron is 30 px breder dan de container (kolommen met 15 px binnenmarge), dus smalle
   blokken mogen tot 15 px buiten de container vallen voordat ze smaller worden. */
@media (min-width: 768px) {
	.pw-smal { --pw-mw: var(--pw-smal); }
	.pw-smal--case { --pw-mw: 1050px; }
	.pw-tekst--smal { --pw-mw: var(--pw-smal); }
	.pw-tekst--smal2 { --pw-mw: 915px; }
	.pw-tekst--tekst,
	.pw-tekst--tekst2,
	.pw-tekst--tekst3 { --pw-mw: var(--pw-tekstbreedte); }
	.pw-tekst--kaart,
	.pw-tekst--kaart2 { --pw-mw: 920px; }
	.pw-container > :is(.pw-smal, .pw-tekst--smal, .pw-tekst--smal2, .pw-tekst--tekst, .pw-tekst--tekst2, .pw-tekst--tekst3, .pw-tekst--kaart, .pw-tekst--kaart2) {
		max-width: var(--pw-mw);
		margin-left: max(-15px, calc((100% - var(--pw-mw)) / 2));
		margin-right: max(-15px, calc((100% - var(--pw-mw)) / 2));
	}
}
/* Golfrand (bron: Total shape divider 'curve', 50 px) */
.pw-sectie--golf { position: relative; }
.pw-golf { position: absolute; left: 0; width: 100%; line-height: 0; overflow: hidden; pointer-events: none; }
.pw-golf--boven { top: 0; }
.pw-golf--onder { bottom: 0; }
.pw-golf svg { display: block; width: 100%; height: 50px; }
.pw-sectie--golf > .pw-container { position: relative; }
.pw-beeld-los { margin: 0 0 20px; text-align: center; line-height: 0; } /* bron: beeldmodule tussen de tekst, gecentreerd */
.pw-beeld-los img { max-width: 100%; height: auto; }
.pw-beeld-los--rand img { border: 1px solid #ededed; } /* bron: lijn om het beeld */
.pw-tekst__knop { margin: 30px 0 0; }

/* --------------------------------------------------------------------------
   10. Blok: Beeld en tekst (band met afgeronde rijen)
   -------------------------------------------------------------------------- */
.pw-beeld-tekst {
	display: flex;
	flex-direction: column;
	gap: var(--pw-rij-ruimte, 60px);
}
.pw-beeld-tekst__rij {
	display: flex;
	border-radius: 30px;
	overflow: hidden;
}
.pw-beeld-tekst__beeld,
.pw-beeld-tekst__tekst {
	width: 50%;
	flex: 0 0 50%;
}
.pw-beeld-tekst__beeld {
	min-height: 320px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.pw-beeld-tekst__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--pw-bt-pt, 120px) 80px var(--pw-bt-pb, 130px); /* homepage: 30 + spacer 90 boven, spacer 100 + 30 onder */
	background: var(--pw-wit);
}
.pw-beeld-tekst__rij--beeld-rechts .pw-beeld-tekst__beeld { order: 2; }
.pw-beeld-tekst__tekst .pw-rijk { margin-bottom: 30px; }
.pw-beeld-tekst__tekst .pw-rijk:last-child { margin-bottom: 0; }
.pw-beeld-tekst__knop { margin: 0; }
/* Stapelen bij scrollen (zoals Salient Tether): elke rij blijft midden in beeld staan, de volgende schuift eroverheen
   en de vorige schuift 20 px omhoog zodat zijn bovenrand zichtbaar blijft (--pw-st en de verschuiving zet main.js). */
@media (min-width: 1024px) {
	.pw-beeld-tekst--stapel .pw-beeld-tekst__rij { position: sticky; top: var(--pw-st, 120px); will-change: transform; }
	.pw-beeld-tekst--stapel::after { content: ""; flex: none; height: 35vh; margin-top: calc(var(--pw-rij-ruimte, 60px) * -1); } /* de laatste rij blijft ook even staan; die ruimte schuift onder de rijen weg */
}

/* --------------------------------------------------------------------------
   11. Blok: Kolommen met icoon
   -------------------------------------------------------------------------- */
.pw-kolommen {
	display: flex;
	margin: 0 -15px;
}
.pw-kolom {
	flex: 1 1 0;
	padding: 0 15px;
}
.pw-kolom__icoon {
	width: 60px;
	height: 60px;
	margin-bottom: 1px;
	padding: 10px;
	color: #4c4c4c;
}
.pw-kolom__icoon svg { display: block; width: 40px; height: 40px; }
.pw-kolom .pw-rijk > h3:first-child { margin-top: 5px; } /* bron: tekstkolom -25 px onder het icoon, kop +30 */
.pw-kolommen--per-2,
.pw-kolommen--per-3 { flex-wrap: wrap; }
.pw-kolommen--per-2 .pw-kolom { flex: 0 0 50%; }
.pw-kolommen--per-3 .pw-kolom { flex: 0 0 33.3333%; }
/* bron: binnenkolommen als witte kaarten (radius 20, padding 30/30/40) met 15 px kolompadding rondom */
.pw-kolommen--kaarten .pw-kolom { padding: 15px; }
.pw-kolommen--kaarten .pw-kolom > .pw-rijk { height: 100%; padding: 30px 30px 40px; border-radius: 20px; background: var(--pw-wit); }
.pw-kolommen--kaarten .pw-kolom .pw-rijk > :first-child { margin-top: 0; }
.pw-kolommen--per-1 { flex-direction: column; }
/* bron: elke binnenrij een witte kaart (radius 30, padding 40/30/30 + kolom 15, 30 marge onder) */
.pw-kolommen--rijkaarten { margin: 0; }
.pw-kolommen--rijkaarten .pw-kolom { padding: 0; }
.pw-kolommen--rijkaarten .pw-kolom > .pw-rijk { margin-bottom: 30px; padding: 40px 45px 60px; border-radius: 30px; background: var(--pw-wit); }
.pw-kolommen--rijkaarten .pw-kolom .pw-rijk > :first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   12. Blok: Logo's
   -------------------------------------------------------------------------- */
.pw-logos__kop { margin-bottom: 20px; }
.pw-logos__kop .pw-oranje { color: var(--pw-oranje-fel); } /* oranje punt achter de kop, zoals bij de andere blokken */
.pw-logos__kop--extra-10 { margin-bottom: 30px; } /* bron: spacer onder de kop */
.pw-logos__kop--extra-20 { margin-bottom: 40px; }
.pw-logos__kop--extra-30 { margin-bottom: 50px; }
.pw-logos {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 15px;
	padding-bottom: 15px; /* bron: elke tegel heeft 15 px marge onder */
}
.pw-logos__tegel { display: block; line-height: 0; }
.pw-logos--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pw-logos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pw-logos__tegel img { width: 100%; height: auto; }
/* Schuifrij: één rij, 5 (of per_rij) zichtbaar, sleepbaar met muis en swipebaar; geen zichtbare scrollbalk. Bron: carrousel zonder pijlen. */
.pw-logos--schuif {
	display: flex;
	gap: 15px;
	padding-bottom: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.pw-logos--schuif::-webkit-scrollbar { display: none; }
.pw-logos--schuif.is-slepen { cursor: grabbing; scroll-snap-type: none; }
.pw-logos--schuif .pw-logos__tegel { flex: 0 0 calc((100% - 5 * 15px) / 6); scroll-snap-align: start; }
.pw-logos--schuif.pw-logos--5 .pw-logos__tegel { flex-basis: calc((100% - 4 * 15px) / 5); }
.pw-logos--schuif.pw-logos--4 .pw-logos__tegel { flex-basis: calc((100% - 3 * 15px) / 4); }
.pw-logos--schuif .pw-logos__tegel img { pointer-events: none; }
@media (max-width: 959px) { .pw-logos--schuif .pw-logos__tegel, .pw-logos--schuif.pw-logos--5 .pw-logos__tegel, .pw-logos--schuif.pw-logos--4 .pw-logos__tegel { flex-basis: calc((100% - 2 * 15px) / 3); } }
@media (max-width: 767px) { .pw-logos--schuif .pw-logos__tegel, .pw-logos--schuif.pw-logos--5 .pw-logos__tegel, .pw-logos--schuif.pw-logos--4 .pw-logos__tegel { flex-basis: calc((100% - 15px) / 2); } }
@media (max-width: 767px) { /* bron: op mobiel een raster van 3 (aparte rij 'visible-phone') */
	.pw-logos--mobiel-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; overflow: visible; cursor: auto; }
}
@media (max-width: 479px) { .pw-logos--schuif:not(.pw-logos--mobiel-raster) .pw-logos__tegel, .pw-logos--schuif.pw-logos--5 .pw-logos__tegel, .pw-logos--schuif.pw-logos--4 .pw-logos__tegel { flex-basis: 100%; } }

/* --------------------------------------------------------------------------
   13. Blok: CTA met foto
   -------------------------------------------------------------------------- */
.pw-cta {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 30px;
	border-radius: 20px;
	background: var(--pw-oranje-fel);
	color: var(--pw-wit);
	overflow: hidden;
}
.pw-cta::before {
	content: "";
	position: absolute;
	left: 640px;
	top: 80px;
	width: 360px;
	height: 360px;
	background: url("../img/circle.svg") no-repeat 0 0 / 360px 360px;
	opacity: .2;
	pointer-events: none;
}
.pw-cta--blauw { background: var(--pw-blauw); color: var(--pw-tekst); }
.pw-cta--grijs { background: var(--pw-grijs); color: var(--pw-tekst); }
.pw-cta__tekst {
	position: relative;
	z-index: 1;
	flex: 0 0 66.6667%;
	padding: 70px 15px;
}
.pw-cta__tekst h2,
.pw-cta__tekst h3,
.pw-cta__tekst h4 { color: inherit; }
.pw-cta__tekst .pw-rijk { padding-bottom: 30px; }
.pw-cta__tekst .pw-rijk a { color: inherit; text-decoration: underline; }
.pw-cta--blauw .pw-cta__tekst a,
.pw-cta--grijs .pw-cta__tekst a { color: var(--pw-oranje); }
.pw-cta__knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.pw-cta--blauw .pw-knop--omlijnd-wit,
.pw-cta--grijs .pw-knop--omlijnd-wit { border-color: var(--pw-oranje); color: var(--pw-oranje); }
.pw-cta--knop-klein .pw-knop { padding: 8px 24px; font-size: 14px; font-weight: 700; } /* bron (blog): standaard themaknop */
.pw-cta__beeld {
	position: relative;
	z-index: 1;
	flex: 0 0 33.3333%;
	padding: 0 15px;
	line-height: 0;
}
.pw-cta__beeld img {
	width: 281px;
	height: 281px;
	border-radius: 50%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   14. Blok: Dienstkaarten
   -------------------------------------------------------------------------- */
.pw-sectie--dienst-kaarten .pw-intro { margin-bottom: 40px; }
.pw-kaarten {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding: 15px;
}
.pw-kaart--dienst {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 calc((100% - 60px) / 3);
	min-width: 0;
	padding: 40px 15px 45px;
	border-radius: 20px;
	background: var(--pw-wit);
	color: var(--pw-tekst);
	text-align: center;
	text-decoration: none;
}
.pw-kaarten--2 .pw-kaart--dienst { flex-basis: calc((100% - 30px) / 2); }
.pw-kaarten--4 .pw-kaart--dienst { flex-basis: calc((100% - 90px) / 4); }
.pw-kaart--dienst:hover { text-decoration: none; }
.pw-kaart__icoon { width: 30%; line-height: 0; } /* bron: icoon 30 % van de tekstbreedte, hoogte volgt */
.pw-kaart__icoon img { width: 100%; height: auto; }
.pw-kaart__titel {
	margin: 0 0 20px;
	padding-top: 20px;
	color: var(--pw-oranje-fel);
}

/* Dienstkaarten, opmaak bento (ontwerp oktober 2026, Salient Tether): kop links, intro rechts, zes gekleurde tegels. */
.pw-dbento__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 80px;
	margin-bottom: 64px;
}
.pw-dbento__titel {
	flex: none;
	margin: 0;
	font-size: var(--pw-kop-groot);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #000000;
}
.pw-dbento__titel .pw-oranje { color: var(--pw-oranje-fel); }
.pw-faq__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-dbento__intro { max-width: 560px; font-size: 18px; line-height: 1.65; }
.pw-dbento__intro > :last-child { margin-bottom: 0; }
.pw-dbento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 280px;
	gap: 16px;
}
.pw-dbento__tegel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-width: 0;
	padding: 32px;
	border-radius: 18px;
	overflow: hidden;
	background: var(--pw-wit);
	color: #000000;
	text-decoration: none;
	transition: transform .5s cubic-bezier(.33, 1, .68, 1), box-shadow .5s ease;
}
.pw-dbento__tegel:nth-child(1) { grid-area: 1 / 1 / 3 / 2; background: #000000; color: var(--pw-wit); }
.pw-dbento__tegel:nth-child(2) { grid-area: 1 / 2 / 2 / 4; background: var(--pw-lichtblauw); }
.pw-dbento__tegel:nth-child(3) { grid-area: 2 / 2 / 3 / 3; background: var(--pw-blauw); }
.pw-dbento__tegel:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
.pw-dbento__tegel:nth-child(5) { grid-area: 3 / 1 / 4 / 3; }
.pw-dbento__tegel:nth-child(6) { grid-area: 3 / 3 / 4 / 4; background: var(--pw-oranje-fel); }
a.pw-dbento__tegel:hover { color: #000000; text-decoration: none; transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0, 0, 0, .12); }
a.pw-dbento__tegel:nth-child(1):hover { color: var(--pw-wit); }
.pw-dbento__tegel:focus-visible { outline: 2px solid var(--pw-oranje-fel); outline-offset: 6px; }
.pw-dbento__tekst { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; max-width: 260px; }
.pw-dbento__tegel:nth-child(1) .pw-dbento__tekst { max-width: 330px; }
.pw-dbento__naam { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: inherit; }
.pw-dbento__tegel:nth-child(1) .pw-dbento__naam { font-size: 34px; }
.pw-dbento__omschrijving { font-size: 15px; line-height: 1.6; color: #181818; }
.pw-dbento__tegel:nth-child(1) .pw-dbento__omschrijving { color: #d4d4d4; }
.pw-dbento__omschrijving > * { margin: 0; }
.pw-dbento__beeld { position: absolute; right: -20px; bottom: -10px; width: 170px; height: 150px; line-height: 0; }
.pw-dbento__beeld img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s cubic-bezier(.33, 1, .68, 1); }
.pw-dbento__tegel:nth-child(1) .pw-dbento__beeld { width: 330px; height: 320px; }
.pw-dbento__tegel:nth-child(2) .pw-dbento__beeld,
.pw-dbento__tegel:nth-child(5) .pw-dbento__beeld { right: 60px; top: 20px; bottom: auto; width: 260px; height: 240px; }
.pw-dbento__tegel:nth-child(3) .pw-dbento__beeld { right: -30px; bottom: -20px; width: 190px; opacity: .9; }
.pw-dbento__tegel:nth-child(6) .pw-dbento__beeld { right: -30px; bottom: -20px; height: 160px; }
a.pw-dbento__tegel:hover .pw-dbento__beeld img { transform: scale(1.06) rotate(-2deg); }
.pw-dbento__pijl {
	position: relative;
	z-index: 1;
	flex: none; /* niet laten krimpen in een volle tegel, zodat de cirkel rond blijft */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: 50%;
	transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.pw-dbento__tegel:nth-child(1) .pw-dbento__pijl { border-color: #4a4a4a; }
a.pw-dbento__tegel:hover .pw-dbento__pijl { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); color: var(--pw-wit); }
a.pw-dbento__tegel:nth-child(6):hover .pw-dbento__pijl { border-color: #000000; background: #000000; }
/* Binnenkomst: de tegels schuiven na elkaar omhoog zodra het raster in beeld komt (JS zet .is-in; zonder JS direct zichtbaar). */
@keyframes pw-dbento-in { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
.pw-dbento.is-wacht .pw-dbento__tegel { opacity: 0; }
.pw-dbento.is-in .pw-dbento__tegel { animation: pw-dbento-in 1.4s cubic-bezier(.33, 1, .68, 1) both; }
.pw-dbento.is-in .pw-dbento__tegel:nth-child(2) { animation-delay: .1s; }
.pw-dbento.is-in .pw-dbento__tegel:nth-child(3) { animation-delay: .2s; }
.pw-dbento.is-in .pw-dbento__tegel:nth-child(4) { animation-delay: .3s; }
.pw-dbento.is-in .pw-dbento__tegel:nth-child(5) { animation-delay: .4s; }
.pw-dbento.is-in .pw-dbento__tegel:nth-child(6) { animation-delay: .5s; }
@media (max-width: 1023px) {
	.pw-dbento__kop { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 48px; }
	.pw-dbento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 280px; }
	.pw-dbento__tegel:nth-child(n) { grid-area: auto; }
	.pw-dbento__tegel:nth-child(1), .pw-dbento__tegel:nth-child(2) { grid-column: span 2; }
	.pw-dbento__tegel:nth-child(1) .pw-dbento__beeld { width: 260px; height: 250px; }
}
@media (max-width: 767px) {
	.pw-dbento__intro { font-size: 17px; }
	.pw-dbento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px; }
	.pw-dbento__tegel:nth-child(n) { grid-column: auto; min-height: 300px; padding: 28px; }
	.pw-dbento__tegel:nth-child(1) .pw-dbento__naam { font-size: 28px; }
	.pw-dbento__tekst { max-width: 70%; }
	.pw-dbento__tegel:nth-child(1) .pw-dbento__tekst { max-width: none; }
	.pw-dbento__tegel:nth-child(1) { min-height: 420px; }
	.pw-dbento__tegel:nth-child(n) .pw-dbento__beeld { top: auto; right: -20px; bottom: -10px; width: 150px; height: 140px; }
	.pw-dbento__tegel:nth-child(1) .pw-dbento__beeld { width: 200px; height: 190px; }
}

/* --------------------------------------------------------------------------
   15. Blok: Beeld
   -------------------------------------------------------------------------- */
.pw-beeld {
	margin: 0 auto;
	text-align: center;
	line-height: 0;
}
.pw-beeld--1410 { width: min(1410px, 100vw - 170px); max-width: none; margin-left: calc((100% - min(1410px, 100vw - 170px)) / 2); } /* bron: 1410 breed, maar nooit breder dan het scherm min 85 px aan weerszijden */
.pw-beeld--1240 { max-width: 1240px; }
.pw-beeld--960 { max-width: 960px; }
.pw-beeld--80 { max-width: 80px; } /* bron (werkwijze): pictogram 80 bij 80, gecentreerd */
.pw-beeld.pw-beeld--80 img { width: 80px; height: 80px; }
.pw-beeld img { width: 100%; height: auto; }
.pw-beeld--natuurlijk { max-width: 1240px; } /* bron: beeldmodule op eigen grootte; de template zet de breedte van het origineel als maximum */
/* Beeld met 'krimpen bij scrollen' (oktober 2026): de figure houdt de verhouding van het beeld (--pw-bk-ratio uit de
   template), het vlak erin start over de volle vensterbreedte en krimpt naar de breedte van de figure met afgeronde
   hoeken. main.js zet --pw-tk (0 breed, 1 eindmaat), --pw-tk-l en --pw-tk-r, net als bij het testimonial in kader. */
.pw-bkrimp { position: relative; aspect-ratio: var(--pw-bk-ratio, 16 / 9); }
.pw-bkrimp__vlak {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--pw-tk-l, 0px) * -1);
	right: calc(var(--pw-tk-r, 0px) * -1);
	overflow: hidden;
	clip-path: inset(0 calc(var(--pw-tk, 1) * var(--pw-tk-r, 0px)) 0 calc(var(--pw-tk, 1) * var(--pw-tk-l, 0px)) round calc(var(--pw-tk, 1) * var(--pw-tk-straal, 32px)));
}
.pw-bkrimp__vlak > a { display: block; height: 100%; }
/* Het beeld zoomt mee uit (--pw-bk-s uit main.js): bij de start vult het de vensterbreedte, aan het eind staat het hele
   beeld precies in de figure. */
.pw-beeld.pw-bkrimp img {
	position: absolute;
	top: 0;
	left: var(--pw-tk-l, 0px);
	width: calc(100% - var(--pw-tk-l, 0px) - var(--pw-tk-r, 0px));
	height: 100%;
	object-fit: cover;
	transform: scale(var(--pw-bk-s, 1));
}
@media (max-width: 767px) { .pw-bkrimp { --pw-tk-straal: 24px; } }
/* Beeld, soort 'globe' (Claude Design "Pingwin globe internationale SEO", variant C, oktober 2026): draaiende digitale wereldbol op donkerblauw, getekend door assets/js/globe.js. Bij krimpen gedraagt het canvas zich als het beeld. */
.pw-globe { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 32px; background: #051530; }
.pw-beeld.pw-bkrimp .pw-globe { position: absolute; top: 0; left: var(--pw-tk-l, 0px); width: calc(100% - var(--pw-tk-l, 0px) - var(--pw-tk-r, 0px)); height: 100%; aspect-ratio: auto; border-radius: 0; transform: scale(var(--pw-bk-s, 1)); }
.pw-bkrimp__vlak--globe { background: #051530; }
@media (max-width: 767px) { .pw-globe { border-radius: 24px; } }
/* Beeld, soort 'wand' (Claude Design "Pingwin portfoliowand webdesign", oktober 2026): een wand met schermafbeeldingen van
   websites die Pingwin maakte. Stijl 'camera' (variant A): een camera glijdt van ontwerp naar ontwerp. Stijl 'kolommen'
   (variant C): drie kolommen schuiven afwisselend omhoog en omlaag. Opbouw in template-parts/sections/beeld-wand.php,
   schaal, laden en pauzeren in assets/js/wand.js. Bij krimpen gedraagt de wand zich als het beeld.
   Dezelfde regels gelden voor de wand naast tekst (.pw-wandzij, blokken Cijfers en Kolommen met icoon). */
.pw-wand { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 32px; overflow: hidden; background: #f5f6fa; text-align: left; line-height: normal; }
.pw-wand--kolommen { background: #dfdddb; }
.pw-beeld.pw-bkrimp .pw-wand { position: absolute; top: 0; left: var(--pw-tk-l, 0px); width: calc(100% - var(--pw-tk-l, 0px) - var(--pw-tk-r, 0px)); height: 100%; aspect-ratio: auto; border-radius: 0; transform: scale(var(--pw-bk-s, 1)); }
.pw-bkrimp__vlak--wand { background: #f5f6fa; }
.pw-bkrimp__vlak--wand-kolommen { background: #dfdddb; }
@media (max-width: 767px) { .pw-wand { border-radius: 24px; } }
.pw-wand__t { position: relative; border-radius: 10px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
:is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__t img { position: static; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: none; }
:is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__t--fit img { object-fit: contain; padding: 24px; box-sizing: border-box; }
:is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__t--pagina img { height: auto; }
/* Camera: de wand staat op een vaste buhne van 1240 x 698 die wand.js meeschaalt (--pw-wand-s). Vier stops in 22 s:
   4 s stilstaan, 1,5 s reizen met uitzoomen naar 0,85. Midden van het kader = (620, 349); stop = translate(620 - x, 349 - y). */
.pw-wand__buhne { position: absolute; top: 0; left: 0; width: 1240px; height: 698px; transform: scale(var(--pw-wand-s, 1)); transform-origin: 0 0; }
.pw-wand__muur { position: absolute; top: 0; left: 0; width: 2996px; height: 1904px; box-sizing: border-box; padding: 32px; display: grid; grid-template-columns: 460px 300px 460px 300px 460px 300px 460px; grid-auto-rows: 280px; gap: 32px; transform-origin: 0 0; transform: translate(-466px, -135px); animation: pw-wand-cam 22s infinite; will-change: transform; }
.pw-wand__muur .is-stop1, .pw-wand__muur .is-stop2, .pw-wand__muur .is-stop3, .pw-wand__muur .is-stop4 { animation: pw-wand-live 22s infinite; }
:is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__muur [class*="is-stop"] img { animation: pw-wand-kb 22s infinite; }
:is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__muur .pw-wand__t--pagina img { animation-name: pw-wand-scroll; }
.pw-wand__muur .is-stop2, :is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__muur .is-stop2 img { animation-delay: 5.5s; }
.pw-wand__muur .is-stop3, :is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__muur .is-stop3 img { animation-delay: 11s; }
.pw-wand__muur .is-stop4, :is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__muur .is-stop4 img { animation-delay: 16.5s; }
@keyframes pw-wand-cam {
	0% { transform: translate(-466px, -135px) scale(1); }
	18.182% { transform: translate(-466px, -135px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
	21.591% { transform: translate(-653.3px, -195px) scale(.85); animation-timing-function: cubic-bezier(.1, .45, .55, 1); }
	25% { transform: translate(-1290px, -447px) scale(1); }
	43.182% { transform: translate(-1290px, -447px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
	46.591% { transform: translate(-1003.5px, -592.8px) scale(.85); animation-timing-function: cubic-bezier(.1, .45, .55, 1); }
	50% { transform: translate(-1290px, -1071px) scale(1); }
	68.182% { transform: translate(-1290px, -1071px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
	71.591% { transform: translate(-653.3px, -725.4px) scale(.85); animation-timing-function: cubic-bezier(.1, .45, .55, 1); }
	75% { transform: translate(-466px, -759px) scale(1); }
	93.182% { transform: translate(-466px, -759px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
	96.591% { transform: translate(-303.1px, -327.6px) scale(.85); animation-timing-function: cubic-bezier(.1, .45, .55, 1); }
	100% { transform: translate(-466px, -135px) scale(1); }
}
@keyframes pw-wand-live {
	0% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
	2.5% { transform: scale(1.04); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16); }
	17% { transform: scale(1.04); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16); }
	20% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
	100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
}
@keyframes pw-wand-kb { 0% { transform: scale(1); } 18.182% { transform: scale(1.07); } 22% { transform: scale(1); } 100% { transform: scale(1); } }
@keyframes pw-wand-scroll {
	0% { transform: translateY(0); }
	3% { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
	17% { transform: translateY(var(--pw-wand-d, -600px)); }
	30% { transform: translateY(var(--pw-wand-d, -600px)); }
	35% { transform: translateY(0); }
	100% { transform: translateY(0); }
}
/* Kolommen: drie sporen met elk twee gelijke helften; -50 % is precies één helft, dus de lus is naadloos. */
.pw-wand__kolommen { position: absolute; inset: 0; display: flex; gap: 2%; padding: 0 2%; }
.pw-wand__kol { flex: 1 1 0; min-width: 0; }
.pw-wand__spoor { will-change: transform; }
.pw-wand__spoor--op { animation: pw-wand-op 48s linear infinite; }
.pw-wand__spoor--neer { animation: pw-wand-neer 56s linear infinite; }
.pw-wand__kol:nth-child(3) .pw-wand__spoor { animation-duration: 44s; animation-delay: -18s; }
.pw-wand__kolommen .pw-wand__t { margin-bottom: 6.3%; }
:is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__kolommen .pw-wand__t img { height: auto; }
:is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__kolommen .pw-wand__t--fit img { padding: 5%; }
@keyframes pw-wand-op { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes pw-wand-neer { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (max-width: 767px) {
	.pw-wand__kolommen { gap: 4%; padding: 0 4%; }
	.pw-wand__kol:nth-child(3) { display: none; }
}
/* Alleen bewegen zolang de wand in beeld is (wand.js), en nooit bij 'minder beweging'. */
.pw-wand.is-pauze .pw-wand__muur, .pw-wand.is-pauze .pw-wand__muur .pw-wand__t, :is(.pw-beeld, .pw-wandzij) .pw-wand.is-pauze .pw-wand__muur .pw-wand__t img, .pw-wand.is-pauze .pw-wand__kol .pw-wand__spoor { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.pw-wand__muur, .pw-wand__t, :is(.pw-beeld, .pw-wandzij) .pw-wand .pw-wand__t img, .pw-wand__spoor { animation: none !important; }
}

/* Beeld, soort 'ranking' (Claude Design "Pingwin ranking animatie SEO bureau", variant A, oktober 2026): een witte
   zoekresultatenpagina op een gekleurd vlak (standaard bruin #71655a) waarin "jouw website" naar plek 1 klimt.
   Opbouw in template-parts/sections/beeld-ranking.php. Het kader is dat van de portfoliowand (.pw-wand en .pw-wand__buhne,
   ook bij krimpen); assets/js/wand.js schaalt de buhne en zet is-pauze zolang het blok niet in beeld is.
   Tijdlijn van 12 s: typen 0,3 tot 1,5 s, lijst in 1,5 tot 2 s, zes stappen van 0,75 s vanaf 2,2 s (rij 5 zakt eerst,
   rij 0 laatst), gloed en label 6,6 tot 10,4 s, alles uit 10,6 tot 11,4 s. Een rij is 64 px hoog, de stap 76 px. */
.pw-wand--ranking, .pw-bkrimp__vlak--ranking-bruin { background: #71655a; }
.pw-wand--ranking-blauw, .pw-bkrimp__vlak--ranking-blauw { background: #acdae4; }
.pw-wand--ranking-lichtgrijs, .pw-bkrimp__vlak--ranking-lichtgrijs { background: #f5f6fa; }
.pw-wand--ranking-zwart, .pw-bkrimp__vlak--ranking-zwart { background: #000000; }
.pw-rank { position: absolute; left: 210px; top: 52px; width: 820px; height: 594px; box-sizing: border-box; padding: 36px; border-radius: 24px; background: #ffffff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 28px; color: #181818; text-align: left; line-height: 1.3; }
.pw-rank__zoek { flex: none; height: 60px; box-sizing: border-box; border-radius: 30px; background: #f5f6fa; display: flex; align-items: center; gap: 14px; padding: 0 24px; color: #222222; }
.pw-rank__zoek svg { flex: none; display: block; }
.pw-rank__veld { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pw-rank__typ { display: block; max-width: 0; overflow: hidden; white-space: nowrap; font-size: 20px; font-weight: 500; line-height: 28px; animation: pw-rank-typ 12s steps(var(--pw-rank-n, 14), end) infinite; }
.pw-rank__cursor { flex: none; width: 2px; height: 24px; background: #f15829; animation: pw-rank-cursor 1s steps(1, end) infinite; }
.pw-rank__lijst { position: relative; flex: none; height: 444px; overflow: hidden; animation: pw-rank-lijst 12s ease infinite; }
.pw-rank__rij { position: absolute; left: 0; right: 0; height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 18px; padding: 0 18px; animation: pw-rank-r0 12s cubic-bezier(.5, 0, .2, 1) infinite; }
.pw-rank__rij--1 { animation-name: pw-rank-r1; }
.pw-rank__rij--2 { animation-name: pw-rank-r2; }
.pw-rank__rij--3 { animation-name: pw-rank-r3; }
.pw-rank__rij--4 { animation-name: pw-rank-r4; }
.pw-rank__rij--5 { animation-name: pw-rank-r5; }
.pw-rank__fav { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #eceef3; }
.pw-rank__balk { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pw-rank__balk span { display: block; height: 14px; border-radius: 7px; background: #e6e8ee; }
.pw-rank__balk span + span { height: 10px; border-radius: 5px; background: #f0f1f5; }
.pw-rank__wij { position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 2; transform: translateY(456px); animation: pw-rank-wij 12s cubic-bezier(.5, 0, .2, 1) infinite; }
.pw-rank__kaart { height: 64px; box-sizing: border-box; border-radius: 14px; background: #ffffff; display: flex; align-items: center; gap: 18px; padding: 0 18px 0 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); animation: pw-rank-gloei 12s ease infinite; }
.pw-rank__bol { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #f15829; overflow: hidden; }
.pw-rank__tel { display: flex; flex-direction: column; animation: pw-rank-tel 12s cubic-bezier(.5, 0, .2, 1) infinite; }
.pw-rank__tel span { display: block; height: 40px; line-height: 40px; text-align: center; color: #ffffff; font-size: 18px; font-weight: 700; }
.pw-rank__naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-rank__naam strong { font-size: 18px; font-weight: 700; color: #222222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-rank__naam span { font-size: 14px; color: #616161; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-rank__label { margin-left: auto; flex: none; padding: 8px 14px; border-radius: 30px; background: #222222; color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.6px; line-height: 1; text-transform: uppercase; opacity: 0; animation: pw-rank-label 12s ease infinite; }
@keyframes pw-rank-lijst { 0%, 12.5% { opacity: 0; } 16.667%, 88.333% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes pw-rank-typ { 0%, 2.5% { max-width: 0; } 12.5%, 88.333% { max-width: calc(var(--pw-rank-n, 14) * 1ch + 4px); } 95%, 100% { max-width: 0; } }
@keyframes pw-rank-cursor { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pw-rank-wij {
	0%, 18.333% { transform: translateY(456px); }
	22.5%, 24.583% { transform: translateY(380px); }
	28.75%, 30.833% { transform: translateY(304px); }
	35%, 37.083% { transform: translateY(228px); }
	41.25%, 43.333% { transform: translateY(152px); }
	47.5%, 49.583% { transform: translateY(76px); }
	53.75%, 100% { transform: translateY(0); }
}
@keyframes pw-rank-tel {
	0%, 18.333% { transform: translateY(0); }
	22.5%, 24.583% { transform: translateY(-40px); }
	28.75%, 30.833% { transform: translateY(-80px); }
	35%, 37.083% { transform: translateY(-120px); }
	41.25%, 43.333% { transform: translateY(-160px); }
	47.5%, 49.583% { transform: translateY(-200px); }
	53.75%, 100% { transform: translateY(-240px); }
}
@keyframes pw-rank-r5 { 0%, 18.333% { transform: translateY(0); } 22.5%, 100% { transform: translateY(76px); } }
@keyframes pw-rank-r4 { 0%, 24.583% { transform: translateY(0); } 28.75%, 100% { transform: translateY(76px); } }
@keyframes pw-rank-r3 { 0%, 30.833% { transform: translateY(0); } 35%, 100% { transform: translateY(76px); } }
@keyframes pw-rank-r2 { 0%, 37.083% { transform: translateY(0); } 41.25%, 100% { transform: translateY(76px); } }
@keyframes pw-rank-r1 { 0%, 43.333% { transform: translateY(0); } 47.5%, 100% { transform: translateY(76px); } }
@keyframes pw-rank-r0 { 0%, 49.583% { transform: translateY(0); } 53.75%, 100% { transform: translateY(76px); } }
@keyframes pw-rank-gloei {
	0%, 53.75% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
	57%, 86.667% { transform: scale(1.03); box-shadow: 0 22px 56px rgba(241, 88, 41, 0.3); }
	90%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
}
@keyframes pw-rank-label { 0%, 54% { opacity: 0; transform: translateX(-8px); } 57.5%, 86.667% { opacity: 1; transform: translateX(0); } 90%, 100% { opacity: 0; transform: translateX(0); } }
/* Alleen bewegen zolang het blok in beeld is (wand.js); zo begint de lus als de bezoeker erbij is. Geen uitzondering voor
   'minder beweging': alle animaties spelen altijd (besluit Tonny, 14 september 2026). */
.pw-wand.is-pauze .pw-rank, .pw-wand.is-pauze .pw-rank * { animation-play-state: paused; }
/* Mobiel: geen geschaalde buhne maar een eigen opbouw, vlak 440 px hoog, vier zichtbare plekken (de kaart komt bij plek 4 in beeld). */
@media (max-width: 767px) {
	.pw-wand--ranking, .pw-beeld.pw-bkrimp:has(.pw-wand--ranking) { aspect-ratio: auto; height: 440px; }
	.pw-wand--ranking .pw-wand__buhne { inset: 14px; width: auto; height: auto; transform: none; display: flex; align-items: center; justify-content: center; }
	.pw-rank { position: relative; left: auto; top: auto; width: 100%; max-width: 520px; height: auto; padding: 20px; gap: 20px; border-radius: 18px; }
	.pw-rank__zoek { height: 52px; gap: 10px; padding: 0 18px; }
	.pw-rank__typ { font-size: 17px; }
	.pw-rank__lijst { height: 292px; }
	.pw-rank__rij { gap: 12px; padding: 0 10px; }
	.pw-rank__kaart { gap: 12px; padding: 0 12px 0 10px; }
	.pw-rank__naam strong { font-size: 16px; }
	.pw-rank__label { padding: 7px 10px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Blok: Fases (Claude Design "Pingwin SEO-pakket blok", variant B, oktober 2026)
   Kop en intro gecentreerd, grote tabbladen met nummer en naam, daaronder een wit vlak met de gekozen fase.
   Opbouw in template-parts/sections/fases.php, wisselen in assets/js/fases.js. Standaard op zwart; op een lichte
   band krijgen de tabbladen lichtzand. Tabletten twee kolommen onderdelen, mobiel tabbladen onder elkaar.
   -------------------------------------------------------------------------- */
.pw-fs { --pw-fs-tab: #f1f0ef; --pw-fs-tab-hover: #e9e7e4; --pw-fs-tabkleur: #222222; --pw-fs-nr: #8a8580; }
.pw-band--zwart .pw-fs, .pw-band--antraciet .pw-fs { --pw-fs-tab: #1a1a1a; --pw-fs-tab-hover: #262626; --pw-fs-tabkleur: #ffffff; --pw-fs-nr: #7a7a7a; }
.pw-fs__kopblok { max-width: 900px; margin: 0 auto; text-align: center; }
.pw-fs__kop { margin: 0; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em; color: #000000; }
.pw-fs__intro { max-width: 820px; margin: 28px auto 0; font-size: 18px; line-height: 1.7; color: #2b2b2b; }
.pw-fs__intro > * { margin: 0 0 16px; }
.pw-fs__intro > :last-child { margin-bottom: 0; }
.pw-band--zwart .pw-fs__kop, .pw-band--antraciet .pw-fs__kop { color: #ffffff; }
.pw-band--zwart .pw-fs__intro, .pw-band--antraciet .pw-fs__intro { color: #cfcfcf; }
.pw-fs__tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; margin-top: 64px; }
.pw-fs__tab { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 26px 28px; border: 0; border-radius: 20px; background: var(--pw-fs-tab); color: var(--pw-fs-tabkleur); font: inherit; text-align: left; cursor: pointer; transition: background .3s ease, color .3s ease; }
.pw-fs__tab:not(.is-actief):hover { background: var(--pw-fs-tab-hover); }
.pw-fs__tab:focus-visible { outline: 3px solid #f15829; outline-offset: 3px; }
.pw-fs__tab.is-actief { background: #ffffff; color: #222222; }
.pw-fs__nr { flex: none; font-size: 40px; font-weight: 800; line-height: 1; color: var(--pw-fs-nr); transition: color .3s ease; }
.pw-fs__tab.is-actief .pw-fs__nr { color: #f15829; }
.pw-fs__naam { font-size: 18px; font-weight: 700; line-height: 1.3; }
.pw-fs__balk { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #f15829; transform: scaleX(0); transform-origin: 0 50%; }
.pw-fs__tab.is-actief .pw-fs__balk { transform: scaleX(1); }
.pw-fs.is-auto .pw-fs__tab.is-actief .pw-fs__balk { animation: pw-fs-balk 7s linear forwards; }
@keyframes pw-fs-balk { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pw-fs__paneel { margin-top: 20px; padding: 48px; border-radius: 24px; background: #ffffff; color: #181818; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
.pw-fs__paneel:not([hidden]) { animation: pw-fs-in .6s cubic-bezier(.2, .7, .2, 1); }
.pw-fs__paneel:focus-visible { outline: 3px solid #f15829; outline-offset: 4px; }
@keyframes pw-fs-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pw-fs__paneelkop { max-width: 820px; }
.pw-fs__titel { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 700; color: #222222; }
.pw-fs__paneelintro { margin: 10px 0 0; font-size: 17px; line-height: 1.65; color: #616161; }
.pw-fs__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 36px; }
.pw-fs__paneelkop + .pw-fs__raster { margin-top: 36px; }
.pw-fs__deel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pw-fs__icoon { display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 12px; background: #71655a; color: #ffffff; } /* het bruin van het logo met een wit icoon, zoals Kolommen met icoon */
.pw-fs__icoon svg { display: block; width: 26px; height: 26px; }
.pw-fs__deelkop { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: #222222; }
.pw-fs__deeltekst { font-size: 17px; line-height: 1.65; color: #2b2b2b; }
.pw-fs__deeltekst > * { margin: 0 0 12px; }
.pw-fs__deeltekst > :last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
	.pw-fs__tab { gap: 12px; padding: 20px; }
	.pw-fs__nr { font-size: 30px; }
	.pw-fs__naam { font-size: 16px; }
	.pw-fs__paneel { padding: 36px; }
	.pw-fs__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 767px) {
	.pw-fs__tabs { grid-auto-flow: row; gap: 10px; margin-top: 40px; }
	.pw-fs__tab { padding: 16px 18px; border-radius: 16px; }
	.pw-fs__nr { font-size: 24px; }
	.pw-fs__paneel { padding: 28px 22px; border-radius: 20px; }
	.pw-fs__titel { font-size: 23px; }
	.pw-fs__raster { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
}

/* --------------------------------------------------------------------------
   16. Blok: Reviews
   -------------------------------------------------------------------------- */
.pw-sectie--reviews .pw-intro { margin-bottom: 25px; } /* spacer 25 */
.pw-sectie--reviews .pw-reviews__intro--35 { margin-bottom: 35px; }
.pw-sectie--reviews .pw-kop-midden + .pw-reviews { margin-top: 25px; } /* bron: spacer 25 onder de kop, ook zonder intro */
.pw-reviews__rij {
	display: flex;
	gap: 15px;
}
.pw-review {
	flex: 1 1 0;
	min-width: 0;
	padding: 40px 36.5px 60px; /* bron: rij 20 + kolom 15 + 1 px marge, tekst 330 breed bij 3 kaarten */
	border-radius: 20px;
	background: var(--pw-wit);
}
.pw-review__bron { text-align: center; line-height: 0; }
.pw-review__google { width: 316px; max-width: 100%; height: auto; }
.pw-review__naam {
	padding-top: 20px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.375;
	color: var(--pw-kop);
}
.pw-review__sterren { margin-top: 5px; height: 28px; } /* bron: inline-block met regelhoogte 28 */
.pw-review__tekst > :last-child { margin-bottom: 20px; } /* bron: laatste alinea houdt zijn marge */
.pw-review__datum {
	padding-top: 5px;
	font-size: 15px;
	line-height: 1.65;
}
.pw-review__tekst { padding-top: 20px; }
.pw-reviews__dots { display: none; }
/* Reviews, opmaak quote (Claude Design "Pingwin reviews", variant 2, oktober 2026) */
/* Reviews, opmaak 'ticket' (oktober 2026, indeling naar voorbeeld): kop en intro links, rechts een schuifrij die tot de
   rand van het venster doorloopt, met witte kaarten en pijlen rechtsboven. */
.pw-rticket { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.pw-rticket__zij { display: flex; flex-direction: column; gap: 28px; padding-top: 90px; }
.pw-rticket__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-rticket__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-rticket__intro { font-size: 17px; line-height: 1.65; }
.pw-rticket__intro > * { margin: 0 0 1em; }
.pw-rticket__intro > :last-child { margin-bottom: 0; }
.pw-rticket__rechts { min-width: 0; }
.pw-rticket__bediening { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 40px; }
.pw-rticket__pijl { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 1px solid #c9cbd2; border-radius: 50%; background: transparent; color: #000000; cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease, opacity .3s ease; }
.pw-rticket__pijl:hover,
.pw-rticket__pijl:focus-visible { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-rticket__pijl[disabled] { opacity: .35; cursor: default; background: transparent; border-color: #c9cbd2; color: #000000; }
.pw-rticket__spoor {
	display: flex;
	align-items: flex-start; /* elke kaart zo hoog als zijn eigen review, zoals in het voorbeeld */
	gap: 40px;
	margin-right: calc((100vw - min(var(--pw-container), 90vw)) / -2); /* loopt door tot de rand van het venster */
	padding-right: calc((100vw - min(var(--pw-container), 90vw)) / 2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.pw-rticket__spoor::-webkit-scrollbar { display: none; }
.pw-rticket__kaart {
	display: flex;
	flex: 0 0 min(460px, 82vw);
	flex-direction: column;
	gap: 26px;
	margin: 0;
	padding: 44px 40px 40px;
	border-radius: 16px;
	background: var(--pw-wit);
	scroll-snap-align: start;
}
.pw-rticket__kopregel { display: flex; align-items: center; gap: 14px; }
.pw-rticket__score { font-size: 16px; font-weight: 600; color: #000000; }
.pw-rticket__sterren { font-size: 18px; letter-spacing: 2px; color: var(--pw-oranje-fel); }
.pw-rticket__google { width: auto; height: 24px; margin-left: 6px; }
.pw-rticket__tekst { margin: 0; font-size: 18px; line-height: 1.6; color: #303030; }
/* Lees verder (artifact "Pingwin reviews compacter", variant A): met JS na vier regels afgekapt; de knop verschijnt alleen
   als de tekst langer is en klapt de hele review uit. Zonder JS staat de volledige tekst er. De volledige tekst staat altijd in de HTML. */
.pw-js .pw-rticket__tekst { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pw-js .pw-rticket__kaart.is-open .pw-rticket__tekst { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pw-rticket__spoor { align-items: flex-start; } /* een uitgeklapte kaart groeit alleen zelf */
.pw-rticket__meer { align-self: flex-start; margin-top: -10px; padding: 0 0 2px; border: 0; border-bottom: 1px solid currentColor; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--pw-tekst); cursor: pointer; }
.pw-rticket__meer:hover, .pw-rticket__meer:focus-visible { color: var(--pw-oranje-fel); }
.pw-rticket__meer[hidden] { display: none; }
.pw-rticket__wie { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 24px; }
.pw-rticket__naam { font-size: 18px; font-weight: 600; color: #000000; }
.pw-rticket__meta { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #616161; }
.pw-rticket__case { align-self: flex-start; text-decoration: underline; text-underline-offset: 4px; } /* bron 'klant': link naar de case in plaats van datum en Google */
.pw-rticket__case:hover, .pw-rticket__case:focus-visible { color: #000000; }
.pw-rquote__case { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 959px) {
	.pw-rticket { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.pw-rticket__zij { padding-top: 0; }
	.pw-rticket__bediening { margin-bottom: 24px; }
	.pw-rticket__spoor { gap: 16px; }
	.pw-rticket__kaart { padding: 40px 26px 34px; }
}
.pw-rquote { display: flex; gap: 100px; }
.pw-rquote__zij { flex: 0 0 400px; display: flex; flex-direction: column; gap: 28px; }
.pw-rquote__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-rquote__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-rquote__intro { font-size: 16px; line-height: 1.65; }
.pw-rquote__intro > * { margin: 0; }
.pw-rquote__score { align-self: flex-start; display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 18px; border-radius: 16px; background: var(--pw-wit); color: #000000; text-decoration: none; }
a.pw-rquote__score:hover { color: #000000; text-decoration: none; box-shadow: 0 12px 28px rgba(0, 0, 0, .08); }
.pw-rquote__google { width: 72px; height: auto; }
.pw-rquote__streep { width: 1px; height: 34px; background: #e2e2e2; }
.pw-rquote__cijfers { display: flex; flex-direction: column; gap: 2px; }
.pw-rquote__getal { font-size: 22px; font-weight: 700; line-height: 1; }
.pw-rquote__sterren { font-size: 16px; letter-spacing: 2px; color: var(--pw-oranje-fel); }
.pw-rquote__aantal { font-size: 13px; color: #5c5c5c; }
.pw-rquote__bediening { display: flex; align-items: center; gap: 24px; margin-top: auto; padding-top: 20px; }
.pw-rquote__pijl { display: flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid #c9c9c9; border-radius: 50%; background: transparent; color: #000000; cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.pw-rquote__pijl:hover { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-rquote__pijl:focus-visible { outline: 2px solid var(--pw-oranje-fel); outline-offset: 4px; }
.pw-rquote__teller { font-size: 14px; font-weight: 500; color: #6b6b6b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-rquote__teller span { color: #000000; }
.pw-rquote__lijn { position: relative; flex: 1 1 auto; height: 2px; overflow: hidden; border-radius: 2px; background: #dcdcdc; }
.pw-rquote__lijn span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--pw-oranje-fel); transition: width .6s cubic-bezier(.33, 1, .68, 1); }
.pw-rquote__podium { flex: 1 1 auto; min-width: 0; display: grid; align-items: center; padding-left: 60px; border-left: 1px solid #dcdcdc; } /* alle quotes in één cel: het blok houdt de hoogte van de langste */
.pw-rquote__quote { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 40px; margin: 0; }
.pw-rquote__quote[hidden] { display: flex; visibility: hidden; }
.pw-rquote__quote.is-actief { animation: pw-dbento-in .9s cubic-bezier(.33, 1, .68, 1) both; }
.pw-rquote__teken { height: 50px; font-size: 120px; font-weight: 700; line-height: .6; color: var(--pw-oranje-fel); }
.pw-rquote__tekst { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.38; letter-spacing: -.01em; color: #000000; }
.pw-rquote__tekst > * { margin: 0; }
.pw-rquote__tekst > * + * { margin-top: .6em; }
.pw-rquote__wie { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: 56px; }
.pw-rquote__wie::before { content: ""; position: absolute; top: 50%; left: 0; width: 40px; height: 2px; background: var(--pw-oranje-fel); }
.pw-rquote__naam { font-size: 17px; font-weight: 600; color: #000000; }
.pw-rquote__datum { font-size: 14px; color: #6b6b6b; }
/* Vanaf 1024 px nooit hoger dan het scherm: de witruimte schaalt mee met de schermhoogte en main.js verkleint zo nodig de
   quotetekst (--pw-rq-maat) tot het blok past. */
@media (min-width: 1024px) {
	.pw-sectie--reviews:has(.pw-rquote) { padding-top: min(var(--pw-boven, 0px), 9vh); padding-bottom: min(var(--pw-onder, 0px), 9vh); }
	.pw-rquote__zij { gap: clamp(16px, 3vh, 28px); }
	.pw-rquote__tekst { font-size: var(--pw-rq-maat, 24px); }
	.pw-rquote__quote { gap: clamp(20px, 4vh, 40px); }
}
@media (max-width: 1023px) {
	.pw-rquote { flex-direction: column; gap: 48px; }
	.pw-rquote__zij { flex-basis: auto; }
	.pw-rquote__podium { padding: 40px 0 0; border-left: 0; border-top: 1px solid #dcdcdc; }
}
@media (max-width: 767px) {
	.pw-rquote__tekst { font-size: 20px; line-height: 1.5; }
	.pw-rquote__quote { gap: 24px; }
	.pw-rquote__teken { height: 34px; font-size: 90px; }
}

/* --------------------------------------------------------------------------
   Blok: Portfolio schuivend (Claude Design "Pingwin portfolio horizontaal", combinatie, oktober 2026)
   Vanaf 1024 px blijft het blok staan en schuiven de cases bij scrollen naar links (hoogte en verschuiving zet
   main.js); in elk venster scrolt de website mee. Daaronder een veegbare rij.
   -------------------------------------------------------------------------- */
.pw-sectie--portfolio-schuif { padding: 0; }
.pw-pschuif { --pw-ps-rand: max(30px, calc((100% - 1280px) / 2)); position: relative; color: var(--pw-wit); }
.pw-pschuif__plak {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: 90px 0 70px;
	overflow: hidden;
}
.pw-pschuif__kopregel {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 0 var(--pw-ps-rand);
}
.pw-pschuif__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--pw-wit); }
.pw-pschuif__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-pschuif__voortgang { display: flex; align-items: center; gap: 24px; padding-bottom: 8px; }
.pw-pschuif__teller { font-size: 14px; font-weight: 500; letter-spacing: .04em; color: #a3a3a3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-pschuif__teller span { color: var(--pw-wit); }
.pw-pschuif__balk { position: relative; display: none; width: 160px; height: 2px; overflow: hidden; border-radius: 2px; background: #2a2a2a; }
.pw-pschuif__balk span { position: absolute; top: 0; bottom: 0; left: 0; width: 4%; background: var(--pw-oranje-fel); }
.pw-pschuif__spoor {
	display: flex;
	gap: 16px;
	padding: 0 var(--pw-ps-rand);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--pw-ps-rand);
	scrollbar-width: none;
}
.pw-pschuif__spoor::-webkit-scrollbar { display: none; }
.pw-pschuif__spoor::after { content: ""; flex: 0 0 1px; }
.pw-pschuif__kaart {
	--pw-ps-w: min(300px, 78vw);
	display: flex;
	flex: 0 0 var(--pw-ps-w);
	flex-direction: column;
	gap: 16px;
	scroll-snap-align: start;
	color: var(--pw-wit);
	text-decoration: none;
}
.pw-pschuif__kaart:hover,
.pw-pschuif__kaart:focus { color: var(--pw-wit); }
.pw-pschuif__kaart:focus-visible { outline: 2px solid var(--pw-oranje-fel); outline-offset: 6px; border-radius: 18px; }
.pw-pschuif__beeld {
	position: relative;
	display: block;
	height: calc(var(--pw-ps-w) * 1.2);
	overflow: hidden;
	border-radius: 16px;
	background: #161616;
}
.pw-pschuif__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.62); /* zwart-wit, zoals de foto in de hero */ }
.pw-pschuif__venster {
	position: absolute;
	top: 34px;
	right: 30px;
	bottom: 0;
	left: 30px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
	background: var(--pw-wit);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}
.pw-pschuif__balkje { display: flex; flex: 0 0 22px; align-items: center; gap: 5px; padding: 0 10px; background: #f1f1f1; }
.pw-pschuif__balkje i { width: 6px; height: 6px; border-radius: 50%; background: #d4d4d4; }
.pw-pschuif__site { flex: 1 1 auto; width: 100%; min-height: 0; height: 100%; object-fit: cover; object-position: 50% 0; }
.pw-pschuif__onder { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pw-pschuif__tekst { display: flex; flex-direction: column; gap: 4px; }
.pw-pschuif__naam { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.pw-pschuif__dienst { font-size: 14px; line-height: 1.4; color: #a3a3a3; }
.pw-pschuif__pijl {
	display: none;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #3a3a3a;
	border-radius: 50%;
	transition: background .3s ease, border-color .3s ease;
}
.pw-pschuif__kaart:hover .pw-pschuif__pijl { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); }
.pw-pschuif__eind { display: flex; flex: 0 0 auto; align-items: center; padding: 0 20px 0 8px; }
.pw-pschuif__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 0 36px;
	border-radius: 40px;
	background: var(--pw-wit);
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
	color: #000000;
	text-decoration: none;
	transition: background .3s ease, color .3s ease;
}
.pw-pschuif__knop:hover,
.pw-pschuif__knop:focus { background: var(--pw-oranje-fel); color: var(--pw-wit); }
@media (min-width: 768px) {
	.pw-pschuif__kaart { --pw-ps-w: 380px; }
	.pw-pschuif__balk { display: block; }
	.pw-pschuif__pijl { display: flex; }
}
/* Desktop: vastgezet vlak, de rij schuift (main.js zet .is-schuif, de hoogte en de verschuiving) */
@media (min-width: 1024px) {
	.pw-pschuif.is-schuif .pw-pschuif__plak {
		position: sticky;
		top: 0;
		gap: 48px;
		box-sizing: border-box;
		padding: 110px 0;
	}
	.pw-pschuif.is-schuif .pw-pschuif__spoor { gap: 24px; overflow: visible; scroll-snap-type: none; will-change: transform; }
	.pw-pschuif__kaart { --pw-ps-w: 460px; gap: 22px; }
	.pw-pschuif__beeld { height: clamp(300px, calc(100vh - 430px), 470px); border-radius: 18px; }
	.pw-pschuif__venster { top: 48px; right: 50px; left: 50px; border-radius: 12px 12px 0 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
	.pw-pschuif__balkje { flex-basis: 30px; gap: 6px; padding: 0 14px; }
	.pw-pschuif__balkje i { width: 8px; height: 8px; }
	.pw-pschuif__naam { font-size: 24px; }
	.pw-pschuif__dienst { font-size: 15px; }
	.pw-pschuif__eind { flex-basis: 360px; justify-content: center; padding: 0; }
	.pw-pschuif__knop { min-height: 74px; padding: 0 44px; font-size: 20px; }
}

/* --------------------------------------------------------------------------
   17. Blok: FAQ
   -------------------------------------------------------------------------- */
/* Ontwerp B (Claude Design "Pingwin FAQ-blok", oktober 2026): grote gecentreerde kop, witte kaarten met ronde knop. */
.pw-sectie--faq .pw-faq__kop {
	max-width: 920px;
	margin: 0 auto 72px;
	font-size: var(--pw-kop-groot);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: #000000;
}
.pw-sectie--faq .pw-intro { max-width: 920px; margin: -40px auto 72px; text-align: center; }
.pw-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 920px;
	margin: 0 auto;
}
.pw-faq__item { background: var(--pw-wit); border-radius: 16px; }
.pw-faq__vraag { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.pw-faq__knop {
	display: flex;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 30px 32px 30px 40px;
	border: 0;
	border-radius: 16px;
	background: none;
	text-align: left;
	font: inherit;
	color: #000000;
	cursor: pointer;
}
.pw-faq__tekst { flex: 1 1 auto; }
.pw-faq__knop:hover { color: var(--pw-oranje-fel); }
.pw-faq__knop:focus-visible { outline: 2px solid var(--pw-oranje-fel); outline-offset: 4px; }
.pw-faq__icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--pw-lichtblauw);
	color: #000000;
}
.pw-faq__icoon svg { width: 16px; height: 16px; }
.pw-faq__min { display: none; }
.pw-faq__item--open .pw-faq__icoon { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-faq__item--open .pw-faq__plus { display: none; }
.pw-faq__item--open .pw-faq__min { display: block; }
.pw-faq__antwoord { padding: 0 108px 38px 40px; font-size: 18px; line-height: 1.7; color: var(--pw-tekst); }
.pw-faq__antwoord > :last-child { margin-bottom: 0; }
.pw-faq__antwoord[hidden] { display: none; }
/* Opmaak gesplitst (Claude Design "Pingwin FAQ-blok", ontwerp 1, oktober 2026): kop, intro en contactblok links
   (blijft staan bij scrollen), genummerde vragen rechts; een open vraag wordt een witte kaart. */
.pw-faq-split { display: flex; align-items: flex-start; gap: 100px; }
.pw-faq-split__zij { position: sticky; top: 140px; flex: 0 0 420px; display: flex; flex-direction: column; gap: 28px; }
.pw-sectie--faq .pw-faq-split__kop { max-width: none; margin: 0; text-align: left; }
.pw-faq-split__intro { font-size: 18px; line-height: 1.65; }
.pw-faq-split__intro > * { margin: 0; }
.pw-faq-contact { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; padding: 28px; border-radius: 18px; background: #000000; color: var(--pw-wit); }
.pw-faq-contact__wie { display: flex; align-items: center; gap: 16px; }
.pw-faq-contact__foto { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pw-faq-contact__kop { margin: 0 0 4px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.pw-faq-contact__tekst { margin: 0; font-size: 15px; color: #d4d4d4; }
.pw-faq-contact__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.pw-faq-contact__knop { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 40px; background: var(--pw-wit); color: #000000; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .3s ease, color .3s ease; }
.pw-faq-contact__knop--lijn { border: 1px solid #4a4a4a; background: transparent; color: var(--pw-wit); }
.pw-faq-contact__knop:hover { background: var(--pw-oranje-fel); color: var(--pw-wit); text-decoration: none; }
.pw-faq--genummerd { flex: 1 1 auto; min-width: 0; max-width: none; gap: 8px; margin: 0; }
.pw-faq--genummerd .pw-faq__item { border-radius: 18px; background: transparent; transition: background .4s ease, box-shadow .4s ease; }
.pw-faq--genummerd .pw-faq__item:hover { background: rgba(255, 255, 255, .55); }
.pw-faq--genummerd .pw-faq__item--open,
.pw-faq--genummerd .pw-faq__item--open:hover { background: var(--pw-wit); box-shadow: 0 18px 40px rgba(0, 0, 0, .06); }
.pw-faq--genummerd .pw-faq__knop { gap: 28px; padding: 30px 32px; }
.pw-faq--genummerd .pw-faq__knop:hover { color: #000000; }
.pw-faq__nr { flex: 0 0 40px; font-size: 18px; font-weight: 700; color: #6b7c82; font-variant-numeric: tabular-nums; transition: color .3s ease; }
.pw-faq--genummerd .pw-faq__item:hover .pw-faq__nr,
.pw-faq--genummerd .pw-faq__item--open .pw-faq__nr { color: var(--pw-oranje-fel); }
.pw-faq--genummerd .pw-faq__icoon { background: var(--pw-wit); transition: background .3s ease, color .3s ease, transform .5s cubic-bezier(.33, 1, .68, 1); }
.pw-faq--genummerd .pw-faq__item--open .pw-faq__icoon { background: var(--pw-oranje-fel); color: var(--pw-wit); transform: rotate(45deg); }
.pw-faq--genummerd .pw-faq__item--open .pw-faq__plus { display: block; }
.pw-faq--genummerd .pw-faq__item--open .pw-faq__min { display: none; }
.pw-faq--genummerd .pw-faq__antwoord { overflow: hidden; padding: 0 108px 34px 100px; font-size: 17px; }
/* Binnenkomst: de vragen schuiven na elkaar omhoog zodra ze in beeld komen (main.js; zonder JS direct zichtbaar). */
.pw-faq--genummerd.is-wacht .pw-faq__item { opacity: 0; }
.pw-faq--genummerd.is-in .pw-faq__item { animation: pw-dbento-in 1.2s cubic-bezier(.33, 1, .68, 1) both; }
.pw-faq--genummerd.is-in .pw-faq__item:nth-child(2) { animation-delay: .1s; }
.pw-faq--genummerd.is-in .pw-faq__item:nth-child(3) { animation-delay: .2s; }
.pw-faq--genummerd.is-in .pw-faq__item:nth-child(4) { animation-delay: .3s; }
.pw-faq--genummerd.is-in .pw-faq__item:nth-child(n+5) { animation-delay: .4s; }
@media (max-width: 1023px) {
	.pw-faq-split { flex-direction: column; gap: 48px; }
	.pw-faq-split__zij { position: static; flex-basis: auto; max-width: 640px; }
	.pw-faq--genummerd { width: 100%; }
}
@media (max-width: 767px) {
	.pw-faq-contact { padding: 22px; }
	.pw-faq--genummerd .pw-faq__knop { gap: 14px; padding: 22px 18px; }
	.pw-faq__nr { flex-basis: 26px; font-size: 15px; }
	.pw-faq--genummerd .pw-faq__antwoord { padding: 0 18px 24px 58px; }
}
@media (max-width: 767px) {
	.pw-sectie--faq .pw-faq__kop { margin-bottom: 44px; }
	.pw-sectie--faq .pw-intro { margin: -20px auto 44px; }
	.pw-faq__vraag { font-size: 19px; line-height: 1.35; }
	.pw-faq__knop { gap: 16px; padding: 22px 20px 22px 24px; }
	.pw-faq__antwoord { padding: 0 24px 26px; font-size: 17px; line-height: 1.65; }
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
/* Krimpend vlak boven de footer: de band wordt bij scrollen 4 % smaller (zijkanten en onderkant) met hoeken
   van 25 px, op de footerkleur (zoals Salient). --pw-krimp (0 tot 1) zet main.js. */
.pw-sectie.pw-krimp { background: linear-gradient(var(--pw-krimp-kleur, var(--pw-grijs)) 0 3px, var(--pw-footer) 3px); } /* bovenrand in de bandkleur: geen donkere haarlijn op een halve pixel */
.pw-krimp::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pw-krimp-kleur, var(--pw-grijs));
	clip-path: inset(0 calc(var(--pw-krimp, 0) * 4%) calc(var(--pw-krimp, 0) * 4%) round calc(var(--pw-krimp, 0) * 25px));
}
.pw-krimp.pw-band--wit { --pw-krimp-kleur: var(--pw-wit); }
.pw-krimp.pw-band--lichtblauw { --pw-krimp-kleur: var(--pw-lichtblauw); }
.pw-krimp.pw-band--blauw { --pw-krimp-kleur: var(--pw-blauw); }
.pw-krimp.pw-band--beige { --pw-krimp-kleur: var(--pw-beige); }
.pw-krimp.pw-band--lichtbeige { --pw-krimp-kleur: #f9f8f7; }
.pw-krimp.pw-band--ijsblauw { --pw-krimp-kleur: #eef6f8; }
.pw-krimp.pw-band--zand { --pw-krimp-kleur: #eceae8; }
.pw-krimp.pw-band--lichtzand { --pw-krimp-kleur: #f1f0ef; }
.pw-krimp.pw-band--poolblauw { --pw-krimp-kleur: #e8f5f8; }
.pw-krimp.pw-band--antraciet { --pw-krimp-kleur: #3f3f3f; }
.pw-krimp.pw-band--zwart { --pw-krimp-kleur: var(--pw-footer); }
.pw-krimp.pw-band--oranje { --pw-krimp-kleur: var(--pw-oranje-fel); }
.pw-krimp.pw-band--lichtoranje { --pw-krimp-kleur: #fbe9de; }

.pw-footer {
	padding: 170px 30px 150px;
	background: var(--pw-footer);
	color: var(--pw-wit);
}
.pw-footer a { color: var(--pw-wit); text-decoration: none; }
.pw-footer a:hover { color: var(--pw-oranje); }
.pw-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 60px 80px;
	max-width: 1280px;
	margin: 0 auto;
}
.pw-footer__statement { display: flex; flex-direction: column; gap: 90px; flex: 1 1 560px; min-width: 0; }
.pw-footer__kopblok { display: flex; flex-direction: column; gap: 28px; }
.pw-footer__kop { max-width: 760px; margin: 0; font-size: 68px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--pw-wit); }
.pw-footer__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-footer__tekst { max-width: 560px; margin: 0; font-size: 20px; line-height: 1.55; }
.pw-footer .pw-footer__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 74px;
	padding: 0 44px;
	border-radius: 40px;
	background: var(--pw-oranje-fel);
	font-size: 20px;
	font-weight: 600;
	color: var(--pw-wit);
}
.pw-footer .pw-footer__knop:hover { background: var(--pw-oranje); color: var(--pw-wit); }
.pw-footer__info { display: flex; flex-direction: column; gap: 64px; flex: 0 1 520px; padding-top: 24px; }
.pw-footer__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.pw-footer__blok { display: flex; flex-direction: column; gap: 14px; }
.pw-footer__titel { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--pw-wit); }
.pw-footer__lijst { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 19px; line-height: 1.4; }
.pw-footer__adres { margin: 0; font-size: 19px; font-style: normal; line-height: 1.4; }
.pw-footer__partnerlogo { display: block; width: 150px; max-width: 100%; height: auto; border-radius: 3px; } /* Leadinfo-badge op ware grootte (150 x 67) */
.pw-footer__lijst a,
.pw-footer__juridisch-menu a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pw-footer__juridisch { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; }
.pw-footer__copyright { margin: 0; }
.pw-footer__juridisch-menu { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
/* Knop en de rij Privacy, Disclaimer onderaan hun kolom, onderkanten gelijk (werkt zodra de kolommen naast elkaar staan). */
.pw-footer__statement,
.pw-footer__info { justify-content: space-between; }
@media (max-width: 767px) {
	.pw-footer { padding: 90px 30px 70px; }
	.pw-footer__inner { flex-direction: column; flex-wrap: nowrap; gap: 70px; }
	.pw-footer__statement { flex: none; gap: 40px; }
	.pw-footer__kopblok { gap: 20px; }
	.pw-footer__kop { font-size: 38px; }
	.pw-footer__tekst { font-size: 17px; }
	.pw-footer .pw-footer__knop { min-height: 64px; padding: 0 36px; font-size: 18px; }
	.pw-footer__info { flex: none; gap: 70px; padding-top: 0; }
	.pw-footer__rij { gap: 30px; }
	.pw-footer__blok { gap: 12px; }
	.pw-footer__titel { font-size: 15px; }
	.pw-footer__lijst { font-size: 17px; }
	.pw-footer__adres { font-size: 16px; }
	.pw-footer__juridisch { gap: 12px; font-size: 14px; }
	.pw-footer__juridisch-menu { gap: 12px 20px; }
}

/* Terug naar boven */
.pw-naar-boven {
	position: fixed;
	right: 25px;
	bottom: 25px;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 9999px;
	background: var(--pw-callout);
	color: #9e9e9e;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s, background-color .2s, color .2s;
}
.pw-naar-boven svg { width: 16px; height: 16px; }
.pw-naar-boven--zichtbaar { opacity: 1; visibility: visible; }
.pw-naar-boven:hover { background: var(--pw-oranje-fel); color: var(--pw-wit); text-decoration: none; }

/* --------------------------------------------------------------------------
   19. Overzichten (zoeken), blog en berichten
   -------------------------------------------------------------------------- */
.pw-overzicht__titel { padding: 0 var(--pw-kolom-padding); }
/* Blog: kaarten (bron: wpex-post-cards template_37710, 3 per rij, 30 px ertussen) */
.pw-berichten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}
.pw-berichtkaart__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 20px; /* het beeld bedekt de bovenhoeken: die blijven recht, zoals in de bron */
	background: var(--pw-wit);
	color: var(--pw-tekst);
	text-decoration: none;
}
.pw-berichtkaart__link:hover { text-decoration: none; }
.pw-berichtkaart__beeld { display: block; height: 280px; line-height: 0; background: var(--pw-grijs); }
.pw-berichtkaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.pw-berichtkaart__inhoud { display: flex; flex: 1 1 auto; flex-direction: column; padding: 20px 30px 30px; } /* auteur onderaan: in een rij altijd op gelijke hoogte */
.pw-berichtkaart__cats {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.65;
	text-transform: uppercase;
	color: var(--pw-oranje-fel);
}
.pw-berichtkaart__titel {
	margin: 0 0 5px;
	letter-spacing: normal; /* bron: titel is geen kop-element */
	font-size: 22px;
	font-weight: 700;
	line-height: 1.375;
	color: var(--pw-kop);
}
.pw-berichtkaart__samenvatting { display: block; margin-bottom: 20px; }
.pw-berichtkaart__auteur { display: flex; align-items: center; margin-top: auto; }
.pw-berichtkaart__foto { flex-shrink: 0; width: 40px; height: 40px; margin-right: 20px; border-radius: 50%; }
.pw-berichtkaart__auteurtekst { display: block; }
.pw-berichtkaart__naam { display: block; font-size: 15px; font-weight: 600; line-height: 1.65; color: var(--pw-kop); }
.pw-berichtkaart__meta { display: flex; flex-wrap: wrap; gap: 5px; font-size: 13px; line-height: 1.65; }
/* Variant "Lees meer over dit onderwerp" (bron: zelfde kaart, maar 400 breed met 20 px ertussen,
   een grijs tekstvlak met ronde onderhoeken en "over" + categorieën zwart, niet in hoofdletters) */
.pw-berichten--gerelateerd { gap: 20px; }
.pw-berichtkaart--gerelateerd .pw-berichtkaart__link { height: auto; }
.pw-berichtkaart--gerelateerd .pw-berichtkaart__inhoud { border-radius: 0 0 20px 20px; background: var(--pw-grijs); }
.pw-berichtkaart--gerelateerd .pw-berichtkaart__cats { text-transform: none; color: #000; }
.pw-berichtkaart__over { margin-right: 10px; }

/* Blog: categoriefilter en "Meer laden" (bron: vcex-navbar en vcex-loadmore) */
.pw-filter { margin: 0 -100px 45px; font-size: 0; text-align: center; } /* bron: 1410 breed, 15 px spacer + 30 px tot de kaarten */
.pw-filter__link {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 12px 30px;
	border: 1px solid #eeeeee;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #757575;
	text-decoration: none;
}
.pw-filter__link:last-child { margin-right: 0; }
.pw-filter__link.is-actief,
.pw-filter__link:hover { background: var(--pw-callout); color: #757575; text-decoration: none; }
.pw-filter__keuze { display: none; }
.pw-filter__keuze select {
	width: 100%;
	height: 38px;
	padding: 0 30px 0 10px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	background: var(--pw-wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23616161' d='M12 16.6 3.4 8 5 6.4l7 7 7-7L20.6 8z'/%3E%3C/svg%3E") no-repeat right 11px center / 11px 11px;
	font: 400 12px/36px var(--pw-font);
	color: #616161;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.pw-berichten__kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 50px; }
.pw-berichten__titel { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-berichten__titel .pw-oranje { color: var(--pw-oranje-fel); }
.pw-berichten__link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1.5px solid currentColor; font-size: 16px; font-weight: 600; color: #000000; text-decoration: none; transition: color .3s ease; }
.pw-berichten__link:hover, .pw-berichten__link:focus-visible { color: var(--pw-oranje-fel); text-decoration: none; }
.pw-berichten__meer { margin-top: 60px; text-align: center; } /* bron: kaarten 30 px marge onder + 30 px boven de knop */
.pw-berichten__meer .pw-knop { font-size: 17px; }
.pw-berichten__meer .is-bezig { opacity: .6; pointer-events: none; }

/* Los bericht (bron: Total dynamisch sjabloon, 1100 breed, tekst 920) */
.pw-bericht-pagina { background: var(--pw-grijs); }
.pw-bericht__kop {
	max-width: 1100px;
	margin: 0 auto;
	padding: 400px 90px 20px;
	background: var(--pw-donker) center / auto repeat;
}
.pw-kruimelpad--label {
	display: inline;
	padding: 9px 15px;
	background: var(--pw-footer-onder);
	letter-spacing: normal;
	color: var(--pw-wit);
}
.pw-kruimelpad--label a { color: var(--pw-wit); }
.pw-bericht {
	max-width: 1100px;
	margin: 0 auto;
	padding: 50px 90px 60px;
	background: var(--pw-wit);
}
.pw-bericht__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.65;
	color: #000;
}
.pw-bericht__meta li { margin: 0 8px 0 0; }
.pw-bericht__meta a { border-bottom: 1px solid #000; color: inherit; text-decoration: none; }
.pw-bericht__auteur { color: var(--pw-tekst); }
.pw-bericht__over { margin-right: 10px; font-weight: 400; }
.pw-bericht__leestijd { display: flex; align-items: center; }
.pw-bericht__leestijd svg { width: 14px; height: 14px; margin-right: 10px; fill: currentColor; }
.pw-bericht__titel { margin: 20px 0; }
/* bron: de laatste marge (20 px) blijft binnen de tekst, ook na lege alinea's uit de oude editor */
.pw-bericht__inhoud { display: flow-root; }
.pw-bericht__inhoud.pw-rijk > :last-child { margin-bottom: 20px; }
.pw-bericht__inhoud figure { margin: 0 0 20px; }
.pw-bericht__inhoud .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.pw-bericht__inhoud figcaption { font-size: 15px; line-height: 1.65; color: var(--pw-gedempt); }
.pw-bericht__meer { margin-top: 120px; padding: 90px 0 80px; /* bron: kaarten 20 px marge onder + 60 px */ background: var(--pw-wit); }
.pw-bericht__meer-kop { margin: 0 0 30px; font-size: 27.5px; line-height: 1.375; text-align: center; }

/* Inhoudsopgave in een bericht (bron: Easy Table of Contents) */
.pw-inhoud {
	margin-bottom: 1em; /* bron: maten in em (17 px op desktop, 16 px op mobiel) */
	padding: 10px 20px 10px 10px;
	border: 1px solid var(--pw-oranje-fel);
	border-radius: 4px;
	background: var(--pw-wit);
}
.pw-inhoud__kop { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.pw-inhoud__titel { margin: 0; font-size: 1.2em; font-weight: 600; line-height: 1.45; color: var(--pw-oranje-fel); }
.pw-inhoud__knop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 34px;
	padding: 1px 5px;
	border: 1px solid #dddddd;
	border-radius: 3px;
	background: var(--pw-wit);
	color: var(--pw-oranje-fel);
	cursor: pointer;
}
.pw-inhoud__knop svg { width: 20px; height: 20px; fill: currentColor; }
.pw-rijk .pw-inhoud__lijst { margin: 0; padding: 0; list-style: none; }
.pw-inhoud__lijst li { font-size: .95em; font-weight: 500; line-height: 1.6; }
.pw-inhoud__lijst a { font-size: .95em; font-weight: 500; color: var(--pw-oranje-fel); }
.pw-rijk img { height: auto; }
.pagination { padding: 30px var(--pw-kolom-padding) 0; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 6px 12px;
	border-radius: 20px;
	background: var(--pw-grijs);
	color: var(--pw-kop);
	text-align: center;
}
.pagination .page-numbers.current { background: var(--pw-oranje); color: var(--pw-wit); }

/* --------------------------------------------------------------------------
   20. Responsive
   Breekpunten van de bron: 1366, 1024, 959 (menu), 767.
   -------------------------------------------------------------------------- */
@media (max-width: 1299px) {
	.pw-beeld--1410 { width: 100%; margin-left: 0; }
}

@media (max-width: 1100px) {
	.pw-menu > li > a { padding: 17px 14px; }
}
@media (max-width: 1100px) and (min-width: 960px) {
	/* Logo, navigatie en contactknop passen naast elkaar tot 960 px */
	.pw-header__inner { gap: 12px; }
	.pw-menu > li > a { padding: 17px 10px; }
	.pw-header__knop { padding: 17px 20px; }
}

@media (max-width: 959px) {
	/* Hero: kolommen onder elkaar (bron: vanaf 959 px), tekst en beeld lijnen onder uit in de 680 px */
	.pw-hero__inner { flex-direction: column; align-items: stretch; }
	.pw-hero__tekst,
	.pw-hero__beeld { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
	.pw-hero__tekst { padding: 30px 15px 90px; } /* spacer 30 boven, spacer 30 + marge 60 onder */
	.pw-hero__beeld { align-self: auto; min-height: 16px; margin-bottom: 60px; }

	.pw-nav { display: none; }
	.pw-header__knop { display: none; }
	.pw-menu-knop { display: block; }
}

@media (max-width: 767px) {
	body { font-size: 16px; }
	h1 { font-size: 30px; }
	h2 { font-size: 25px; }

	.pw-smal, .pw-tekst { padding: 0; }
	.pw-tekst--smal2 { padding: 17.5px; } /* bron: binnenkolom met 17,5 px rondom */
	.pw-tekst--tekst { padding: 0 15px; } /* bron: kolom met 15 px binnenmarge, tekst 321 */
	.pw-tekst--tekst2 { padding: 17.5px 15px 77.5px; } /* bron: binnenrij blijft op mobiel */
	.pw-tekst--kaart, .pw-tekst--kaart2 { padding: 40px 45px 60px; } /* bron: witte binnenrij, op mobiel zonder extra marge */
	.pw-sectie--beeld .pw-container { max-width: none; padding-left: 15px; padding-right: 15px; }
	.pw-beeld--1240 { margin: 0 4.5px; } /* bron: beeld in de gewone kolom (351) */
	.pw-header { padding: 12px 5%; }

	/* Hero: witte rand 20, radius 35, tekst boven, beeld eronder (steekt onder het vlak uit) */
	.pw-hero {
		flex-direction: column;
		--pw-hero-rand: 20px;
		padding: 0 calc(5% - 15px); /* bron: 4.5 px bij 390, 23 px bij 767 */
	}
	.pw-hero__inner { max-width: none; }
	.pw-hero__beeld::before {
		top: -82px;
		right: -35px;
		width: 400px;
		height: 350px;
		background-size: 95%;
	}

	.pw-beeld-tekst { gap: 30px; }
	.pw-beeld-tekst__rij { flex-direction: column; gap: 30px; border-radius: 0; overflow: visible; }
	.pw-beeld-tekst__beeld,
	.pw-beeld-tekst__tekst { width: 100%; flex-basis: auto; border-radius: 20px; }
	.pw-beeld-tekst__beeld { order: 0 !important; }
	.pw-beeld-tekst__tekst { padding: var(--pw-bt-pt-m, 40px) 20px var(--pw-bt-pb-m, 50px); } /* homepage: spacer 40 boven, 50 onder */
	.pw-beeld-tekst__beeld { min-height: 320px; }
	.pw-beeld-tekst__rij--beeld-links .pw-beeld-tekst__beeld { display: none; } /* bron: een beeld links is op mobiel verborgen, een beeld rechts staat boven de tekst */

	.pw-kolommen { flex-direction: column; }
	.pw-kolom + .pw-kolom { margin-top: 15px; } /* bron: mobiele spacer 15 boven de tweede kolom */
	.pw-kolommen--marge-geen .pw-kolom + .pw-kolom { margin-top: 0; } /* bron (contact): adreskolommen direct onder elkaar */
	.pw-kolommen--marge-60 { margin: 0; } /* bron (kolommen in een binnenrij): 351 breed met 15 px binnenmarge en 60 px kolommarge onder */
	.pw-kolommen--marge-60 .pw-kolom { margin-bottom: 60px; }
	.pw-kolommen--kaarten { margin: 0; } /* bron: de binnenrij verliest op mobiel de negatieve marge, kaarten 321 breed */

	.pw-logos, .pw-logos--5, .pw-logos--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.pw-cta { flex-direction: column; }
	.pw-cta::before { display: none; }
	.pw-cta__tekst { flex-basis: auto; width: 100%; padding: 30px 15px 40px; }
	.pw-cta__beeld { flex-basis: auto; width: 100%; padding: 0 15px 20px; }
	.pw-cta__beeld img { width: 281px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; }

	.pw-kaart--dienst { flex-basis: 100% !important; }

}

/* Reviews-stippen (alleen zichtbaar als de rij scrolt, op smalle schermen) */
@media (max-width: 767px) {
	.pw-reviews__rij { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 5px; }
	.pw-reviews__rij::-webkit-scrollbar { display: none; }
	.pw-reviews__rij { gap: 16px; }
	.pw-review { flex: 0 0 calc(50% - 15px); scroll-snap-align: start; } /* bron: 2 per beeld (330 px bij 767), onder 480 px 1 */
	.pw-reviews__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
	.pw-reviews__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
	.pw-reviews__dot--actief { background: #f1592a; }
	.pw-reviews--stapel .pw-reviews__rij { flex-direction: column; gap: 30px; overflow: visible; padding-bottom: 0; } /* bron: één kaart per rij, 30 px ertussen */
	.pw-reviews--stapel .pw-review { flex: none; }
	.pw-reviews--stapel .pw-reviews__dots { display: none; }
}

@media (max-width: 479px) {
	.pw-review { flex-basis: 100%; }
	.pw-cta__knoppen > .pw-knop { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   21. Blokken van de dienstpagina's (nagemeten op pingwin.nl/diensten/ en de dienstpagina's)
   -------------------------------------------------------------------------- */

/* Kruimelpad */
.pw-kruimelpad {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--pw-footer-onder);
}
.pw-kruimelpad a { color: var(--pw-oranje-fel); }
.pw-kruimelpad__sep { margin: 0 5px; }

/* Blok: Hero pagina */
.pw-sectie--hero-pagina { padding: 0; }
.pw-hero-pagina {
	display: flex;
	align-items: center;
	margin: -35px 0 0; /* de witte rand valt onder de header, het vlak begint direct eronder */
	padding: 0 max(calc((100% - 1270px) / 2), calc(5% - 15px)); /* bron: kolommen samen 90 % van het venster min 40, maximaal 1200 */
	border: 35px solid var(--pw-wit);
	border-radius: 50px;
	background: #f9dbbe;
	background: linear-gradient(130deg, rgba(249, 219, 190, 1) 0%, rgba(249, 219, 190, .08) 43%, rgba(249, 219, 190, .09) 72%, rgba(249, 219, 190, 1) 100%);
}
.pw-hero-pagina__tekst,
.pw-hero-pagina__beeld { flex: 0 0 50%; width: 50%; padding: 0 15px; }
.pw-hero-pagina__tekst { padding-top: var(--pw-hb, 70px); padding-bottom: var(--pw-ho, 70px); } /* bron: spacers boven en onder de tekst */
.pw-hero-pagina__beeld { padding-top: var(--pw-bb, 0); padding-bottom: var(--pw-bo, 0); }
.pw-hero-pagina--gap35 { padding: 0 max(calc((100% - 1270px) / 2 - 17.5px), calc(5% - 32.5px)); } /* bron: vc_column-gap-35; de rij is 35 px breder */
.pw-hero-pagina--gap35 > .pw-hero-pagina__tekst,
.pw-hero-pagina--gap35 > .pw-hero-pagina__beeld { flex-basis: calc(50% - 35px); width: calc(50% - 35px); margin: 17.5px; } /* bron: vc_column-gap-35 */
.pw-hero-pagina__kop { margin-bottom: 20px; }
.pw-hero-pagina__subtitel {
	margin: 0 0 15px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.375;
	text-transform: uppercase;
	color: var(--pw-oranje-fel);
}
.pw-hero-pagina__intro { margin-bottom: 30px; }
.pw-hero-pagina__knop { margin: 0; } /* bron: knopmodule zonder marge; de spacer eronder is tekst_onder */
.pw-hero-pagina__beeld { line-height: 0; }
.pw-hero-pagina__beeld img { width: 100%; height: auto; }
.pw-hero-pagina__beeld { text-align: center; }
.pw-hero-pagina__beeld > img { width: auto; max-width: 100%; } /* bron: beeldmodule op eigen grootte (niet opgerekt) */
.pw-hero-pagina--rond .pw-hero-pagina__beeld img { border-radius: 16px; } /* oktober 2026: dienstbeelden afgerond, zoals de dienstkaarten op home */
@media (min-width: 768px) {
	/* Afgerond beeld vierkant en helemaal rechts in het vlak, zonder witruimte: de beeldkolom is 45 % breed en vierkant,
	   de hero is daardoor minstens zo hoog als het beeld. */
	.pw-hero-pagina--rond { padding-right: 0; }
	.pw-hero-pagina--rond > .pw-hero-pagina__tekst { flex: 1 1 0; width: auto; padding-right: 60px; }
	.pw-hero-pagina--rond > .pw-hero-pagina__beeld { flex: 0 0 45%; width: 45%; padding: 0; }
	.pw-hero-pagina--rond .pw-hero-pagina__beeld img { width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
}
.pw-wissel { position: relative; display: block; overflow: hidden; }
.pw-wissel__tweede { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.pw-wissel:hover .pw-wissel__tweede { opacity: 1; }
/* Variant 'achtergrond' (bron: background-header-image): geen vlak; het beeld staat als achtergrond rechts (halve breedte),
   de rij begint achter de kop van de site. */
.pw-hero-pagina--achtergrond {
	max-width: var(--pw-container, 1240px);
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent no-repeat 100% 50% / 50% auto;
}
.pw-hero-pagina--achter-kop { margin-top: -78px; } /* bron: pagina met 'overlay header'; de rij begint achter de kop */

/* Kolommen met icoon: tekst onder de kop */
.pw-kolommen__intro { margin-bottom: 15px; }

/* Blok: Linkgroepen */
.pw-linkgroepen {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.pw-linkgroep {
	flex: 0 0 50%;
	padding: 0 15px;
}
.pw-linkgroepen--30 { margin: 0 -30px; } /* bron: rij met tussenruimte 30 */
.pw-linkgroepen--groot .pw-knop { font-size: 17px; } /* bron (werkwijze): knoppen zonder 'white', 17 px */
.pw-linkgroepen--30 .pw-linkgroep { padding: 15px 30px; }
.pw-linkgroep__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Blok: Tekst naast beeld (kolommen 60/40, tussenruimte 35, verticaal gecentreerd) */
.pw-tekst-beeld {
	display: flex;
	align-items: center;
	margin: 0 -32.5px;
}
.pw-tekst-beeld__tekst { flex: 0 0 60%; padding: 17.5px 32.5px; }
.pw-tekst-beeld__beeld { flex: 0 0 40%; padding: 17.5px 32.5px; line-height: 0; }
.pw-tekst-beeld--beeld-links .pw-tekst-beeld__beeld { order: -1; }
.pw-tekst-beeld--50 .pw-tekst-beeld__tekst,
.pw-tekst-beeld--50 .pw-tekst-beeld__beeld { flex-basis: 50%; } /* bron (over ons): twee gelijke kolommen */
.pw-tekst-beeld__beeld img { max-width: 100%; height: auto; }
.pw-tekst-beeld__beeld[style] img { box-sizing: border-box; padding: 0 var(--pw-tb-in, 0); } /* bron: beeldmodule met padding links en rechts */
.pw-tekst-beeld__beeld-kop { margin: 0 0 20px; line-height: 1.375; } /* bron: kopmodule boven het beeld */
.pw-tekst-beeld__knop { margin: 30px 0 0; }
.pw-tekst-beeld--knop-20 .pw-tekst-beeld__knop { margin-top: 20px; } /* bron: tekstkolom met 20 px marge direct boven de knop */
.pw-tekst-beeld--onder-20 .pw-tekst-beeld__tekst { padding-bottom: 37.5px; } /* bron: tekstkolom met 20 px marge onder */
.pw-tekst-beeld--onder-30 .pw-tekst-beeld__tekst { padding-bottom: 47.5px; } /* bron: tekstkolom met 30 px padding onder */
.pw-tekst-beeld--onder-60 .pw-tekst-beeld__tekst, .pw-tekst-beeld--onder-60 .pw-tekst-beeld__beeld { padding-bottom: 77.5px; } /* bron: kolommarge 60 onder */
.pw-kop--omhoog { margin-top: -6px; } /* bron: kopmodule met margin-top -6 */

/* Blok: Stappen */
.pw-sectie--stappen .pw-intro { margin-bottom: 40px; }
.pw-stappen {
	display: flex;
	flex-wrap: wrap;
	margin: 0; /* bron: kaarten met 15 px kolompadding binnen de 1240 (590 breed, x 115) */
}
.pw-stap {
	position: relative;
	flex: 0 0 calc(50% - 30px);
	min-width: 0; /* bron: lange woorden steken uit de kaart, de kaart wordt niet breder */
	margin: 15px;
	padding: 30px 30px 40px;
	border-radius: 20px;
	background: var(--pw-wit);
}
.pw-stap__nummer {
	position: absolute;
	top: 37px;
	left: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 3px solid var(--pw-footer-onder);
	border-radius: 30px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: var(--pw-footer-onder);
}
.pw-stap__kop,
.pw-stap__tekst { margin-left: 70px; }
.pw-stap__kop {
	padding-top: 20px;
	margin-bottom: 20px;
	color: var(--pw-oranje-fel);
}

/* Blok: Tabel */
.pw-tabel__intro { margin-bottom: 40px; }
.pw-smal > h2 + .pw-tabel__scroll { margin-top: 48px; } /* bron: spacer 30 tussen kop en tabel als er geen intro is */
.pw-tabel__scroll { overflow-x: auto; padding: 5px 0 34px; } /* bron: TablePress-wrapper met lege voet */
.pw-tabel {
	width: 100%;
	margin: 0 0 16px;
	border-collapse: collapse;
	border-spacing: 0;
}
.pw-tabel th,
.pw-tabel td {
	padding: 20px;
	line-height: 1.625; /* bron: DataTables-cellen */
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 2px solid transparent; /* bron: rijhoogte 69/70 en 97 px */
}
.pw-tabel th {
	font-weight: 600;
	color: var(--pw-wit);
	background: var(--pw-oranje);
}
.pw-tabel th:first-child { border-radius: 20px 0 0 0; }
.pw-tabel th:last-child { border-radius: 0 20px 0 0; }
.pw-tabel td { color: #111111; }
.pw-tabel td { background: var(--pw-grijs); border-bottom-color: var(--pw-wit); } /* bron: alle rijen lichtgrijs met witte scheidingslijn */
.pw-tabel th { border-bottom-color: var(--pw-wit); }
.pw-band--grijs .pw-tabel td { background: var(--pw-wit); border-bottom-color: var(--pw-grijs); } /* bron: resultaten-op-grijs */
.pw-band--grijs .pw-tabel th { border-bottom-color: var(--pw-grijs); }

/* Blok: Formulier (links lichtgrijs vlak, rechts het blauwe beeld met het formulier) */
.pw-formulierblok {
	display: flex;
	margin: 0 -15px;
}
.pw-formulierblok__tekst,
.pw-formulierblok__formulier {
	flex: 0 0 50%;
	padding: 100px 55px 90px; /* bron: 30 binnen + spacer 70, onder spacer 60 + 30 */
}
.pw-formulierblok__tekst {
	border-radius: 20px 0 0 20px;
	background: var(--pw-grijs);
}
.pw-formulierblok__formulier {
	border-radius: 0 20px 20px 0;
	background: #7fc8d8 url("../img/background-form.jpg") center / cover no-repeat;
}
.pw-formulierblok__kop {
	margin: -7px 0 33px; /* bron: kop van 82 px die 7 px boven de spacer begint, 33 px tot het formulier */
	padding-bottom: 13px;
	line-height: 1.375;
	text-align: center;
}
.pw-formulierblok--wit .pw-formulierblok__tekst { background: var(--pw-wit); } /* bron (contact): wit vlak op een grijze band */
.pw-form__hp { position: absolute; left: -9999px; }
.pw-form__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10.5px; } /* bron: twee velden naast elkaar (257 px) */
.pw-form__velden { display: grid; gap: 16px; }
.pw-form__naam { display: flex; gap: 10.5px; }
.pw-form__naam input { flex: 1 1 0; min-width: 0; }
.pw-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pw-form__label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.65; }
.pw-form__verplicht { font-size: 13px; font-style: italic; font-weight: 700; color: #c02b0a; }
.pw-form input[type="text"],
.pw-form input[type="email"],
.pw-form input[type="tel"],
.pw-form input[type="url"],
.pw-form input[type="date"],
.pw-form textarea,
.pw-form select {
	display: block;
	width: 100%;
	padding: 8px;
	border: 1px solid #e0e0e0;
	border-radius: 3px;
	font: inherit;
	font-size: 15px;
	line-height: 1.625;
	color: var(--pw-gedempt);
	background: var(--pw-wit);
}
.pw-form select { border-radius: 0; color: var(--pw-tekst); }
.pw-form textarea { display: inline-block; height: 288px; vertical-align: baseline; } /* bron (contact): tekstvak 288 hoog, inline met 8 px regelruimte eronder */
.pw-form__omschrijving { padding-top: 13px; font-size: 15px; line-height: 1.65; }
.pw-form__adres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10.5px; } /* bron: Gravity Forms adresveld (straat over de volle breedte, stad en postcode naast elkaar) */
.pw-form__adresdeel--straat { grid-column: 1 / -1; }
.pw-form__sublabel { display: block; padding-top: 5px; font-size: 15px; line-height: 1.65; }
.pw-form__handtekening { position: relative; max-width: 600px; }
.pw-form__handtekening canvas { display: block; width: 100%; height: auto; border: 1px solid #e0e0e0; border-radius: 3px; background: var(--pw-wit); touch-action: none; cursor: crosshair; }
.pw-form__wissen { position: absolute; top: 8px; right: 8px; padding: 2px 10px; border: 1px solid #e0e0e0; border-radius: 3px; background: var(--pw-wit); font: inherit; font-size: 13px; cursor: pointer; }
.pw-formulierblok--geen { display: block; max-width: 760px; margin: 0 auto; }
.pw-formulierblok--geen .pw-formulierblok__tekst { display: none; }
.pw-formulierblok--geen .pw-formulierblok__formulier { border-radius: 20px; }
.pw-form__veld--fout input,
.pw-form__veld--fout select,
.pw-form__veld--fout textarea { border-color: #c02b0a; }
.pw-formulier__fout,
.pw-formulier__bevestiging { margin-bottom: 16px; padding: 12px 16px; border-radius: 3px; background: var(--pw-wit); }
.pw-formulier__bevestiging > :last-child { margin-bottom: 0; }
.pw-form__voet { margin-top: 6px; padding: 16px 0; }
.pw-form__knop { margin-bottom: 8px; font-size: 17px; border: 0; }

/* Blok: Paginakop (bron: H1 40 px gecentreerd, kruimelpad eronder, 58 px spacer) */
.pw-paginakop { padding-bottom: 58px; text-align: center; }
.pw-paginakop__kop { margin: 0 0 20px; }
.pw-paginakop .pw-kruimelpad { margin: 0 15px 20px; }
/* Links uitgelijnd, kruimelpad boven de kop (Claude Design "Pingwin nieuwe blokken", Ons werk A) */
.pw-paginakop--links { padding-bottom: 0; text-align: left; }
.pw-paginakop--links .pw-kruimelpad { margin: 0 0 18px; }
.pw-paginakop--links .pw-paginakop__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.pw-band--zwart .pw-casefilter { text-align: left; }
.pw-paginakop__kop .pw-oranje { color: var(--pw-oranje-fel); }

/* Blok: Team (bron: post-cards 3 per rij, 290 breed, 25 tussenruimte, witte kaart met radius onder) */
.pw-team__kop { margin-bottom: 20px; }
.pw-team {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12.5px;
}
.pw-teamlid {
	flex: 0 0 calc(33.3333% - 25px);
	margin: 0 12.5px 25px;
}
.pw-teamlid__foto { line-height: 0; }
.pw-teamlid__foto img { width: 100%; height: 200px; object-fit: cover; }
.pw-teamlid__tekst {
	position: relative;
	margin-top: -15px;
	padding: 10px 0 20px;
	border-radius: 0 0 20px 20px;
	background: var(--pw-wit);
	text-align: center;
}
.pw-teamlid__naam { margin: 20px 0 15px; font-size: 20px; font-weight: 600; line-height: 1.375; }
.pw-teamlid__functie { margin: 0; font-size: 15px; line-height: 1.65; }
.pw-teamlid__links { display: flex; gap: 5px; margin-top: 15px; }
.pw-teamlid__knop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border: 1px solid #eeeeee;
	border-radius: 50%;
	color: #757575;
}
.pw-teamlid__knop svg { width: 15px; height: 15px; }
.pw-teamlid__knop:hover { color: var(--pw-oranje-fel); }

/* Blok: Embed (bron: video 764 breed 16:9, kaart 920 breed 450 hoog) */
.pw-embed { position: relative; margin: 0 auto; }
.pw-embed--764 { width: 80%; max-width: 764px; } /* bron: video op 80 % van de kolom, maximaal 764 */
@media (min-width: 768px) { .pw-embed--764 { width: 61.613%; } } /* bron: 80 % van een kolom van 9/12 binnen de rij: 764 bij 1240, schaalt mee op tablet */
.pw-embed--920 { max-width: 920px; }
.pw-embed--1240 { max-width: 1240px; }
.pw-embed--16-9 { aspect-ratio: 16 / 9; }
.pw-embed--450 { height: 450px; }
.pw-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Blok: Portfoliokaarten */
.pw-cases {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -17.5px;
}
.pw-case {
	flex: 0 0 calc(33.3333% - 35px);
	margin: 0 17.5px 35px;
}
.pw-case__beeld {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 15px 15px 0 0;
	line-height: 0;
}
.pw-case__beeld img { width: 100%; height: auto; }
/* Vast formaat zoals de bestaande casebeelden (750 x 680), zodat elke uitgelichte afbeelding even hoog is. */
.pw-case__beeld-vast { aspect-ratio: 750 / 680; object-fit: cover; }
.pw-case__beeld-wissel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: top;
	opacity: 0;
	transition: opacity .5s, object-position .6s ease;
}
/* Hover: de site scrolt na 0,1 s, begint rustig (header even in beeld) en is in 7 s onderaan. */
.pw-case:hover .pw-case__beeld-wissel { opacity: 1; object-position: bottom; transition: opacity .5s, object-position 7s cubic-bezier(.3, 0, .4, 1) .1s; }
.pw-case__voet {
	padding: 0 25px 30px;
	border-radius: 0 0 15px 15px;
	background: #f5f6f8;
}
.pw-case__titel {
	margin: 20px 0 5px;
	padding-bottom: 5px;
	font-size: 25px;
}
.pw-case__titel a { color: var(--pw-kop); }
.pw-case__titel a:hover { color: var(--pw-oranje-fel); text-decoration: none; }
.pw-case__meta { font-size: 14px; font-weight: 600; line-height: 1.65; color: var(--pw-oranje-fel); }
.pw-cases__knop { margin: 15px 0 0; text-align: center; }
.pw-case[hidden] { display: none; }
.pw-casefilter { margin: 0 0 40px; font-size: 0; text-align: center; } /* bron: vcex-navbar, knoppen met 10 px marge rechts en onder, 40 px tot de kaarten */
.pw-casefilter__knop {
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 12px 30px;
	border: 0;
	border-radius: 30px;
	background: var(--pw-oranje-fel);
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.65;
	text-transform: uppercase;
	color: var(--pw-wit);
	cursor: pointer;
}
.pw-casefilter__knop.is-actief,
.pw-casefilter__knop:hover { background: var(--pw-oranje-donker); }
.pw-casefilter__keuze { display: none; }
.pw-casefilter__keuze select {
	width: 100%;
	height: 38px;
	padding: 0 30px 0 10px;
	border: 0;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23616161' d='M12 16.6 3.4 8 5 6.4l7 7 7-7L20.6 8z'/%3E%3C/svg%3E") no-repeat right 11px center / 11px 11px;
	font: 400 16px/36px var(--pw-font);
	color: #616161;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
@media (max-width: 959px) {
	.pw-casefilter__knop { display: none; }
	.pw-casefilter__keuze { display: block; }
}
.pw-case__pijl { display: none; }
/* Op zwart (Ons werk, Claude Design "Pingwin nieuwe blokken", Ons werk A, oktober 2026): in de stijl van de homepage-carrousel.
   Beeld met ronde hoeken, witte naam, grijze diensten en een ronde pijl die bij hover oranje wordt. */
.pw-band--zwart .pw-paginakop__kop { color: var(--pw-wit); }
.pw-band--zwart .pw-paginakop .pw-kruimelpad { color: #a3a3a3; }
.pw-band--zwart .pw-case { margin-bottom: 56px; }
.pw-band--zwart .pw-case__beeld { border-radius: 18px; }
.pw-band--zwart .pw-case__voet { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 0 0; border-radius: 0; background: none; }
.pw-band--zwart .pw-case__titel { margin: 0 0 4px; padding: 0; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.pw-band--zwart .pw-case__titel a { color: var(--pw-wit); }
.pw-band--zwart .pw-case__meta { font-size: 15px; font-weight: 400; line-height: 1.4; color: #a3a3a3; }
.pw-band--zwart .pw-case__pijl { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #3a3a3a; border-radius: 50%; color: var(--pw-wit); transition: background .3s ease, border-color .3s ease; }
.pw-band--zwart .pw-case:hover .pw-case__pijl { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); }
.pw-band--zwart .pw-casefilter__knop { padding: 9px 24px; border: 1px solid #3a3a3a; background: transparent; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: #d4d4d4; transition: border-color .3s ease, color .3s ease, background .3s ease; }
.pw-band--zwart .pw-casefilter__knop:hover { border-color: var(--pw-oranje-fel); background: transparent; color: var(--pw-wit); }
.pw-band--zwart .pw-casefilter__knop.is-actief { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-band--zwart .pw-casefilter__keuze select { border: 1px solid #3a3a3a; border-radius: 30px; padding-left: 18px; color: var(--pw-wit); background-color: #000000; }
.pw-cases__knop--direct { margin-top: 0; } /* bron: knop direct onder de kaarten */
/* Variant 'raster' (bron: vcex-portfolio-grid, gap 40; voet met 20 px padding, categorie in hoofdletters) */
.pw-cases--raster { margin: 0 -20px; }
.pw-cases--raster .pw-case { flex-basis: calc(33.3333% - 40px); margin: 0 20px 40px; }
.pw-cases--raster .pw-case__voet { padding: 20px; }
.pw-cases--raster .pw-case__titel { margin: 0 0 5px; padding: 0; line-height: 1.375; }
.pw-cases--raster .pw-case__meta { line-height: 1.25; text-transform: uppercase; }

/* Blok: Testimonial */
.pw-testimonial {
	min-height: 493px; /* bron: carrousel met vaste hoogte, inhoud bovenaan */
	text-align: center;
	background: url("../img/sterren-achtergrond.png") center / 75% auto no-repeat;
}
.pw-testimonial__foto { line-height: 0; }
.pw-testimonial__foto img {
	width: 125px;
	height: 125px;
	padding: 3px;
	border: 1px solid #eeeeee;
	border-radius: 9999px;
	object-fit: cover;
}
.pw-testimonial__quote {
	max-width: 645px;
	margin: 45px auto 0;
	padding: 0 20px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.65;
	color: #f15728;
}
.pw-testimonial__naam {
	margin-top: 27px;
	font-size: 18.3px;
	font-weight: 600;
	line-height: 1.375;
	color: var(--pw-kop);
}
.pw-testimonial__bedrijf { color: #757575; }

/* Testimonial, opmaak 'kader' (nieuwe stijl, oktober 2026): blauw afgerond vlak, foto links met witte rand,
   sterren in een wit pilletje, quote in zwart (oranje op blauw is te slecht leesbaar) */
.pw-tkader {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 72px;
	align-items: start;
	margin: 0;
	padding: 88px 96px;
	color: #000000;
}
/* Het blauwe vlak start over de volle vensterbreedte zonder hoeken en krimpt bij scrollen naar de maat van het kader.
   main.js zet --pw-tk (0 breed, 1 kader) en de afstand tot de vensterranden (--pw-tk-l, --pw-tk-r). Zonder script
   staat het vlak meteen op de kadermaat. */
.pw-tkader::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(var(--pw-tk-l, 0px) * -1);
	right: calc(var(--pw-tk-r, 0px) * -1);
	background: var(--pw-blauw);
	clip-path: inset(0 calc(var(--pw-tk, 1) * var(--pw-tk-r, 0px)) 0 calc(var(--pw-tk, 1) * var(--pw-tk-l, 0px)) round calc(var(--pw-tk, 1) * var(--pw-tk-straal, 32px)));
	pointer-events: none;
}
.pw-tkader--zonder-foto { grid-template-columns: minmax(0, 1fr); }
.pw-tkader__foto { line-height: 0; }
.pw-tkader__foto img {
	display: block;
	width: 220px;
	height: 220px;
	box-sizing: border-box;
	border: 8px solid var(--pw-wit);
	border-radius: 50%;
	object-fit: cover;
}
.pw-tkader__inhoud { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pw-tkader__sterren {
	display: inline-flex;
	align-self: flex-start;
	gap: 4px;
	padding: 10px 16px;
	border-radius: 30px;
	background: var(--pw-wit);
	line-height: 0;
}
.pw-tkader__sterren svg { width: 20px; height: 20px; fill: var(--pw-oranje-fel); }
.pw-tkader__quote {
	margin: 0;
	padding: 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.01em;
	color: #000000;
}
.pw-tkader__quote p { margin: 0 0 .7em; }
.pw-tkader__wie {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 24px;
	border-top: 1px solid rgba(0, 0, 0, .18);
}
.pw-tkader__naam { font-size: 20px; font-weight: 700; line-height: 1.3; color: #000000; }
.pw-tkader__bedrijf { font-size: 16px; line-height: 1.4; color: #1d3a40; }
@media (max-width: 1023px) {
	.pw-tkader { grid-template-columns: 160px minmax(0, 1fr); gap: 48px; padding: 64px 56px; }
	.pw-tkader--zonder-foto { grid-template-columns: minmax(0, 1fr); }
	.pw-tkader__foto img { width: 160px; height: 160px; border-width: 6px; }
	.pw-tkader__quote { font-size: 24px; }
}
@media (max-width: 767px) {
	.pw-tkader { --pw-tk-straal: 24px; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 44px 28px; }
	.pw-tkader__foto img { width: 120px; height: 120px; }
	.pw-tkader__quote { font-size: 20px; }
}

/* Logo's met tekst onder de kop (dienstpagina's) */
.pw-logos__kop--midden { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; }
.pw-logos__intro { margin-bottom: 30px; }

@media (max-width: 767px) {
	.pw-hero-pagina {
		flex-direction: column;
		margin: -20px 0 0;
		padding: 30px 10px;
		border: 20px solid var(--pw-wit);
		border-radius: 35px;
	}
	.pw-hero-pagina__tekst,
	.pw-hero-pagina__beeld { flex-basis: auto; width: 100%; }
	.pw-hero-pagina--gap35 > .pw-hero-pagina__tekst,
	.pw-hero-pagina--gap35 > .pw-hero-pagina__beeld { width: calc(100% - 35px); }
	.pw-hero-pagina__tekst { padding-top: var(--pw-hb-m, var(--pw-hb, 70px)); padding-bottom: var(--pw-ho-m, var(--pw-ho, 70px)); }
	.pw-hero-pagina__beeld { padding-top: var(--pw-bb-m, var(--pw-bb, 0)); padding-bottom: var(--pw-bo-m, var(--pw-bo, 0)); }
	.pw-hero-pagina__kop { font-size: 35px; line-height: 1.375; } /* bron: h1 op mobiel */
	.pw-hero-pagina--achtergrond { margin: 0 5%; padding: 0; border: 0; border-radius: 0; background-size: 0 auto; } /* bron: geen achtergrondbeeld op mobiel */
	.pw-hero-pagina--achtergrond.pw-hero-pagina--achter-kop { margin-top: -78px; }
	.pw-linkgroep { flex-basis: 100%; padding-top: var(--pw-gb-m, 0); } /* bron: mobiele spacer boven een volgende groep */
	.pw-linkgroepen--30 .pw-linkgroep { padding-top: calc(15px + var(--pw-gb-m, 0px)); }
	.pw-linkgroep__links .pw-knop { width: 100%; } /* bron: knoppen onder elkaar op volle breedte */
	.pw-tekst-beeld { flex-direction: column; margin: 0; }
	.pw-tekst-beeld__tekst,
	.pw-tekst-beeld__beeld { flex-basis: auto; width: 100%; padding: 17.5px 0; } /* bron: kolommen met 17,5 px boven en onder */
	.pw-mobiel-verborgen { display: none; }
	.pw-tekst-beeld__beeld--leeg-mobiel { min-height: 51px; } /* bron: beeldmodule 'hidden-phone'; de lege kolom (51 px) blijft staan */
	.pw-tekst-beeld__beeld--leeg-mobiel img { display: none; }
	.pw-testimonial__quote { min-height: 350px; } /* bron: tekstvlak minimaal 420 hoog (70 px ruimte eromheen) */
	.pw-testimonial__naam { margin-top: 35px; } /* bron: 20 px vlak + 15 px tot de naam */
	.pw-tekst-beeld > :first-child { margin-bottom: var(--pw-km, 0); } /* bron: kolommarge onder de bovenste kolom */
	.pw-tekst-beeld--beeld-links > :first-child { margin-bottom: 0; }
	.pw-tekst-beeld--beeld-links > .pw-tekst-beeld__beeld { margin-bottom: var(--pw-km, 0); } /* beeld links staat bovenaan, de marge hoort eronder */
	.pw-stappen { margin: 0; }
	.pw-handschrift-licht { font-size: 25.84px; } /* bron: kop 0,94 keer kleiner op mobiel */
	.pw-linkgroepen--groot .pw-knop { font-size: 16px; } /* bron: knoppen 17 px worden 16 px op mobiel */
	.pw-stap { flex-basis: calc(100% - 30px); min-width: 0; } /* bron: kaarten met 15 px marge rondom in de rij van 351; lange woorden steken uit, zoals in de bron */
	.pw-formulierblok { flex-direction: column; margin: 0 -15px; } /* bron: twee losse vlakken onder elkaar, 381 px breed, 60 px ertussen */
	.pw-formulierblok__tekst,
	.pw-formulierblok__formulier { flex-basis: auto; padding: 100px 55px 90px; }
	.pw-formulierblok__tekst { margin-bottom: 60px; border-radius: 20px; }
	.pw-formulierblok__formulier { border-radius: 20px; }
	.pw-formulierblok__kop { margin: -3px 0 40px; padding-bottom: 0; line-height: 1.45; word-break: break-word; } /* bron: kop breekt over twee regels */
	.pw-formulierblok--compact .pw-formulierblok__tekst { margin-bottom: 0; padding: 60px 55px; } /* bron: 30 binnen + spacer 30, geen kolommarge */
	.pw-formulierblok--compact .pw-formulierblok__formulier { padding: 60px 55px 70px; }
	.pw-formulierblok--compact .pw-formulierblok__kop { font-size: 40px; }
	.pw-form__naam { flex-direction: column; gap: 8px; }
	.pw-form__adres { grid-template-columns: 1fr; }
	.pw-form input[type="text"],
	.pw-form input[type="email"],
	.pw-form input[type="tel"],
	.pw-form input[type="url"],
	.pw-form textarea,
	.pw-form select { line-height: 30px; }
	.pw-cases { margin: 0; }
	.pw-case { flex-basis: 100%; margin: 0 0 35px; } /* bron: kaarten onder elkaar met 35 px marge */
	.pw-teamlid { flex-basis: 100%; margin: 0 0 25px; } /* bron: kaarten 376 breed (rij met -12,5 px marge) onder elkaar */
	.pw-form__rij { grid-template-columns: 1fr; gap: 16px; }
	.pw-paginakop__kop { font-size: 35px; line-height: 1.375; } /* bron: H1 35 px op mobiel */
	.pw-cases__knop { margin-top: 25px; }
	.pw-cases__knop--direct { margin-top: 0; }
	.pw-cases--raster { margin: 0; }
	.pw-cases--raster .pw-case { flex-basis: 100%; margin: 0 0 40px; }
	.pw-cases--raster + .pw-cases__knop { margin-top: 15px; }
}

/* Blog en berichten op tablet en mobiel (bron: keuzelijst onder 1024 px, één kaart per rij onder 768 px) */
@media (max-width: 1023px) {
	.pw-filter { margin: 0 0 45px; }
	.pw-filter__link { display: none; }
	.pw-filter__keuze { display: block; }
}
@media (max-width: 767px) {
	.pw-filter { margin: 0 calc(15px - 5vw) 45px; } /* bron: keuzelijst 15 px van de rand */
	.pw-berichten { grid-template-columns: minmax(0, 1fr); }
	.pw-berichten--gerelateerd { gap: 20px; }
	.pw-berichten__meer .pw-knop { font-size: 16px; }
	.pw-bericht__kop { margin: 0 5%; padding: 400px 15px 12px; }
	.pw-kruimelpad--label { display: inline-block; }
	.pw-bericht { margin: 0 5%; padding: 50px 15px 60px; }
	.pw-bericht__titel { font-size: 35px; line-height: 1.375; }
	.pw-bericht__meer-kop { font-size: 25.84px; }
}

/* --------------------------------------------------------------------------
   Casepagina, ontwerp "groot venster" (Claude Design "Pingwin casepagina", variant A, oktober 2026)
   -------------------------------------------------------------------------- */
.pw-sectie--case-venster { --pw-cv-rand: 100px; overflow: clip; }
.pw-cvenster__held {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: max(600px, calc(100svh - 120px));
	box-sizing: border-box;
	padding: 60px var(--pw-cv-rand) 90px;
	overflow: hidden;
	color: var(--pw-wit);
}
.pw-cvenster__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.38); will-change: transform; }
.pw-cvenster__tekst { position: relative; display: flex; flex-direction: column; gap: 36px; animation: pw-hero-in 1.7s cubic-bezier(.33, 1, .68, 1) .2s both; }
.pw-cvenster__kruimelpad { margin: 0 0 -12px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.pw-cvenster__kruimelpad a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.pw-cvenster__kruimelpad a:hover { color: var(--pw-wit); }
.pw-cvenster__kruimelpad .pw-kruimelpad__sep { margin: 0 6px; }
.pw-cvenster__label { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-oranje-fel); }
.pw-cvenster__kop { max-width: 1100px; margin: 0; font-size: clamp(48px, 30px + 5.6vw, 112px); font-weight: 700; line-height: .98; letter-spacing: -.03em; color: var(--pw-wit); }
.pw-cvenster__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-cvenster__onder { display: flex; justify-content: space-between; align-items: flex-end; gap: 80px; }
.pw-cvenster__intro { max-width: 620px; font-size: 18px; line-height: 1.65; color: #e6e6e6; }
.pw-cvenster__intro > * { margin: 0; }
.pw-cvenster__intro > * + * { margin-top: 1em; }
.pw-cvenster__intro a { color: var(--pw-wit); }
.pw-cvenster__hint { flex: none; display: flex; align-items: center; gap: 14px; font-size: 14px; color: #bdbdbd; }
a.pw-cvenster__hint { text-decoration: none; transition: color .25s; }
a.pw-cvenster__hint:hover, a.pw-cvenster__hint:focus-visible { color: var(--pw-wit); }
a.pw-cvenster__hint .pw-cvenster__hintpijl { transition: border-color .25s; }
a.pw-cvenster__hint:hover .pw-cvenster__hintpijl, a.pw-cvenster__hint:focus-visible .pw-cvenster__hintpijl { border-color: var(--pw-wit); }
.pw-cvenster__hintpijl { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #5a5a5a; border-radius: 50%; }
/* Het venster: zonder JS een kader waarin de schermafbeelding zelf scrolt; main.js zet .is-actief, de baanhoogte en de verschuiving. */
.pw-cvenster__baan { position: relative; padding: 0 20px 80px; }
.pw-cvenster__plak { position: relative; display: flex; align-items: center; justify-content: center; }
.pw-cvenster__venster {
	display: flex;
	flex-direction: column;
	width: min(1180px, 100%);
	height: min(720px, 80vh);
	overflow: hidden;
	border-radius: 14px;
	background: var(--pw-wit);
	box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
	will-change: transform;
}
.pw-cvenster__balk { flex: 0 0 38px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #f1f1f1; }
.pw-cvenster__balk > span:not(.pw-cvenster__adres) { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d4; }
.pw-cvenster__adres { flex: 0 1 420px; min-width: 0; margin-left: 16px; padding: 0 12px; overflow: hidden; border-radius: 11px; background: var(--pw-wit); font-size: 12px; line-height: 22px; color: #6b6b6b; white-space: nowrap; text-overflow: ellipsis; }
.pw-cvenster__scherm { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pw-cvenster__site { display: block; width: 100%; height: auto; will-change: transform; }
.pw-cvenster__voortgang { display: none; }
.pw-cvenster__baan.is-actief { padding: 0 20px; }
.pw-cvenster__baan.is-actief .pw-cvenster__plak { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; padding: 110px 0 40px; }
.pw-cvenster__baan.is-actief .pw-cvenster__venster { height: min(720px, 100svh - 190px); }
.pw-cvenster__baan.is-actief .pw-cvenster__scherm { overflow: hidden; }
.pw-cvenster__baan.is-actief .pw-cvenster__voortgang { position: absolute; right: calc(var(--pw-cv-rand) - 20px); bottom: 28px; display: flex; align-items: center; gap: 16px; font-size: 14px; color: #a3a3a3; font-variant-numeric: tabular-nums; }
.pw-cvenster__voortgang > span:first-child { color: var(--pw-wit); }
.pw-cvenster__lijn { position: relative; width: 160px; height: 2px; overflow: hidden; border-radius: 2px; background: #2a2a2a; }
.pw-cvenster__lijn span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--pw-oranje-fel); }

.pw-cases__kop { margin: 0 0 20px; text-align: center; }

/* Caseproject: kop links met knop, projectgegevens rechts als rijen (label links, waarde rechts) */
.pw-case-project { display: flex; justify-content: space-between; gap: 100px; max-width: 1240px; margin: 0 auto; }
.pw-case-project__tekst { flex: 1 1 auto; max-width: 640px; display: flex; flex-direction: column; gap: 28px; }
.pw-case-project__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-case-project__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-case-project__tekst .pw-rijk { font-size: 18px; line-height: 1.7; }
.pw-case-project__knop { margin: 12px 0 0; }
.pw-case-project__knop .pw-knop { min-height: 64px; padding: 0 36px; border-radius: 40px; background: #000000; color: var(--pw-wit); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pw-case-project__knop .pw-knop:hover { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-case-project__kaart { flex: 0 0 420px; }
.pw-case-project__kaartkop { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; }
.pw-case-project__lijst { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; border-top: 1px solid #d9d9d9; }
.pw-case-project__lijst dt,
.pw-case-project__lijst dd { margin: 0; padding: 22px 0; border-bottom: 1px solid #d9d9d9; }
.pw-case-project__lijst dt { padding-right: 24px; font-size: 15px; color: #6b6b6b; }
.pw-case-project__lijst dd { font-size: 16px; font-weight: 600; text-align: right; color: var(--pw-kop); }


@media (max-width: 1023px) {
	.pw-sectie--case-venster { --pw-cv-rand: 40px; }
	.pw-cvenster__onder { flex-direction: column; align-items: flex-start; gap: 32px; }
	.pw-case-project { flex-direction: column; gap: 56px; }
	.pw-case-project__kaart { flex-basis: auto; }
}
@media (max-width: 767px) {
	.pw-sectie--case-venster { --pw-cv-rand: 20px; }
	.pw-cvenster__held { padding-bottom: 60px; }
	.pw-cvenster__tekst { gap: 26px; }
	.pw-cvenster__intro { font-size: 17px; }
	.pw-cvenster__baan.is-actief .pw-cvenster__plak { padding: 100px 0 70px; }
	.pw-cvenster__baan.is-actief .pw-cvenster__venster { height: calc(100svh - 170px); }
	.pw-cvenster__baan.is-actief .pw-cvenster__voortgang { right: 20px; bottom: 26px; }
	.pw-cvenster__balk { flex-basis: 30px; padding: 0 12px; }
}

/* Casecijfers (bron: band 200 px met achtergrondbeeld, kaarten 275 px die 100 px over de band vallen) */
.pw-case-cijfers__band { height: 200px; background: #3f3f3f no-repeat 50% 50% / cover; }
.pw-case-cijfers { display: flex; justify-content: center; max-width: 900px; margin: 0 auto; padding-top: 12px; }
.pw-case-cijfers__kaart { flex: 0 0 275px; min-height: 275px; margin: -100px 12.5px 73px; padding: 20px; border-radius: 15px; background: var(--pw-grijs); }
.pw-case-cijfers__icoon { height: 66px; padding-top: 12px; line-height: 0; color: var(--pw-kop); }
.pw-case-cijfers__icoon svg { width: auto; height: 41px; }
.pw-case-cijfers__getal { margin: 20px 0 0; font-size: 54px; font-weight: 600; line-height: 1; color: #212121; }
.pw-case-cijfers__tekst { margin: 11px 0 0; }

/* Kolommen met icoon: casebreedte (1050) en volle iconen van 40 px (bron: SEO-case) */
.pw-smal--case { max-width: 1050px; }
.pw-kolommen--case .pw-kolom__icoon { width: auto; height: 66px; margin: 0; padding: 12px 0 0; line-height: 0; color: var(--pw-kop); }
.pw-kolommen--case .pw-kolom__icoon svg { width: auto; height: 41px; }
.pw-kolommen--case { padding-top: 35px; } /* bron: 50 px onder de tekstrij */
.pw-kolommen--case .pw-kolom .pw-rijk > h3:first-child { margin-top: 0; }
.pw-kolommen--case .pw-kop-los { margin-bottom: 29px; }

/* Beeldslider (bron: Total-beeldslider, 817 px, pijlen 34x60 op 30% zwart, miniaturen 70 px) */
.pw-beeldslider { max-width: 817px; margin: 0 auto; }
.pw-beeldslider__tekst { margin-bottom: 40px; }
.pw-beeldslider__dia { position: relative; }
.pw-beeldslider__beeld { margin: 0; line-height: 0; }
.pw-beeldslider__beeld[hidden] { display: none; }
.pw-beeldslider__beeld img { display: block; width: 100%; height: auto; }
.pw-beeldslider__pijl { position: absolute; top: 50%; width: 34px; height: 60px; margin-top: -30px; padding: 0; border: 0; background: rgba(0, 0, 0, .3); cursor: pointer; }
.pw-beeldslider__pijl::before { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border: solid #fff; border-width: 0 0 2px 2px; transform: translate(-30%, -50%) rotate(45deg); }
.pw-beeldslider__pijl--vorige { left: 0; }
.pw-beeldslider__pijl--volgende { right: 0; }
.pw-beeldslider__pijl--volgende::before { transform: translate(-70%, -50%) rotate(-135deg); }
.pw-beeldslider__pijl[hidden] { display: none; }
.pw-beeldslider__miniaturen { display: flex; gap: 4px; margin-top: 4px; }
.pw-beeldslider__miniatuur { width: 70px; height: 70px; padding: 0; border: 0; background: none; opacity: .75; cursor: pointer; line-height: 0; }
.pw-beeldslider__miniatuur.is-actief,
.pw-beeldslider__miniatuur:hover { opacity: 1; }
.pw-beeldslider__miniatuur img { width: 70px; height: 70px; object-fit: cover; }

@media (max-width: 767px) {
	.pw-case-cijfers__band { height: 150px; }
	.pw-case-cijfers { flex-direction: column; padding: 13px 20px 0; }
	.pw-case-cijfers__kaart { flex: none; min-height: 0; margin: -100px 12px 85px; }
	.pw-case-cijfers__kaart:last-child { margin-bottom: 73px; }
	.pw-smal--case { padding: 0 15px; } /* bron: rij 20 px plus kolom 15 px, tekst 321 breed */
	.pw-kolommen--case .pw-kolom + .pw-kolom { margin-top: 21px; }
}

/* Lijst met vinkjes (bron: vcex-bullets-check; 10 px groen vinkje links, 25 px inspringing) */
.pw-rijk ul.pw-vinkjes { margin: 0; padding: 0; list-style: none; }
.pw-rijk ul.pw-vinkjes li { margin: 0; padding-left: 25px; background: url(../img/vinkje.svg) no-repeat left center / 10px 10px; }
.pw-rijk ul.pw-vinkjes li::before { content: none; }

/* --------------------------------------------------------------------------
   Blok: Stappenlijst (bron: vcex-steps verticaal; cirkel 3em, lijn 1 px, 50 px tussen de stappen)
   -------------------------------------------------------------------------- */
.pw-stappenlijst { max-width: var(--pw-tekstbreedte); margin: 0 auto; padding: 0 15px; }
.pw-stappenlijst__kop { margin: 0 0 35px; } /* bron: kop 20 px marge + spacer 15 */
.pw-stappenlijst__lijst { margin: 0; padding: 0; list-style: none; }
.pw-stappenlijst__stap { position: relative; display: flex; align-items: flex-start; }
.pw-stappenlijst__nummer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3em;
	height: 3em;
	margin-right: 20px;
	border-radius: 50%;
	background: var(--pw-oranje-fel);
	font-size: 1.077em;
	line-height: 1;
	color: var(--pw-wit);
}
.pw-stappenlijst__stap:not(:last-child)::before { /* verbindingslijn van onder de cirkel tot de volgende stap */
	content: "";
	position: absolute;
	top: 3.231em;
	bottom: 0;
	left: calc(1.6155em - .5px);
	width: 1px;
	background: var(--pw-oranje-fel);
}
.pw-stappenlijst__inhoud { flex: 1 1 auto; min-width: 0; margin-bottom: 50px; }
.pw-stappenlijst__stapkop { margin: 0; font-size: 1.077em; font-weight: 600; line-height: 1.375; }
.pw-stappenlijst__tekst { margin-top: 10px; }
.pw-stappenlijst__tekst > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Blok: Scan-oproep (Claude Design "Pingwin nieuwe blokken", Scan-oproep B, oktober 2026): gradientvlak met tekst links
   en een witte formulierkaart rechts die boven en onder 40 px uit het vlak steekt.
   -------------------------------------------------------------------------- */
.pw-scan {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	gap: 64px;
	align-items: center;
	margin: 40px 0;
	padding: 0 56px 0 76px;
	border-radius: 20px;
	background: linear-gradient(228deg, #c7e2eb 38%, #f8dabc 80%);
}
.pw-scan__tekst { display: flex; flex-direction: column; gap: 18px; padding: 60px 0; }
.pw-scan__notitie { align-self: flex-start; margin: 0 0 10px; font-size: 26px; line-height: 1.3; color: var(--pw-kop); transform: rotate(-3deg); }
.pw-scan__kop { margin: 0; font-size: 44px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--pw-kop); }
.pw-scan__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-scan__intro { max-width: 460px; font-size: 17px; line-height: 1.65; }
.pw-scan__intro > :last-child { margin-bottom: 0; }
.pw-scan--oranje { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-scan--oranje .pw-scan__notitie { color: var(--pw-wit); }
.pw-scan--oranje .pw-scan__kop { color: #000000; }
.pw-scan--oranje .pw-scan__kop .pw-oranje { color: var(--pw-wit); }
.pw-scan--oranje .pw-scan__intro a { color: inherit; text-decoration: underline; }
.pw-scan__persoon { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 40px; text-align: center; color: var(--pw-kop); }
.pw-scan__foto { display: block; width: 180px; height: 180px; border-radius: 50%; object-fit: cover; }
.pw-scan__wie { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.pw-scan__naam { font-size: 20px; font-weight: 700; }
.pw-scan__functie { font-size: 15px; color: #616161; }
.pw-scan__knoppen { display: flex; gap: 12px; width: 100%; }
.pw-scan__knoppen .pw-knop { flex: 1 1 0; justify-content: center; min-height: 52px; padding: 0 20px; border-radius: 26px; font-size: 15px; }
.pw-scan__kaart { margin: -40px 0; padding: 36px; border-radius: 16px; background: var(--pw-wit); color: var(--pw-kop); box-shadow: 0 0 70px rgba(0, 0, 0, .1); } /* rondom gelijk: boven even veel schaduw als onder */
.pw-scan .pw-form__velden { gap: 14px; }
.pw-scan .pw-form__rij { gap: 14px; }
.pw-scan .pw-form__label { margin-bottom: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.pw-scan .pw-form__verplicht { font-size: 12px; font-style: normal; font-weight: 500; color: #8a8a8a; }
.pw-scan .pw-form input[type="text"],
.pw-scan .pw-form input[type="email"],
.pw-scan .pw-form input[type="tel"],
.pw-scan .pw-form input[type="url"],
.pw-scan .pw-form select { height: 46px; padding: 0 14px; border: 1px solid #d9d9d9; border-radius: 8px; font-size: 15px; color: var(--pw-tekst); }
.pw-scan .pw-form__veld--fout input,
.pw-scan .pw-form__veld--fout select { border-color: var(--pw-oranje-fel); }
.pw-form__melding { padding-top: 6px; font-size: 12px; font-weight: 500; line-height: 1.5; color: #c2410c; }
.pw-form__melding[hidden] { display: none; }
.pw-scan .pw-form__voet { margin: 20px 0 0; padding: 0; }
.pw-scan .pw-form__knop { width: 100%; height: 52px; margin: 0; border-radius: 26px; }
.pw-scan .pw-formulier__fout { padding: 0; margin-bottom: 14px; font-size: 14px; color: #c2410c; }
@media (max-width: 1023px) {
	.pw-scan { grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0 24px 24px; }
	.pw-scan__tekst { padding: 48px 8px 32px; }
	.pw-scan__kop { font-size: 34px; }
	.pw-scan__kaart { margin: 0; padding: 28px 22px; }
}
@media (max-width: 767px) {
	.pw-scan { padding: 0 12px 12px; }
	.pw-scan__notitie { font-size: 22px; }
	.pw-scan__kop { font-size: 28px; }
	.pw-scan__intro { font-size: 16px; }
	.pw-scan .pw-form__rij { grid-template-columns: 1fr; }
	.pw-scan__knoppen { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Paginaovergang: een case uit het portfolioblok schuift van onderaf in beeld (Salient Signal).
   inc/assets.php zet het type 'pw-case' alleen na een klik op een case in de carousel; andere navigaties slaan de overgang over.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
@keyframes pw-overgang-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pw-overgang-uit { from { transform: none; filter: brightness(1); } to { transform: translateY(-8%) scale(.96); filter: brightness(.45); } }
html:active-view-transition-type(pw-case)::view-transition-old(root) { animation: pw-overgang-uit 1s cubic-bezier(.76, 0, .24, 1) both; mix-blend-mode: normal; }
html:active-view-transition-type(pw-case)::view-transition-new(root) { animation: pw-overgang-in 1s cubic-bezier(.76, 0, .24, 1) both; mix-blend-mode: normal; }

/* --------------------------------------------------------------------------
   Blok: Statement (Claude Design "Pingwin oprichter en CTA's", statement A, oktober 2026)
   Eén gecentreerde zin; de woorden kleuren in bij scrollen (main.js zet .is-aan), beeldpillen groeien erin.
   Zonder JS (geen .pw-js) staat alles meteen in de eindkleur.
   -------------------------------------------------------------------------- */
.pw-statement { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.pw-statement__zin { max-width: 1080px; margin: 0; text-align: center; font-size: clamp(28px, 4.2vw, 56px); font-weight: 700; line-height: 1.2; letter-spacing: -.025em; color: #000000; text-wrap: balance; }
.pw-statement__w--oranje { color: var(--pw-oranje-fel); }
.pw-statement__pil { display: inline-block; width: clamp(64px, 8vw, 116px); height: clamp(36px, 4.4vw, 60px); margin: 0 .12em; vertical-align: -.12em; border-radius: 999px; background-size: cover; background-position: center; }
.pw-statement__pil--1 { background-color: #acdae4; background-image: linear-gradient(135deg, #acdae4, #7fb9c8); }
.pw-statement__pil--2 { background-color: var(--pw-oranje-fel); background-image: linear-gradient(135deg, #f15829, #f59a6e); }
.pw-statement__pil--3 { background-color: #1c1c1c; background-image: linear-gradient(135deg, #1c1c1c, #555555); }
.pw-js .pw-statement__w { color: #cfcbc6; transition: color .35s ease; }
.pw-js .pw-statement__w.is-aan { color: #000000; }
.pw-js .pw-statement__w--oranje.is-aan { color: var(--pw-oranje-fel); }
/* Zoals Salient Signal: met JS staat de beeldpil eerst dicht (geen ruimte in de zin, de tekst sluit aan) en schuift hij open
   zodra hij aan de beurt is. main.js meet de regels met alle pillen open (.is-meten) en zet daar vaste regelafbrekingen,
   zodat de zin altijd evenveel regels met dezelfde woorden houdt; een dichte pil maakt een regel alleen korter. */
.pw-js .pw-statement__pil { width: 0; margin-left: 0; margin-right: -.28em; opacity: 0; /* negatieve marge vangt de dubbele spatie rond een dichte pil op */ transition: width .8s cubic-bezier(.16, 1, .3, 1), margin .8s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.pw-js .pw-statement__pil.is-aan, .pw-js .pw-statement__zin.is-meten .pw-statement__pil { width: clamp(64px, 8vw, 116px); margin: 0 .12em; opacity: 1; }
.pw-js .pw-statement__zin.is-meten .pw-statement__pil { transition: none; }
/* Hover: het beeldje wordt ruim twee keer zo groot en valt over de tekst heen, zonder dat de tekst meer ruimte maakt. */
.pw-statement__pil { position: relative; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
	.pw-statement__pil:hover { z-index: 3; transform: scale(2.2); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); }
	.pw-js .pw-statement__pil:not(.is-aan):hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .pw-statement__pil { transition: none; } }
@media (prefers-reduced-motion: reduce) { .pw-js .pw-statement__pil { transition: none; } }
.pw-band--zwart .pw-statement__zin, .pw-js .pw-band--zwart .pw-statement__w.is-aan { color: var(--pw-wit); }
.pw-js .pw-band--zwart .pw-statement__w { color: #4a4a4a; }
.pw-statement__wie { display: flex; align-items: center; gap: 16px; text-align: left; }
.pw-statement__fotos { display: flex; }
.pw-statement__fotos img, .pw-statement__fotos i { display: block; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #f9f8f7; object-fit: cover; }
.pw-statement__fotos > * + * { margin-left: -14px; }
.pw-statement__fotos--leeg i { background: #acdae4; }
.pw-statement__fotos--leeg i + i { background: #eceae8; }
.pw-statement__naam { display: flex; flex-direction: column; font-size: 14px; line-height: 1.4; color: var(--pw-gedempt); }
.pw-statement__naam strong { font-size: 16px; color: var(--pw-tekst); }
@media (max-width: 767px) {
	.pw-statement { gap: 40px; }
}

/* --------------------------------------------------------------------------
   Blok: Core Web Vitals (artifact "Pingwin PageSpeed-blok", variant B, oktober 2026)
   Standaard op zwart. Groen is hier bewust een eigen signaalkleur (goed), naast oranje (matig) en rood (slecht).
   -------------------------------------------------------------------------- */
.pw-vitals { --pw-v-goed: #2bd486; --pw-v-matig: #f5b83d; --pw-v-slecht: #f2604b; --pw-v-kaart: #111111; --pw-v-rand: #222222; --pw-v-gedempt: #9a9a9a; --pw-v-spoor: #1d3a2c; --pw-v-vul: var(--pw-footer); --pw-v-zacht: #cfcfcf; --pw-v-stip: var(--pw-wit);
	display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.pw-vitals { color: var(--pw-wit); }
.pw-vitals__eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pw-v-gedempt); }
.pw-vitals__kop { margin: 0; font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: inherit; text-wrap: balance; }
.pw-vitals__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-vitals__intro { margin-top: 20px; max-width: 40ch; color: var(--pw-v-zacht); }
.pw-vitals__intro > * { margin: 0; }
.pw-vitals__score { display: flex; align-items: center; gap: 16px; margin-top: 32px; font-size: 14px; line-height: 1.5; color: var(--pw-v-zacht); }
.pw-vitals__score small { display: block; font-size: 13px; color: var(--pw-v-gedempt); }
.pw-vitals__ring { --pw-p: 0; position: relative; display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--pw-v-goed) calc(var(--pw-p) * 1%), var(--pw-v-spoor) 0); }
.pw-vitals__ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--pw-v-vul); }
.pw-vitals__ring b { position: relative; font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--pw-v-goed); font-variant-numeric: tabular-nums; }
.pw-vitals__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.pw-vitals__kaart { padding: 28px 24px; border-radius: 16px; background: var(--pw-v-kaart); border: 1px solid var(--pw-v-rand); }
.pw-vitals__kaart small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pw-v-gedempt); }
.pw-vitals__kaart strong { display: block; margin: 14px 0 6px; font-size: clamp(40px, 4.4vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pw-vitals__kaart--goed strong { color: var(--pw-v-goed); }
.pw-vitals__kaart--matig strong { color: var(--pw-v-matig); }
.pw-vitals__kaart--slecht strong { color: var(--pw-v-slecht); }
.pw-vitals__kaart em { font-style: normal; font-size: 14px; color: var(--pw-v-zacht); }
.pw-vitals__balk { position: relative; display: block; height: 6px; margin-top: 20px; border-radius: 6px; background: linear-gradient(90deg, var(--pw-v-goed) 0 40%, var(--pw-v-matig) 40% 66%, var(--pw-v-slecht) 66% 100%); }
.pw-vitals__balk i { position: absolute; top: 50%; left: var(--pw-w, 0%); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--pw-v-stip); border: 3px solid var(--pw-v-kaart); transform: translateY(-50%); }
/* Met JS beginnen ring en stippen op nul en lopen ze op zodra het blok in beeld komt. */
.pw-js .pw-vitals:not(.is-in-beeld) .pw-vitals__balk i { left: 0; }
.pw-vitals__balk i { transition: left 1.2s cubic-bezier(.16, 1, .3, 1); }
/* Buiten de zwarte band (lichte achtergrond): donkere tekst en witte kaarten. */
.pw-vitals:not(.pw-band--zwart *) { --pw-v-goed: #0b9e5a; --pw-v-kaart: var(--pw-wit); --pw-v-rand: rgba(0, 0, 0, .08); --pw-v-gedempt: var(--pw-gedempt); --pw-v-spoor: #e3f5ec; --pw-v-vul: var(--pw-wit); --pw-v-zacht: var(--pw-gedempt); --pw-v-stip: #000000; color: var(--pw-tekst); }
@media (max-width: 1023px) {
	.pw-vitals { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.pw-vitals__lijst { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Blok: Offerte (artifact "Pingwin offerteformulier", variant C, oktober 2026)
   Oranje kaart, links kop en portretten, rechts een wit vlak met het formulier 'offerte'.
   -------------------------------------------------------------------------- */
.pw-offerte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: 24px; overflow: hidden; background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-offerte__links { display: flex; flex-direction: column; gap: 26px; padding: clamp(32px, 5vw, 64px); }
.pw-offerte__kop { margin: 0; font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: inherit; text-wrap: balance; }
.pw-offerte__tekst { max-width: 44ch; font-size: 17px; color: rgba(255, 255, 255, .9); }
.pw-offerte__tekst > * { margin: 0; }
.pw-offerte__persoon { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.pw-offerte__fotos { display: flex; flex: none; }
.pw-offerte__fotos img { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pw-oranje-fel); }
.pw-offerte__fotos img + img { margin-left: -26px; }
.pw-offerte__persoon p { margin: 0; font-size: 15px; line-height: 1.5; }
.pw-offerte__persoon b { display: block; font-weight: 700; }
.pw-offerte__rechts { display: flex; flex-direction: column; gap: 18px; margin: 12px; padding: clamp(24px, 3.4vw, 44px); border-radius: 16px; background: var(--pw-wit); color: var(--pw-tekst); }
.pw-offerte .pw-form__velden { display: flex; flex-direction: column; gap: 18px; }
.pw-offerte .pw-form__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pw-offerte .pw-form__veld { margin: 0; min-width: 0; }
.pw-offerte .pw-form__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--pw-tekst); }
.pw-offerte .pw-form__verplicht { display: none; }
.pw-offerte .pw-form__veld input:not([type="checkbox"]), .pw-offerte .pw-form__veld textarea, .pw-offerte .pw-form__veld select { width: 100%; padding: 14px 16px; border: 1px solid #e6e2dd; border-radius: 12px; background: var(--pw-wit); font: inherit; font-size: 15px; color: var(--pw-tekst); }
.pw-offerte .pw-form__veld textarea { height: auto; min-height: 0; resize: vertical; }
.pw-offerte .pw-form__veld input:focus, .pw-offerte .pw-form__veld textarea:focus, .pw-offerte .pw-form__veld select:focus { outline: none; border-color: #000000; }
.pw-offerte .pw-form__veld--fout input, .pw-offerte .pw-form__veld--fout textarea, .pw-offerte .pw-form__veld--fout select { border-color: var(--pw-oranje-donker); }
/* Keuzelijst in het offerteblok (formulier 'ads_analyse', oktober 2026): zelfde vorm als de invoervelden, met een eigen pijltje. */
.pw-offerte .pw-form__veld select { appearance: none; -webkit-appearance: none; height: auto; padding-right: 44px; background: var(--pw-wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px; cursor: pointer; }
.pw-offerte fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pw-offerte legend { padding: 0; }
.pw-form__keuzes { display: flex; flex-wrap: wrap; gap: 10px; }
.pw-form__keuze { position: relative; }
.pw-form__keuze input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pw-form__keuze span { display: inline-block; padding: 11px 18px; border: 1px solid #e6e2dd; border-radius: 999px; background: var(--pw-wit); font-size: 14px; font-weight: 500; transition: background .15s, border-color .15s, color .15s; }
.pw-form__keuze input:checked + span { background: #000000; border-color: #000000; color: var(--pw-wit); }
.pw-form__keuze input:focus-visible + span { outline: 2px solid var(--pw-oranje-fel); outline-offset: 2px; }
.pw-offerte .pw-form__voet { margin-top: 18px; }
.pw-offerte .pw-form__knop { background: #000000; color: var(--pw-wit); }
.pw-offerte .pw-form__knop:hover, .pw-offerte .pw-form__knop:focus-visible { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-offerte .pw-formulier__bevestiging { font-size: 18px; font-weight: 600; }
.pw-offerte__tekst a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* links in de tekst op het oranje vlak: wit en onderstreept, zoals in de oude CTA */
.pw-offerte__tekst a:hover, .pw-offerte__tekst a:focus-visible { color: inherit; text-decoration-thickness: 2px; }
.pw-offerte__belofte { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--pw-gedempt); }
.pw-offerte__belofte li { display: flex; align-items: center; gap: 8px; }
.pw-offerte__belofte li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pw-oranje-fel); }
@media (max-width: 1023px) {
	.pw-offerte { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.pw-offerte .pw-form__rij { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Volgende case als zwevende kaart (artifact "Pingwin volgende case", variant A, oktober 2026).
   Rechtsonder, naast de terug-naar-boven-knop; schuift in beeld zodra het blok ervoor in beeld komt (main.js).
   -------------------------------------------------------------------------- */
.pw-cvolgende { position: fixed; right: 76px; bottom: 22px; z-index: 1090; width: min(320px, calc(100vw - 100px)); transform: translateY(calc(100% + 40px)); opacity: 0; visibility: hidden; transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .3s, visibility 0s .55s; }
.pw-cvolgende.is-zichtbaar { transform: none; opacity: 1; visibility: visible; transition: transform .55s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
.editor-styles-wrapper .pw-cvolgende { position: relative; right: auto; bottom: auto; margin: 20px 0 20px auto; }
.pw-cvolgende__kaart { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--pw-wit); color: var(--pw-tekst); text-decoration: none; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .05); }
.pw-cvolgende__kaart:hover, .pw-cvolgende__kaart:focus-visible { color: var(--pw-tekst); text-decoration: none; }
.pw-cvolgende__beeld { display: block; flex: none; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; object-position: left top; }
.pw-cvolgende__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-cvolgende__label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pw-gedempt); }
.pw-cvolgende__naam { font-size: 15px; font-weight: 700; line-height: 1.25; color: #000000; }
.pw-cvolgende__pijl { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: auto; border-radius: 50%; background: var(--pw-oranje-fel); color: var(--pw-wit); transition: transform .3s; }
.pw-cvolgende__kaart:hover .pw-cvolgende__pijl, .pw-cvolgende__kaart:focus-visible .pw-cvolgende__pijl { transform: rotate(45deg); }
.pw-cvolgende__sluit { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #000000; color: var(--pw-wit); cursor: pointer; }
@media (max-width: 767px) {
	.pw-cvolgende { right: 60px; left: 12px; bottom: 14px; width: auto; }
	.pw-cvolgende__beeld { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.pw-cvolgende, .pw-cvolgende.is-zichtbaar { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero gesplitst: rechter vlak als verticale slider (artifact "Pingwin hero slider", variant B, oktober 2026).
   Kleur loopt over (oranje of het blauw van Waarom Pingwin, met zwarte tekst), label en cijfer wisselen zacht,
   de casekaart schuift omhoog en de volgende komt van onder. Zonder JS staat alleen het eerste vlak.
   -------------------------------------------------------------------------- */
.pw-hero__vlak { transition: background-color .9s cubic-bezier(.65, 0, .35, 1), color .9s cubic-bezier(.65, 0, .35, 1); }
.pw-hero__vlak[data-kleur="blauw"] { background: var(--pw-blauw); color: #000000; }
.pw-hero__vlak[data-kleur="bruin"] { background: #71655a; color: var(--pw-wit); } /* het bruin van het logo */
/* Hero 'Krimpen bij scrollen': main.js zet --pw-hk (0 tot 1) en de achtergrond van de sectie op de kleur van het blok eronder. */
/* De hele hero schaalt naar binnen (tot 94 %), zodat ook de inhoud meebeweegt in plaats van aan de zijkanten weg te vallen. */
.pw-hero-krimp > .pw-hero, .pw-hero-krimp > .pw-hpt-vlak { clip-path: inset(0 round 0 0 calc(var(--pw-hk, 0) * 42px) calc(var(--pw-hk, 0) * 42px)); transform: scale(calc(1 - var(--pw-hk, 0) * .06)); transform-origin: 50% 0; }
/* Dienstkaarten onder zo'n hero komen een voor een omhoog; 'translate' staat los van de transform van de hover. */
.pw-opkomen { opacity: var(--pw-op, 1); translate: 0 calc((1 - var(--pw-op, 1)) * 40px); }
.pw-hero__stapel { display: grid; min-width: 0; }
.pw-hero__stapel > * { grid-area: 1 / 1; }
.pw-hero__stapel > .pw-hero__label, .pw-hero__stapel > .pw-hero__cijfer { transition: opacity .5s ease, transform .7s cubic-bezier(.65, 0, .35, 1); }
.pw-hero__stapel > .is-voor, .pw-hero__stapel > .is-na { opacity: 0; pointer-events: none; }
.pw-hero__stapel > .pw-hero__label.is-voor { transform: translateY(-14px); }
.pw-hero__stapel > .pw-hero__label.is-na { transform: translateY(14px); }
.pw-hero__stapel > .pw-hero__cijfer.is-voor { transform: translateY(-40%); }
.pw-hero__stapel > .pw-hero__cijfer.is-na { transform: translateY(40%); }
.pw-hero__cases { overflow: hidden; border-radius: 16px; }
.pw-hero__cases > .pw-hero__case, .pw-hero__cases > .pw-hero__case-leeg { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.pw-hero__cases > .is-voor { transform: translateY(-110%); opacity: 1; }
.pw-hero__cases > .is-na { transform: translateY(110%); opacity: 1; }
.pw-hero__cases > .pw-hero__case.is-actief:hover, .pw-hero__cases > .pw-hero__case.is-actief:focus-visible { transform: none; }
.pw-hero__dias { position: absolute; right: 12px; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: 8px; transform: translateY(-50%); }
.pw-hero__dias button { width: 6px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: currentColor; opacity: .35; cursor: pointer; transition: height .3s, opacity .3s; }
.pw-hero__dias button.is-actief { height: 40px; opacity: 1; }
.pw-hero__dias button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.pw-hero__vlak, .pw-hero__stapel > * { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero pagina, stijl 'tekst' (artifact "Pingwin dienstenhero blauw", variant B, oktober 2026).
   Alleen tekst op --pw-blauw, tekstkolom drie kwart breed, onderaan de punten als één regel.
   -------------------------------------------------------------------------- */
.pw-sectie--hero-pagina:has(.pw-hpt) { margin: 0; padding: 80px 0 84px; background: var(--pw-blauw); }
.pw-sectie--hero-pagina:has(.pw-hpt--wit) { background: var(--pw-wit); } /* veld tekst_kleur: wit in plaats van blauw */
.pw-sectie--hero-pagina.pw-hero-krimp:has(.pw-hpt) { padding: 0; background: transparent; } /* Krimpen bij scrollen: het blauw zit op het vlak binnenin (.pw-hpt-vlak) */
.pw-hpt-vlak { padding: 80px 0 84px; background: var(--pw-blauw); }
.pw-hpt-vlak:has(.pw-hpt--wit) { background: var(--pw-wit); }
.pw-hpt.pw-hpt--wit .pw-hero-pagina__subtitel { color: var(--pw-oranje-fel); }
.pw-hpt--wit .pw-hpt__kruimelpad { color: var(--pw-gedempt); }
.pw-hpt--wit .pw-hpt__intro { color: var(--pw-gedempt); }
.pw-hpt__kolom { width: 75%; }
.pw-hpt__kruimelpad { margin: 0 0 30px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #33545b; }
.pw-hpt__kop { margin: 0 0 16px; font-size: clamp(42px, 5.6vw, 88px); font-weight: 700; line-height: 1; letter-spacing: -.035em; color: #000000; text-wrap: balance; hyphens: manual; } /* afbreken alleen waar in de kop een &shy; staat (bijv. Reputatie&shy;management) */
.pw-hpt__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-hpt .pw-hero-pagina__subtitel { margin: 0 0 22px; color: #000000; }
.pw-hpt__intro { font-size: 18px; line-height: 1.65; color: #1d3a40; }
.pw-hpt__intro > * { margin: 0 0 14px; }
.pw-hpt__intro > :last-child { margin-bottom: 0; }
.pw-hpt__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 34px; margin: 34px 0 0; }
.pw-hpt .pw-knop--vol { background: #000000; color: var(--pw-wit); }
.pw-hpt .pw-knop--vol:hover, .pw-hpt .pw-knop--vol:focus-visible { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-hpt__link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 600; color: #000000; text-decoration: none; }
.pw-hpt__link:hover { color: #000000; opacity: .7; }
.pw-hpt__punten { display: flex; flex-wrap: wrap; gap: 12px 34px; margin: 56px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(0, 0, 0, .14); list-style: none; }
.pw-hpt__punten li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; color: #000000; }
.pw-hpt__punten li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #000000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 900px) {
	.pw-sectie--hero-pagina:has(.pw-hpt) { padding: 56px 0 60px; }
	.pw-sectie--hero-pagina.pw-hero-krimp:has(.pw-hpt) { padding: 0; }
	.pw-hpt-vlak { padding: 56px 0 60px; }
	.pw-hpt__kolom { width: 100%; }
	.pw-hpt__punten { margin-top: 40px; }
}

/* --------------------------------------------------------------------------
   Blok Stappen, opmaak 'stapel' (artifact "Pingwin werkwijze kaarten", variant A, oktober 2026).
   Kaarten die bij scrollen over elkaar schuiven; kleur per kaart, nummer groot en licht rechts.
   -------------------------------------------------------------------------- */
.pw-sectie--stappen:has(.pw-stapel) { overflow: visible; }
.pw-stapel__kop { margin-bottom: 48px; text-align: center; } /* kop en intro boven de stapel gecentreerd */
.pw-stapel__titel { margin: 0; font-size: clamp(32px, 4vw, 54px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: #000000; text-wrap: balance; }
.pw-stapel__titel .pw-oranje { color: var(--pw-oranje-fel); }
.pw-stapel__intro { max-width: 760px; margin: 22px auto 0; color: var(--pw-gedempt); }
.pw-stapel { position: relative; }
.pw-stapel__kaart { position: sticky; top: calc(var(--pw-adminbalk, 0px) + 100px + var(--pw-i) * 18px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(520px, 70vh); margin-bottom: 6vh; border-radius: 24px; overflow: hidden; transform-origin: 50% 0; box-shadow: 0 -10px 40px -24px rgba(0, 0, 0, .35); }
.pw-stapel__kaart:last-child { margin-bottom: 0; }
.pw-stapel__kaart[data-kleur="wit"] { background: var(--pw-wit); color: var(--pw-tekst); }
.pw-stapel__kaart[data-kleur="blauw"] { background: var(--pw-blauw); color: #000000; }
.pw-stapel__kaart[data-kleur="oranje"] { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-stapel__kaart[data-kleur="zwart"] { background: #141414; color: var(--pw-wit); }
.pw-stapel__tekst { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 60px); }
.pw-stapel__kaartkop { margin: 0 0 18px; font-size: clamp(34px, 4.2vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.035em; color: inherit; }
.pw-stapel__kern { margin: 0 0 16px; font-size: 19px; font-weight: 700; line-height: 1.35; }
.pw-stapel__kaart[data-kleur="wit"] .pw-stapel__kern { color: var(--pw-oranje-fel); }
.pw-stapel__kaarttekst { max-width: 60ch; font-size: 16px; line-height: 1.7; opacity: .85; }
.pw-stapel__kaarttekst > * { margin: 0 0 12px; }
.pw-stapel__kaarttekst > :last-child { margin-bottom: 0; }
.pw-stapel__kaarttekst a { color: inherit; }
.pw-stapel__nummer { display: flex; align-items: flex-end; justify-content: flex-end; padding: clamp(20px, 3vw, 44px); font-size: clamp(160px, 22vw, 340px); font-weight: 300; line-height: .8; letter-spacing: -.06em; opacity: .16; }
@media (max-width: 900px) {
	.pw-stapel__kaart { grid-template-columns: 1fr; min-height: 0; top: calc(var(--pw-adminbalk, 0px) + 84px + var(--pw-i) * 12px); }
	.pw-stapel__nummer { display: none; }
}

/* Embed met MacBook-kader (zoals onze-werkwijze op de bronsite): het scherm van macbook.png (1075 x 548) is transparant
   op x 166 tot 909 en y 55 tot 470; de video staat precies in dat gat. Onder 768 px gewoon 16:9 zonder kader. */
.pw-embed-mac { position: relative; width: min(100%, 1075px); margin: 0 auto; aspect-ratio: 1075 / 548; background: url("../img/macbook.png") center / 100% 100% no-repeat; }
.pw-embed-mac__scherm { position: absolute; left: 15.44%; top: 10.04%; width: 69.21%; height: 75.91%; background: #000000; }
/* 'Half over het blok erboven': de MacBook schuift 12% van de breedte (max. 129px) omhoog, over de band erboven heen. */
.pw-embed-mac--over { z-index: 2; margin-top: max(-12%, -129px); }
.pw-embed-mac__scherm iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) {
	.pw-embed-mac { aspect-ratio: 16 / 9; background: none; }
	.pw-embed-mac__scherm { inset: 0; width: 100%; height: 100%; }
}

/* --------------------------------------------------------------------------
   Linkgroepen, opmaak 'kaarten' (artifact "Pingwin linkgroepen", optie A, oktober 2026).
   -------------------------------------------------------------------------- */
.pw-lgk__kop { margin: 0 0 40px; font-size: clamp(30px, 3.6vw, 48px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: #000000; text-wrap: balance; }
.pw-lgk__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-lgk__kop--midden { text-align: center; } /* veld kop_uitlijning: gecentreerd */
.pw-lgk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pw-lgk__kaart { padding: 34px 34px 20px; border-radius: 20px; background: var(--pw-wit); color: var(--pw-tekst); }
.pw-lgk__kaart--zwart { background: #141414; color: var(--pw-wit); }
/* Op een witte band krijgt de witte kaart een dunne rand, anders valt hij weg. */
.pw-band--wit .pw-lgk__kaart:not(.pw-lgk__kaart--zwart) { box-shadow: inset 0 0 0 1px #e6e2dd; }
.pw-lgk__label { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pw-gedempt); }
.pw-lgk__kaart--zwart .pw-lgk__label { color: #9a9a9a; }
.pw-lgk__link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid #e6e2dd; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: inherit; text-decoration: none; }
.pw-lgk__kaart--zwart .pw-lgk__link { border-color: #2a2a2a; }
.pw-lgk__link:hover, .pw-lgk__link:focus-visible { color: inherit; text-decoration: none; }
.pw-lgk__rond { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #f1efec; color: #000000; transition: background .25s, color .25s; }
.pw-lgk__rond svg { transition: transform .3s; }
.pw-lgk__kaart--zwart .pw-lgk__rond { background: #262626; color: var(--pw-wit); }
.pw-lgk__link:hover .pw-lgk__rond, .pw-lgk__link:focus-visible .pw-lgk__rond { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-lgk__link:hover .pw-lgk__rond svg { transform: translateX(2px); }
@media (max-width: 900px) {
	.pw-lgk { grid-template-columns: 1fr; }
	.pw-lgk__kaart { padding: 28px 24px 14px; }
	.pw-lgk__link { font-size: 18px; }
}


/* --------------------------------------------------------------------------
   Portfolio resultaat (artifact "Pingwin cases resultaat voorop", variant A, oktober 2026).
   Kaarten openen met het cijfer uit de case; de site schuift bij hover omhoog en de pijl wordt oranje.
   -------------------------------------------------------------------------- */
.pw-presult__kopregel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 30px; margin-bottom: 44px; }
.pw-presult__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--pw-wit); } /* gelijk aan de kop van Onze diensten */
.pw-presult__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-presult__alle { padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 600; color: var(--pw-wit); text-decoration: none; }
.pw-presult__alle:hover, .pw-presult__alle:focus-visible { color: var(--pw-oranje-fel); }
.pw-presult { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pw-presult__kaart { display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 0; border-radius: 22px; background: #141414; color: var(--pw-wit); text-decoration: none; overflow: hidden; transition: background .3s; }
.pw-presult__kaart:hover, .pw-presult__kaart:focus-visible { background: #1c1c1c; color: var(--pw-wit); }
.pw-presult__kaart:hover, .pw-presult__kaart:focus-visible { text-decoration: none; } /* geen onderstreping van de algemene a:hover */
.pw-presult__kaart:focus-visible { outline: 2px solid var(--pw-oranje-fel); outline-offset: 3px; }
.pw-presult__dienst { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9a9a9a; }
.pw-presult__cijfer { display: block; margin: 18px 0 4px; font-size: clamp(56px, 6vw, 92px); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.pw-presult__wat { display: block; margin: 0 0 26px; font-size: 15px; color: #d6d6d6; }
.pw-presult__klant { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid #2a2a2a; }
.pw-presult__naam { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: inherit; }
.pw-presult__rond { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid #444444; border-radius: 50%; transition: background .25s, border-color .25s; }
.pw-presult__kaart:hover .pw-presult__rond, .pw-presult__kaart:focus-visible .pw-presult__rond { background: var(--pw-oranje-fel); border-color: var(--pw-oranje-fel); }
.pw-presult__scherm { display: block; margin-top: 22px; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--pw-wit); transform: translateY(44px); transition: transform .45s cubic-bezier(.3, 0, .3, 1); } /* bij hover groeit het venster 44px omhoog */
.pw-presult__kaart:hover .pw-presult__scherm, .pw-presult__kaart:focus-visible .pw-presult__scherm { transform: translateY(0); }
.pw-presult__balk { display: flex; gap: 5px; padding: 8px 10px; background: #eeeeee; }
.pw-presult__balk i { width: 7px; height: 7px; border-radius: 50%; background: #c9c9c9; }
.pw-presult__venster { display: block; height: 220px; overflow: hidden; }
/* Bij hover scrolt de site in 7 s van boven naar beneden (zoals de portfoliokaarten); bij weggaan in 1 s terug. */
.pw-presult__site { display: block; width: 100%; height: auto; min-height: 220px; object-fit: cover; object-position: top; transition: transform 1s cubic-bezier(.3, 0, .3, 1); }
.pw-presult__kaart:hover .pw-presult__site, .pw-presult__kaart:focus-visible .pw-presult__site { transform: translateY(calc(-100% + 220px)); transition: transform 7s cubic-bezier(.3, 0, .4, 1) .1s; }
@media (max-width: 980px) { .pw-presult { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pw-presult { grid-template-columns: 1fr; } .pw-presult__kaart { padding: 24px 22px 0; } }
@media (prefers-reduced-motion: reduce) { .pw-presult__scherm, .pw-presult__site { transition: none; transform: none !important; } }


/* --------------------------------------------------------------------------
   Scan-oproep in twee stappen (artifact "Pingwin SEO-scan CTA", variant A, oktober 2026). main.js zet .is-stap1 op het
   formulier: eerst alleen de website met een knop Volgende, daarna de overige velden. Zonder JS staat alles er meteen.
   -------------------------------------------------------------------------- */
.pw-scan__stap { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pw-gedempt); }
.pw-scan__urlrij { display: flex; gap: 10px; }
.pw-scan__urlrij input { flex: 1 1 auto; min-width: 0; }
.pw-scan__verder { flex: none; white-space: nowrap; }
.pw-scan .pw-form__knop, .pw-scan__verder { background: #000000; color: var(--pw-wit); }
.pw-scan .pw-form__knop:hover, .pw-scan .pw-form__knop:focus-visible, .pw-scan__verder:hover, .pw-scan__verder:focus-visible { background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-scan form.is-stap1 .pw-form__velden > :not(.pw-scan__stap):not(.pw-form__veld--url), .pw-scan form.is-stap1 .pw-form__voet { display: none; }
.pw-scan form:not(.is-stap1) .pw-scan__verder { display: none; }
.pw-scan__belofte { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--pw-gedempt); }
.pw-scan__belofte li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--pw-oranje-fel); vertical-align: 1px; }
@media (max-width: 600px) { .pw-scan__urlrij { flex-direction: column; } }
/* --------------------------------------------------------------------------
   Scan-oproep: opbouw zodra het blok in beeld komt (artifact "Pingwin scan animatie", variant A, oktober 2026).
   main.js zet eerst .is-wacht (alle animaties staan stil op hun beginstand) en daarna .is-speel. Het vlak komt omhoog,
   de notitie schrijft zichzelf, kop en tekst rijzen op, de kaart schuift in beeld met één oranje scanstraal erover,
   daarna ploppen de beloftes op. Het voorbeeldadres typt main.js. Zonder JS staat alles er meteen.
   -------------------------------------------------------------------------- */
.pw-scan__kaart { position: relative; }
.pw-scan__straal { position: absolute; z-index: 2; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pw-scan__straal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, rgba(241, 88, 41, 0) 35%, rgba(241, 88, 41, .2) 48%, rgba(241, 88, 41, .42) 50%, rgba(241, 88, 41, .2) 52%, rgba(241, 88, 41, 0) 65%, transparent 100%); transform: translateX(-110%); }
.pw-scan.is-wacht, .pw-scan.is-speel { animation: pw-scan-vlak .9s cubic-bezier(.2, .7, .2, 1) both; }
:is(.pw-scan.is-wacht, .pw-scan.is-speel) .pw-scan__notitie { animation: pw-scan-schrijf 1.1s .45s cubic-bezier(.5, 0, .3, 1) both; }
:is(.pw-scan.is-wacht, .pw-scan.is-speel) .pw-scan__kop { animation: pw-scan-rijs .8s .6s cubic-bezier(.2, .7, .2, 1) both; }
:is(.pw-scan.is-wacht, .pw-scan.is-speel) .pw-scan__intro { animation: pw-scan-rijs .8s .85s cubic-bezier(.2, .7, .2, 1) both; }
:is(.pw-scan.is-wacht, .pw-scan.is-speel) .pw-scan__kaart { animation: pw-scan-kaart 1s .55s cubic-bezier(.2, .75, .2, 1) both; }
:is(.pw-scan.is-wacht, .pw-scan.is-speel) .pw-scan__straal::after { animation: pw-scan-straal 1.5s 1.45s cubic-bezier(.45, 0, .55, 1) both; }
:is(.pw-scan.is-wacht, .pw-scan.is-speel) .pw-scan__belofte li { animation: pw-scan-plop .5s 2.5s cubic-bezier(.3, 1.6, .5, 1) both; }
:is(.pw-scan.is-wacht, .pw-scan.is-speel) .pw-scan__belofte li:nth-child(2) { animation-delay: 2.65s; }
:is(.pw-scan.is-wacht, .pw-scan.is-speel) .pw-scan__belofte li:nth-child(3) { animation-delay: 2.8s; }
.pw-scan.is-wacht, .pw-scan.is-wacht *, .pw-scan.is-wacht *::after { animation-play-state: paused !important; }
@keyframes pw-scan-vlak { from { opacity: 0; transform: translateY(50px) scale(.96); } }
@keyframes pw-scan-schrijf { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } }
@keyframes pw-scan-rijs { from { opacity: 0; transform: translateY(28px); } }
@keyframes pw-scan-kaart { from { opacity: 0; transform: translateY(70px) rotate(2.5deg); } }
@keyframes pw-scan-straal { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes pw-scan-plop { from { opacity: 0; transform: scale(.6); } }



/* --------------------------------------------------------------------------
   Tekst, opmaak 'kolommen' (oktober 2026, naar Reino Studio): tekst in twee kolommen.
   -------------------------------------------------------------------------- */
.pw-tkol__kop { margin: 0 0 28px; }
.pw-tkol__tekst { column-count: 2; column-gap: 12%; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.6; color: #222222; }
.pw-tkol__tekst > * { margin: 0 0 1.3em; break-inside: avoid; }
.pw-tkol__tekst > :last-child { margin-bottom: 0; }
@media (min-width: 901px) { .pw-tkol__tekst > h2:nth-of-type(2), .pw-tkol__tekst > h3:nth-of-type(2) { break-before: column; } } /* twee vragen naast elkaar: de tweede kop begint de rechterkolom (SEO-specialist, oktober 2026) */
.pw-tkol__tekst > h2, .pw-tkol__tekst > h3 { break-after: avoid; }
@media (max-width: 900px) {
	.pw-tkol__tekst { column-count: 1; }
}


/* --------------------------------------------------------------------------
   Logo's, weergave 'rij' (artifact "Pingwin logorij", plek 2, oktober 2026): label links, logo's in grijs die in 38 s
   voorbij schuiven (pauze bij hover, logo onder de muis vol). multiply laat de lichte achtergrond van oude jpg's wegvallen.
   -------------------------------------------------------------------------- */
.pw-lrij { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); padding-block: 48px; border-bottom: 1px solid #dedfe4; } /* evenveel ruimte boven als onder de logo's; de sectie zelf zonder ruimte boven/onder */
.pw-lrij__label { flex: none; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--pw-gedempt); }
.pw-lrij__venster { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pw-lrij__spoor { display: flex; align-items: center; width: max-content; animation: pw-lrij 38s linear infinite; }
.pw-lrij:hover .pw-lrij__spoor { animation-play-state: paused; }
@keyframes pw-lrij { to { transform: translateX(-50%); } }
.pw-lrij__logo { flex: none; margin-right: clamp(40px, 5vw, 72px); }
.pw-lrij__logo img { display: block; width: auto; max-width: 150px; height: 44px; object-fit: contain; filter: grayscale(1); opacity: .55; mix-blend-mode: multiply; transition: opacity .25s; }
.pw-lrij__logo--vierkant img { width: 120px; max-width: none; height: 56px; object-fit: cover; }
.pw-lrij__logo img[src$=".svg"] { width: 150px; } /* svg heeft geen eigen breedte; contain houdt de verhouding */
.pw-lrij__logo:hover img { opacity: 1; }
@media (max-width: 760px) { .pw-lrij { flex-direction: column; align-items: flex-start; } .pw-lrij__venster { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pw-lrij__spoor { animation: none; flex-wrap: wrap; width: auto; row-gap: 20px; } .pw-lrij__logo[aria-hidden] { display: none; } }
.pw-lrij__intro + .pw-lrij { padding-block: 20px 0; border-bottom: 0; } /* rij onder een kop met tekst (oktober 2026): geen label, geen lijn */
/* Logo's in grijs, stil op twee rijen (weergave 'rij_vast', oktober 2026): kolommen = de helft van het aantal logo's, naar boven afgerond */
.pw-lrij--vast .pw-lrij__venster { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.pw-lrij--vast .pw-lrij__spoor { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 36px; width: auto; max-width: calc(var(--pw-lrij-kol, 3) * 230px); margin: 0 auto; animation: none; } /* flex: een oneven laatste rij staat ook in het midden */
.pw-lrij--vast .pw-lrij__logo { display: flex; justify-content: center; flex: 0 0 calc(100% / var(--pw-lrij-kol, 3)); margin-right: 0; }
@media (max-width: 600px) { .pw-lrij--vast { --pw-lrij-kol: 2 !important; } }
/* Kolommen met icoon, opmaak 'gesplitst' (Claude Design "Pingwin kolommen met icoon", variant A, oktober 2026) */
.pw-kgs { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 96px; align-items: start; }
.pw-kgs__zij { display: flex; flex-direction: column; gap: 26px; }
.pw-kgs__kop { margin: 0; font-size: clamp(36px, 3.9vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: #000000; }
.pw-kgs__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-kgs__intro { font-size: 18px; line-height: 1.65; color: #1d3a40; }
.pw-kgs__intro > * { margin: 0 0 14px; }
.pw-kgs__intro > :last-child { margin-bottom: 0; }
.pw-kgs__intro strong { color: #000000; }
.pw-kgs__intro ol, .pw-kgs__intro ul { padding-left: 22px; } /* lijsten in de intro zoals in de kolommen (oranje opsommingstekens) */
.pw-kgs__intro li { margin: 0 0 8px; padding-left: 4px; }
.pw-kgs__intro li::marker { color: var(--pw-oranje-fel); font-weight: 700; }
.pw-kgs__item { display: flex; flex-direction: column; gap: 18px; padding: 48px 0; border-bottom: 1px solid #e3e5ea; }
.pw-kgs__item:first-child { padding-top: 0; }
.pw-kgs__item:last-child { padding-bottom: 0; border-bottom: 0; }
.pw-kgs__kopregel { display: flex; align-items: center; gap: 20px; }
.pw-kgs__icoon { display: flex; align-items: center; justify-content: center; flex: none; width: 60px; height: 60px; border-radius: 16px; background: #71655a; color: var(--pw-wit); } /* het bruin van het logo met een wit icoon (Tonny) */
.pw-kgs__icoon svg { display: block; width: 30px; height: 30px; }
.pw-kgs__itemkop { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #000000; }
.pw-kgs__tekst { font-size: 17px; line-height: 1.7; color: #2b2b2b; }
.pw-kgs__tekst > * { margin: 0 0 16px; }
.pw-kgs__tekst > :last-child { margin-bottom: 0; }
.pw-kgs__tekst ol, .pw-kgs__tekst ul { padding-left: 22px; }
.pw-kgs__tekst li { margin: 0 0 8px; padding-left: 4px; }
.pw-kgs__tekst li::marker { color: var(--pw-oranje-fel); font-weight: 700; }
@media (min-width: 1024px) { .pw-kgs__zij { position: sticky; top: 120px; } }
@media (min-width: 1280px) { .pw-kgs .pw-kgs__kop { word-break: normal; } } /* een lang woord met leesteken ("webdesigners?") valt liever een paar pixels in de tussenruimte dan dat het leesteken los op de volgende regel komt */
@media (max-width: 1023px) { .pw-kgs { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 767px) { .pw-kgs__item { padding: 36px 0; } .pw-kgs__itemkop { font-size: 23px; } .pw-kgs__icoon { width: 52px; height: 52px; border-radius: 14px; } .pw-kgs__icoon svg { width: 26px; height: 26px; } }

/* Kolommen met icoon, opmaak 'genummerd' (Claude Design "Pingwin 12 redenen blok", variant A, oktober 2026): als 'gesplitst', met per rij een groot oranje volgnummer */
.pw-kgs--nr .pw-kgs__lijst { margin: 0; padding: 0; list-style: none; }
.pw-kgs--nr .pw-kgs__item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; margin: 0; padding: 40px 0; border-top: 1px solid #e3e5ea; border-bottom: 0; }
.pw-kgs--nr .pw-kgs__item:first-child { padding-top: 40px; }
.pw-kgs--nr .pw-kgs__item:last-child { padding-bottom: 40px; border-bottom: 1px solid #e3e5ea; }
.pw-kgs__nr { font-size: clamp(44px, 3.9vw, 56px); font-weight: 700; line-height: .9; letter-spacing: -.03em; color: var(--pw-oranje-fel); font-variant-numeric: tabular-nums; }
.pw-kgs__inhoud { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pw-kgs--nr .pw-kgs__itemkop { font-size: 24px; line-height: 1.3; letter-spacing: 0; }
@media (max-width: 767px) { .pw-kgs--nr .pw-kgs__item, .pw-kgs--nr .pw-kgs__item:first-child, .pw-kgs--nr .pw-kgs__item:last-child { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 32px 0; } .pw-kgs__nr { font-size: 36px; } .pw-kgs--nr .pw-kgs__itemkop { font-size: 20px; } }
/* Genummerd: elke rij komt rustig binnen zodra hij in beeld scrolt (main.js zet .is-in; zonder JS direct zichtbaar) */
.pw-kgs__item.is-wacht { opacity: 0; }
.pw-kgs__item.is-in { animation: pw-dbento-in 1.2s cubic-bezier(.33, 1, .68, 1) both; }

/* Tabel, opmaak 'zoekbalk' (Claude Design "Pingwin resultatenblok", variant B op zwart, oktober 2026) */
.pw-rzb__kopregel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px; align-items: start; }
.pw-rzb__kop { margin: 0; font-size: clamp(36px, 3.9vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: var(--pw-wit); }
.pw-rzb__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-rzb__intro { font-size: 18px; line-height: 1.65; color: #c8c8c8; }
.pw-rzb__intro > * { margin: 0 0 14px; }
.pw-rzb__intro > :last-child { margin-bottom: 0; }
.pw-rzb__intro strong { color: var(--pw-wit); }
.pw-rzb__intro a { color: var(--pw-wit); text-decoration: underline; }
.pw-rzb__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.pw-rzb__kopregel + .pw-rzb__lijst { margin-top: 64px; }
.pw-rzb__lijst--1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.pw-rzb__lijst--3, .pw-rzb__lijst--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pw-rzb__lijst--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* vijf: drie boven, twee onder */
.pw-rzb__lijst--5 > :nth-child(-n+3) { grid-column: span 2; }
.pw-rzb__lijst--5 > :nth-child(n+4) { grid-column: span 3; }
.pw-rzb__kaart { display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 32px; border-radius: 20px; background: var(--pw-wit); color: #181818; }
.pw-rzb__zoek { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0; padding: 0 22px; border: 1px solid #e3e5ea; border-radius: 30px; background: #f5f6fa; font-size: 17px; line-height: 1.3; color: #000000; }
.pw-rzb__zoek svg { flex: none; width: 18px; height: 18px; color: #616161; }
.pw-rzb__resultaat { display: flex; align-items: center; gap: 18px; }
.pw-rzb__plek { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--pw-oranje-fel); font-size: 20px; font-weight: 700; color: var(--pw-wit); }
.pw-rzb__wie { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pw-rzb__klant { font-size: 20px; font-weight: 700; line-height: 1.3; color: #000000; }
.pw-rzb__detail { font-size: 15px; line-height: 1.5; color: #616161; }
.pw-rzb__duur { margin: auto 0 0; padding-top: 18px; border-top: 1px solid #e3e5ea; font-size: 15px; font-weight: 700; color: #000000; }
.pw-rzb__duur span { margin-right: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #616161; }
@media (max-width: 1023px) {
	.pw-rzb__kopregel { grid-template-columns: 1fr; gap: 24px; }
	.pw-rzb__lijst--3, .pw-rzb__lijst--5, .pw-rzb__lijst--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pw-rzb__lijst--5 > * { grid-column: auto !important; }
}
@media (max-width: 767px) {
	.pw-rzb__lijst, .pw-rzb__lijst--3, .pw-rzb__lijst--5, .pw-rzb__lijst--6 { grid-template-columns: 1fr; }
	.pw-rzb__kopregel + .pw-rzb__lijst { margin-top: 40px; }
	.pw-rzb__kaart { padding: 24px; }
}
.pw-rzb__zoek > span.is-typt::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: currentColor; animation: pw-rzb-cursor .8s steps(1) infinite; } /* typende zoekwoorden (main.js) */
@keyframes pw-rzb-cursor { 50% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Blok: Portfolio carousel (artifact "Pingwin cases carousel", variant A, oktober 2026)
   Sleepbare rij met zo'n 2,5 grote beeldkaarten; de rij begint op de lijn van de container en loopt rechts door tot
   de rand. In de kaart het startbeeld van de case; bij hover (of toetsenbordfocus) schuift een browservenster met de
   homepage van onder in beeld en scrolt die mee. Afstand en duur van dat meescrollen zet main.js (data-pw-pcar) als
   --pw-pc-reis en --pw-pc-duur op de kaart. Op touch geen hover: een tik opent de case.
   -------------------------------------------------------------------------- */
.pw-sectie--portfolio-carousel { overflow: hidden; }
.pw-pcar {
	--pw-pc-gap: 22px;
	--pw-pc-rand: calc((100cqw - min(var(--pw-container), 90cqw)) / 2); /* gelijk aan de linkerrand van .pw-container */
	container-type: inline-size;
	color: var(--pw-wit);
}
.pw-pcar__kopregel { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 30px; margin-bottom: 40px; padding: 0 var(--pw-pc-rand); }
.pw-pcar__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--pw-wit); }
.pw-pcar__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-pcar__kopblok { display: flex; flex: 0 1 820px; flex-direction: column; gap: 24px; min-width: 0; } /* kop met optionele intro (oktober 2026); de pijlen blijven ernaast tot het te smal wordt */
.pw-pcar__intro { font-size: 18px; line-height: 1.65; color: #c8c8c8; }
.pw-pcar__intro strong, .pw-pcar__intro b { color: var(--pw-wit); }
.pw-pcar__intro p { margin: 0 0 14px; }

/* Blok Cijfers met uitleg (Claude Design "Pingwin wat is webdesign", variant A, oktober 2026): links kop en tekst,
   rechts een tweede kop met intro en de cijfers in rijen tussen dunne lijnen. */
.pw-cfr { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 96px; align-items: start; }
.pw-cfr__links { display: flex; flex-direction: column; gap: 26px; }
.pw-cfr__kop { margin: 0; font-size: clamp(36px, 3.9vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: #000000; }
.pw-cfr__tekst, .pw-cfr__intro { font-size: 18px; line-height: 1.65; color: #1d3a40; }
.pw-cfr__tekst :is(strong, b), .pw-cfr__intro :is(strong, b) { color: #000000; }
.pw-cfr__kop2 { margin: 0 0 14px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #000000; }
.pw-cfr__intro { margin-bottom: 44px; }
.pw-cfr__rij { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; padding: 40px 0; border-top: 1px solid #d9dce3; }
.pw-cfr__rij:last-child { border-bottom: 1px solid #d9dce3; }
.pw-cfr__cijfer { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pw-cfr__getal { font-size: clamp(72px, 7.2vw, 104px); font-weight: 700; line-height: .9; letter-spacing: -.05em; color: var(--pw-oranje-fel); }
.pw-cfr__label { font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-gedempt); }
.pw-cfr__uitleg { font-size: 20px; line-height: 1.6; color: #2b2b2b; }
.pw-cfr__uitleg :is(strong, b) { color: #000000; }
@media (max-width: 1023px) {
	.pw-cfr { grid-template-columns: minmax(0, 1fr); gap: 56px; }
}
@media (max-width: 767px) {
	.pw-cfr__rij { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; }
	.pw-cfr__uitleg { font-size: 18px; }
}
/* Portfoliowand naast tekst (veld 'wand' in de blokken Cijfers met uitleg en Kolommen met icoon, oktober 2026, naar het
   voorbeeld Salient "Premium elements"): links de bewegende portfoliowand (beeld-wand.php), rechts alle tekst onder elkaar.
   De wand (.pw-wandzij) blijft in beeld staan zolang de tekst ernaast loopt; de camerawand vult dan het hele vlak (wand.js:
   --pw-wand-s, -x en -y). In de HTML staat de tekst eerst; op tablet en mobiel staat de wand onder de tekst. */
.pw-wandzij { position: sticky; top: calc(var(--pw-adminbalk, 0px) + 110px); height: min(760px, calc(100vh - var(--pw-adminbalk, 0px) - 150px)); min-height: 480px; }
.pw-wandzij .pw-wand { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.pw-wandzij .pw-wand__buhne { transform: translate(var(--pw-wand-x, 0px), var(--pw-wand-y, 0px)) scale(var(--pw-wand-s, 1)); }
.pw-wandzij__foto { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 25%; border-radius: 32px; } /* foto naast de tekst (Kolommen met icoon, veld zij_foto) */
@media (max-width: 767px) { .pw-wandzij__foto { border-radius: 24px; } }
.pw-wandzij .pw-wandzij__wissel { position: absolute; inset: 0; border-radius: 32px; } /* foto met een tweede foto bij hover (veld zij_foto_wissel, wissel .pw-wissel) */
@media (max-width: 767px) { .pw-wandzij .pw-wandzij__wissel { border-radius: 24px; } }
.pw-cfr--wand, .pw-kgs--wand { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 96px; row-gap: 56px; }
.pw-cfr--wand .pw-cfr__links, .pw-kgs--wand .pw-kgs__zij { grid-column: 2; grid-row: 1; }
.pw-cfr--wand .pw-cfr__rechts, .pw-kgs--wand .pw-kgs__lijst { grid-column: 2; grid-row: 2; }
.pw-cfr--wand .pw-wandzij, .pw-kgs--wand .pw-wandzij { grid-column: 1; grid-row: 1 / span 2; }
.pw-kgs--wand .pw-kgs__zij { position: static; } /* de wand blijft staan, de kop niet */
@media (min-width: 1024px) { /* smalle tekstkolom: cijfer en volgnummer boven de uitleg */
	.pw-cfr--wand .pw-cfr__rij { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; }
	.pw-kgs--wand.pw-kgs--nr .pw-kgs__item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 1279px) {
	.pw-cfr--wand, .pw-kgs--wand { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
}
@media (max-width: 1023px) {
	.pw-cfr--wand, .pw-kgs--wand { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.pw-cfr--wand .pw-cfr__links, .pw-cfr--wand .pw-cfr__rechts, .pw-kgs--wand .pw-kgs__zij, .pw-kgs--wand .pw-kgs__lijst, .pw-cfr--wand .pw-wandzij, .pw-kgs--wand .pw-wandzij { grid-column: auto; grid-row: auto; }
	.pw-wandzij { position: relative; top: auto; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 767px) {
	.pw-wandzij { aspect-ratio: auto; height: 440px; }
}
.pw-pcar__bediening { display: flex; align-items: center; gap: 20px; }
.pw-pcar__teller { font-size: 14px; font-weight: 500; letter-spacing: .04em; color: #a3a3a3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-pcar__teller span { color: var(--pw-wit); }
.pw-pcar__balk { position: relative; width: 120px; height: 2px; overflow: hidden; border-radius: 2px; background: #2a2a2a; }
.pw-pcar__balk span { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background: var(--pw-oranje-fel); transition: width .3s ease; }
.pw-pcar__pijl { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid #444444; border-radius: 50%; background: none; color: var(--pw-wit); cursor: pointer; transition: background .25s ease, border-color .25s ease, opacity .25s ease; }
.pw-pcar__pijl:hover:not(:disabled), .pw-pcar__pijl:focus-visible { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); color: var(--pw-wit); outline: none; }
.pw-pcar__pijl:disabled { opacity: .3; cursor: default; }
.pw-pcar__rij {
	display: flex;
	gap: var(--pw-pc-gap);
	padding: 0 var(--pw-pc-rand) 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--pw-pc-rand);
	scrollbar-width: none;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}
.pw-pcar__rij::-webkit-scrollbar { display: none; }
.pw-pcar__rij.is-slepen { cursor: grabbing; scroll-snap-type: none; }
.pw-pcar__rij.is-slepen .pw-pcar__kaart { pointer-events: none; }
.pw-pcar__kaart {
	display: flex;
	flex: 0 0 calc((100cqw - var(--pw-pc-rand) - 2 * var(--pw-pc-gap)) / 2.5); /* tweeënhalve kaart in beeld */
	flex-direction: column;
	gap: 18px;
	max-width: 680px;
	scroll-snap-align: start;
	color: var(--pw-wit);
	text-decoration: none;
	-webkit-user-drag: none;
}
.pw-pcar__kaart:hover, .pw-pcar__kaart:focus { color: var(--pw-wit); text-decoration: none; } /* geen onderstreping van de algemene a:hover */
.pw-pcar__kaart:focus-visible { outline: none; }
.pw-pcar__kaart:focus-visible .pw-pcar__tegel { box-shadow: 0 0 0 3px var(--pw-oranje-fel); }
.pw-pcar__tegel { position: relative; display: block; aspect-ratio: 10 / 9; max-width: 100%; overflow: hidden; border-radius: 20px; background: #161616; isolation: isolate; }
.pw-pcar__start { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .6s ease; -webkit-user-drag: none; }
.pw-pcar__scherm {
	position: absolute;
	z-index: 1;
	top: 8%;
	right: 7%;
	bottom: 0;
	left: 7%;
	display: block;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
	background: var(--pw-wit);
	box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .6);
	transform: translateY(102%);
	transition: transform .65s cubic-bezier(.2, .75, .2, 1);
}
.pw-pcar__balkje { position: absolute; z-index: 1; top: 0; right: 0; left: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 13px; background: #ececec; }
.pw-pcar__balkje i { width: 8px; height: 8px; border-radius: 50%; background: #c6c6c6; }
.pw-pcar__venster { position: absolute; top: 28px; right: 0; bottom: 0; left: 0; display: block; overflow: hidden; }
.pw-pcar__site { display: block; width: 100%; max-width: none; height: auto; min-height: 100%; object-fit: cover; object-position: 50% 0; transition: transform .6s ease; -webkit-user-drag: none; }
.pw-pcar__kaart:hover .pw-pcar__scherm, .pw-pcar__kaart:focus-visible .pw-pcar__scherm { transform: translateY(0); }
.pw-pcar__kaart:hover .pw-pcar__start, .pw-pcar__kaart:focus-visible .pw-pcar__start { transform: scale(1.06); filter: brightness(.45); }
.pw-pcar__kaart:hover .pw-pcar__site, .pw-pcar__kaart:focus-visible .pw-pcar__site { transform: translateY(var(--pw-pc-reis, 0px)); transition: transform var(--pw-pc-duur, 6s) cubic-bezier(.45, 0, .55, 1) .55s; }
.pw-pcar__onder { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pw-pcar__tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pw-pcar__naam { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: inherit; }
.pw-pcar__dienst { font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: #9b9b9b; }
.pw-pcar__rond { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border: 1px solid #444444; border-radius: 50%; transition: background .25s ease, border-color .25s ease; }
.pw-pcar__kaart:hover .pw-pcar__rond, .pw-pcar__kaart:focus-visible .pw-pcar__rond { border-color: var(--pw-oranje-fel); background: var(--pw-oranje-fel); }
.pw-pcar__voet { margin-top: 28px; padding: 0 var(--pw-pc-rand); }
.pw-pcar__alle { padding-bottom: 2px; border-bottom: 1px solid currentColor; font-size: 15px; font-weight: 600; color: var(--pw-wit); text-decoration: none; }
.pw-pcar__alle:hover, .pw-pcar__alle:focus-visible { color: var(--pw-oranje-fel); text-decoration: none; }
@media (max-width: 767px) {
	.pw-pcar__kopregel { margin-bottom: 28px; }
	.pw-pcar__balk { display: none; }
	.pw-pcar__pijl { width: 44px; height: 44px; }
	.pw-pcar__kaart { flex-basis: 82cqw; } /* één kaart groot met een stukje van de volgende */
	.pw-pcar__naam { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   Pinguïn bij de onderrand (tekstblok, optie 'Pinguïn bij de onderrand', oktober 2026). Pinguïn 4 uit de
   illustratieset. De laag zit tegen de onderkant van de band en snijdt alles daaronder af, zodat de pinguïn van
   achter het volgende blok omhoog komt. main.js zet --pw-pg (0 = weg, 1 = boven) en laat hem daarna dansen.
   -------------------------------------------------------------------------- */
.pw-pinguin { --pw-pg-h: 275px; position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: calc(var(--pw-pg-h) + 60px); overflow: hidden; pointer-events: none; }
.pw-pinguin__binnen { position: relative; width: min(var(--pw-container), 90%); height: 100%; margin: 0 auto; }
.pw-pinguin__dier { position: absolute; bottom: 0; width: calc(var(--pw-pg-h) * 340 / 530); height: var(--pw-pg-h); translate: -50% calc((1 - var(--pw-pg, 0)) * 100% + 4%); pointer-events: auto; cursor: pointer; }
.pw-pinguin--links .pw-pinguin__dier { left: 25%; }
.pw-pinguin--midden .pw-pinguin__dier { left: 50%; }
.pw-pinguin--rechts .pw-pinguin__dier { left: 75%; } /* midden van de rechterkolom */
.pw-pinguin svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 767px) {
	.pw-pinguin { --pw-pg-h: 170px; }
	.pw-pinguin--links .pw-pinguin__dier, .pw-pinguin--rechts .pw-pinguin__dier { left: 50%; }
}

/* Hero pagina, stijl tekst: staande pinguïn (pinguïn 5, gespiegeld zodat hij naar de tekst kijkt), midden in de vrije rechterkolom
   met de voeten op de lijn boven de punten (veld 'pinguin', template-parts/parts/pinguin-staand.php, oktober 2026) */
.pw-hpt__grond { position: relative; margin-top: 56px; }
.pw-hpt__grond > .pw-hpt__punten { margin-top: 0; }
.pw-hpt__pinguin { --pw-hpt-pg-h: clamp(240px, 25vw, 360px); position: absolute; right: calc(12.5% - var(--pw-hpt-pg-h) * .2375); bottom: calc(100% - var(--pw-hpt-pg-h) * .006); width: calc(var(--pw-hpt-pg-h) * .475); height: var(--pw-hpt-pg-h); pointer-events: none; }
.pw-hpt__pinguin svg { display: block; width: 100%; height: 100%; transform: scaleX(-1); }
@media (max-width: 900px) {
	.pw-hpt__grond { margin-top: 40px; }
	.pw-hpt__pinguin { display: none; }
}

/* Blauwe hero (stijl tekst) komt in beeld zoals de hero op home: eerst de tekst, dan de punten met de pinguïn,
   50 px van onderen (pw-hero-in, 1,7 s, na 0,4 en 0,5 s), pas als de pagina geladen is (.pw-klaar; oktober 2026) */
.pw-hpt__kolom,
.pw-hpt__grond,
.pw-hpt > .pw-hpt__punten { animation: pw-hero-in 1.7s cubic-bezier(.33, 1, .68, 1) .4s both; }
.pw-hpt__grond,
.pw-hpt > .pw-hpt__punten { animation-delay: .5s; }
.pw-js:not(.pw-klaar) .pw-hpt__kolom,
.pw-js:not(.pw-klaar) .pw-hpt__grond,
.pw-js:not(.pw-klaar) .pw-hpt > .pw-hpt__punten { animation-play-state: paused; }

/* Formulier, opmaak 'kaart' (oktober 2026): de vorm van de scan-oproep (.pw-scan) met het eigen formulier van het blok.
   Alles wat de scan-oproep heeft (vlak, notitie, kaart, velden, knop, animatie) komt van .pw-scan; hier alleen de extra's. */
.pw-scan--formulier .pw-scan__intro ol,
.pw-scan--formulier .pw-scan__intro ul { margin: 0 0 14px; padding-left: 22px; }
.pw-scan--formulier .pw-scan__intro li { margin: 0 0 4px; }
.pw-scan .pw-form__naam { gap: 14px; }
.pw-scan .pw-form__omschrijving { padding-top: 6px; font-size: 12px; line-height: 1.5; color: var(--pw-gedempt); }

/* Pakket (Claude Design "Pingwin pakketblok hosting", variant A, oktober 2026): kop en tekst links, onderdelen in een witte kaart */
.pw-pakket { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 96px; align-items: start; }
.pw-pakket__zij { display: flex; flex-direction: column; gap: 26px; }
.pw-pakket__kop { margin: 0; font-size: clamp(36px, 3.9vw, 56px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; color: #000000; }
.pw-pakket__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-pakket__label { align-self: flex-start; margin: 0; padding: 8px 18px; border-radius: 999px; background: #e6e3df; font-size: 15px; font-weight: 600; line-height: 1.4; color: #000000; } /* lichtgrijze pil onder de kop (Tonny), zelfde grijs als de lijnen in de kaart */
.pw-pakket__tekst { font-size: 18px; line-height: 1.65; color: #1d3a40; }
.pw-pakket__tekst > * { margin: 0 0 14px; }
.pw-pakket__tekst > :last-child { margin-bottom: 0; }
.pw-pakket__tekst a { color: #000000; font-weight: 600; text-decoration: underline; text-decoration-color: var(--pw-oranje-fel); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pw-pakket__tekst a:hover { color: var(--pw-oranje-fel); }
.pw-pakket__kaart { margin: 0; padding: 12px 48px; list-style: none; border-radius: 28px; background: var(--pw-wit); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.pw-pakket__item { display: flex; align-items: center; gap: 24px; margin: 0; padding: 24px 0; border-bottom: 1px solid #e6e3df; }
.pw-pakket__item:last-child { border-bottom: 0; }
.pw-pakket__item--uitleg { align-items: flex-start; }
.pw-pakket__icoon { display: flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #71655a; color: var(--pw-wit); } /* het bruin van het logo, zoals .pw-kgs__icoon */
.pw-pakket__icoon svg { display: block; width: 26px; height: 26px; }
.pw-pakket__inhoud { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pw-pakket__item--uitleg .pw-pakket__inhoud { padding-top: 12px; }
.pw-pakket__titel { font-size: 21px; font-weight: 700; line-height: 1.3; color: #000000; }
.pw-pakket__toelichting { font-size: 16px; line-height: 1.6; color: #616161; }
/* Binnenkomst: de onderdelen schuiven een voor een omhoog zodra de kaart in beeld komt (JS zet .is-in; zonder JS direct zichtbaar). */
.pw-pakket__kaart.is-wacht .pw-pakket__item { opacity: 0; }
.pw-pakket__kaart.is-in .pw-pakket__item { animation: pw-dbento-in 1.2s cubic-bezier(.33, 1, .68, 1) both; }
.pw-pakket__kaart.is-in .pw-pakket__item:nth-child(2) { animation-delay: .15s; }
.pw-pakket__kaart.is-in .pw-pakket__item:nth-child(3) { animation-delay: .3s; }
.pw-pakket__kaart.is-in .pw-pakket__item:nth-child(4) { animation-delay: .45s; }
.pw-pakket__kaart.is-in .pw-pakket__item:nth-child(5) { animation-delay: .6s; }
.pw-pakket__kaart.is-in .pw-pakket__item:nth-child(n+6) { animation-delay: .75s; }
/* Cijfers met uitleg: de rijen komen rustig een voor een binnen zodra de lijst in beeld komt (JS zet .is-in; zonder JS direct zichtbaar). */
.pw-cfr__lijst.is-wacht .pw-cfr__rij { opacity: 0; }
.pw-cfr__lijst.is-in .pw-cfr__rij { animation: pw-dbento-in 1.4s cubic-bezier(.33, 1, .68, 1) both; }
.pw-cfr__lijst.is-in .pw-cfr__rij:nth-child(2) { animation-delay: .2s; }
.pw-cfr__lijst.is-in .pw-cfr__rij:nth-child(3) { animation-delay: .4s; }
.pw-cfr__lijst.is-in .pw-cfr__rij:nth-child(4) { animation-delay: .6s; }
.pw-cfr__lijst.is-in .pw-cfr__rij:nth-child(5) { animation-delay: .8s; }
.pw-cfr__lijst.is-in .pw-cfr__rij:nth-child(n+6) { animation-delay: 1s; }
@media (max-width: 1023px) { .pw-pakket { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 767px) { .pw-pakket__kaart { padding: 4px 24px; border-radius: 22px; } .pw-pakket__item { gap: 16px; padding: 20px 0; } .pw-pakket__titel { font-size: 18px; } .pw-pakket__toelichting { font-size: 15px; } .pw-pakket__icoon { width: 44px; height: 44px; border-radius: 12px; } .pw-pakket__icoon svg { width: 22px; height: 22px; } .pw-pakket__item--uitleg .pw-pakket__inhoud { padding-top: 8px; } }

/* --------------------------------------------------------------------------
Contactkop (artifact "Pingwin contactpagina", hero van variant B, oktober 2026).
Blauw vlak: links kruimelpad, H1, intro en de contactgegevens; rechts een witte formulierkaart die 120 px (mobiel 60 px)
over de onderrand valt. Het blok eronder heeft daarom ruimte boven nodig (Kantoren op Contact: 200, mobiel 130).
-------------------------------------------------------------------------- */
.pw-sectie--contact-kop { z-index: 2; } /* de kaart valt over het volgende blok heen */
.pw-ckop-vlak { position: absolute; inset: 0; z-index: 0; }
/* Krimpen bij scrollen (zoals de andere heroes): main.js zet --pw-hk (0 tot 1) en de sectie op de kleur van het blok eronder. */
.pw-hero-krimp > .pw-ckop-vlak { clip-path: inset(0 round 0 0 calc(var(--pw-hk, 0) * 42px) calc(var(--pw-hk, 0) * 42px)); transform: scale(calc(1 - var(--pw-hk, 0) * .06)); transform-origin: 50% 0; }
.pw-ckop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.pw-ckop__links { padding-bottom: 96px; }
.pw-ckop__kruimelpad { margin: 0 0 30px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #33545b; }
.pw-ckop__kop { margin: 0; font-size: clamp(42px, 5.6vw, 88px); font-weight: 700; line-height: 1; letter-spacing: -.035em; color: #000000; text-wrap: balance; }
.pw-ckop__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-ckop__intro { max-width: 46ch; margin-top: 22px; font-size: 18px; line-height: 1.65; color: #1d3a40; }
.pw-ckop__intro > * { margin: 0 0 14px; }
.pw-ckop__intro > :last-child { margin-bottom: 0; }
.pw-ckop__lijst { margin: 40px 0 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(0, 0, 0, .14); }
.pw-ckop__item { display: flex; align-items: center; gap: 18px; margin: 0; padding: 20px 0; border-top: 1px solid rgba(0, 0, 0, .14); color: #000000; }
.pw-ckop__item--klein { align-items: flex-start; }
.pw-ckop__icoon { flex: none; }
.pw-ckop__groot { min-width: 0; font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #000000; text-decoration: none; overflow-wrap: anywhere; }
.pw-ckop__groot:hover, .pw-ckop__groot:focus-visible { color: #000000; text-decoration: underline; text-decoration-color: var(--pw-oranje-fel); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.pw-ckop__klein { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; font-size: 16px; font-weight: 500; line-height: 1.5; }
.pw-ckop__kaart { position: relative; z-index: 2; margin-bottom: -120px; padding: clamp(28px, 3.4vw, 44px); border-radius: 24px; background: var(--pw-wit); color: var(--pw-tekst); box-shadow: 0 24px 60px rgba(0, 0, 0, .1); }
.pw-ckop__kaartkop { margin: 0 0 24px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-ckop__kaartkop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-ckop__regel { margin: 14px 0 0; font-size: 14px; color: var(--pw-gedempt); }
.pw-ckop .pw-form__velden { display: flex; flex-direction: column; gap: 18px; }
.pw-ckop .pw-form__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pw-ckop .pw-form__veld { margin: 0; min-width: 0; }
.pw-ckop .pw-form__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--pw-tekst); }
.pw-ckop .pw-form__verplicht { display: none; }
.pw-ckop .pw-form__veld input:not([type="checkbox"]), .pw-ckop .pw-form__veld textarea, .pw-ckop .pw-form__veld select { width: 100%; padding: 14px 16px; border: 1px solid #e6e2dd; border-radius: 12px; background: var(--pw-wit); font: inherit; font-size: 15px; color: var(--pw-tekst); }
.pw-ckop .pw-form__veld textarea { height: auto; min-height: 0; resize: vertical; }
.pw-ckop .pw-form__veld input:focus, .pw-ckop .pw-form__veld textarea:focus, .pw-ckop .pw-form__veld select:focus { outline: none; border-color: #000000; }
.pw-ckop .pw-form__veld--fout input, .pw-ckop .pw-form__veld--fout textarea, .pw-ckop .pw-form__veld--fout select { border-color: var(--pw-oranje-donker); }
.pw-ckop fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pw-ckop legend { padding: 0; }
.pw-ckop .pw-form__voet { margin-top: 18px; padding: 0; }
.pw-ckop .pw-form__knop { margin-bottom: 0; background: var(--pw-oranje-fel); color: var(--pw-wit); }
.pw-ckop .pw-form__knop:hover, .pw-ckop .pw-form__knop:focus-visible { background: #000000; color: var(--pw-wit); }
.pw-ckop .pw-formulier__bevestiging { padding: 0; font-size: 18px; font-weight: 600; }
@media (max-width: 1023px) {
.pw-ckop { grid-template-columns: 1fr; gap: 8px; }
.pw-ckop__links { padding-bottom: 32px; }
}
@media (max-width: 767px) {
.pw-ckop__kaart { margin-bottom: -60px; }
}
@media (max-width: 600px) {
.pw-ckop .pw-form__rij { grid-template-columns: 1fr; }
.pw-ckop__kaart { padding: 26px 20px; border-radius: 20px; }
}

/* --------------------------------------------------------------------------
Kantoren (artifact "Pingwin contactpagina", kantorenblok van variant A, oktober 2026).
Grijze kaarten met bovenin een kaartbeeld in huisstijl (adres in het midden, daar staat de speld), daaronder adres, OV,
parkeren, openingstijden en een routelink.
-------------------------------------------------------------------------- */
.pw-kantoren__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-kantoren__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-kantoren__intro { max-width: 760px; margin-top: 16px; color: var(--pw-gedempt); }
.pw-kantoren__intro > * { margin: 0; }
.pw-kantoren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.pw-kantoren__kop + .pw-kantoren { margin-top: 40px; }
.pw-kantoor { display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; background: var(--pw-grijs); }
.pw-band--grijs .pw-kantoor { background: var(--pw-wit); }
.pw-kantoor__kaart { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #e9f0f2; }
.pw-kantoor__kaart > a:not(.pw-kantoor__bron) { display: block; height: 100%; }
.pw-kantoor__beeld { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.3, 0, .3, 1); }
.pw-kantoor__kaart:hover .pw-kantoor__beeld { transform: scale(1.04); }
.pw-kantoor__pin { position: absolute; left: 50%; top: 50%; padding: 9px 14px; border-radius: 12px; background: var(--pw-oranje-fel); color: var(--pw-wit); font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
.pw-kantoor__pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; background: var(--pw-oranje-fel); transform: translate(-50%, -6px) rotate(45deg); }
.pw-kantoor__pin::before { content: ""; position: absolute; left: 50%; top: calc(100% + 14px); width: 14px; height: 14px; border: 3px solid var(--pw-wit); border-radius: 50%; background: var(--pw-oranje-fel); transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.pw-kantoor__bron { position: absolute; right: 10px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .85); font-size: 11px; color: var(--pw-gedempt); text-decoration: none; }
.pw-kantoor__bron:hover, .pw-kantoor__bron:focus-visible { color: var(--pw-tekst); }
.pw-kantoor__body { display: flex; flex: 1; flex-direction: column; gap: 18px; padding: clamp(26px, 3vw, 40px); }
.pw-kantoor__naam { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: #000000; }
.pw-kantoor__adres { margin: 0; font-size: 17px; font-style: normal; line-height: 1.6; }
.pw-kantoor__info { display: flex; flex-direction: column; gap: 12px; margin: 0; font-size: 15px; line-height: 1.5; }
.pw-kantoor__info > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.pw-kantoor__info dt { font-weight: 700; }
.pw-kantoor__info dd { margin: 0; }
.pw-kantoor__route { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-bottom: 4px; border-bottom: 2px solid var(--pw-oranje-fel); font-size: 15px; font-weight: 700; color: #000000; text-decoration: none; }
.pw-kantoor__route:hover, .pw-kantoor__route:focus-visible { color: var(--pw-oranje-fel); text-decoration: none; }
.pw-kantoor__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
.pw-kantoren { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 420px) {
.pw-kantoor__info > div { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pw-kantoor__beeld { transition: none; }
}

/* Reviews (ticket) als laatste blok boven de footer: het krimpende vlak (.pw-krimp::before) schuift 4 % naar binnen, maar het
spoor met de kaarten loopt door tot de rand van het venster. Het spoor wordt daarom even ver afgeknipt, anders steekt de
volgende kaart wit uit over de footerkleur (Contact, oktober 2026). */
.pw-krimp .pw-rticket__spoor { clip-path: inset(0 calc(var(--pw-krimp, 0) * 4vw) 0 0); }

/* --------------------------------------------------------------------------
Team, opmaak 'kaarten' (artifact "Pingwin teamblok", variant A, oktober 2026).
Grote kop met optionele intro ernaast, witte kaarten met rond portret; op een witte band worden de kaarten lichtgrijs.
-------------------------------------------------------------------------- */
.pw-teamk__kopregel { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 56px; }
.pw-teamk__kop { margin: 0; font-size: var(--pw-kop-groot); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: #000000; }
.pw-teamk__kop .pw-oranje { color: var(--pw-oranje-fel); }
.pw-teamk__intro { max-width: 460px; color: var(--pw-gedempt); }
.pw-teamk__intro > * { margin: 0 0 12px; }
.pw-teamk__intro > :last-child { margin-bottom: 0; }
.pw-teamk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pw-teamk__kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; padding: 36px; border-radius: 24px; background: var(--pw-wit); }
.pw-band--wit .pw-teamk__kaart { background: var(--pw-grijs); }
.pw-teamk__foto { display: block; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: var(--pw-blauw); }
.pw-teamk__wie { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pw-teamk__naam { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #000000; }
.pw-teamk__functie { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pw-gedempt); }
.pw-teamk__links { display: flex; gap: 10px; margin-top: auto; }
.pw-teamk__knop { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f1efec; color: #000000; transition: background .25s, color .25s; }
.pw-teamk__knop svg { width: 17px; height: 17px; }
.pw-teamk__knop:hover, .pw-teamk__knop:focus-visible { background: var(--pw-oranje-fel); color: var(--pw-wit); }
@media (max-width: 1023px) {
.pw-teamk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.pw-teamk__kopregel { margin-bottom: 36px; }
.pw-teamk { grid-template-columns: 1fr; gap: 16px; }
.pw-teamk__kaart { padding: 26px; }
.pw-teamk__foto { width: 88px; height: 88px; }
}

/* ==========================================================================
   Hero gesplitst, rechter vlak 'wand' (veld vlak_stijl, oktober 2026; Claude Design "Pingwin homehero met ons werk",
   variant E): zwart vlak met een harde rand, daarin een schuine wand van websites (isometrisch: 45 graden gedraaid en
   60 graden achterover gekanteld) waarvan de kolommen om en om omhoog en omlaag drijven. Onderaan de cases zoals altijd.
   main.js zet --pw-wand-schaal op de breedte van het vlak (ontwerp: 0,7 bij 540 px) en pauzeert buiten beeld.
   ========================================================================== */
.pw-hero__vlak[data-kleur="zwart"] { background: #000000; color: var(--pw-wit); }
.pw-hero__vlak--wand { overflow: hidden; isolation: isolate; justify-content: flex-end; }
.pw-hero__vlak--wand > .pw-hero__vlak-kop,
.pw-hero__vlak--wand > .pw-hero__stapel:not(.pw-hero__cases) { display: none; }
.pw-hero__vlak--wand .pw-hero__dias { top: auto; bottom: 64px; transform: none; }
.pw-hero__wand { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pw-hero__wand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 43%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .72) 34%, #000000 58%); }
.pw-hero__wand-vlak { position: absolute; left: 50%; top: 50%; width: 3272px; height: 3200px; margin: -1600px 0 0 -1636px; transform-origin: 1636px 1600px; transform: scale(var(--pw-wand-schaal, .7)) rotateX(60deg) rotateZ(-45deg); }
.pw-hero__wand-kol { position: absolute; top: 0; width: 440px; display: flex; flex-direction: column; gap: 32px; will-change: transform; animation: pw-wand-op 90s linear infinite; }
.pw-hero__wand-kol.is-neer { animation-name: pw-wand-neer; animation-duration: 110s; }
.pw-hero__wand-kol.is-vlug { animation-duration: 75s; }
.pw-hero__wand.is-stil .pw-hero__wand-kol { animation-play-state: paused; }
.pw-hero__wand-t { flex: none; display: block; width: 440px; max-width: none; height: 239px; border-radius: 10px; object-fit: cover; background: #ffffff; }
@keyframes pw-wand-op { from { transform: translateY(0); } to { transform: translateY(-3252px); } }
@keyframes pw-wand-neer { from { transform: translateY(-3252px); } to { transform: translateY(0); } }
@media (max-width: 959px) {
	.pw-hero__vlak--wand { min-height: 520px; }
	.pw-hero__vlak--wand .pw-hero__dias { bottom: 40px; }
}
@media (max-width: 479px) {
	.pw-hero__vlak--wand { min-height: 660px; }
}

/* Statementblok op mobiel: gelijke regelafstand (verzoek Tonny, 26 oktober 2026). De beeldpillen zijn hier precies 1em hoog
   en vallen binnen de regelhoogte, zodat regels met en zonder pil even ver uit elkaar staan. */
@media (max-width: 767px) {
	.pw-statement__zin { font-size: 30px; line-height: 1.35; }
	.pw-statement__pil { width: 1.8em; height: 1em; vertical-align: -.14em; }
}