/* =========================================================================
   Glero — hoofdstijlen (ontwerp v4, wit)
   ====================================================================== */

:root {
	--oranje: #EA6A0C;
	--oranje-licht: #FDE9D9;
	--zwart: #141414;
	--tekst: #4A4640;
	--grijs: #6B665E;
	--grijs-licht: #8C877E;
	--zand: #F7F5F1;
	--lijn: #EEEBE6;
	--veld-lijn: #E2DED7;
	--wa: #25D366;
	--kop: 'Outfit', sans-serif;
	--body: 'Manrope', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
	margin: 0;
	background: #fff;
	color: var(--zwart);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--zwart); text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
a:hover { color: var(--oranje); }
img { max-width: 100%; height: auto; }
input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--oranje); outline-offset: 1px; }
input::placeholder, textarea::placeholder { color: #8A8A8A; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .6; }

.skip { position: absolute; left: -999px; top: 0; background: var(--zwart); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.wrap--smal { max-width: 860px; }
.centreer { display: flex; justify-content: center; margin-top: 48px; }
.oranje { color: var(--oranje); }

/* ---- Koppen ---- */
.kop {
	margin: 0;
	font-family: var(--kop);
	font-weight: 600;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: pretty;
}
.kop--groot { font-size: clamp(40px, 5vw, 64px); }
.label {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oranje);
}
.label__streep { width: 28px; height: 2px; background: var(--oranje); display: block; }
.label--midden { margin-bottom: 18px; }
.sectie-intro { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.sectie-intro p { margin: 18px 0 0; font-size: 18px; line-height: 1.65; color: var(--grijs); }

/* ---- Knoppen ---- */
.knop {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 30px; border-radius: 999px;
	font-weight: 700; font-size: 16px; line-height: 1.2;
	border: 1.5px solid transparent; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.knop--oranje { background: var(--oranje); color: #fff; }
.knop--oranje:hover { background: var(--zwart); color: #fff; }
.knop--zwart { background: var(--zwart); color: #fff; }
.knop--zwart:hover { background: var(--oranje); color: #fff; }
.knop--lijn { border-color: var(--zwart); color: var(--zwart); padding: 14.5px 30px; }
.knop--lijn:hover { border-color: var(--oranje); color: var(--oranje); }
.knop--nav { padding: 14px 28px; }
.knop--nav:hover { background: var(--oranje); border-color: var(--oranje); color: #fff; }
.knop--wa { background: var(--wa); color: #fff; }
.knop--wa:hover { background: var(--zwart); color: #fff; }
.knop--icoon { padding: 14px 26px; gap: 12px; }
.icoon { display: inline-flex; align-items: center; line-height: 0; }
.knoppen { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* ---- Cirkelfoto's ---- */
.cirkel { position: relative; border-radius: 50%; overflow: hidden; background: var(--zwart); flex: none; }
.cirkel .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cirkel .foto--leeg { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12%; font-size: 13px; color: rgba(255,255,255,.6); background: #2a2622; }
.cirkel--portret { width: min(100%, 420px); aspect-ratio: 1; border: 8px solid #fff; box-shadow: 0 24px 60px rgba(20,20,20,.15); }
.cirkel--klein { width: 92px; height: 92px; background: var(--lijn); border: 4px solid #fff; box-shadow: 0 8px 20px rgba(20,20,20,.1); }
.cirkel--klein .foto--leeg { color: var(--grijs); background: var(--lijn); font-size: 11px; }

/* =========================================================================
   Header
   ====================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--lijn);
}
.nav {
	max-width: 1320px; margin: 0 auto; padding: 0 32px; height: 92px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__logo { display: flex; align-items: center; }
.nav__logo .logo { height: 58px; width: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__lijst { display: flex; gap: 32px; align-items: center; font-size: 16px; font-weight: 700; }
.nav__voet { display: none; }
.nav__toggle { display: none; }

@media (max-width: 860px) {
	/* Geen backdrop-filter: dat maakt de header het referentiekader voor het fixed menu */
	.site-header { background: #fff; backdrop-filter: none; }
	.nav { height: 76px; padding: 0 20px; }
	.nav__logo .logo { height: 44px; }
	.nav__logo { position: relative; z-index: 71; }

	/* Menuknop: twee lijntjes + tekst, wordt een kruis */
	.nav__toggle {
		position: relative; z-index: 71;
		display: inline-flex; align-items: center; gap: 10px;
		background: var(--zand); border: 1px solid var(--lijn); border-radius: 999px;
		padding: 0 16px 0 14px; height: 44px; cursor: pointer;
		font: 700 14px/1 var(--body); color: var(--zwart); letter-spacing: .04em;
		transition: background .2s, border-color .2s, color .2s;
	}
	.nav__toggle-lijnen { width: 20px; height: 12px; position: relative; display: block; }
	.nav__toggle-lijnen span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s cubic-bezier(.2,.7,.2,1), top .3s; }
	.nav__toggle-lijnen span:first-child { top: 1px; }
	.nav__toggle-lijnen span:last-child { top: 9px; }
	.nav__toggle[aria-expanded="true"] { background: var(--zwart); border-color: var(--zwart); color: #fff; }
	.nav__toggle[aria-expanded="true"] .nav__toggle-lijnen span:first-child { top: 5px; transform: rotate(45deg); }
	.nav__toggle[aria-expanded="true"] .nav__toggle-lijnen span:last-child { top: 5px; transform: rotate(-45deg); }

	/* Het menu zelf: volledig scherm onder de balk */
	.nav__links {
		position: fixed; inset: 0; z-index: 70;
		display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 0;
		padding: 100px 24px 28px;
		padding-bottom: max(28px, env(safe-area-inset-bottom));
		background: #fff;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s;
		overflow-y: auto;
	}
	.nav__links::before {
		content: ''; position: absolute; right: -30%; top: 32%; width: 90vw; aspect-ratio: 1449 / 920;
		background: url('../img/glero-icoon.png') no-repeat center / contain; opacity: .07; pointer-events: none;
	}
	.nav__links.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

	.nav__lijst { flex-direction: column; align-items: stretch; gap: 0; position: relative; }
	.nav__lijst > a:not(.knop) {
		display: flex; align-items: center; justify-content: space-between;
		padding: 18px 0; border-bottom: 1px solid var(--lijn);
		font-family: var(--kop); font-weight: 600; font-size: 34px; letter-spacing: -.02em; line-height: 1;
		opacity: 0; transform: translateY(14px);
		transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), color .2s;
	}
	.nav__lijst > a:not(.knop)::after { content: '→'; font-family: var(--body); font-size: 20px; color: var(--oranje); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
	.nav__lijst > a.actief::after, .nav__lijst > a:not(.knop):hover::after { opacity: 1; transform: none; }
	.nav__lijst > a.actief { color: var(--oranje); }
	.nav__lijst > .knop--nav {
		margin-top: 22px; justify-content: center; height: 56px; font-size: 17px;
		background: var(--oranje); border-color: var(--oranje); color: #fff;
		opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), background .2s;
	}
	.nav__links.open .nav__lijst > a { opacity: 1; transform: none; }
	.nav__links.open .nav__lijst > a:nth-child(1) { transition-delay: .08s; }
	.nav__links.open .nav__lijst > a:nth-child(2) { transition-delay: .14s; }
	.nav__links.open .nav__lijst > a:nth-child(3) { transition-delay: .20s; }
	.nav__links.open .nav__lijst > a:nth-child(4) { transition-delay: .26s; }
	.nav__links.open .nav__lijst > a:nth-child(5) { transition-delay: .32s; }
	.nav__links.open .nav__lijst > a:nth-child(6) { transition-delay: .38s; }

	.nav__voet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; position: relative; }
	.nav__contact {
		display: inline-flex; align-items: center; justify-content: center; gap: 8px;
		height: 50px; border-radius: 999px; border: 1.5px solid var(--zwart);
		font-weight: 700; font-size: 15px;
	}
	.nav__contact--wa { background: var(--wa); border-color: var(--wa); color: #fff; }
}

/* Actief item op desktop (streepje) */
@media (min-width: 861px) {
	.nav__lijst > a:not(.knop) { position: relative; }
	.nav__lijst > a:not(.knop)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--oranje); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
	.nav__lijst > a:not(.knop):hover::after, .nav__lijst > a.actief::after { transform: scaleX(1); }
	.nav__lijst > a.actief { color: var(--oranje); }
}

/* =========================================================================
   Hero
   ====================================================================== */
.hero { position: relative; overflow: hidden; background: #fff; }
.hero__inner { position: relative; padding-top: 96px; padding-bottom: 40px; }
.hero__icoon {
	position: absolute; right: -8%; top: 50%; width: min(60vw, 720px); height: auto;
	opacity: .09; transform: translateY(-50%); transform-origin: 50% 50%;
	cursor: pointer; user-select: none; pointer-events: auto;
}
.js .hero__icoon { animation: glero-aan 3.2s cubic-bezier(.65,0,.25,1) .6s both; }
@keyframes glero-aan-mobiel {
	0%   { transform: rotate(-90deg) scale(1);  opacity: .45; filter: drop-shadow(0 0 24px rgba(234,106,12,.6)); }
	30%  { transform: rotate(-90deg) scale(1);  opacity: .45; filter: drop-shadow(0 0 24px rgba(234,106,12,.6)); }
	38%  { transform: rotate(-90deg) scale(.9); opacity: .55; filter: drop-shadow(0 0 40px rgba(234,106,12,.95)); }
	46%  { transform: rotate(-90deg) scale(1);  opacity: .2;  filter: none; }
	85%  { transform: rotate(0deg) scale(1);    opacity: .15; filter: none; }
	100% { transform: rotate(0deg) scale(1);    opacity: .14; filter: none; }
}
@keyframes glero-aan {
	0%   { transform: translateY(-50%) rotate(-90deg) scale(1);  opacity: .32; filter: drop-shadow(0 0 40px rgba(234,106,12,.6)); }
	30%  { transform: translateY(-50%) rotate(-90deg) scale(1);  opacity: .32; filter: drop-shadow(0 0 40px rgba(234,106,12,.6)); }
	38%  { transform: translateY(-50%) rotate(-90deg) scale(.9); opacity: .4;  filter: drop-shadow(0 0 70px rgba(234,106,12,.95)); }
	46%  { transform: translateY(-50%) rotate(-90deg) scale(1);  opacity: .14; filter: drop-shadow(0 0 0 rgba(234,106,12,0)); }
	85%  { transform: translateY(-50%) rotate(0deg) scale(1);    opacity: .1;  filter: drop-shadow(0 0 0 rgba(234,106,12,0)); }
	100% { transform: translateY(-50%) rotate(0deg) scale(1);    opacity: .09; filter: drop-shadow(0 0 0 rgba(234,106,12,0)); }
}
.hero__kicker { margin: 0 0 20px; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--oranje); position: relative; }
.hero__titel {
	margin: 0; position: relative; font-family: var(--kop); font-weight: 600;
	font-size: clamp(48px, 9vw, 128px); line-height: .95; letter-spacing: -.03em;
}
.hero__tekst { margin: 32px 0 0; max-width: 520px; font-size: 19px; line-height: 1.6; color: var(--tekst); position: relative; }
.hero .knoppen { position: relative; }

/* Kernwaarden: fototegels */
.kernwaarden { margin-top: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; position: relative; }
.tegel {
	position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
	background: var(--zwart); color: #fff; box-shadow: 0 16px 40px rgba(20,20,20,.1);
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.tegel:hover { color: #fff; transform: translateY(-6px); box-shadow: 0 30px 60px rgba(20,20,20,.2); }
.tegel__foto { position: absolute; inset: 0; }
.tegel__foto .foto { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tegel:hover .tegel__foto .foto { transform: scale(1.06); }
.tegel__foto .foto--leeg { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,.5); font-size: 13px; background: linear-gradient(135deg, #2a2622, #141414); }
.tegel__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 35%, rgba(20,20,20,.88)); }
.tegel__nr { position: absolute; top: 18px; left: 20px; font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #fff; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); padding: 8px 12px; border-radius: 999px; }
.tegel__tekst { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.tegel__titel { font-family: var(--kop); font-weight: 600; font-size: 32px; line-height: 1; letter-spacing: -.02em; }
.tegel__sub { margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 8px; }
.tegel__pijl { color: var(--oranje); display: inline-block; transition: transform .25s; }
.tegel:hover .tegel__pijl { transform: translateX(5px); }
.tegel::after { content: ''; position: absolute; left: 24px; bottom: 0; width: 0; height: 4px; background: var(--oranje); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.tegel:hover::after { width: calc(100% - 48px); }

/* Lopende band */
.band { margin-top: 72px; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 18px 0; overflow: hidden; white-space: nowrap; }
.band__loop { display: flex; width: max-content; animation: glero-band var(--duur, 40s) linear infinite; will-change: transform; }
.band__set { display: flex; align-items: center; flex: none; }
.band__set span { font-family: var(--kop); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--zwart); padding: 0 28px; white-space: nowrap; }
.band__set i { width: 10px; height: 10px; border-radius: 50%; background: var(--oranje); display: inline-block; flex: none; }
.band:hover .band__loop { animation-play-state: paused; }
/* Schuift precies één set op; de sets zijn identiek, dus de overgang is naadloos */
@keyframes glero-band { to { transform: translateX(calc(-100% / var(--sets, 3))); } }

/* =========================================================================
   Over
   ====================================================================== */
.over { padding: 140px 0 120px; }
.over__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 64px; align-items: center; }
.over__beeld { display: flex; justify-content: center; order: 2; position: relative; }
.over__blob { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--oranje); left: 6%; bottom: -6%; }
.over__tekst { margin-top: 28px; font-size: 19px; line-height: 1.7; color: var(--tekst); }
.over__tekst p { margin: 0 0 18px; }
.over__tekst p:last-child { margin-bottom: 0; }

/* =========================================================================
   Diensten (Verhuur)
   ====================================================================== */
.diensten { padding: 40px 0 160px; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.kaart {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--lijn); border-radius: 22px; overflow: hidden; color: var(--zwart);
	box-shadow: 0 10px 30px rgba(20,20,20,.05);
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.kaart:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(20,20,20,.14); color: var(--zwart); }
.kaart__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--zand); }
.kaart__foto .foto { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kaart:hover .kaart__foto .foto { transform: scale(1.06); }
.kaart__foto .foto--leeg { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--grijs); font-size: 13px; background: linear-gradient(135deg, var(--zand), var(--lijn)); }
.kaart__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0) 60%, rgba(20,20,20,.35)); pointer-events: none; }
.kaart__nr { position: absolute; top: 16px; left: 16px; z-index: 1; font-size: 12px; letter-spacing: .2em; font-weight: 700; color: #fff; background: var(--oranje); padding: 8px 12px; border-radius: 999px; }
.kaart__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kaart__titel { margin: 0; font-family: var(--kop); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
.kaart__tekst { font-size: 16px; line-height: 1.7; color: var(--tekst); flex: 1; }
.kaart__tekst p { margin: 0; }
.kaart__tekst p + p { margin-top: 10px; }
.kaart__link { margin-top: 12px; font-weight: 700; font-size: 15px; color: var(--oranje); display: flex; gap: 8px; align-items: center; }

/* Waarom Glero (USP-strook) */
.usps {
	margin-top: 64px; padding: 56px; border-radius: 32px; background: var(--zwart); color: #fff;
	display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 48px; align-items: center; position: relative; overflow: hidden;
}
.usps::before { content: ''; position: absolute; right: -8%; top: -30%; width: 46%; aspect-ratio: 1449 / 920; background: url('../img/glero-icoon.png') no-repeat center / contain; opacity: .08; pointer-events: none; }
.usps > * { position: relative; }
.label--wit { color: var(--oranje); }
.usps__titel { margin: 16px 0 0; font-family: var(--kop); font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.02em; text-wrap: pretty; }
.usps__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; }
.usps__lijst li { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; }
.usps__vink { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 50%; background: var(--oranje); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 700; }
.usps__lijst strong { font-size: 17px; line-height: 1.3; }
.usps__lijst span:not(.usps__vink) { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.65); }
.usps .knop { grid-column: 1; justify-self: start; }
@media (max-width: 1000px) { .usps { grid-template-columns: 1fr; gap: 32px; } .usps .knop { grid-column: auto; } }

/* =========================================================================
   Portfolio
   ====================================================================== */
.portfolio { padding: 0 0 140px; }
.projecten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.project {
	position: relative; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; background: var(--zwart);
	display: flex; align-items: flex-end; justify-content: flex-start; text-align: left; color: #fff;
	border: 1px solid var(--lijn); box-shadow: 0 10px 30px rgba(20,20,20,.08);
	transition: transform .25s, box-shadow .25s;
}
.project:hover { color: #fff; transform: translateY(-6px); box-shadow: 0 30px 60px rgba(20,20,20,.18); }
.project:hover .project__foto .foto { transform: scale(1.05); }
.project__foto { position: absolute; inset: 0; }
.project__foto .foto { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.project__foto .foto--leeg { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,.5); font-size: 13px; background: #2a2622; }
.project__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85)); pointer-events: none; }
.project__tekst { position: relative; padding: 0 28px 32px; pointer-events: none; }
.project__type { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--oranje); }
.project__naam { font-family: var(--kop); font-weight: 600; font-size: 30px; margin-top: 8px; line-height: 1.1; letter-spacing: -.02em; }

/* Fotobadge op de kaart */
.project__badge { position: absolute; top: 16px; right: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(20,20,20,.55); backdrop-filter: blur(6px); padding: 7px 11px; border-radius: 999px; letter-spacing: .04em; }
.projecten--drie { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Portfolio-archief en projectdetail */
.pagina { padding: 72px 0 140px; }
.portfolio-archief .projecten { margin-top: 8px; }
.terug { display: inline-block; margin-bottom: 28px; font-weight: 700; color: var(--grijs); }
.project-detail .label { margin-bottom: 18px; }
.project-detail__foto { margin: 40px 0; border-radius: 24px; overflow: hidden; }
.project-detail__foto img { display: block; width: 100%; }
.tekst { font-size: 18px; line-height: 1.75; color: var(--tekst); }
.tekst h2, .tekst h3 { font-family: var(--kop); font-weight: 600; color: var(--zwart); letter-spacing: -.02em; margin: 40px 0 12px; line-height: 1.15; }
.tekst h2 { font-size: 32px; }
.tekst h3 { font-size: 24px; }
.tekst a { color: var(--oranje); text-decoration: underline; }
.tekst img { border-radius: 16px; }
.paginering { margin-top: 48px; text-align: center; }
.paginering .page-numbers { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--lijn); margin: 0 3px; font-weight: 700; }
.paginering .page-numbers.current { background: var(--zwart); color: #fff; border-color: var(--zwart); }

/* ---- Projectpagina ---- */
.project-kop { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; margin-bottom: 40px; }
.project-kop .label { margin-bottom: 18px; }
.project-kop__intro { margin: 20px 0 0; font-size: 19px; line-height: 1.6; color: var(--tekst); max-width: 620px; }
.feiten { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.feiten div { background: var(--zand); border: 1px solid var(--lijn); border-radius: 16px; padding: 16px 18px; }
.feiten dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oranje); }
.feiten dd { margin: 6px 0 0; font-family: var(--kop); font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: -.01em; }

/* Raster: past zich aan het aantal foto's aan */
.raster { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; margin: 0 0 56px; }
.raster__item { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--zwart); }
.raster__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.raster__item:hover img { transform: scale(1.04); }
.raster__zoom { position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--zwart); display: grid; place-items: center; font-size: 18px; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.raster__item:hover .raster__zoom { opacity: 1; transform: none; }
.raster--1 { grid-template-columns: 1fr; grid-auto-rows: auto; }
.raster--1 .raster__item { aspect-ratio: 16 / 9; }
.raster--2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 420px; }
.raster--3 { grid-auto-rows: 260px; }
.raster--3 .raster__item { grid-column: span 2; }
.raster--3 .raster__item:first-child { grid-row: span 2; }
.raster--4 .raster__item:first-child, .raster--5 .raster__item:first-child, .raster--veel .raster__item:first-child { grid-column: span 2; grid-row: span 2; }
.raster--4 .raster__item:last-child { grid-column: span 2; }
/* 6+ foto's: eerste 2x2, dan rijen van vier; de laatste vult de rij op */
.raster--veel .raster__item:last-child:nth-child(4n+2) { grid-column: span 4; }
.raster--veel .raster__item:last-child:nth-child(4n+3) { grid-column: span 3; }
.raster--veel .raster__item:last-child:nth-child(4n)   { grid-column: span 2; }

.project-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.project-body .tekst > :first-child { margin-top: 0; }
.project-zij { display: grid; gap: 20px; position: sticky; top: 110px; }
.project-body--zonder-tekst { grid-template-columns: 1fr; }
.project-body--zonder-tekst .project-zij { position: static; grid-template-columns: 1.4fr 1fr; align-items: stretch; }
@media (max-width: 860px) { .project-body--zonder-tekst .project-zij { grid-template-columns: 1fr; } }
.geleverd { background: var(--zand); border: 1px solid var(--lijn); border-radius: 24px; padding: 26px; }
.geleverd__lijst { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.geleverd__lijst li { display: flex; align-items: center; gap: 14px; }
.geleverd__lijst strong { display: block; font-family: var(--kop); font-weight: 600; font-size: 18px; line-height: 1.1; }
.geleverd__lijst small { display: block; margin-top: 3px; font-size: 13px; color: var(--grijs); line-height: 1.4; }
.geleverd__foto { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--lijn); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(20,20,20,.1); }
.geleverd__foto .foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.geleverd__foto .foto--leeg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 9px; color: var(--grijs); text-align: center; }
.project-cta { background: var(--zwart); color: #fff; border-radius: 24px; padding: 28px; position: relative; overflow: hidden; }
.project-cta::before { content: ''; position: absolute; right: -25%; top: -20%; width: 70%; aspect-ratio: 1449 / 920; background: url('../img/glero-icoon.png') no-repeat center / contain; opacity: .1; }
.project-cta > * { position: relative; }
.project-cta__titel { font-family: var(--kop); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -.02em; }
.project-cta p { margin: 10px 0 20px; color: rgba(255,255,255,.7); font-size: 15px; }
.project-cta .knop { width: 100%; justify-content: center; margin-bottom: 10px; }
.meer { margin-top: 96px; }
.meer .kop { margin-bottom: 32px; text-align: center; }

/* Lichtbox */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10,10,10,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox__figuur { margin: 0; max-width: min(1400px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox__figuur img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox__teller { color: rgba(255,255,255,.7); font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.lightbox__sluit, .lightbox__pijl { position: absolute; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: background .2s; }
.lightbox__sluit:hover, .lightbox__pijl:hover { background: var(--oranje); }
.lightbox__sluit { top: 20px; right: 20px; width: 48px; height: 48px; font-size: 30px; line-height: 1; }
.lightbox__pijl { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 34px; line-height: 1; }
.lightbox__pijl--vorige { left: 20px; }
.lightbox__pijl--volgende { right: 20px; }
body.lightbox-open { overflow: hidden; }

/* =========================================================================
   Contact
   ====================================================================== */
.contact { background: var(--zand); padding: 120px 0; border-radius: 64px 64px 0 0; }
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 64px; align-items: start; }
.contact__links { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; align-items: flex-start; }
.socials { display: flex; gap: 12px; margin-top: 40px; }
.social { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--zwart); display: grid; place-items: center; }
.social:hover { border-color: var(--oranje); color: var(--oranje); }

.contactform { display: grid; gap: 22px; }
.contactform label { display: grid; gap: 10px; font-size: 16px; font-weight: 700; }
.contactform input, .contactform select, .contactform textarea {
	background: #fff; color: var(--zwart); border: 1.5px solid var(--veld-lijn); border-radius: 12px;
	padding: 20px 22px; font-size: 16px; font-weight: 400; width: 100%;
}
.contactform input[type=date] { padding: 19px 22px; }
.contactform textarea { resize: vertical; }
.contactform .rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.contactform .hp { position: absolute; left: -9999px; }
.contactform__voet { display: flex; gap: 24px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.contactform__voet p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grijs); text-align: right; max-width: 520px; }
.contactform__voet a { text-decoration: underline; }
.contactform button { border: 0; padding: 18px 32px; }
.melding { padding: 16px 18px; border-radius: 12px; font-weight: 700; font-size: 15px; }
.melding--ok { background: #FFF1E6; color: #8A3E05; }
.melding--fout { background: #FDE2E2; color: #8A1C1C; }

/* =========================================================================
   Footer
   ====================================================================== */
.site-footer { background: #fff; padding: 64px 0 32px; border-top: 3px solid var(--oranje); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; font-size: 15px; color: var(--grijs); line-height: 1.75; }
.footer-grid .logo { height: 60px; width: auto; display: block; margin-bottom: 18px; }
.footer-grid p { margin: 0; }
.footer-grid p + a, .footer-grid a + p { margin-top: 8px; }
.footer-grid a { display: block; color: var(--grijs); }
.footer-grid a:hover { color: var(--oranje); }
.footer-kop { font-weight: 700; color: var(--zwart); margin-bottom: 10px; }
.footer-onder {
	margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--lijn);
	font-size: 13px; color: var(--grijs-licht); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-onder a { color: var(--grijs-licht); text-decoration: underline; }
.footer-onder a:hover { color: var(--oranje); }

/* Zwevende WhatsApp-knop */
.wa-zwevend {
	position: fixed; left: 24px; bottom: 24px; z-index: 60; width: 64px; height: 64px; border-radius: 50%;
	background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(20,20,20,.25);
}
.wa-zwevend:hover { background: var(--zwart); color: #fff; }
body.menu-open .wa-zwevend { opacity: 0; pointer-events: none; }

/* =========================================================================
   Tablet
   ====================================================================== */
@media (max-width: 1100px) and (min-width: 861px) {
	.nav__links, .nav__lijst { gap: 22px; }
	.nav__lijst { font-size: 15px; }
	.knop--nav { padding: 12px 22px; }
}

/* =========================================================================
   Mobiel
   ====================================================================== */
@media (max-width: 860px) {
	html { scroll-padding-top: 84px; }
	body.menu-open { overflow: hidden; }
	.hero__inner { padding-top: 56px; padding-bottom: 8px; }
	/* De G niet door de tekst, maar op eigen plek naast/onder de knoppen */
	.hero__inner { padding-bottom: 0; }
	/* De G rechts naast de titel (Geluid. Licht. Events.) */
	.hero__titel { position: relative; }
	.hero__icoon { width: 48vw; right: -12%; top: 96px; bottom: auto; opacity: .16; transform: none; z-index: 0; }
	.hero__kicker, .hero__titel, .hero__tekst, .hero .knoppen { z-index: 1; }
	.js .hero__icoon { animation-name: glero-aan-mobiel; }
	.hero .knoppen { flex-direction: column; align-items: stretch; }
	.hero .knoppen .knop { justify-content: center; }
	.hero__kicker { font-size: 11px; letter-spacing: .14em; margin-bottom: 14px; max-width: 60%; }
	.hero__titel { font-size: clamp(52px, 15vw, 88px); }
	.hero__tekst { font-size: 17px; margin-top: 24px; }
	.knoppen { margin-top: 28px; gap: 10px; }
	.knop { padding: 15px 24px; font-size: 15px; }
	.knop--lijn { padding: 13.5px 24px; }
	.kernwaarden { margin-top: 48px; gap: 12px; grid-template-columns: 1fr; }
	.tegel { aspect-ratio: 16 / 9; border-radius: 18px; }
	.tegel__titel { font-size: 26px; }
	.tegel__tekst { left: 18px; right: 18px; bottom: 16px; }
	.tegel__nr { top: 12px; left: 14px; }
	.band { margin-top: 44px; padding: 14px 0; }
	.band__set span { font-size: 17px; padding: 0 18px; }
	.usps { padding: 32px 22px; border-radius: 22px; margin-top: 40px; }
	.usps__lijst { grid-template-columns: 1fr; gap: 16px; }
	.usps .knop { width: 100%; justify-content: center; }

	.kop { font-size: clamp(30px, 8vw, 40px); }
	.kop--groot { font-size: clamp(34px, 9vw, 48px); }
	.sectie-intro { margin-bottom: 32px; }
	.sectie-intro p { font-size: 16px; margin-top: 12px; }

	.over { padding: 88px 0 72px; }
	.over__grid { gap: 40px; }
	.over__beeld { order: 0; }
	.cirkel--portret { width: min(78vw, 360px); }
	.over__tekst { font-size: 17px; margin-top: 20px; }

	.diensten { padding: 24px 0 88px; }
	.kaarten { gap: 16px; }
	.kaart__foto { aspect-ratio: 16 / 10; }
	.kaart__body { padding: 20px 22px 24px; gap: 8px; }
	.kaart__titel { font-size: 24px; }
	.kaart__tekst { font-size: 15px; }

	.portfolio { padding-bottom: 88px; }
	.projecten { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.project { border-radius: 20px; }
	.project__tekst { padding: 0 16px 18px; }
	.project__type { font-size: 10px; letter-spacing: .22em; }
	.project__naam { font-size: 20px; margin-top: 4px; }
	.centreer { margin-top: 32px; }
	.centreer .knop { width: 100%; justify-content: center; }
	.pagina { padding: 48px 0 88px; }
	.project-kop { grid-template-columns: 1fr; gap: 24px; margin-bottom: 24px; }
	.project-kop__intro { font-size: 17px; }
	.feiten { grid-template-columns: 1fr 1fr; gap: 10px; }
	.feiten div { padding: 12px 14px; border-radius: 12px; }
	.feiten dd { font-size: 18px; }
	.raster { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; margin-bottom: 40px; }
	.raster__item { border-radius: 12px; }
	.raster--2 { grid-auto-rows: 220px; }
	.raster .raster__item { grid-column: span 1; grid-row: span 1; }
	.raster .raster__item:first-child { grid-column: span 2; grid-row: span 1; }
	.raster--1 .raster__item:first-child { grid-row: span 2; }
	.raster--2 .raster__item:first-child { grid-column: span 1; }
	.raster .raster__item:last-child:nth-child(odd) { grid-column: span 1; }
	.raster .raster__item:last-child:nth-child(even) { grid-column: span 2; }
	.raster--2 .raster__item:last-child { grid-column: span 1; }
	.project-body { grid-template-columns: 1fr; gap: 32px; }
	.project-zij { position: static; }
	.geleverd, .project-cta { padding: 22px; border-radius: 18px; }
	.meer { margin-top: 64px; }
	.lightbox { padding: 12px; }
	.lightbox__sluit { top: 10px; right: 10px; }
	.lightbox__pijl { width: 44px; height: 44px; font-size: 28px; bottom: 16px; top: auto; transform: none; }
	.lightbox__pijl--vorige { left: 16px; }
	.lightbox__pijl--volgende { right: 16px; }
	.project-detail__foto { margin: 28px 0; border-radius: 16px; }
	.tekst { font-size: 17px; }

	.contact { padding: 72px 0 88px; border-radius: 36px 36px 0 0; }
	.contact__grid { gap: 40px; }
	.contact__links { margin-top: 28px; }
	.contact__links .knop { width: 100%; justify-content: center; }
	.socials { margin-top: 28px; }
	.contactform { gap: 16px; }
	.contactform input, .contactform select, .contactform textarea { padding: 16px 18px; }
	.contactform input[type=date] { padding: 15px 18px; min-height: 54px; }
	.contactform .rij { gap: 16px; }
	.contactform__voet { justify-content: stretch; flex-direction: column; align-items: stretch; gap: 16px; }
	.contactform__voet p { text-align: left; max-width: none; font-size: 13px; }
	.contactform button { width: 100%; justify-content: center; }

	.site-footer { padding: 48px 0 24px; }
	.footer-grid { gap: 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.footer-grid a { padding: 4px 0; }
	.footer-onder { flex-direction: column; gap: 6px; margin-top: 32px; }

	.wa-zwevend { width: 52px; height: 52px; left: auto; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); box-shadow: 0 8px 20px rgba(20,20,20,.22); }
	.wa-zwevend svg { width: 26px; height: 26px; }
	.wa-zwevend { animation: none; }
}

@media (max-width: 720px) {
	.wrap { padding: 0 20px; }
}

/* Heel kleine telefoons */
@media (max-width: 380px) {
	.wrap { padding: 0 16px; }
	.nav { padding: 0 16px; }
	.nav__links { padding-left: 18px; padding-right: 18px; }
	.nav__lijst > a:not(.knop) { font-size: 30px; }
	.nav__contact { font-size: 14px; gap: 6px; }
	.hero__titel { font-size: 48px; }
	.kaarten { grid-template-columns: 1fr; }
	.projecten { gap: 10px; }
	.project__naam { font-size: 17px; }
	.footer-grid { grid-template-columns: 1fr; }
}

/* Liggend op een telefoon: hero niet te hoog */
@media (max-height: 500px) and (max-width: 900px) {
	.hero__inner { padding-top: 32px; }
	.hero__titel { font-size: 44px; }
}

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

/* WordPress-standaardklassen */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin: 0 auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 14px; color: var(--grijs); text-align: center; margin-top: 8px; }

/* =========================================================================
   Beweging
   ====================================================================== */

/* Onthullen bij scrollen (alleen als JS actief is) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
/* Vangnet zonder JavaScript-afhankelijkheid: na 2,5 s is alles hoe dan ook zichtbaar */
.js .reveal { animation: glero-vangnet 1ms linear 2.5s forwards; }
@keyframes glero-vangnet { to { opacity: 1; transform: none; } }
/* Lange tekstblokken doen nooit mee */
.js .tekst.reveal, .js .pagina .tekst { opacity: 1 !important; transform: none !important; }
.js .reveal--zoom { transform: scale(.92); }
.js .reveal--links { transform: translateX(-32px); }
.js .reveal--rechts { transform: translateX(32px); }

/* Hero-intro */
.js .hero__kicker, .js .hero__titel, .js .hero__tekst, .js .hero .knoppen { opacity: 0; transform: translateY(24px); animation: glero-in .8s cubic-bezier(.2,.7,.2,1) forwards; }
.js .hero__kicker { animation-delay: .1s; }
.js .hero__titel { animation-delay: .2s; }
.js .hero__tekst { animation-delay: .35s; }
.js .hero .knoppen { animation-delay: .5s; }

@keyframes glero-in   { to { opacity: 1; transform: none; } }
@keyframes glero-zoom { to { opacity: 1; transform: none; } }
@keyframes glero-fade { to { opacity: 1; } }
@keyframes glero-zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }
@keyframes glero-zweef2 { 0%, 100% { translate: 0 0; } 50% { translate: 8px 14px; } }

/* Zwevende vormen */
.over__blob { animation: glero-zweef2 8s ease-in-out infinite; }
.stip { animation: glero-puls 2s ease-in-out infinite; }
@keyframes glero-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(234,106,12,.6); } 60% { box-shadow: 0 0 0 8px rgba(234,106,12,0); } }

/* Header krimpt bij scrollen */
.nav { transition: height .3s ease; }
.nav__logo .logo { transition: height .3s ease; }
.site-header.scrolled .nav { height: 72px; }
.site-header.scrolled .nav__logo .logo { height: 44px; }
.site-header.scrolled { box-shadow: 0 6px 24px rgba(20,20,20,.06); }
@media (max-width: 860px) { .site-header.scrolled .nav { height: 66px; } .site-header.scrolled .nav__logo .logo { height: 38px; } }


/* Knoppen: pijltje schuift mee, lichte lift */
.knop span[aria-hidden], .kaart__link span[aria-hidden] { display: inline-block; transition: transform .25s ease; }
.knop:hover span[aria-hidden], .kaart:hover .kaart__link span[aria-hidden] { transform: translateX(5px); }
.knop:hover { transform: translateY(-2px); }
@media (hover: none) { .knop:hover { transform: none; } .tegel:hover, .kaart:hover, .project:hover { transform: none; } }
.knop:active { transform: translateY(0); }


/* Portretfoto wiebelt mee bij hover */
.cirkel--portret { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.over__beeld:hover .cirkel--portret { transform: rotate(2deg) scale(1.02); }

/* Formuliervelden: zachte focus */
.contactform input, .contactform select, .contactform textarea { transition: border-color .2s, box-shadow .2s, transform .2s; }
.contactform input:focus, .contactform select:focus, .contactform textarea:focus { outline: 0; border-color: var(--oranje); box-shadow: 0 0 0 4px rgba(234,106,12,.15); }
.melding { animation: glero-in .5s ease forwards; opacity: 0; transform: translateY(-8px); }

/* WhatsApp-knop: zachte puls */
.wa-zwevend { animation: glero-wa 3s ease-in-out infinite; transition: background .2s, transform .2s; }
.wa-zwevend:hover { animation: none; transform: scale(1.08); }
@keyframes glero-wa { 0%, 100% { box-shadow: 0 12px 30px rgba(20,20,20,.25), 0 0 0 0 rgba(37,211,102,.5); } 60% { box-shadow: 0 12px 30px rgba(20,20,20,.25), 0 0 0 14px rgba(37,211,102,0); } }

/* Niets bewegen als de bezoeker dat niet wil */
@media (prefers-reduced-motion: reduce) {
	.js .reveal, .js .hero__kicker, .js .hero__titel, .js .hero__tekst, .js .hero .knoppen, .js .hero__icoon, .melding { opacity: 1 !important; transform: none !important; animation: none !important; }
	.over__blob, .stip, .wa-zwevend, .band__loop { animation: none !important; }
}