/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.2
*/

/* Default values for standard classes we use */
:root {
	--ws-border-radius: 16px;
	--sprut-bg: #070707;
	--sprut-card: #141414;
	--sprut-text: #ffffff;
	--sprut-text-2: #e0e0e0;
	--sprut-text-3: #c4c4c4;
	--sprut-muted: #a0a0a0;
	--sprut-dim: #9a9a9a;
	--sprut-line: rgba(255,255,255,0.12);
	--sprut-font: var(--gp-font--geist, "Geist"), -apple-system, "Helvetica Neue", Arial, sans-serif;
	--sprut-mono: var(--gp-font--geist-mono, "Geist Mono"), "SF Mono", Menlo, monospace;
	--sprut-serif: var(--gp-font--tinos, "Tinos"), "Times New Roman", Times, serif;
	--sprut-gutter: 24px;
	--sprut-gutter-text: 32px;
	--sprut-max: 1700px;
	--sprut-radius: 16px;
	--sprut-radius-lg: 20px;
	--sprut-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* sterke ease-out voor alles wat binnenkomt/weggaat (Emil Kowalski) */
	--sprut-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* scroll-reveal (recipe): beweging verdeeld over de hele duur, dus zichtbaar */
}
/* Fade-breedtes van horizontaal scrollende balken (filter/tabs op mobiel); geregistreerd zodat ze kunnen overgaan */
@property --sprut-fade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --sprut-fade-r { syntax: '<length>'; inherits: false; initial-value: 40px; }

.page .color-white { color: #fff !important; }
.page .rounded, .page .rounded * { border-radius: var(--ws-border-radius); }

/* ------------------------------------------------------------------
   Basis
------------------------------------------------------------------ */
html { background: var(--sprut-bg); -webkit-tap-highlight-color: transparent; } /* geen grijze tik-flits; knoppen geven zelf druk-feedback (:active) */
a, button { touch-action: manipulation; }
button, .pill { -webkit-user-select: none; user-select: none; }
body {
	background: var(--sprut-bg);
	color: var(--sprut-text);
	font-family: var(--sprut-font);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}
body a { color: var(--sprut-text); text-decoration: none; }
body a:hover, body.sprut a:hover, body.sprut .entry-content a:hover { color: #d0d0d0; }
body h1, body h2, body h3, body h4 { font-family: var(--sprut-font); color: var(--sprut-text); margin: 0; }
body p { margin: 0; }
body button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
body img { max-width: 100%; height: auto; }

/* GeneratePress: alles edge-to-edge, header zweeft over de content */
body .site-content, body #content { padding: 0 !important; margin: 0 !important; max-width: 100%; }
body #page { margin: 0 !important; max-width: 100vw; overflow-x: clip; } /* clip i.p.v. hidden: anders breekt position: sticky (inhoudsopgave) */
body .site-main { margin: 0 !important; }
body .inside-article { padding: 0 !important; }
body .entry-content { margin: 0 !important; }
body .grid-container { max-width: 100%; }
body .site-content .content-area { width: 100%; }
body .page-header, body .entry-header, body .featured-image { display: none; }
body .sprut-work-page, body .sprut-client-page { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; }

/* ------------------------------------------------------------------
   Utilities uit het ontwerp
------------------------------------------------------------------ */
.mono { font-family: var(--sprut-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; }
.mono.is-white { color: #fff; }
.cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover--empty { background: var(--sprut-card); }
.outline {
	font-family: var(--sprut-serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	font-size: 1.06em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255,255,255,0.7);
}
/* Liquid glass */
.glass {
	position: relative; isolation: isolate; overflow: hidden;
	background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.015) 46%, rgba(255,255,255,0.04) 100%);
	-webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
	border: 1px solid rgba(255,255,255,0.26);
	box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(255,255,255,0.12), inset 0 0 18px rgba(255,255,255,0.03), 0 2px 4px rgba(0,0,0,0.35), 0 20px 50px rgba(0,0,0,0.5);
	color: #fff;
}
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 20%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.07) 100%); }
.glass::after { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 52%; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% -40%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 62%); }
.glass-panel {
	position: relative; isolation: isolate; overflow: hidden;
	background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 38%, rgba(255,255,255,0.025) 100%);
	-webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
	border: 1px solid rgba(255,255,255,0.18);
	box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(255,255,255,0.08), inset 0 0 30px rgba(255,255,255,0.02), 0 30px 80px rgba(0,0,0,0.55);
	border-radius: var(--sprut-radius-lg);
}
.glass-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 78%, rgba(255,255,255,0.04) 100%); }
/* Knoppen */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; line-height: 1; }
body a.pill:hover, body button.pill:hover, body a.pill:hover span, body button.pill:hover span { color: #fff; }
body a.glass:hover { color: #fff; }
/* Hover op glas-knoppen en -cirkels: iets lichter glas, hellere rand, lichte lift.
   Alleen met een muis: op touch blijft :hover na een tik "hangen". scale = druk-feedback (zie Beweging onderaan). */
a.glass, button.glass, .sprut-card__arrow, .sprut-navcard__arrow { transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, scale 160ms var(--sprut-ease-out); }
body button.glass:hover { background-color: transparent; } /* GP's grijze button:hover altijd neutraliseren, ook op touch */
@media (hover: hover) and (pointer: fine) {
	body a.glass:hover, body button.glass:hover, body .sprut-card:hover .sprut-card__arrow, body .sprut-card:hover .sprut-card__view, body .sprut-navcard:hover .sprut-navcard__arrow {
		background-color: rgba(255,255,255,0.12);
		border-color: rgba(255,255,255,0.45);
		transform: translateY(-1px);
		box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(255,255,255,0.14), inset 0 0 18px rgba(255,255,255,0.05), 0 4px 8px rgba(0,0,0,0.35), 0 24px 50px rgba(0,0,0,0.5);
	}
}
body a.glass:focus-visible, body button.glass:focus-visible {
	background-color: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.45);
	transform: translateY(-1px);
	box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.75), inset 0 -1px 0 rgba(255,255,255,0.14), inset 0 0 18px rgba(255,255,255,0.05), 0 4px 8px rgba(0,0,0,0.35), 0 24px 50px rgba(0,0,0,0.5);
}
.pill-white { background: #fff; color: #0a0a0a; box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
body a.pill-white:hover, body a.pill-white:hover span, body a.pill-white:hover svg { color: #0a0a0a; background: #e8e8e8; }
body a.pill-white:hover span, body a.pill-white:hover svg { background: transparent; }
.pill-lg { height: 60px; padding: 0 32px; font-size: 17px; }
.pill-md { height: 56px; padding: 0 28px; font-size: 16px; }
.pill-sm { height: 46px; padding: 0 20px; font-size: 14px; }
.pill svg { flex-shrink: 0; }
body a.pill, body button.pill, body span.pill { display: inline-flex; flex-direction: row; width: auto; box-sizing: border-box; text-decoration: none; }
.pill > span { display: inline; color: inherit; font: inherit; }
body a.pill-white, body a.pill-white span, body a.pill-white svg { color: #0a0a0a; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; color: #e0e0e0; font-size: 14px; font-weight: 500; white-space: nowrap; }
.chip.on { background: linear-gradient(180deg, #fff 0%, #dcdcdc 100%); color: #0a0a0a; box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(0,0,0,0.45); }
/* Blur-gloed */
.ambient { position: absolute; z-index: -1; left: 8%; width: 84%; top: -60px; height: calc(100% + 120px); background-size: cover; background-position: center; filter: blur(100px) saturate(2.2) brightness(1.5); opacity: 0.7; pointer-events: none; max-width: none; display: block; }
body picture { display: contents; }
/* Details-tabel */
table.crew { width: 100%; border-collapse: collapse; margin: 0; border: 0; }
table.crew td { padding: 13px 0; border: 0; border-bottom: 1px solid var(--sprut-line); font-size: 15px; vertical-align: top; }
table.crew tr:last-child td { border-bottom: none; }
table.crew td:first-child { color: var(--sprut-muted); width: 44%; font-family: var(--sprut-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 15px; }

/* Typografie-rollen */
.sprut-kicker { color: var(--sprut-text-3); }
.sprut-h1 { font-size: clamp(44px, 5.42vw, 104px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.9; text-transform: uppercase; }
.sprut-h1--xl { font-size: clamp(56px, 8.75vw, 168px); letter-spacing: -0.055em; line-height: 0.86; }
.sprut-h2 { font-size: clamp(34px, 2.92vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.sprut-h2--xl { font-size: clamp(44px, 4.17vw, 80px); letter-spacing: -0.045em; line-height: 0.95; }
.sprut-h3 { font-size: clamp(26px, 1.9vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.sprut-lead { font-size: 18px; line-height: 1.5; color: var(--sprut-text-2); max-width: 600px; }
.sprut-panel-title { color: #fff; font-weight: 500; }

/* Secties: max-breedte + gutters */
.sprut-wrap { max-width: var(--sprut-max); margin: 0 auto; padding-left: var(--sprut-gutter); padding-right: var(--sprut-gutter); }
.sprut-wrap--text { padding-left: var(--sprut-gutter-text); padding-right: var(--sprut-gutter-text); }

/* ------------------------------------------------------------------
   Header (GP) — zwevend, 3 zones: context-knop | logo | CTA / hamburger
------------------------------------------------------------------ */
body .site-header { position: absolute; top: 24px; left: 0; right: 0; z-index: 60; background: transparent !important; }
body .site-header .inside-header { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--sprut-gutter-text); max-width: var(--sprut-max); margin: 0 auto; background: transparent; position: relative; }
body .inside-header > .site-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0; }
body .site-logo img, body .site-logo picture img { height: 34px !important; width: auto !important; display: block; }
.sprut-header-left { display: flex; align-items: center; margin-right: auto; }
.sprut-header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pill-back { height: 46px; padding: 0 20px 0 16px; font-size: 14px; }
.pill-cta { height: 46px; }
body #site-navigation { display: none !important; }
body #mobile-menu-control-wrapper { display: none; margin: 0; background: transparent; }
body #mobile-menu-control-wrapper .menu-bar-items { display: none; }
body #mobile-menu-control-wrapper .menu-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border-radius: 999px; color: #fff; background: transparent;
	position: relative; isolation: isolate; overflow: hidden;
	background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.015) 46%, rgba(255,255,255,0.04) 100%);
	-webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
	border: 1px solid rgba(255,255,255,0.26);
	box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.35), 0 20px 50px rgba(0,0,0,0.5);
}
body #mobile-menu-control-wrapper .menu-toggle .gp-icon svg { width: 18px; height: 18px; }
/* Header-knoppen (Start a project, terug-knop, hamburger): rustiger glas, zodat ze minder hard opvallen */
body .site-header a.glass, body #mobile-menu-control-wrapper .menu-toggle {
	background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.01) 46%, rgba(255,255,255,0.025) 100%);
	border-color: rgba(255,255,255,0.16);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(255,255,255,0.07), 0 2px 4px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.4);
}
body .site-header a.glass::before, body .site-header a.glass::after { opacity: 0.5; }
@media (hover: hover) and (pointer: fine) {
	body .site-header a.glass:hover {
		background-color: rgba(255,255,255,0.08);
		border-color: rgba(255,255,255,0.32);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.35), 0 20px 44px rgba(0,0,0,0.45);
	}
}
body .site-header a.glass:focus-visible {
	background-color: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.32);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.35), 0 20px 44px rgba(0,0,0,0.45);
}
body .slideout-navigation { font-family: var(--sprut-font); }
body .slideout-navigation .main-nav ul li a { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; }
body .slideout-overlay { background: rgba(7,7,7,0.6); }

/* ------------------------------------------------------------------
   Kaarten
------------------------------------------------------------------ */
.sprut-grid { display: grid; gap: 12px; }
.sprut-grid--1 { grid-template-columns: minmax(0, 1fr); }
.sprut-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sprut-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sprut-card { position: relative; display: block; height: clamp(230px, 21.9vw, 420px); border-radius: var(--sprut-radius); overflow: hidden; background: var(--sprut-card); color: #fff; }
body.sprut .sprut-card, body.sprut .entry-content .sprut-card:hover, body.sprut .entry-content .sprut-card:focus, body.sprut .entry-content .sprut-card:active, body.sprut .sprut-card:hover, body .sprut-card:hover .sprut-card__title, body .sprut-card:hover .sprut-card__view, body .sprut-card:hover .sprut-card__arrow, body .sprut-card:hover .sprut-card__badge { color: #fff; transition: none; }
/* Tekst op eigen laag: voorkomt een zwarte flits van de titel als de foto-zoom eindigt */
.sprut-card .cover { will-change: transform; backface-visibility: hidden; }
.sprut-card__body, .sprut-card__badge { transform: translateZ(0); backface-visibility: hidden; -webkit-font-smoothing: antialiased; }
body .sprut-card:hover .sprut-card__label { color: #d0d0d0; }
.sprut-card .cover { transition: transform 600ms ease; }
@media (hover: hover) and (pointer: fine) { .sprut-card:hover .cover { transform: scale(1.03); } }
.sprut-card--sm { height: clamp(200px, 14.1vw, 270px); }
.sprut-card--md { height: clamp(230px, 21.9vw, 420px); }
.sprut-card--lg { height: clamp(300px, 27.1vw, 520px); border-radius: var(--sprut-radius-lg); }
.sprut-card--xl { height: clamp(300px, 33.4vw, 640px); border-radius: var(--sprut-radius-lg); }
.sprut-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,0) 48%, rgba(7,7,7,0.82) 100%); }
.sprut-card--hl .sprut-card__shade { background: linear-gradient(180deg, rgba(7,7,7,0) 55%, rgba(7,7,7,0.8) 100%); }
.sprut-card__body { position: absolute; left: 26px; right: 26px; bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sprut-card__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sprut-card__title { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; }
.sprut-card__title.is-upper { text-transform: uppercase; }
.sprut-card__label { color: #d0d0d0; }
.sprut-card--sm .sprut-card__title { font-size: 20px; }
.sprut-card__badge { position: absolute; top: 16px; right: 16px; height: 38px; padding: 0 16px; font-size: 12px; gap: 8px; }
.sprut-card__badge--left { right: auto; left: 18px; top: 18px; height: 36px; padding: 0 14px; font-size: 11px; }
.sprut-card__arrow { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; flex-shrink: 0; }
.sprut-card__view { height: 44px; padding: 0 20px; font-size: 14px; flex-shrink: 0; }
/* varianten klantpagina / "more" grids */
.sprut-card--hl .sprut-card__body { left: 30px; right: 24px; bottom: 26px; }
.sprut-card--hl .sprut-card__text { gap: 10px; }
.sprut-card--hl .sprut-card__title { font-size: clamp(28px, 2.3vw, 44px); letter-spacing: -0.03em; line-height: 1; }
.sprut-card--hl .sprut-card__label { color: #e0e0e0; }
.sprut-client-page .sprut-grid:not(.sprut-grid--hl) .sprut-card__body { left: 24px; right: 18px; bottom: 18px; }
.sprut-client-page .sprut-grid:not(.sprut-grid--hl) .sprut-card__title { font-size: 28px; letter-spacing: -0.02em; }
.sprut-client-page .sprut-grid--3 .sprut-card--sm { height: clamp(220px, 16.7vw, 320px); }

/* Prev/next-kaarten */
.sprut-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 var(--sprut-gutter) 96px; max-width: var(--sprut-max); margin: 0 auto; width: 100%; }
.sprut-navcard { position: relative; display: flex; align-items: flex-end; height: clamp(200px, 16.7vw, 320px); border-radius: var(--sprut-radius-lg); overflow: hidden; background: var(--sprut-card); padding: 30px 32px; color: #fff; }
body.sprut .sprut-navcard, body.sprut .entry-content .sprut-navcard:hover, body.sprut .entry-content .sprut-navcard:focus, body.sprut .sprut-navcard:hover, body .sprut-navcard:hover .sprut-navcard__title, body .sprut-navcard:hover .sprut-navcard__arrow { color: #fff; transition: none; }
.sprut-navcard .cover { will-change: transform; backface-visibility: hidden; }
.sprut-navcard__inner { transform: translateZ(0); backface-visibility: hidden; }
body .sprut-navcard:hover .mono { color: #e0e0e0; }
.sprut-navcard .cover { position: absolute; inset: 0; opacity: 0.6; transition: transform 600ms ease; }
@media (hover: hover) and (pointer: fine) { .sprut-navcard:hover .cover { transform: scale(1.03); } }
.sprut-navcard__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,0.15) 0%, rgba(7,7,7,0.78) 100%); }
.sprut-navcard__inner { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sprut-navcard--prev .sprut-navcard__inner { flex-direction: row-reverse; }
.sprut-navcard__text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sprut-navcard--prev .sprut-navcard__text { text-align: right; }
.sprut-navcard__text .mono { color: #e0e0e0; }
.sprut-navcard__title { font-size: clamp(28px, 2.92vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; }
.sprut-navcard__arrow { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; flex-shrink: 0; }
.sprut-navcard__arrow svg { width: 20px; height: 20px; }
/* Alleen prev óf next: kaart over de volle breedte */
.sprut-pn > .sprut-navcard:only-child { grid-column: 1 / -1; }
/* Pijl-cirkels op kaarten: bij hover alleen iets groter, geen verschuiving van cirkel of icoon */
@media (hover: hover) and (pointer: fine) {
	body .sprut-card:hover .sprut-card__arrow, body .sprut-navcard:hover .sprut-navcard__arrow { transform: scale(1.08); transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
}

/* ------------------------------------------------------------------
   Home: hero, marquee, work grid, trusted by, CTA
------------------------------------------------------------------ */
body .sprut-hero { position: relative; min-height: 900px; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
body .sprut-hero > .wpb_column { display: flex; align-items: center; justify-content: center; }
body .sprut-hero .vc_column-inner { padding: 0 !important; width: 100%; }
body .sprut-hero .wpb_wrapper { display: block; }
body .sprut-hero .wpb_column, body .sprut-hero .vc_column-inner, body .sprut-hero .wpb_wrapper, body .sprut-hero .wpb_raw_code, body .sprut-hero .wpb_content_element { position: static; margin: 0; }
body .sprut-hero .nk-awb-inner, body .sprut-hero .nk-awb-wrap { opacity: 0.72; }
body .sprut-hero::after { content: ""; display: block !important; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(7,7,7,0.05) 0%, rgba(7,7,7,0.55) 70%, rgba(7,7,7,0.92) 100%); z-index: 1; visibility: visible !important; width: auto !important; height: auto !important; pointer-events: none; }
.sprut-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; padding: 0 var(--sprut-gutter-text); }
.sprut-hero__content h1 { font-size: clamp(44px, 5vw, 96px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; text-align: center; }
.sprut-hero__content p { font-size: 19px; line-height: 1.5; color: var(--sprut-text-2); max-width: 560px; }
.sprut-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sprut-hero__scroll { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: center; z-index: 2; }
.sprut-hero__scroll a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; animation: sprut-bounce 3s ease infinite; }
@keyframes sprut-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }

/* Marquee */
.sprut-marquee { height: clamp(110px, 11.5vw, 220px); display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--sprut-line); border-bottom: 1px solid var(--sprut-line); white-space: nowrap; -webkit-mask: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent); mask: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent); }
.sprut-marquee__track { display: flex; align-items: center; gap: 46px; padding-left: 46px; width: max-content; animation: sprut-marquee var(--sprut-marquee-speed, 40s) linear infinite; }
.sprut-marquee__item { font-size: clamp(56px, 6.67vw, 128px); font-weight: 600; letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; }
.sprut-marquee__item.outline { font-size: clamp(59px, 7.08vw, 136px); }
.sprut-marquee__dot { width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0; }
@keyframes sprut-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sprut-marquee__track { animation: none; } }

/* GP geeft <button> een grijze hover-achtergrond en padding: resetten op eigen knoppen */
body .sprut-filter button, body .sprut-filter button:hover, body .sprut-filter button:focus, body .sprut-filter button:active { background: transparent; padding: 0 0 4px; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; box-shadow: none; line-height: 1.2; }
body .sprut-filter button.is-on, body .sprut-filter button.is-on:hover { border-bottom-color: #fff; color: #fff; }
body .sprut-filter button:hover { color: #fff; }
body button.glass:active { background-color: transparent; color: #fff; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(255,255,255,0.12), inset 0 0 18px rgba(255,255,255,0.03), 0 2px 4px rgba(0,0,0,0.35), 0 20px 50px rgba(0,0,0,0.5); }
@media (hover: hover) and (pointer: fine) { body button.glass:hover::before { background: linear-gradient(112deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0) 36%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.1) 100%); } }
body .sprut-video, body .sprut-video:hover, body .sprut-video:focus { background: transparent; padding: 0; border: 0; border-radius: 0; box-shadow: none; color: #fff; text-align: left; }
body .sprut-lightbox__close:hover { background-color: transparent; }

/* Work grid */
.sprut-work { padding: 120px var(--sprut-gutter) 40px; display: flex; flex-direction: column; gap: 44px; max-width: var(--sprut-max); margin: 0 auto; }
.sprut-work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 8px; flex-wrap: wrap; }
.sprut-work__head .sprut-h2 { font-size: clamp(44px, 4.17vw, 80px); letter-spacing: -0.045em; line-height: 0.95; }
.sprut-filter { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.sprut-filter button { font-size: 18px; font-weight: 500; min-height: 44px; padding: 0 0 4px; color: var(--sprut-dim); border-bottom: 1.5px solid transparent; transition: color 150ms; }
.sprut-filter button:hover { color: #fff; }
.sprut-filter button.is-on { color: #fff; border-bottom-color: #fff; }
.sprut-work__more { display: flex; justify-content: center; padding-top: 20px; }
.sprut-work__more .pill { height: 56px; padding: 0 28px; font-size: 16px; }
.sprut-card[hidden], .sprut-work__more[hidden] { display: none; }

/* Trusted by */
body .sprut-trusted-row { padding: 96px var(--sprut-gutter-text) 0; }
.sprut-trusted { max-width: calc(var(--sprut-max) - 2 * var(--sprut-gutter-text)); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 36px 0; border-top: 1px solid var(--sprut-line); border-bottom: 1px solid var(--sprut-line); }
.sprut-trusted__label { color: var(--sprut-muted); margin-right: 8px; }
.sprut-trusted__logo:last-child { margin-right: 0; }
.sprut-trusted__link { display: inline-flex; align-items: center; }
.sprut-trusted__link .sprut-trusted__logo { transition: opacity 150ms ease, transform 150ms ease; }
@media (hover: hover) and (pointer: fine) {
	.sprut-trusted__link:hover .sprut-trusted__logo { opacity: 1; transform: translateY(-2px); }
	.sprut-trusted__link--static:hover .sprut-trusted__logo { transform: none; opacity: 0.9; }
}
.sprut-trusted picture > source { display: none; }
/* 6+ logo's: desktop gewoon verdeeld, onder 1200px een doorlopende slider */
.sprut-trusted__track { display: contents; }
.sprut-trusted__set { display: contents; }
.sprut-trusted__set[aria-hidden] { display: none; }
@media (max-width: 1199px) {
	.sprut-trusted--slider { flex-wrap: nowrap; gap: 20px; overflow: hidden; -webkit-mask: linear-gradient(90deg, #fff 0, #fff 78%, transparent); mask: linear-gradient(90deg, #fff 0, #fff 78%, transparent); }
	.sprut-trusted--slider .sprut-trusted__label { flex-shrink: 0; }
	.sprut-trusted--slider .sprut-trusted__track { display: flex; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #fff 6%, #fff 94%, transparent); mask: linear-gradient(90deg, transparent, #fff 6%, #fff 94%, transparent); }
	.sprut-trusted--slider .sprut-trusted__set, .sprut-trusted--slider .sprut-trusted__set[aria-hidden] { display: flex; align-items: center; gap: 48px; padding-right: 48px; flex-shrink: 0; animation: sprut-logos var(--sprut-logos-dur, 28s) linear infinite; }
	@media (hover: hover) and (pointer: fine) { .sprut-trusted--slider:hover .sprut-trusted__set { animation-play-state: paused; } }
	.sprut-trusted--slider .sprut-trusted__logo { max-width: none; }
	.sprut-trusted--slider .sprut-trusted__link { flex-shrink: 0; }
}
/* 8+ logo's: ook op desktop een doorlopende slider (klant 2026-09-25) */
@media (min-width: 1200px) {
	.sprut-trusted--slider-desktop { flex-wrap: nowrap; gap: 32px; overflow: hidden; }
	.sprut-trusted--slider-desktop .sprut-trusted__label { flex-shrink: 0; }
	.sprut-trusted--slider-desktop .sprut-trusted__track { display: flex; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #fff 6%, #fff 94%, transparent); mask: linear-gradient(90deg, transparent, #fff 6%, #fff 94%, transparent); }
	.sprut-trusted--slider-desktop .sprut-trusted__set, .sprut-trusted--slider-desktop .sprut-trusted__set[aria-hidden] { display: flex; align-items: center; gap: 72px; padding-right: 72px; flex-shrink: 0; animation: sprut-logos var(--sprut-logos-dur, 28s) linear infinite; }
	@media (hover: hover) and (pointer: fine) { .sprut-trusted--slider-desktop:hover .sprut-trusted__set { animation-play-state: paused; } }
	.sprut-trusted--slider-desktop .sprut-trusted__logo { max-width: none; }
	.sprut-trusted--slider-desktop .sprut-trusted__link { flex-shrink: 0; }
}
@keyframes sprut-logos { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .sprut-trusted--slider .sprut-trusted__set { animation: none; } }
.sprut-trusted__name { color: var(--sprut-text-2); font-size: 14px; }
.sprut-trusted__logo { height: calc(64px * var(--sprut-logo-s, 1)); width: auto; max-width: 220px; object-fit: contain; opacity: 0.9; display: block; }
.sprut-trusted picture { display: contents; }

/* CTA-kaart */
body .sprut-cta-row { padding: 96px var(--sprut-gutter); }
.sprut-cta { max-width: calc(var(--sprut-max) - 2 * var(--sprut-gutter)); margin: 0 auto; position: relative; border-radius: var(--sprut-radius-lg); overflow: hidden; background: var(--sprut-card); height: clamp(420px, 31.3vw, 600px); display: flex; align-items: flex-end; padding: 20px; }
.sprut-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sprut-cta__shade { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(7,7,7,0) 40%, rgba(7,7,7,0.5) 100%); }
.sprut-cta__panel { position: relative; max-width: 560px; border-radius: 22px; padding: 30px 34px 32px; display: flex; flex-direction: column; gap: 18px; }
.sprut-cta__panel h2 { font-size: clamp(40px, 2.6vw, 50px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; }
.sprut-cta__panel p { font-size: 16px; line-height: 1.5; color: #e6e6e6; }
.sprut-cta__actions { display: flex; align-items: center; gap: 20px; padding-top: 4px; flex-wrap: wrap; }
.sprut-cta__actions .pill { height: 54px; padding: 0 26px; font-size: 16px; }
.sprut-cta__mail { font-size: 15px; color: #e6e6e6; }
/* CTA-slideshow (meerdere afbeeldingen): foto's op elkaar, vloeien in elkaar over; bolletjes rechtsonder (paneel staat links) */
.sprut-cta--slides .sprut-cta__slide { opacity: 0; transition: opacity 1200ms ease; }
.sprut-cta--slides .sprut-cta__slide.is-active { opacity: 1; }
/* Bolletjes bewust ingetogen (klant 2026-09-24: "vallen te veel op"): geen achtergrond, klein, laag contrast */
.sprut-cta__dots { position: absolute; z-index: 2; right: 24px; bottom: 24px; display: flex; gap: 0; }
body .sprut-cta__dot, body .sprut-cta__dot:hover, body .sprut-cta__dot:focus, body .sprut-cta__dot:active { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; cursor: pointer; }
.sprut-cta__dot::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.35); box-shadow: 0 0 6px rgba(0,0,0,0.45); transition: background-color 200ms ease; } /* zachte schaduw: leesbaar op lichte foto's */
.sprut-cta__dot.is-active::before { background: rgba(255,255,255,0.85); }
@media (hover: hover) and (pointer: fine) { .sprut-cta__dot:not(.is-active):hover::before { background: rgba(255,255,255,0.6); } }
body .sprut-cta__dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (max-width: 900px) {
	/* paneel vult de onderkant: bolletjes gecentreerd direct boven het paneel */
	.sprut-cta--slides { flex-direction: column; justify-content: flex-end; align-items: stretch; }
	.sprut-cta--slides .sprut-cta__dots { position: relative; right: auto; bottom: auto; align-self: center; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sprut-cta--slides .sprut-cta__slide { transition-duration: 250ms; } }

/* Diensten (optioneel blok "What we do") */
body .sprut-services-row { padding: 96px var(--sprut-gutter) 0; }
body .sprut-services-row > .wpb_column { max-width: var(--sprut-max); margin: 0 auto; float: none; }
.sprut-service { position: relative; height: clamp(300px, 25vw, 480px); border-radius: var(--sprut-radius); overflow: hidden; background: var(--sprut-card); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; }
.sprut-service img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sprut-service__num { position: absolute; top: 24px; left: 26px; color: #fff; }
.sprut-service__panel { border-radius: 18px; padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.sprut-service__panel h3 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.sprut-service__panel p { font-size: 15px; line-height: 1.5; color: #e6e6e6; }

/* ------------------------------------------------------------------
   Projectpagina
------------------------------------------------------------------ */
.sprut-project-head { padding: 128px var(--sprut-gutter-text) 0; display: flex; flex-direction: column; gap: 36px; max-width: var(--sprut-max); margin: 0 auto; width: 100%; }
.sprut-project-head__title { display: flex; flex-direction: column; gap: 18px; }
.sprut-tabs { display: flex; align-items: center; gap: 44px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.14); flex-wrap: wrap; }
.sprut-tabs a { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 0 8px; font-size: 18px; font-weight: 500; color: var(--sprut-dim); border-bottom: 1.5px solid transparent; transition: color 150ms; }
body .sprut-tabs a:hover { color: #fff; }
.sprut-tabs a.is-on { color: #fff; border-bottom-color: #fff; }
.sprut-tabs a .mono { font-size: 11px; }

/* Speler max. 1392 × 783 (16:9), zodat hij in beeld past; crew/details volgen die breedte */
.sprut-work-page { --sprut-player-w: 1392px; }
.sprut-player-wrap { padding: 36px var(--sprut-gutter) 0; max-width: var(--sprut-max); margin: 0 auto; width: 100%; }
.sprut-player { position: relative; aspect-ratio: 16 / 9; max-width: var(--sprut-player-w); max-height: 783px; border-radius: var(--sprut-radius-lg); overflow: hidden; background: var(--sprut-card); }
.sprut-player__poster { position: absolute; inset: 0; }
.sprut-player__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 999px; color: #fff; padding-left: 0; /* icoon heeft zelf al optische verschuiving */ transition: transform 200ms; }
@media (hover: hover) and (pointer: fine) { body .sprut-player button.sprut-player__play:hover { transform: translate(-50%, -50%) scale(1.05); } }
body .sprut-player button.sprut-player__play:focus-visible { transform: translate(-50%, -50%) scale(1.05); }
/* Druk-feedback in de transform zelf: de losse scale-eigenschap zou de centreer-translate meeschalen (knop schuift dan 2px) */
body .sprut-player button.sprut-player__play:active { scale: none; transform: translate(-50%, -50%) scale(0.97); }
.sprut-player__play svg { width: 44px; height: 44px; }
.sprut-player__meta { position: absolute; left: 20px; bottom: 20px; height: 38px; padding: 0 16px; font-size: 12px; }
/* Afspelen: knop en label weg, poster dimt tijdens het laden, de speler vloeit erover zodra hij geladen is (geen zwarte flits) */
.sprut-player__poster { transition: opacity 200ms var(--sprut-ease-out); }
.sprut-player.is-loading .sprut-player__poster { opacity: 0.55; }
.sprut-player__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 200ms var(--sprut-ease-out); }
.sprut-player__frame.is-ready { opacity: 1; }
/* Tijdens afspelen: zwarte achtergrond en poster weg zodra de speler geladen is, anders schemert de thumbnail
   door de (transparante) zijbalken van video's met een andere verhouding dan 16:9 */
.sprut-player.is-playing { background: #000; }
.sprut-player.is-playing:not(.is-loading) .sprut-player__poster { opacity: 0; }
.sprut-player.is-playing .sprut-player__play, .sprut-player.is-playing .sprut-player__meta { display: none; }

.sprut-videos { padding: 96px var(--sprut-gutter) 0; display: flex; flex-direction: column; gap: 12px; max-width: var(--sprut-max); margin: 0 auto; width: 100%; }
.sprut-videos .sprut-h2 { padding: 0 8px 24px; }
.sprut-videos__group { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; padding: 28px 0 32px; border-top: 1px solid var(--sprut-line); }
.sprut-videos__group .sprut-h3 { font-size: 34px; padding: 0 8px; }
.sprut-videos--single .sprut-videos__group { grid-template-columns: minmax(0, 1fr); }
.sprut-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sprut-video { display: flex; flex-direction: column; gap: 14px; text-align: left; color: #fff; min-width: 0; width: 100%; }
.sprut-video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--sprut-radius); overflow: hidden; background: var(--sprut-card); transition: box-shadow 150ms; }
.sprut-video.is-on .sprut-video__thumb { box-shadow: 0 0 0 2px #fff; }
/* Hover op videokaarten: foto zoomt licht, play-cirkel licht op, titel wit */
.sprut-video__thumb .cover { transition: transform 600ms ease; }
.sprut-video__play { transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; }
.sprut-video:focus-visible .sprut-video__thumb .cover { transform: scale(1.04); }
@media (hover: hover) and (pointer: fine) {
	.sprut-video:hover .sprut-video__thumb .cover { transform: scale(1.04); }
	.sprut-video:hover .sprut-video__thumb:not(.is-on) { box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
	.sprut-video.is-on:hover .sprut-video__thumb { box-shadow: 0 0 0 2px #fff; }
	.sprut-video:hover .sprut-video__play { background-color: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); transform: translate(-50%, -50%) scale(1.06); }
	.sprut-video:hover .sprut-video__title { color: #fff; }
}
.sprut-video__title { transition: color 150ms ease; }
.sprut-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; padding-left: 0; }
.sprut-video__play svg { width: 26px; height: 26px; }
body .sprut-video span.sprut-video__now { position: absolute; left: 12px; top: 12px; height: 32px; padding: 0 12px; font-size: 11px; display: none; }
body .sprut-video.is-on span.sprut-video__now { display: inline-flex; }
.sprut-video__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px; min-width: 0; }
.sprut-video__title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.sprut-video__dur { color: var(--sprut-muted); flex-shrink: 0; white-space: nowrap; }

/* Geen eigen stacking context: de blur-gloed (z-index -1) valt dan achter de video i.p.v. eroverheen */
.sprut-meta { position: relative; padding: 72px var(--sprut-gutter) 0; max-width: var(--sprut-max); margin: 0 auto; width: 100%; }
.sprut-meta.has-crew { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 12px; align-items: start; }
.sprut-meta .ambient { opacity: 0.49; }
/* Crew/details direct onder de speler (1 video, geen "All videos"-rij ertussen): even breed als de video.
   Alleen desktop: daaronder is de video al volle breedte en gelden de tablet/mobiel-kolommen. */
@media (min-width: 1200px) {
	.sprut-player-wrap + .sprut-meta.has-crew { grid-template-columns: minmax(0, calc(var(--sprut-player-w) - 452px)) 440px; }
	.sprut-player-wrap + .sprut-meta.no-crew .sprut-details { max-width: var(--sprut-player-w); }
	.sprut-player-wrap + .sprut-meta .ambient { left: calc(var(--sprut-gutter) + 60px); width: calc(min(100% - 2 * var(--sprut-gutter), var(--sprut-player-w)) - 120px); }
}
.sprut-crew { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 22px; }
.sprut-crew__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; }
.sprut-crew__item { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.16); }
.sprut-crew__item .mono { color: var(--sprut-text-3); }
.sprut-crew__name { font-size: 17px; font-weight: 500; }
.sprut-details { padding: 28px 32px 20px; display: flex; flex-direction: column; }
.sprut-details .sprut-panel-title { padding-bottom: 8px; }
.sprut-meta.no-crew .sprut-details { padding: 30px 36px; }
.sprut-details__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sprut-details__item { display: flex; flex-direction: column; gap: 8px; }
.sprut-details__item .mono { color: var(--sprut-text-3); }
.sprut-details__value { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

.sprut-stills { padding: 96px var(--sprut-gutter) 0; display: flex; flex-direction: column; gap: 28px; max-width: var(--sprut-max); margin: 0 auto; width: 100%; container-type: inline-size; }
.sprut-stills .sprut-h2 { padding: 0 8px; }
/* Masonry-achtig raster: posities per foto uit sprut_stills_layout() (content-work.php) als --c/--r/--w/--h;
   rijhoogte = kolombreedte / 3 → liggend 1×2 ≈ 3:2, staand 1×4 ≈ 3:4, uitgelicht 2×4 ≈ 3:2 */
.sprut-stills__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((100cqi - 24px) / 9); gap: 12px; }
.sprut-still { grid-column: var(--c3, auto) / span var(--w3, 1); grid-row: var(--r3, auto) / span var(--h3, 2); }
.sprut-still { display: block; border-radius: var(--sprut-radius); overflow: hidden; background: var(--sprut-card); }
.sprut-still[hidden] { display: none; }
.sprut-stills__more { display: flex; justify-content: center; padding-top: 8px; }
.sprut-stills__more[hidden] { display: none; }
.sprut-stills__more .pill { height: 56px; padding: 0 28px; font-size: 16px; }
.sprut-still .cover { transition: transform 600ms ease; }
@media (hover: hover) and (pointer: fine) { .sprut-still:hover .cover { transform: scale(1.03); } }

.sprut-more { padding: 96px var(--sprut-gutter) 64px; display: flex; flex-direction: column; gap: 28px; max-width: var(--sprut-max); margin: 0 auto; width: 100%; }
.sprut-more__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 8px; flex-wrap: wrap; }
.sprut-more__head .pill { height: 46px; padding: 0 20px; font-size: 14px; }
.sprut-work-page .sprut-pn { padding-top: 0; }
.sprut-work-page > .sprut-pn:first-of-type { padding-top: 96px; }
.sprut-more + .sprut-pn { padding-top: 0; }
.sprut-stills + .sprut-pn, .sprut-meta + .sprut-pn, .sprut-videos + .sprut-pn, .sprut-player-wrap + .sprut-pn { padding-top: 96px; }

/* ------------------------------------------------------------------
   Klantpagina
------------------------------------------------------------------ */
.sprut-client-hero { position: relative; height: clamp(520px, 36.5vw, 700px); overflow: hidden; display: flex; align-items: flex-end; }
.sprut-client-hero__img { position: absolute; inset: 0; opacity: 0.8; }
.sprut-client-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,0.25) 0%, rgba(7,7,7,0.2) 45%, rgba(7,7,7,0.96) 100%); }
.sprut-client-hero__inner { position: relative; width: 100%; max-width: var(--sprut-max); margin: 0 auto; padding: 0 var(--sprut-gutter-text) 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.sprut-client-hero__text { display: flex; flex-direction: column; gap: 22px; max-width: 1200px; min-width: 0; }
.sprut-client-hero__text .sprut-kicker { color: var(--sprut-text-2); }
.sprut-stats { display: flex; flex-direction: column; min-width: 340px; padding: 8px 26px; flex-shrink: 0; }
.sprut-stats__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0; }
.sprut-stats__row + .sprut-stats__row { border-top: 1px solid rgba(255,255,255,0.18); }
.sprut-stats__row .mono { color: #d0d0d0; }
.sprut-stats__num { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.sprut-client-body { position: relative; isolation: isolate; padding: 88px var(--sprut-gutter) 96px; display: flex; flex-direction: column; gap: 88px; max-width: var(--sprut-max); margin: 0 auto; width: 100%; }
.sprut-client-block { display: flex; flex-direction: column; gap: 28px; }
.sprut-client-block > .sprut-h2, .sprut-client-block > .sprut-h3 { padding: 0 8px; }
.sprut-hl-head { display: flex; align-items: center; gap: 14px; padding: 0 8px; }
.sprut-hl-head__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; }

/* ------------------------------------------------------------------
   Contact
------------------------------------------------------------------ */
body .sprut-contact { position: relative; isolation: isolate; overflow: hidden; padding: 152px max(var(--sprut-gutter-text), calc((100% - var(--sprut-max)) / 2 + var(--sprut-gutter-text))) 120px; }
body .sprut-contact > .wpb_column { float: none; width: 100%; }
body .sprut-contact .vc_column-inner { padding: 0 !important; }
body .sprut-contact .wpb_column, body .sprut-contact .vc_column-inner, body .sprut-contact .wpb_wrapper, body .sprut-contact .wpb_raw_code, body .sprut-contact .wpb_content_element { position: static; margin: 0; }
.sprut-contact__bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.sprut-contact__shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,0.6) 0%, rgba(7,7,7,0.45) 45%, rgba(7,7,7,1) 100%); }
.sprut-contact__head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 72px; }
.sprut-contact__head .sprut-kicker { color: var(--sprut-text-2); }
.sprut-contact__head .sprut-h1 { font-size: clamp(60px, 9.58vw, 184px); letter-spacing: -0.055em; line-height: 0.86; }
.sprut-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.sprut-contact__info { display: flex; flex-direction: column; gap: 40px; padding-top: 8px; }
.sprut-contact__item { display: flex; flex-direction: column; gap: 10px; }
.sprut-contact__item .mono { color: #d0d0d0; }
.sprut-contact__big { font-size: clamp(28px, 2.7vw, 52px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; word-break: break-word; }
.sprut-contact__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.sprut-contact__cols p { font-size: 17px; line-height: 1.6; color: #fff; }
.sprut-socials { display: flex; gap: 10px; }
.sprut-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; }
.sprut-contact .sprut-socials a { width: 52px; height: 52px; }
.sprut-form { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.sprut-form h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.sprut-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sprut-form__field { display: flex; flex-direction: column; gap: 8px; }
.sprut-form label, .sprut-form .gfield_label { color: #d0d0d0; font-family: var(--sprut-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; }
.sprut-form input[type="text"], .sprut-form input[type="email"], .sprut-form input[type="tel"], .sprut-form textarea, .sprut-form .ginput_container input, .sprut-form .ginput_container textarea {
	width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); color: #fff; font: inherit; font-size: 16px; box-shadow: none;
}
.sprut-form textarea, .sprut-form .ginput_container textarea { height: auto; min-height: 140px; padding: 14px 16px; line-height: 1.5; resize: none; }
.sprut-form input::placeholder, .sprut-form textarea::placeholder { color: rgba(255,255,255,0.4); }
.sprut-form input:focus, .sprut-form textarea:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
.sprut-form button[type="submit"], .sprut-form .gform_button { height: 58px; font-size: 16px; align-self: flex-start; padding: 0 28px; }
.sprut-form .gform_footer .gform_button { border-radius: 999px; border: 1px solid rgba(255,255,255,0.26); background: rgba(255,255,255,0.06); color: #fff; font-weight: 500; }
.sprut-form .gform_footer .gform_button:hover { background: rgba(255,255,255,0.12); }
.sprut-form .gfield_required { color: #d0d0d0; }
.sprut-form .gform_fields { gap: 20px 16px; }

/* Gravity Forms (formulier 4) in het glas-paneel */
body .sprut-form .gform_wrapper.gravity-theme { margin: 0; }
body .sprut-form .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 20px; grid-column-gap: 16px; }
body .sprut-form .gform_wrapper.gravity-theme .gfield_label { color: #d0d0d0; font-family: var(--sprut-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; margin-bottom: 8px; padding: 0; }
body .sprut-form .gform_wrapper.gravity-theme .gfield_required { display: none; }
body .sprut-form .gform_wrapper.gravity-theme .gfield input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), body .sprut-form .gform_wrapper.gravity-theme .gfield textarea {
	width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); color: #fff; font-family: var(--sprut-font); font-size: 16px; line-height: 1.4; box-shadow: none;
}
body .sprut-form .gform_wrapper.gravity-theme .gfield textarea { height: auto; min-height: 140px; padding: 14px 16px; line-height: 1.5; resize: none; }
body .sprut-form .gform_wrapper.gravity-theme .gfield input::placeholder, body .sprut-form .gform_wrapper.gravity-theme .gfield textarea::placeholder { color: rgba(255,255,255,0.4); }
body .sprut-form .gform_wrapper.gravity-theme .gfield input:focus, body .sprut-form .gform_wrapper.gravity-theme .gfield textarea:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
body .sprut-form .gform_wrapper.gravity-theme .gform_footer { margin: 20px 0 0; padding: 0; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
body .sprut-form .gform_wrapper.gravity-theme .gform_ajax_spinner { margin: 0; width: 24px; height: 24px; flex-shrink: 0; align-self: center; }
body .sprut-form .gform_wrapper.gravity-theme .gform_footer .sprut-submit { margin: 0; align-self: center; overflow: visible; }
/* GF 3 zet de loader ín de knop en maakt de tekst transparant; wij houden de tekst en zetten de loader rechts náást de knop */
body .sprut-form .gform_wrapper.gravity-theme button.sprut-submit.gform-has-spinner { color: #fff; }
body .sprut-form .gform_wrapper.gravity-theme button.sprut-submit .gform-loader { inset: 0 auto 0 calc(100% + 14px); margin: auto 0; font-size: 3px; border-color: #fff transparent #fff #fff; }
body .sprut-form .gform_wrapper.gravity-theme button.sprut-submit .gform-loader::before, body .sprut-form .gform_wrapper.gravity-theme button.sprut-submit .gform-loader::after { display: none; }
body .sprut-form .gform_wrapper.gravity-theme .gform_footer .gform_button, body .sprut-form .gform_wrapper.gravity-theme input[type=submit], body .sprut-form .gform_wrapper.gravity-theme button.sprut-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 28px; width: auto; border-radius: 999px; font-family: var(--sprut-font); font-size: 16px; font-weight: 500; line-height: 1; color: #fff; cursor: pointer;
	border: 1px solid rgba(255,255,255,0.26); background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.015) 46%, rgba(255,255,255,0.04) 100%);
	box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(0,0,0,0.35), 0 20px 50px rgba(0,0,0,0.5); transition: background 150ms;
}
body .sprut-form .gform_wrapper.gravity-theme .gform_footer .gform_button:hover, body .sprut-form .gform_wrapper.gravity-theme input[type=submit]:hover, body .sprut-form .gform_wrapper.gravity-theme button.sprut-submit:hover { background: rgba(255,255,255,0.12); color: #fff; }
body .sprut-form .gform_wrapper.gravity-theme button.sprut-submit svg { flex-shrink: 0; }
body .sprut-form .gform_wrapper.gravity-theme .gform_validation_errors { border-radius: 12px; border: 1px solid rgba(255,80,80,0.5); background: rgba(255,80,80,0.08); color: #fff; box-shadow: none; padding: 14px 16px; }
body .sprut-form .gform_wrapper.gravity-theme .gform_validation_errors h2, body .sprut-form .gform_wrapper.gravity-theme .gfield_validation_message, body .sprut-form .gform_wrapper.gravity-theme .validation_message { color: #ff8a8a; background: transparent; border: 0; margin: 0; padding: 6px 0 0; font-size: 13px; font-family: var(--sprut-font); }
body .sprut-form .gform_wrapper.gravity-theme .gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), body .sprut-form .gform_wrapper.gravity-theme .gfield_error textarea, body .sprut-form .gform_wrapper.gravity-theme .gfield input[aria-invalid="true"]:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), body .sprut-form .gform_wrapper.gravity-theme .gfield textarea[aria-invalid="true"] { border-color: rgba(255,120,120,0.7); background: rgba(255,80,80,0.06); }
body .sprut-form .gform_confirmation_message { font-size: 17px; line-height: 1.5; color: #fff; }

/* ------------------------------------------------------------------
   Juridische pagina's
------------------------------------------------------------------ */
body .sprut-legal { padding: 152px max(var(--sprut-gutter-text), calc((100% - var(--sprut-max)) / 2 + var(--sprut-gutter-text))) 0; }
body .sprut-legal > .wpb_column { float: none; width: 100%; }
body .sprut-legal .vc_column-inner { padding: 0 !important; }
.sprut-legal__head { display: flex; flex-direction: column; gap: 20px; }
.sprut-legal__head .sprut-h1 { font-size: clamp(48px, 7.08vw, 136px); }
body .sprut-legal-body { position: relative; isolation: isolate; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 96px; align-items: start; padding: 80px max(var(--sprut-gutter-text), calc((100% - var(--sprut-max)) / 2 + var(--sprut-gutter-text))) 120px; }
body .sprut-legal-body > .wpb_column { width: auto; float: none; }
body .sprut-legal-body, body .sprut-legal-body[data-vc-full-width] { overflow: visible !important; } /* WPBakery zet overflow:hidden op stretch-rijen; dat breekt sticky */
body .sprut-legal-body > .wpb_column:first-child { position: sticky; top: 24px; align-self: start; }
body .sprut-legal-body .vc_column-inner { padding: 0 !important; }
body .sprut-legal-body .wpb_text_column { margin: 0; }
.sprut-toc { padding: 22px 26px 14px; display: flex; flex-direction: column; }
.sprut-toc > .mono { color: #fff; padding-bottom: 12px; }
.sprut-toc a { display: block; padding: 9px 0; font-size: 14px; line-height: 1.35; color: #d0d0d0; border-top: 1px solid rgba(255,255,255,0.10); }
body .sprut-toc a:hover { color: #fff; }
.sprut-articles { display: flex; flex-direction: column; gap: 40px; max-width: 820px; }
.sprut-articles__intro { font-size: 17px; line-height: 1.65; color: var(--sprut-text-2); }
.sprut-articles__intro a { text-decoration: underline; }
body .sprut-article { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--sprut-line); scroll-margin-top: 40px; }
.sprut-article h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.sprut-article p, .sprut-article li { font-size: 17px; line-height: 1.65; color: var(--sprut-text-2); }
.sprut-article a { text-decoration: underline; }
.sprut-article ul, .sprut-article ol { margin: 0 0 0 20px; }
.sprut-article strong { color: #fff; }
.sprut-article--note p { font-size: 15px; color: var(--sprut-muted); }

/* ------------------------------------------------------------------
   Footer (ws-block 209 in footer-1 + copyright-bar)
------------------------------------------------------------------ */
body #footer-widgets { padding: 72px 0 56px; border-top: 1px solid rgba(255,255,255,0.10); background: var(--sprut-bg); }
body #footer-widgets .inside-footer-widgets { max-width: var(--sprut-max); margin: 0 auto; padding: 0 var(--sprut-gutter-text); }
body #footer-widgets .footer-widget-1 { width: 100%; margin: 0; }
body #footer-widgets .widget, body #footer-widgets .widget.inner-padding { margin: 0; padding: 0; }
body .sprut-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0 !important; }
body .sprut-footer::before, body .sprut-footer::after, body .sprut-legal-body::before, body .sprut-legal-body::after { display: none; content: none; }
body .sprut-footer > .wpb_column { width: auto; float: none; padding: 0; }
body .sprut-footer .vc_column-inner { padding: 0 !important; }
body .sprut-footer .wpb_text_column { margin: 0; }
.sprut-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.sprut-footer__brand img { height: 24px !important; width: auto !important; display: block; align-self: flex-start; flex: 0 0 auto; }
.sprut-footer__brand p { font-size: 15px; line-height: 1.6; color: var(--sprut-text-3); }
.sprut-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.sprut-footer__col > .mono { color: var(--sprut-muted); margin-bottom: 4px; }
.sprut-footer__col a, .sprut-footer__col span { color: #fff; }
.sprut-footer__col--legal a, .sprut-footer__col--legal span { color: var(--sprut-text-3); }
.sprut-footer__col .sprut-socials { margin-top: 10px; }
body .site-footer .site-info { background: var(--sprut-bg); padding: 0; }
body .site-info .inside-site-info { max-width: var(--sprut-max); margin: 0 auto; padding: 24px var(--sprut-gutter-text) 32px; border: 0; }
body .site-info .copyright-bar { display: flex; width: 100%; justify-content: space-between; align-items: center; }
body .site-info .inside-site-info > * { width: 100%; }
body .sprut-copy { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.10); }
body .sprut-copy .mono { color: var(--sprut-muted); }
body .sprut-copy .sprut-credit { display: inline-flex; align-items: center; gap: 8px; color: #4a4a4a; font-size: 11px; }
body .sprut-copy__links { display: none; gap: 12px; }
body .sprut-copy__links a { color: var(--sprut-muted); }

/* Lightbox */
/* Altijd flex en verborgen via opacity/visibility, zodat openen en sluiten kunnen animeren.
   Openen 240ms, sluiten sneller (160ms); de foto komt uit scale(0.96) zodra hij geladen is. Blijft gecentreerd (modal). */
.sprut-lightbox { display: flex; position: fixed; inset: 0; z-index: 9999; background: rgba(7,7,7,0.92); align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 160ms var(--sprut-ease-out), visibility 0s linear 160ms; touch-action: pan-y pinch-zoom; }
.sprut-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 240ms var(--sprut-ease-out), visibility 0s; }
.sprut-lightbox img { max-width: min(1400px, 92vw); max-height: 90vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); opacity: 0; transform: scale(0.96); transition: opacity 160ms var(--sprut-ease-out), transform 160ms var(--sprut-ease-out); -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.sprut-lightbox.is-open img.is-loaded { opacity: 1; transform: none; transition: opacity 240ms var(--sprut-ease-out), transform 240ms var(--sprut-ease-out); }
body .sprut-lightbox__close { position: absolute; top: 24px; right: 32px; width: 48px; height: 48px; border-radius: 999px; font-size: 28px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: #fff; padding: 0; }
body .sprut-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; padding: 0; }
body .sprut-lightbox button.sprut-lightbox__nav:hover, body .sprut-lightbox button.sprut-lightbox__nav:focus-visible { transform: translateY(-50%); }
.sprut-lightbox__nav--prev { left: 32px; }
.sprut-lightbox__nav--next { right: 32px; }
.sprut-lightbox__count { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); color: var(--sprut-muted); }
.sprut-lightbox.is-single .sprut-lightbox__nav, .sprut-lightbox.is-single .sprut-lightbox__count { display: none; }
body.sprut-lightbox-open { overflow: hidden; }

/* Bestaande site-classes die blijven */
body .main-title a { text-decoration: line-through; font-weight: 500; }

/* Only desktop */
@media only screen and (min-width: 1280px) {}

/* 110% size */
@media (min-width: 1701px) and (max-width: 1919px) {}

/* Laptop L (120%) size */
@media (min-width: 1501px) and (max-width: 1700px) {}

/* Macbook screens size (1440x768) */
@media (min-width: 1401px) and (max-width: 1500px) {}

/* Laptop S/M (150%) sizes */
@media (min-width: 1200px) and (max-width: 1400px) {
}

/* Tablet/iPad landscape mode */
@media (min-width: 901px) and (max-width: 1199px) {
	body .sprut-hero { min-height: 760px; }
	.sprut-work { padding-top: 88px; }
	.sprut-marquee__dot { width: 26px; height: 26px; }
	.sprut-videos__group { grid-template-columns: 200px minmax(0, 1fr); }
	.sprut-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sprut-meta.has-crew { grid-template-columns: minmax(0, 1fr) 360px; }
	.sprut-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sprut-stats { min-width: 300px; }
	.sprut-contact__grid { gap: 40px; }
	body .sprut-legal-body { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; }
}

/* Tablet/iPad portrait mode */
@media (min-width: 501px) and (max-width: 900px) {
	/* Default tablet flex rules for WPBakery Rows. Use class tab-flexcol or tab-flexcol-rev on a row to have it below each other. */
	body .tab-flexcol { display: flex; flex-direction: column; }
	body .tab-flexcol-rev { display: flex; flex-direction: column-reverse; }
	body .tab-flexcol > div, body .tab-flexcol-rev > div { width: 100%; }

	:root { --sprut-gutter: 16px; --sprut-gutter-text: 16px; }
	body .site-header { top: 16px; }
	body .site-header .inside-header { padding: 0 16px; }
	body .site-logo img, body .site-logo picture img { height: 29px !important; }
	/* iPad staand: gewoon de CTA-knop, geen hamburger (Mike 2026-09-21) */
	body #mobile-menu-control-wrapper, body .site-header .inside-header .mobile-menu-control-wrapper { display: none !important; }
	.pill-cta { height: 44px; font-size: 14px; padding: 0 20px; }
	.pill-back { height: 44px; padding: 0 16px 0 14px; font-size: 13px; }

	.sprut-h1 { font-size: 64px; }
	.sprut-h1--xl { font-size: 80px; }
	.sprut-h2 { font-size: 40px; }
	.sprut-h3 { font-size: 28px; }
	.sprut-lead { font-size: 16px; }
	.sprut-contact__head .sprut-h1 { font-size: 84px; }
	.sprut-legal__head .sprut-h1 { font-size: 72px; }

	body .sprut-hero { min-height: 700px; height: 100vh; height: 100svh; }
	.sprut-hero__content h1 { font-size: 52px; }
	.sprut-hero__content p { font-size: 16px; }
	.sprut-marquee { height: 120px; }
	.sprut-marquee__track { gap: 24px; padding-left: 24px; }
	.sprut-marquee__item { font-size: 60px; }
	.sprut-marquee__item.outline { font-size: 64px; }
	.sprut-marquee__dot { width: 18px; height: 18px; }
	.sprut-work { padding: 64px var(--sprut-gutter) 24px; gap: 22px; }
	.sprut-work__head { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 4px; }
	.sprut-work__head .sprut-h2 { font-size: 44px; }
	.sprut-filter { gap: 20px; }
	.sprut-filter button { font-size: 15px; }
	.sprut-grid--2, .sprut-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sprut-card, .sprut-card--md, .sprut-card--sm { height: 260px; }
	.sprut-card--lg, .sprut-card--xl { height: 360px; }
	.sprut-card__body { left: 20px; right: 20px; bottom: 18px; }
	.sprut-card__title { font-size: 20px; }
	.sprut-card--hl .sprut-card__title { font-size: 30px; }
	.sprut-client-page .sprut-grid:not(.sprut-grid--hl) .sprut-card__title { font-size: 22px; }
	.sprut-navcard { height: 220px; padding: 22px 24px; }
	.sprut-navcard__title { font-size: 30px; }
	.sprut-navcard__arrow { width: 52px; height: 52px; }
	body .sprut-trusted-row { padding-top: 56px; }
	.sprut-trusted { gap: 12px 24px; padding: 24px 0; }
	.sprut-trusted--slider { -webkit-mask: none; mask: none; }
	.sprut-trusted__logo { height: calc(48px * var(--sprut-logo-s, 1)); max-width: 160px; }
	body .sprut-cta-row { padding: 56px var(--sprut-gutter); }
	.sprut-cta { height: auto; min-height: 520px; padding: 12px; }
	.sprut-cta__panel { max-width: 100%; width: 100%; padding: 28px 24px; }
	.sprut-cta__panel h2 { font-size: 40px; }
	.sprut-service { height: 300px; }

	.sprut-project-head { padding-top: 104px; gap: 24px; }
	.sprut-tabs { gap: 28px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.sprut-tabs::-webkit-scrollbar { display: none; }
	.sprut-tabs a { font-size: 16px; flex-shrink: 0; white-space: nowrap; }
	.sprut-player__play { width: 84px; height: 84px; }
	.sprut-player__play svg { width: 32px; height: 32px; }
	.sprut-videos { padding-top: 64px; }
	.sprut-videos__group { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.sprut-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sprut-meta { padding-top: 48px; }
	.sprut-meta.has-crew { grid-template-columns: minmax(0, 1fr); }
	.sprut-meta.has-crew .sprut-details { order: -1; } /* tablet staand: Details (kort) boven Crew */
	.sprut-crew, .sprut-details { padding: 24px; }
	.sprut-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sprut-stills { padding-top: 64px; }
.sprut-still[hidden] { display: none; }
.sprut-stills__more { display: flex; justify-content: center; padding-top: 8px; }
.sprut-stills__more[hidden] { display: none; }
.sprut-stills__more .pill { height: 56px; padding: 0 28px; font-size: 16px; }
	.sprut-more { padding: 64px var(--sprut-gutter) 48px; }
	.sprut-stills + .sprut-pn, .sprut-meta + .sprut-pn, .sprut-videos + .sprut-pn, .sprut-player-wrap + .sprut-pn { padding-top: 64px; }
	.sprut-pn { padding-bottom: 64px; }

	.sprut-client-hero { height: auto; min-height: 560px; }
	.sprut-client-hero__inner { flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 140px; padding-bottom: 40px; }
	.sprut-stats { min-width: 0; width: 100%; }
	.sprut-client-body { padding: 56px var(--sprut-gutter) 64px; gap: 56px; }

	body .sprut-contact { padding: 120px var(--sprut-gutter-text) 72px; }
	.sprut-contact__head { margin-bottom: 40px; }
	.sprut-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.sprut-contact__big { font-size: 36px; }
	.sprut-form { padding: 24px; }

	body .sprut-legal { padding: 120px var(--sprut-gutter-text) 0; }
	body .sprut-legal-body { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px var(--sprut-gutter-text) 80px; }
	body .sprut-legal-body > .wpb_column:first-child { position: static; }

	body #footer-widgets { padding: 40px 0 28px; }
	body .sprut-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* Mobile general */
@media (max-width: 500px) {
	:root { --sprut-gutter: 16px; --sprut-gutter-text: 16px; }
	body .site-header { top: 16px; }
	body .site-header .inside-header { padding: 0 16px; }
	body .site-logo img, body .site-logo picture img { height: 27px !important; }
	.sprut-header-right { display: none; }
	body #mobile-menu-control-wrapper { display: flex; align-items: center; margin-left: auto; }
	body .site-header .inside-header .mobile-menu-control-wrapper { display: flex; }
	body a.pill-back { width: 48px; height: 48px; padding: 0; border-radius: 999px; font-size: 12px; }
	.pill-back span { display: none; }
	.pill-back svg { margin: 0; width: 18px; height: 18px; }

	.sprut-h1 { font-size: 44px; letter-spacing: -0.045em; }
	.sprut-h1--xl { font-size: 56px; }
	.sprut-h2 { font-size: 34px; }
	.sprut-h3 { font-size: 26px; }
	.sprut-lead { font-size: 15px; }
	.sprut-contact__head .sprut-h1 { font-size: 60px; }
	.sprut-legal__head .sprut-h1 { font-size: 48px; }
	.outline { -webkit-text-stroke-width: 1px; }

	body .sprut-hero { min-height: 700px; height: 100vh; height: 100svh; } /* svh: nooit achter de adresbalk van mobiele browsers */
	.sprut-hero__content { gap: 26px; padding: 0 24px; }
	.sprut-hero__content h1 { font-size: 44px; line-height: 1; }
	.sprut-hero__content p { font-size: 16px; }
	.sprut-hero__content .pill { height: 56px; padding: 0 28px; font-size: 16px; }
	.sprut-marquee { height: 110px; }
	.sprut-marquee__track { gap: 20px; padding-left: 20px; }
	.sprut-marquee__item { font-size: 56px; }
	.sprut-marquee__item.outline { font-size: 59px; }
	.sprut-marquee__dot { width: 17px; height: 17px; }
	.sprut-work { padding: 64px var(--sprut-gutter) 24px; gap: 22px; }
	.sprut-work__head { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 4px; }
	.sprut-work__head .sprut-h2 { font-size: 44px; }
	/* Filter: één regel, horizontaal scrollen zoals de tabs op projectpagina's, uitlopend tot de schermrand (sectie-gutter + 4px kop-padding).
	   Kop op nowrap: met wrap wordt de kolomregel zo breed als de filterknoppen samen en scrolt er niets. */
	.sprut-work__head { flex-wrap: nowrap; }
	.sprut-filter { flex-wrap: nowrap; gap: 20px; align-self: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * (var(--sprut-gutter) + 4px)); margin-right: calc(-1 * (var(--sprut-gutter) + 4px)); padding-left: calc(var(--sprut-gutter) + 4px); padding-right: calc(var(--sprut-gutter) + 4px); scroll-padding-left: calc(var(--sprut-gutter) + 4px); -webkit-mask: linear-gradient(90deg, transparent 0, #fff var(--sprut-fade-l), #fff calc(100% - var(--sprut-fade-r)), transparent 100%); mask: linear-gradient(90deg, transparent 0, #fff var(--sprut-fade-l), #fff calc(100% - var(--sprut-fade-r)), transparent 100%); transition: --sprut-fade-l 150ms ease, --sprut-fade-r 150ms ease; }
	.sprut-filter::-webkit-scrollbar { display: none; }
	body .sprut-filter button { font-size: 15px; min-height: 34px; padding-bottom: 2px; flex-shrink: 0; white-space: nowrap; }
	.sprut-grid--2, .sprut-grid--3 { grid-template-columns: minmax(0, 1fr); }
	.sprut-card, .sprut-card--md, .sprut-card--sm { height: 230px; border-radius: 14px; }
	.sprut-card--lg, .sprut-card--xl { height: 300px; }
	.sprut-card__body { left: 20px; right: 20px; bottom: 18px; }
	.sprut-card__title { font-size: 20px; }
	.sprut-card--hl .sprut-card__title { font-size: 28px; }
	.sprut-card__view { display: none; }
	.sprut-client-page .sprut-grid:not(.sprut-grid--hl) .sprut-card__title { font-size: 22px; }
	.sprut-work__more { padding-top: 8px; }
	.sprut-work__more .pill { width: 100%; }
	.sprut-pn { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
	.sprut-navcard { height: 200px; padding: 20px; }
	.sprut-navcard__title { font-size: 28px; }
	.sprut-navcard__arrow { width: 48px; height: 48px; }
	body .sprut-trusted-row { padding-top: 48px; }
	.sprut-trusted { gap: 12px 20px; padding: 20px 0; }
	.sprut-trusted--slider { flex-wrap: wrap; -webkit-mask: none; mask: none; }
	.sprut-trusted--slider .sprut-trusted__label { width: 100%; }
	/* beide sets (ook de aria-hidden kopie) exact even breed, anders verspringt de lus */
	.sprut-trusted--slider .sprut-trusted__set, .sprut-trusted--slider .sprut-trusted__set[aria-hidden] { gap: 32px; padding-right: 32px; }
	.sprut-trusted__logo { height: calc(40px * var(--sprut-logo-s, 1)); max-width: 130px; }
	body .sprut-cta-row { padding: 56px var(--sprut-gutter); }
	.sprut-cta { height: auto; min-height: 520px; padding: 12px; border-radius: 18px; }
	.sprut-cta__panel { max-width: 100%; width: 100%; padding: 28px 24px; }
	.sprut-cta__panel h2 { font-size: 40px; letter-spacing: -0.045em; }
	.sprut-cta__panel p { font-size: 15px; }
	.sprut-cta__actions .pill { height: 56px; }
	.sprut-cta__mail { display: none; }
	/* Glaspaneel hangt voor de helft onder de foto uit (klant 2026-09-25); paneelhoogte zet sprut.js in --sprut-cta-panel-h.
	   Zonder JS is de variabele 0 → gewone weergave. */
	.sprut-cta { overflow: visible; padding-bottom: 0; margin-bottom: calc(var(--sprut-cta-panel-h, 0px) / 2); }
	.sprut-cta img, .sprut-cta__shade { border-radius: 18px; } /* foto zelf afronden: de kaart knipt niet meer af */
	.sprut-cta__panel { margin-bottom: calc(var(--sprut-cta-panel-h, 0px) / -2); }
	/* Slideshow-bolletjes bovenaan in de foto (klant 2026-09-25) */
	.sprut-cta--slides .sprut-cta__dots { position: absolute; top: 12px; left: 50%; right: auto; bottom: auto; margin: 0; transform: translateX(-50%); }
	.sprut-service { height: 300px; }

	.sprut-project-head { padding-top: 96px; gap: 20px; }
	.sprut-project-head__title { gap: 12px; }
	/* Tabs: één regel, horizontaal scrollen (scrollbar verborgen), uitlopend tot de schermrand */
	.sprut-tabs { gap: 22px; padding-top: 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * var(--sprut-gutter-text)); margin-right: calc(-1 * var(--sprut-gutter-text)); padding-left: var(--sprut-gutter-text); padding-right: var(--sprut-gutter-text); scroll-padding-left: var(--sprut-gutter-text); -webkit-mask: linear-gradient(90deg, transparent 0, #fff var(--sprut-fade-l), #fff calc(100% - var(--sprut-fade-r)), transparent 100%); mask: linear-gradient(90deg, transparent 0, #fff var(--sprut-fade-l), #fff calc(100% - var(--sprut-fade-r)), transparent 100%); transition: --sprut-fade-l 150ms ease, --sprut-fade-r 150ms ease; }
	.sprut-tabs::-webkit-scrollbar { display: none; }
	.sprut-tabs a { font-size: 15px; min-height: 40px; flex-shrink: 0; white-space: nowrap; }
	/* Scroll-fades filter/tabs: links pas zodra er gescrold is, rechts weg aan het eind (sprut.js zet .is-scrolled / .is-end) */
	.sprut-filter.is-scrolled, .sprut-tabs.is-scrolled { --sprut-fade-l: 40px; }
	.sprut-filter.is-end, .sprut-tabs.is-end { --sprut-fade-r: 0px; }
	.sprut-player-wrap { padding-top: 24px; }
	.sprut-player { border-radius: 14px; }
	.sprut-player__play { width: 64px; height: 64px; padding-left: 0; }
	.sprut-player__play svg { width: 26px; height: 26px; }
	.sprut-player__meta { left: 12px; bottom: 12px; height: 32px; padding: 0 12px; font-size: 11px; }
	.sprut-videos { padding-top: 56px; }
	.sprut-videos .sprut-h2 { padding-bottom: 12px; }
	.sprut-videos__group { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 0 24px; }
	.sprut-videos__group .sprut-h3 { font-size: 26px; padding: 0 4px; }
	.sprut-videos__grid { grid-template-columns: minmax(0, 1fr); }
	.sprut-video__title { font-size: 16px; }
	.sprut-meta { padding-top: 40px; }
	.sprut-meta.has-crew { grid-template-columns: minmax(0, 1fr); }
	.sprut-meta.has-crew .sprut-details { order: -1; } /* mobiel: Details (kort) boven Crew */
	.sprut-crew, .sprut-details, .sprut-meta.no-crew .sprut-details { padding: 22px 20px; }
	.sprut-crew__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.sprut-details__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.sprut-stills { padding-top: 56px; gap: 16px; }
	.sprut-stills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqi - 8px) / 6); gap: 8px; }
	.sprut-still { grid-column: var(--c2, auto) / span var(--w2, 1); grid-row: var(--r2, auto) / span var(--h2, 2); border-radius: 12px; }
	.sprut-stills__more .pill { width: 100%; }
	.sprut-more { padding: 56px var(--sprut-gutter) 40px; gap: 16px; }
	.sprut-more__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.sprut-stills + .sprut-pn, .sprut-meta + .sprut-pn, .sprut-videos + .sprut-pn, .sprut-player-wrap + .sprut-pn { padding-top: 56px; }

	.sprut-client-hero { height: auto; min-height: 520px; }
	.sprut-client-hero__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 120px; padding-bottom: 32px; }
	.sprut-client-hero__text { gap: 14px; }
	.sprut-stats { min-width: 0; width: 100%; padding: 4px 20px; }
	.sprut-stats__row { padding: 12px 0; }
	.sprut-client-body { padding: 48px var(--sprut-gutter) 56px; gap: 48px; }
	.sprut-client-block { gap: 16px; }

	body .sprut-contact { padding: 110px var(--sprut-gutter-text) 64px; }
	/* Achtergrondfoto geblurd (klant 2026-09-25); iets opgeschaald zodat de randen van de blur niet doorschijnen */
	.sprut-contact__bg { filter: blur(24px); transform: scale(1.15); opacity: 0.2; } /* minder zichtbaar dan desktop (0.32) */
	.sprut-contact__head { margin-bottom: 36px; gap: 12px; }
	.sprut-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.sprut-contact__info { gap: 28px; }
	.sprut-contact__big { font-size: 28px; }
	.sprut-contact__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.sprut-form { padding: 20px; gap: 16px; border-radius: 18px; }
	.sprut-form__row { grid-template-columns: minmax(0, 1fr); }
	.sprut-form button[type="submit"], .sprut-form .gform_button { width: 100%; }

	body .sprut-legal { padding: 110px var(--sprut-gutter-text) 0; }
	body .sprut-legal-body { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px var(--sprut-gutter-text) 64px; }
	body .sprut-legal-body > .wpb_column:first-child { position: static; }
	.sprut-toc { padding: 18px 20px 10px; }
	.sprut-article h2 { font-size: 22px; }
	body .sprut-article { margin-top: 28px; padding-top: 24px; }
	.sprut-article p, .sprut-article li { font-size: 16px; }

	/* Footer mobiel volgens ontwerp: logo, adres | mail+tel naast elkaar, socials, bottombar */
	body #footer-widgets { padding: 40px 0 28px; }
	body #footer-widgets .inside-footer-widgets { padding: 0 20px; }
	body .sprut-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 24px 24px auto auto; column-gap: 24px; row-gap: 0; align-items: start; }
	body .sprut-footer > .wpb_column, body .sprut-footer .vc_column-inner, body .sprut-footer .wpb_wrapper, body .sprut-footer .wpb_raw_code, body .sprut-footer .sprut-footer__brand, body .sprut-footer .sprut-footer__col { display: contents; }
	body .sprut-footer .sprut-footer__brand img { grid-column: 1 / -1; grid-row: 1; height: 22px !important; margin: 0 0 28px !important; }
	body .sprut-footer .sprut-footer__brand p { grid-column: 1; grid-row: 2 / span 3; font-size: 15px; line-height: 24px; }
	body .sprut-footer .sprut-footer__name { display: none; }
	body .sprut-footer .sprut-footer__col > .mono, .sprut-footer__col--legal, .sprut-footer__col--legal * { display: none; }
	body .sprut-footer .sprut-footer__col:not(.sprut-footer__col--legal) > a { grid-column: 2; font-size: 15px; line-height: 24px; height: 24px; padding: 0; margin: 0; display: block; }
	body .sprut-footer .sprut-footer__col:not(.sprut-footer__col--legal) > a:nth-of-type(1) { grid-row: 2; }
	body .sprut-footer .sprut-footer__col:not(.sprut-footer__col--legal) > a:nth-of-type(2) { grid-row: 3; }
	body .sprut-footer .sprut-footer__brand p { line-height: 24px; margin: 0; }
	body .sprut-footer .sprut-socials { grid-column: 1 / -1; grid-row: 5; margin-top: 20px; display: flex; }
	body .sprut-footer .sprut-socials a { width: 48px; height: 48px; }
	body .site-info .inside-site-info { padding: 0 20px 24px; }
	body #footer-widgets { padding-bottom: 28px; }
	body .sprut-copy { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 20px; }
	body .sprut-copy__links { display: inline-flex; }
	body .sprut-copy .mono { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; }
	/* Raster (klant 2026-09-25): SPRUT MEDIA 2026 ©   | Privacy Policy
	                              ALL RIGHTS RESERVED | Terms & Conditions
	                              mediacabin — links voluit en rechts uitgelijnd; GP centreert .site-info, dus expliciet links */
	body .sprut-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; text-align: left; }
	body .sprut-copy > .mono:first-child, body .sprut-copy__links, body .sprut-copy__text { display: contents; }
	body .sprut-copy__text > span:first-child { grid-column: 1; grid-row: 1; }
	body .sprut-copy__text > span:last-child { grid-column: 1; grid-row: 2; }
	body .sprut-copy__links a:first-child { grid-column: 2; grid-row: 1; justify-self: end; }
	body .sprut-copy__links a:last-child { grid-column: 2; grid-row: 2; justify-self: end; }
	body .sprut-copy .sprut-credit { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 4px; }
	body .sprut-lightbox__nav { width: 44px; height: 44px; top: auto; bottom: 20px; transform: none; }
	body .sprut-lightbox button.sprut-lightbox__nav:hover, body .sprut-lightbox button.sprut-lightbox__nav:focus-visible { transform: none; }
	.sprut-lightbox__nav--prev { left: 16px; }
	.sprut-lightbox__nav--next { right: 16px; }
	.sprut-lightbox__count { bottom: 34px; }
	body .sprut-lightbox__close { top: 16px; right: 16px; }
	.sprut-lightbox img { max-height: 78vh; }
}

/* iPhone X en kleiner */
@media (max-width: 380px) {
	.sprut-h1 { font-size: 38px; }
	.sprut-hero__content h1 { font-size: 38px; }
	.sprut-work__head .sprut-h2 { font-size: 38px; }
	.sprut-contact__head .sprut-h1 { font-size: 50px; }
	.sprut-marquee__item { font-size: 48px; }
	.sprut-marquee__item.outline { font-size: 51px; }
}

/* ==================================================================
   Beweging — volgens Emil Kowalski's animatieregels (skills in .claude/skills):
   sterke ease-out (--sprut-ease-out), alleen transform/opacity/scale,
   hover-beweging alleen met een muis, rustige variant bij prefers-reduced-motion.
   Lightbox/speler/hover staan bij hun eigen component; hier de losse delen.
================================================================== */

/* Druk-feedback: alles wat je indrukt veert iets in. Via de losse `scale`-eigenschap,
   zodat het optelt bij bestaande transforms (gecentreerde play-knop, hover-lift). Glas-knoppen: zie transition bij .glass */
body a.pill-white, body #mobile-menu-control-wrapper .menu-toggle { transition: scale 160ms var(--sprut-ease-out); }
body.sprut .sprut-card, body.sprut .entry-content .sprut-card, body.sprut .entry-content .sprut-card:hover, body.sprut .entry-content .sprut-card:focus, body.sprut .entry-content .sprut-card:active, body.sprut .sprut-card:hover,
body.sprut .sprut-navcard, body.sprut .entry-content .sprut-navcard:hover, body.sprut .entry-content .sprut-navcard:focus, body.sprut .sprut-navcard:hover,
body .sprut-still, body .sprut-video { transition: scale 160ms var(--sprut-ease-out); }
body a.glass:active, body button.glass:active, body a.pill-white:active, body #mobile-menu-control-wrapper .menu-toggle:active { scale: 0.97; }
body .sprut-card:active, body .sprut-navcard:active, body .sprut-still:active, body .sprut-video:active { scale: 0.98; } /* grote tegels: iets minder */
/* Tekstknoppen/-links: geen tik-flits meer, dus kort dimmen bij indrukken */
body .sprut-filter button:active, body .sprut-tabs a:active, body .sprut-toc a:active, body .sprut-footer__col a:active, body .sprut-copy a:active { opacity: 0.6; }

/* Binnenpoppen: tegels (kaarten, video's, stills, prev/next) komen één keer binnen zodra ze in beeld scrollen,
   ook de extra's van "Show all stills" / "All productions". JS zet .is-pending (wachtstand) en bij binnenscrollen
   .is-revealing + een oplopende transition-delay (40ms per item in dezelfde rij/batch, max 8), en ruimt die daarna op.
   Bewust ruimer dan UI-tempo (klant zag 8px/300ms niet): 32px + scale 0.97, ease-in-out (scroll-reveal-recipe), 350ms (700ms was te traag);
   met de sterke ease-out zat 95% van de beweging in de eerste 200ms en zag je het niet. */
body.sprut .sprut-card.is-pending, body .sprut-video.is-pending, body .sprut-still.is-pending, body.sprut .sprut-navcard.is-pending { opacity: 0; transform: translateY(32px) scale(0.97); }
body.sprut .sprut-card.is-revealing, body.sprut .entry-content .sprut-card.is-revealing, body.sprut .entry-content .sprut-card.is-revealing:hover, body.sprut .entry-content .sprut-card.is-revealing:focus, body .sprut-still.is-revealing,
body .sprut-video.is-revealing, body.sprut .sprut-navcard.is-revealing, body.sprut .sprut-navcard.is-revealing:hover, body.sprut .entry-content .sprut-navcard.is-revealing:hover {
	transition: opacity 350ms var(--sprut-ease-in-out), transform 350ms var(--sprut-ease-in-out), scale 160ms var(--sprut-ease-out);
}
/* Zonder scroll-observer (minder beweging / oude browser): extra's bij uitklappen via @starting-style */
@starting-style {
	body.sprut .sprut-card.is-revealing, body .sprut-still.is-revealing { opacity: 0; transform: translateY(32px) scale(0.97); }
}

/* Formulier verstuurd: bevestiging komt binnen, cirkel verschijnt, vinkje tekent zichzelf (zeldzaam moment → mag iets langer) */
body .sprut-form .gform_confirmation_message { position: relative; padding-top: 64px; animation: sprut-rise-in 400ms var(--sprut-ease-out) both; }
body .sprut-form .gform_confirmation_message::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 44px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.7); animation: sprut-pop-in 300ms var(--sprut-ease-out) 80ms both; }
body .sprut-form .gform_confirmation_message::after { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.8'/%3E%3C/svg%3E") center / 22px no-repeat; animation: sprut-draw-in 300ms var(--sprut-ease-out) 220ms both; }
@keyframes sprut-rise-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sprut-pop-in { from { opacity: 0; transform: scale(0.9); } }
@keyframes sprut-draw-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sprut-fade-in { from { opacity: 0; } }

/* Openingsanimatie bij het laden (klantwens 2026-09-24): de titel komt woord voor woord omhoog uit een masker,
   daarna kicker, knoppen, tabs en beeld gestaffeld; achtergronden komen uit zwart op. Puur CSS, dus het start bij de
   eerste paint (geen flits). Fill "backwards": na afloop geen animatie-effect meer, hover/transforms werken gewoon.
   Header blijft staan (navigatie meteen bruikbaar). Woorden: sprut_title_html( $t, true ) / words() in build_pages.py. */
.sprut-w { display: inline-block; clip-path: inset(-0.35em -0.25em -0.25em -0.25em); } /* ruim om ascenders, descenders en de outline-stroke */
.sprut-w > span { display: inline-block; animation: sprut-word-up 1000ms var(--sprut-ease-out) backwards; animation-delay: calc(var(--sprut-words-start, 120ms) + var(--i, 0) * 45ms); }
@keyframes sprut-word-up { from { transform: translateY(150%); } }
@keyframes sprut-load-up { from { opacity: 0; transform: translateY(32px); } }
@keyframes sprut-settle { from { opacity: 0; transform: scale(1.06); } }
/* Home */
body .sprut-hero .nk-awb-wrap { animation: sprut-fade-in 1400ms var(--sprut-ease-out) backwards; }
.sprut-hero__content h1 { --sprut-words-start: 200ms; }
.sprut-hero__content > .pill, .sprut-hero__actions > .pill { animation: sprut-load-up 1000ms var(--sprut-ease-out) 700ms backwards; }
.sprut-hero__actions > .pill + .pill { animation-delay: 780ms; }
.sprut-hero__scroll { animation: sprut-fade-in 900ms var(--sprut-ease-out) 1000ms backwards; }
/* Projectpagina */
.sprut-work-page > .ambient { animation: sprut-fade-in 1600ms var(--sprut-ease-out) backwards; }
.sprut-project-head .sprut-kicker { animation: sprut-load-up 900ms var(--sprut-ease-out) backwards; }
.sprut-project-head .sprut-h1 { --sprut-words-start: 100ms; }
.sprut-project-head .sprut-tabs { animation: sprut-load-up 1000ms var(--sprut-ease-out) 400ms backwards; }
.sprut-work-page > .sprut-player-wrap { animation: sprut-load-up 1100ms var(--sprut-ease-out) 480ms backwards; }
/* Klantpagina */
.sprut-client-hero__img { animation: sprut-settle 1600ms var(--sprut-ease-out) backwards; }
.sprut-client-hero__text .sprut-kicker { animation: sprut-load-up 900ms var(--sprut-ease-out) 150ms backwards; }
.sprut-client-hero__text .sprut-h1 { --sprut-words-start: 250ms; }
.sprut-client-hero__text .sprut-lead { animation: sprut-load-up 1000ms var(--sprut-ease-out) 550ms backwards; }
.sprut-client-hero .sprut-stats { animation: sprut-load-up 1000ms var(--sprut-ease-out) 650ms backwards; }
.sprut-client-page > .sprut-client-body { animation: sprut-load-up 1000ms var(--sprut-ease-out) 750ms backwards; } /* highlights staan bij laden vaak al in beeld */
/* Contact */
.sprut-contact__bg { animation: sprut-fade-in 1600ms var(--sprut-ease-out) backwards; }
.sprut-contact__head .sprut-kicker { animation: sprut-load-up 900ms var(--sprut-ease-out) backwards; }
.sprut-contact__info { animation: sprut-load-up 1000ms var(--sprut-ease-out) 380ms backwards; }
.sprut-contact .sprut-form { animation: sprut-load-up 1000ms var(--sprut-ease-out) 480ms backwards; }
/* Privacy / Terms */
.sprut-legal__head .sprut-kicker { animation: sprut-load-up 900ms var(--sprut-ease-out) backwards; }
.sprut-legal-body .sprut-toc { animation: sprut-load-up 1000ms var(--sprut-ease-out) 380ms backwards; }
.sprut-legal-body .sprut-articles { animation: sprut-load-up 1000ms var(--sprut-ease-out) 480ms backwards; }
/* 404 */
.sprut-404__bg { animation: sprut-fade-in 1600ms var(--sprut-ease-out) backwards; }
.sprut-404__num { animation: sprut-fade-in 1800ms var(--sprut-ease-out) 300ms backwards; }
.sprut-404__head .sprut-kicker { animation: sprut-load-up 900ms var(--sprut-ease-out) backwards; }
.sprut-404__head .sprut-lead { animation: sprut-load-up 1000ms var(--sprut-ease-out) 450ms backwards; }
.sprut-404__actions { animation: sprut-load-up 1000ms var(--sprut-ease-out) 550ms backwards; }

/* ------------------------------------------------------------------
   404 — hero in de stijl van contact/klant: donkere foto, groot outline "404", titel + knoppen, daaronder recente producties
------------------------------------------------------------------ */
.sprut-404-page { display: flex; flex-direction: column; }
.sprut-404 { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 152px max(var(--sprut-gutter-text), calc((100% - var(--sprut-max)) / 2 + var(--sprut-gutter-text))) 96px; }
.sprut-404__bg { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.sprut-404__shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(7,7,7,0.6) 0%, rgba(7,7,7,0.45) 45%, rgba(7,7,7,1) 100%); }
.sprut-404__num { position: absolute; z-index: -1; right: max(var(--sprut-gutter-text), calc((100% - var(--sprut-max)) / 2 + var(--sprut-gutter-text))); bottom: -0.12em; font-family: var(--sprut-serif); font-size: clamp(220px, 34vw, 640px); line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.14); pointer-events: none; user-select: none; }
.sprut-404__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 1200px; }
.sprut-404__head .sprut-kicker { color: var(--sprut-text-2); }
.sprut-404__head .sprut-h1 { font-size: clamp(60px, 9.58vw, 184px); letter-spacing: -0.055em; line-height: 0.86; }
.sprut-404__head .sprut-lead { max-width: 560px; }
.sprut-404__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.sprut-404-more { padding-top: 24px; padding-bottom: 96px; }
@media (max-width: 900px) {
	.sprut-404 { min-height: 0; padding: 140px var(--sprut-gutter-text) 88px; }
	.sprut-404__head .sprut-h1 { font-size: 80px; }
	.sprut-404-more .sprut-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 500px) {
	.sprut-404 { padding: 120px var(--sprut-gutter-text) 72px; }
	.sprut-404__head .sprut-h1 { font-size: 56px; }
	.sprut-404__num { font-size: 220px; right: -0.05em; }
	.sprut-404__actions .pill { height: 52px; padding: 0 22px; font-size: 15px; }
	.sprut-404-more { padding-bottom: 64px; }
}

/* ------------------------------------------------------------------
   Zoekresultaten — kop met zoekterm + zoekveld, kaarten voor projecten/klanten, regels voor pagina's
------------------------------------------------------------------ */
.sprut-search-page { display: flex; flex-direction: column; position: relative; isolation: isolate; overflow: hidden; }
.sprut-search-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 152px max(var(--sprut-gutter-text), calc((100% - var(--sprut-max)) / 2 + var(--sprut-gutter-text))) 24px; }
.sprut-search-head .ambient { left: 10%; width: 70%; top: -200px; height: 700px; }
.sprut-search-head .sprut-kicker { color: var(--sprut-text-2); }
.sprut-search-head .sprut-h1 { font-size: clamp(56px, 7.08vw, 136px); letter-spacing: -0.055em; line-height: 0.9; overflow-wrap: anywhere; }
.sprut-search-form { display: flex; gap: 10px; width: 100%; max-width: 640px; margin-top: 10px; }
body .sprut-search-form input[type="search"] { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); color: #fff; font-family: var(--sprut-font); font-size: 16px; box-shadow: none; -webkit-appearance: none; appearance: none; }
body .sprut-search-form input[type="search"]::placeholder { color: rgba(255,255,255,0.4); }
body .sprut-search-form input[type="search"]:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
body .sprut-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.sprut-search-form .pill { height: 56px; padding: 0 26px; font-size: 16px; flex-shrink: 0; }
.sprut-search-results { padding-top: 48px; padding-bottom: 96px; }
.sprut-search-rows { display: flex; flex-direction: column; border-top: 1px solid var(--sprut-line); }
.sprut-search-row { display: flex; align-items: center; gap: 24px; padding: 22px 8px; border-bottom: 1px solid var(--sprut-line); color: #fff; }
.sprut-search-row .mono { color: var(--sprut-muted); width: 90px; flex-shrink: 0; }
.sprut-search-row__title { flex: 1 1 auto; font-size: clamp(22px, 1.7vw, 32px); font-weight: 600; letter-spacing: -0.02em; }
body .sprut-search-row:hover, body .sprut-search-row:hover .sprut-search-row__title { color: #fff; }
@media (hover: hover) and (pointer: fine) {
	body .sprut-search-row:hover .sprut-card__arrow { transform: scale(1.08); background-color: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45); }
}
.sprut-search-pages { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 24px; }
.sprut-search-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 15px; }
.sprut-search-pages .page-numbers.current { background: #fff; color: #0a0a0a; border-color: #fff; }
.sprut-search-pages .page-numbers.dots { border: 0; }
/* Openingsanimatie (woorden via .sprut-w) */
.sprut-search-head .sprut-kicker { animation: sprut-load-up 900ms var(--sprut-ease-out) backwards; }
.sprut-search-head .sprut-lead { animation: sprut-load-up 1000ms var(--sprut-ease-out) 400ms backwards; }
.sprut-search-form { animation: sprut-load-up 1000ms var(--sprut-ease-out) 500ms backwards; }
.sprut-search-head .ambient { animation: sprut-fade-in 1600ms var(--sprut-ease-out) backwards; }
@media (max-width: 900px) {
	.sprut-search-head { padding: 140px var(--sprut-gutter-text) 16px; }
	.sprut-search-head .sprut-h1 { font-size: 72px; }
	.sprut-search-results .sprut-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 500px) {
	.sprut-search-head { padding: 120px var(--sprut-gutter-text) 8px; gap: 18px; }
	.sprut-search-head .sprut-h1 { font-size: 48px; }
	.sprut-search-form input[type="search"], .sprut-search-form .pill { height: 52px; }
	.sprut-search-form .pill { padding: 0 18px; }
	.sprut-search-results { padding-top: 32px; padding-bottom: 64px; }
	.sprut-search-row { gap: 14px; padding: 18px 4px; }
	.sprut-search-row .mono { display: none; }
	.sprut-search-row__title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.sprut-search-head .sprut-kicker, .sprut-search-head .sprut-lead, .sprut-search-form { animation-name: sprut-fade-in; }
}

/* Minder beweging: geen verplaatsing of zoom, wel rustige fades (gentler, not zero) */
@media (prefers-reduced-motion: reduce) {
	.sprut-hero__scroll a { animation: none; }
	.sprut-card .cover, .sprut-navcard .cover, .sprut-still .cover, .sprut-video__thumb .cover { transition: none; }
	.sprut-card:hover .cover, .sprut-navcard:hover .cover, .sprut-still:hover .cover, .sprut-video:hover .sprut-video__thumb .cover, .sprut-video:focus-visible .sprut-video__thumb .cover { transform: none; }
	body a.glass:hover, body button.glass:hover, body a.glass:focus-visible, body button.glass:focus-visible, .sprut-trusted__link:hover .sprut-trusted__logo { transform: none; }
	.sprut-lightbox img { transform: none; }
	@starting-style {
		body.sprut .sprut-card.is-revealing, body .sprut-still.is-revealing { transform: none; }
	}
	body.sprut .sprut-card.is-pending, body .sprut-video.is-pending, body .sprut-still.is-pending, body.sprut .sprut-navcard.is-pending { opacity: 1; transform: none; } /* JS zet dit dan niet, maar voor de zekerheid */
	body .sprut-form .gform_confirmation_message, body .sprut-form .gform_confirmation_message::before { animation-name: sprut-fade-in; }
	body .sprut-form .gform_confirmation_message::after { animation: sprut-fade-in 300ms var(--sprut-ease-out) 150ms both; }
	/* Openingsanimatie: alleen infaden */
	.sprut-w > span, .sprut-hero__content > .pill, .sprut-hero__actions > .pill, .sprut-project-head .sprut-kicker, .sprut-project-head .sprut-tabs, .sprut-work-page > .sprut-player-wrap,
	.sprut-client-hero__img, .sprut-client-hero__text .sprut-kicker, .sprut-client-hero__text .sprut-lead, .sprut-client-hero .sprut-stats, .sprut-client-page > .sprut-client-body,
	.sprut-contact__head .sprut-kicker, .sprut-contact__info, .sprut-contact .sprut-form, .sprut-legal__head .sprut-kicker, .sprut-legal-body .sprut-toc, .sprut-legal-body .sprut-articles,
	.sprut-404__head .sprut-kicker, .sprut-404__head .sprut-lead, .sprut-404__actions { animation-name: sprut-fade-in; }
}