/*
Theme Name: The Green Surfer
Theme URI: https://staging.thegreensurfer.com/
Author: The Green Surfer
Description: Custom PHP-thema voor The Green Surfer. Homepage 1:1 nagebouwd naar Figma (Website The Green Surfer 2026).
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: thegreensurfer
*/

/* ==========================================================================
   Fonts — Grand Bold voor de titels (display)
   ========================================================================== */
@font-face {
	font-family: "Grand";
	src: url("assets/fonts/GrandBold.woff2") format("woff2"),
	     url("assets/fonts/GrandBold.woff") format("woff"),
	     url("assets/fonts/GrandBold.ttf") format("truetype");
	font-weight: 100 900; /* volledige range zodat 700/800 niet faux-bold wordt */
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Uncut Sans";
	src: url("assets/fonts/UncutSans-Light.woff2") format("woff2"),
	     url("assets/fonts/UncutSans-Light.woff") format("woff");
	font-weight: 300 500; /* alleen Light beschikbaar; range voorkomt faux-bold op body */
	font-style: normal;
	font-display: swap;
	/* Metrics corrigeren: het bestand heeft te weinig descent, waardoor j/g/p werden afgekapt. */
	ascent-override: 92%;
	descent-override: 28%;
	line-gap-override: 0%;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
	--tgs-green:  #1E4C3B;
	--tgs-ink:    #292929;
	--tgs-pink:   #E06FA6;
	--tgs-amber:  #F1B243;
	--tgs-olive:  #B2A044;
	--tgs-grey:   #CACBBF;
	--tgs-blue:   #B5E7FF; /* lichtblauw accent (exact uit Figma) */
	--tgs-cream:  #F3EEE3;
	--tgs-white:  #FFFFFF;
	--tgs-bg:     #F3F4EF; /* frame-achtergrond homepage */

	--tgs-display: "Grand", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--tgs-body:    "Uncut Sans", "Helvetica Neue", Arial, sans-serif;
	--tgs-mono:    "Grand", "Arial Black", "Helvetica Neue", Arial, sans-serif; /* labels in Grand (geen Matter Mono) */

	--tgs-h-hero: clamp(2.75rem, 6vw, 5rem);    /* ~80px */
	--tgs-h1:     clamp(2.25rem, 4.6vw, 3.75rem);/* ~60px */
	--tgs-h2:     clamp(1.75rem, 3vw, 2.5rem);   /* ~40px */
	--tgs-lead:   clamp(1.5rem, 2.6vw, 2.5rem);  /* intro-paragraaf ~40px */
	--tgs-body-sz: 1.125rem;

	--tgs-radius: 35px;
	--tgs-radius-sm: 22px;
	--tgs-radius-leaf: 26px; /* egale ruime ronding voor projectkaarten/frames (surfboard-referentie: rond + gekanteld) */
	--tgs-pad: 32px;
	--tgs-max: calc(1440px + 2 * var(--tgs-pad)); /* buitenmaat: de content zelf wordt zo exact 1440px breed */
	--tgs-section: clamp(60px, 7vw, 112px);
	--tgs-line-gap: clamp(56px, 7vw, 92px); /* gelijke ruimte boven én onder de subtiele scheidingslijnen (Over ons) */
}

/* ==========================================================================
   Basis
   ========================================================================== */
* { box-sizing: border-box; }

/* Reserveer scrollbalk-ruimte, zodat het openen van het menu (scroll-lock) geen layout-shift geeft. */
/* overflow-x:hidden alleen op html (niet body): voorkomt horizontaal scrollen zonder de sticky header/fixed-overlay te breken. */
html { scrollbar-gutter: stable; overflow-x: hidden; }

body {
	margin: 0;
	font-family: var(--tgs-body);
	color: var(--tgs-ink);
	background: var(--tgs-bg);
	line-height: 1.5;
	font-size: var(--tgs-body-sz);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* De globale img-reset mag de WordPress-adminbalk (alleen zichtbaar voor ingelogde beheerders)
   niet opblazen: houd het site-icoon/avatars daar klein en inline. */
#wpadminbar img { max-width: 26px; max-height: 26px; width: auto; height: auto; display: inline-block; vertical-align: middle; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--tgs-display);
	font-weight: 800;
	color: var(--tgs-green);
	margin: 0;
	line-height: 0.98;
	text-transform: uppercase;
	letter-spacing: 0.005em;
}

.tgs-container {
	width: 100%;
	max-width: var(--tgs-max);
	margin: 0 auto;
	padding: 0 var(--tgs-pad);
}

/* ---- Arrow-knop (rond) ---- */
.tgs-arrow {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--tgs-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}
.tgs-arrow svg { width: 22px; height: 22px; display: block; }
.tgs-arrow svg path { stroke: var(--tgs-green); transition: stroke .2s ease; }
.tgs-arrow--amber { background: var(--tgs-amber); }
.tgs-arrow--pink  { background: var(--tgs-pink); }
.tgs-arrow--pink svg path { stroke: var(--tgs-ink); }
.tgs-arrow--blue  { background: var(--tgs-blue); }
/* Hover op de blauwe slider-pijlen: vult naar groen, pijl wordt cream, lichte lift. */
.tgs-arrow--blue:not(:disabled):hover { background: var(--tgs-green); transform: translateY(-2px); }
.tgs-arrow--blue:not(:disabled):hover svg path { stroke: var(--tgs-cream); }
/* Hover op de roze pijl-knoppen (stories-kaart + los): vult naar groen, pijl wordt cream. */
.tgs-arrow--pink:not(:disabled):hover,
.tgs-story:hover .tgs-story__arrow { background: var(--tgs-green); }
.tgs-arrow--pink:not(:disabled):hover svg path,
.tgs-story:hover .tgs-story__arrow svg path { stroke: var(--tgs-cream); }

/* ---- Bubble-arrow-knop (button-stijl van reset.beachbreak.nl) ---- */
.wa-btn-bubble-arrow {
	--wa-bubble-content-bg: var(--tgs-white);   /* tekst-pill */
	--wa-bubble-content-fg: var(--tgs-ink);
	--wa-bubble-alt-bg: var(--tgs-green);        /* ronde knop in rust (groen) */
	--wa-bubble-accent: var(--tgs-blue);         /* pijl-bubbel bij hover (lichtblauw) */
	--wa-bubble-arrow-fg: var(--tgs-ink);        /* pijl in de hover-bubbel (donker) */
	font-size: 0.95rem;
	border-radius: 10em;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	display: inline-flex;
	position: relative;
}
.wa-btn-bubble-arrow__arrow {
	color: var(--wa-bubble-arrow-fg);
	background-color: var(--wa-bubble-accent);
	border-radius: 10em;
	justify-content: center;
	align-items: center;
	width: 3.75em;
	height: 3.75em;
	display: flex;
	position: relative;
	transition: transform .735s cubic-bezier(.625,.05,0,1);
	transform: scale(0) rotate(.001deg);
	transform-origin: left center;
}
.wa-btn-bubble-arrow__arrow.is--duplicate {
	z-index: 2;
	background-color: var(--wa-bubble-alt-bg);
	color: var(--tgs-amber); /* rust-pijl amber op de groene knop */
	position: absolute;
	right: 0;
	transform: scale(1) rotate(.001deg);
	transform-origin: right center;
}
.wa-btn-bubble-arrow__arrow-svg {
	width: 40%;
	transition: transform .735s cubic-bezier(.625,.05,0,1);
	transform: rotate(.001deg);
}
.wa-btn-bubble-arrow__content {
	color: var(--wa-bubble-content-fg);
	background-color: var(--wa-bubble-content-bg);
	border-radius: 10em;
	justify-content: center;
	align-items: center;
	height: 3.75em;
	padding-left: 2em;
	padding-right: 2em;
	font-family: var(--tgs-body);
	font-weight: 500;
	letter-spacing: 0;
	display: flex;
	position: relative;
	transition: transform .735s cubic-bezier(.625,.05,0,1);
	transform: translateX(-3.75em) rotate(.001deg);
}
.wa-btn-bubble-arrow__content-text { line-height: 1; white-space: nowrap; }
.wa-btn-bubble-arrow:hover .wa-btn-bubble-arrow__content { transform: translateX(0) rotate(.001deg); }
.wa-btn-bubble-arrow:hover .wa-btn-bubble-arrow__arrow { transform: scale(1) rotate(.001deg); }
.wa-btn-bubble-arrow:hover .wa-btn-bubble-arrow__arrow.is--duplicate { transform: scale(0) rotate(.001deg); }
@media (prefers-reduced-motion: reduce) {
	.wa-btn-bubble-arrow__arrow,
	.wa-btn-bubble-arrow__arrow-svg,
	.wa-btn-bubble-arrow__content { transition: none !important; }
}
/* Op het witte projecten-vak: tekst-pill lichtblauw i.p.v. wit (leesbaar + zoals design). */
/* 'Bekijk meer' bij projecten staat op het witte vak: beige pill voor contrast (desktop + mobiel). */
.wa-btn-bubble-arrow.tgs-projects__pill,
.tgs-projects__foot .wa-btn-bubble-arrow { --wa-bubble-content-bg: var(--tgs-cream); }

/* ==========================================================================
   Header
   ========================================================================== */
/* Custom cursor: klein dotje dat de muis volgt + naijlende ring die opengroeit op klikbare dingen. */
html.tgs-cursor-on, html.tgs-cursor-on * { cursor: none; }
html.tgs-cursor-on input, html.tgs-cursor-on textarea, html.tgs-cursor-on select { cursor: text; }
.tgs-cursor__dot, .tgs-cursor__ring { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; will-change: transform; }
.tgs-cursor__dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--tgs-green); transition: opacity .2s ease; }
.tgs-cursor__ring::before {
	content: ""; display: block; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
	border: 1.5px solid var(--tgs-green);
	transition: transform .28s cubic-bezier(.2,.7,.2,1), background-color .28s ease, border-color .28s ease;
}
html.tgs-cursor-hover .tgs-cursor__ring::before { transform: scale(1.8); background: rgba(30, 76, 59, .08); }
html.tgs-cursor-hover .tgs-cursor__dot { opacity: 0; }
/* Boven een donker vlak (hero-beeld, foto-kaarten, footer, …) wordt de cursor wit i.p.v. groen. */
html.tgs-cursor-dark .tgs-cursor__dot { background: #fff; }
html.tgs-cursor-dark .tgs-cursor__ring::before { border-color: #fff; }
html.tgs-cursor-dark.tgs-cursor-hover .tgs-cursor__ring::before { background: rgba(255, 255, 255, .14); }

/* Cursor-volgend label ("Mail ons" / "Read more" etc.) bij relevante links. */
.tgs-cursorlabel {
	position: fixed; top: 0; left: 0; z-index: 90;
	padding: 8px 16px; border-radius: 999px;
	background: var(--tgs-amber); color: var(--tgs-ink);
	font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
	font-size: .8rem; white-space: nowrap;
	pointer-events: none; opacity: 0;
	transform: translate3d(-9999px, -9999px, 0) scale(.8);
	transition: opacity .18s ease;
	will-change: transform, opacity;
}
.tgs-cursorlabel.is-visible { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) { .tgs-cursorlabel { display: none; } }


.tgs-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: transparent;
	/* Uitlijnen op de boxed content-kolom (zelfde op alle pagina's). */
	padding-left: max(var(--tgs-pad), calc((100% - var(--tgs-max)) / 2 + var(--tgs-pad)));
	padding-right: max(var(--tgs-pad), calc((100% - var(--tgs-max)) / 2 + var(--tgs-pad)));
	/* Vaste padding-top in ELKE stand, zodat de sticky header niet van hoogte verspringt
	   op het omslagpunt (voorkomt de hapering waarbij alles eronder 14px verschoof). */
	padding-top: 14px;
	transition: transform .45s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
	will-change: transform;
}
.tgs-header .tgs-container { max-width: none; }
.tgs-header.is-hidden { transform: translateY(-100%); }
/* Op alle pagina's behalve de homepage: zwevende, afgeronde witte nav-balk, uitgelijnd op de boxed content. */
/* Nav-balk overal gelijk (home-gedrag): bovenaan transparant, bij scrollen een
   zwevende witte afgeronde balk. */
/* Bij scroll: alleen de gecentreerde witte pill heeft achtergrond; de header zelf blijft
   links en rechts transparant (de content scrollt zichtbaar langs de zijkanten van de pill). */
.tgs-header.is-scrolled { background: transparent; box-shadow: none; }
.tgs-header.is-scrolled .tgs-container {
	max-width: none;
	background: var(--tgs-white);
	border-radius: 26px;
	box-shadow: 0 10px 30px rgba(30, 76, 59, .10);
}
.tgs-header .tgs-container {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	box-sizing: border-box;
	min-height: 80px; /* vaste hoogte → header blijft 94px (14 + 80), ongeacht logo-grootte of stand */
	padding-top: 0;
	padding-bottom: 0;
}
.tgs-header.is-scrolled .tgs-logo strong { font-size: 1.3rem; }

/* Homepage: het hero-beeld loopt door achter de transparante header. Zolang je niet scrollt
   valt de header over het beeld met WITTE tekst, logo en hamburger; bij scroll verschijnt de
   normale witte balk (met de standaard donkere kleuren). Alleen desktop — mobiel is de hero
   gestapeld, dus daar blijft de header gewoon. */
.tgs-topnav a { transition: color .3s ease; }
.tgs-burger span { transition: background-color .3s ease; }
.tgs-logo img { transition: filter .3s ease; }
/* Twee logo's: alleen op home (niet-gescrold) het ronde seahorse-mark; bij scroll én op alle
   andere pagina's het woordmerk. Geen hover-wissel. */
.tgs-logo .tgs-logo__mark { display: none; width: auto; }
@media (min-width: 901px) {
	body.home .tgs-herostage { margin-top: -94px; } /* = header-hoogte: beeld schuift onder de header */
	body.home .tgs-header:not(.is-scrolled) .tgs-logo__word { display: none; }
	body.home .tgs-header:not(.is-scrolled) .tgs-logo__mark { display: block; height: 60px; }
	body.home .tgs-header:not(.is-scrolled) .tgs-topnav a,
	body.home .tgs-header:not(.is-scrolled) .tgs-topnav .tgs-navroll__ch > span:not(.tgs-navroll__dup) { color: #fff; }
	body.home .tgs-header:not(.is-scrolled) .tgs-burger span { background-color: #fff; }
	body.home .tgs-header:not(.is-scrolled) .tgs-logo img { filter: brightness(0) invert(1); }
	/* Bij open mega-menu (licht paneel) moet het kruisje donker zijn — anders is de witte X
	   op home (nog niet gescrold) onzichtbaar. */
	html.is-menu-open body.home .tgs-header:not(.is-scrolled) .tgs-burger span { background-color: var(--tgs-green); }
}

/* Subtiel kruimelpad op diepere pagina's. */
.tgs-crumbs { padding: clamp(14px, 2vw, 24px) 0 clamp(6px, 1vw, 12px); }
.tgs-crumbs .tgs-container { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; max-width: var(--tgs-max); }
.tgs-crumbs__link, .tgs-crumbs__current, .tgs-crumbs__sep { font-family: var(--tgs-mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.tgs-crumbs__link { color: var(--tgs-ink); opacity: .5; text-decoration: none; transition: opacity .2s ease, color .2s ease; }
.tgs-crumbs__link:hover { opacity: 1; color: var(--tgs-green); }
.tgs-crumbs__current { color: var(--tgs-olive); }
.tgs-crumbs__sep { color: var(--tgs-ink); opacity: .28; }
.tgs-crumbs + .tgs-case-hero, .tgs-crumbs + .tgs-work-hero, .tgs-crumbs + .tgs-ab-hero { padding-top: clamp(10px, 1.4vw, 16px); }
.tgs-crumbs + .tgs-teammember { padding-top: clamp(14px, 2vw, 28px); }

/* Custom scrollbars in de huisstijl. */
html { scrollbar-width: thin; scrollbar-color: var(--tgs-green) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tgs-green); border-radius: 999px; border: 3px solid var(--tgs-bg); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--tgs-olive); }
.tgs-menu__panel { scrollbar-color: var(--tgs-green) transparent; }
.tgs-menu__panel::-webkit-scrollbar-thumb { border-color: var(--tgs-white); }

@media (prefers-reduced-motion: reduce) {
	.tgs-header { transition: none; }
	.tgs-header.is-hidden { transform: none; }
}
.tgs-burger {
	width: 40px; height: 24px;
	display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
	background: none; border: 0; cursor: pointer; padding: 0;
}
.tgs-burger:focus { outline: none; }
.tgs-burger:focus-visible { outline: none; }
.tgs-burger:focus-visible span { background: var(--tgs-pink); }
.tgs-burger span { display: block; height: 2px; width: 34px; background: var(--tgs-green); }
.tgs-logo {
	justify-self: center;
	text-align: center;
	font-family: var(--tgs-display);
	color: var(--tgs-green);
	text-transform: uppercase;
	line-height: 0.9;
	font-weight: 800;
}
.tgs-logo img { display: block; height: 32px; width: auto; transition: height .3s ease; }
.tgs-header.is-scrolled .tgs-logo img { height: 26px; }
.tgs-logo small { display: block; font-size: .7rem; letter-spacing: .18em; font-weight: 700; }
.tgs-logo strong { display: block; font-size: 1.5rem; letter-spacing: .04em; }
.tgs-topnav {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 1rem;
	color: var(--tgs-green);
}
.tgs-topnav a:hover { color: var(--tgs-pink); }

/* Geavanceerde nav-hover: de letters rollen gestaggerd omhoog weg en een gekleurde kopie rolt van onderaf in. */
.tgs-navroll { position: relative; display: inline-block; }
.tgs-navroll__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tgs-navroll__box { display: inline-flex; }
.tgs-navroll__ch { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.tgs-navroll__ch > span { display: block; color: var(--tgs-green); transition: transform .5s cubic-bezier(.65, .05, .2, 1); transition-delay: calc(var(--i, 0) * 26ms); }
.tgs-navroll__dup { position: absolute; inset: 0; transform: translateY(100%); color: var(--tgs-pink); }
.tgs-navroll:hover .tgs-navroll__ch > span:not(.tgs-navroll__dup) { transform: translateY(-100%); }
.tgs-navroll:hover .tgs-navroll__dup { transform: translateY(0); }
.tgs-navroll__sp { display: inline-block; }
/* Footer-links: basiskleur ink; actieve pagina staat roze. */
.tgs-footer__block .tgs-navroll__ch > span:not(.tgs-navroll__dup) { color: var(--tgs-ink); }
.tgs-navroll.is-active .tgs-navroll__ch > span:not(.tgs-navroll__dup) { color: var(--tgs-pink); }
@media (prefers-reduced-motion: reduce) {
	.tgs-navroll__dup { display: none; }
	.tgs-navroll__ch > span { transition: none; }
	.tgs-navroll:hover .tgs-navroll__ch > span { transform: none; color: var(--tgs-pink); }
}

/* Burger -> X */
.tgs-burger span { transition: transform .35s cubic-bezier(.65,.05,.2,1), opacity .3s ease, width .35s cubic-bezier(.65,.05,.2,1), background-color .3s ease; transform-origin: center; }
.tgs-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.tgs-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Hover (gesloten): lijntjes schuiven getrapt naar rechts, korter, en worden pink. */
.tgs-burger:not([aria-expanded="true"]):hover span { background: var(--tgs-pink); }
.tgs-burger:not([aria-expanded="true"]):hover span:nth-child(1) { width: 24px; transform: translateX(10px); }
.tgs-burger:not([aria-expanded="true"]):hover span:nth-child(2) { width: 18px; transform: translateX(16px); transition-delay: .05s; }

/* Hover op de X (geopend): draait rond, schaalt licht op en wordt pink. */
.tgs-burger[aria-expanded="true"] { transition: transform .45s cubic-bezier(.65,.05,.2,1); }
.tgs-burger[aria-expanded="true"]:hover { transform: rotate(90deg) scale(1.12); }
.tgs-burger[aria-expanded="true"]:hover span { background: var(--tgs-pink); }

/* ==========================================================================
   Mega-menu / dropdown
   ========================================================================== */
html.is-menu-open, html.is-menu-open body { overflow: hidden; }
/* Scroll-lock breekt position:sticky -> header vast bovenaan houden zolang menu open is. */
.is-menu-open .tgs-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 65;
	transform: none !important;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
/* Logo op ware grootte zolang menu open is (niet het gecondenseerde formaat). */
.is-menu-open .tgs-header .tgs-container { padding-top: 26px; padding-bottom: 22px; }
.is-menu-open .tgs-header .tgs-logo img { height: 32px; }

.tgs-menu {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: var(--tgs-bg);
	padding: 12px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility 0s .35s;
}
.is-menu-open .tgs-menu {
	opacity: 1;
	visibility: visible;
	transition: opacity .35s ease;
}
.tgs-menu__panel {
	height: 100%;
	background: var(--tgs-white);
	border-radius: var(--tgs-radius);
	overflow-y: auto;
	padding: clamp(96px, 12vh, 140px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 56px);
	transform: translateY(-14px);
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.is-menu-open .tgs-menu__panel { transform: none; }

.tgs-menu__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	min-height: 100%;
}
.tgs-menu__left { display: flex; flex-direction: column; }

.tgs-menu__links { display: flex; flex-direction: column; margin-bottom: auto; }
.tgs-menu__links a {
	font-family: var(--tgs-display);
	font-weight: 800;
	color: var(--tgs-ink);
	font-size: clamp(1.9rem, 3.6vw, 3.2rem);
	line-height: 1;
	padding: clamp(18px, 2vw, 28px) 0;
	border-bottom: 1px solid var(--tgs-grey);
	transition: color .2s ease, padding-left .2s ease;
}
.tgs-menu__links > a:first-child { border-top: 1px solid var(--tgs-grey); } /* alleen de eerste hoofdlink, niet geneste sub-links */
.tgs-menu__links a:hover { color: var(--tgs-pink); padding-left: 12px; }

/* Diensten-accordion: de hoofdlink houdt de grote stijl; de rand zit op de rij zodat het
   scheidingslijntje volle breedte blijft, ook met de uitklap-chevron ernaast. */
.tgs-menu__acc-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--tgs-grey); }
.tgs-menu__acc-head > a { flex: 1; border: 0; }
/* Uitklapbare subdiensten onder "Diensten" — overal (mobiel én desktop). */
.tgs-menu__acc-toggle {
	display: flex; align-items: center; background: none; border: 0; margin: 0;
	padding: 10px 2px 10px 12px; cursor: pointer; color: var(--tgs-ink);
	-webkit-tap-highlight-color: transparent;
}
.tgs-menu__acc-toggle svg { width: 26px; height: 26px; display: block; transition: transform .3s ease; }
.tgs-menu__acc.is-open .tgs-menu__acc-toggle svg { transform: rotate(180deg); }
.tgs-menu__acc-list {
	display: block; list-style: none; margin: 0; padding: 0;
	max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.4, 0, .2, 1);
}
.tgs-menu__acc.is-open .tgs-menu__acc-list { max-height: 80vh; }
.tgs-menu__acc-list a { display: block; font-family: var(--tgs-body); font-weight: 400; font-size: 1.1rem; color: var(--tgs-ink); padding: 12px 0 12px 6px; border: 0; }
.tgs-menu__acc-list a:hover { color: var(--tgs-pink); }
.tgs-menu__acc-list li:last-child a { padding-bottom: 22px; }
/* De losse "Onze werkzaamheden"-sectie vervalt: de diensten staan nu onder "Diensten". */
.tgs-menu__services { display: none; }

.tgs-menu__foot { display: flex; gap: clamp(40px, 6vw, 90px); margin-top: 48px; }
.tgs-menu__foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tgs-menu__foot a { color: var(--tgs-ink); font-size: 1rem; }
.tgs-menu__foot a:hover { color: var(--tgs-pink); }

.tgs-menu__media {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 14px;
	min-height: 62vh;
}
.tgs-menu__img {
	position: relative;
	border-radius: var(--tgs-radius-sm);
	overflow: hidden;
	background-color: var(--tgs-green);
}
.tgs-menu__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.tgs-menu__img:hover img { transform: scale(1.05); }
.tgs-menu__img--tall { grid-row: 1 / 3; }
/* Dynamische Team-carousel in het mega-menu: portretten faden, bullets om door te klikken. */
.tgs-menu__img--team .tgs-menu__teamimg { opacity: 0; transition: opacity .6s ease, transform .5s cubic-bezier(.4,0,.2,1); }
.tgs-menu__img--team .tgs-menu__teamimg.is-active { opacity: 1; }
.tgs-menu__teamdots { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; gap: 7px; }
.tgs-menu__teamdot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s cubic-bezier(.4,0,.2,1), background .25s ease; }
.tgs-menu__teamdot:hover { background: rgba(255, 255, 255, .85); }
.tgs-menu__teamdot.is-active { width: 20px; background: var(--tgs-white); }

/* Verborgen SVG-defs (clip-paths) buiten beeld. */
.tgs-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tgs-menu__img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
}
.tgs-menu__imglabel {
	position: absolute;
	left: 20px;
	bottom: 16px;
	z-index: 1;
	font-family: var(--tgs-display);
	font-weight: 800;
	font-size: clamp(1.2rem, 1.8vw, 1.7rem);
	color: var(--tgs-white);
}
.tgs-menu__img:hover { filter: brightness(.94); }

/* Diensten + subdiensten in het mega-menu (snelle navigatie). */
.tgs-menu__services { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--tgs-grey); padding-top: clamp(28px, 3vw, 44px); }
.tgs-menu__servlabel { display: block; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--tgs-olive); margin-bottom: clamp(20px, 2vw, 30px); }
.tgs-menu__servgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(22px, 2.6vw, 44px); }
.tgs-menu__servhead { display: inline-block; font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.05rem, 1.4vw, 1.4rem); line-height: 1; margin-bottom: 16px; transition: color .2s ease; }
.tgs-menu__servhead:hover { color: var(--tgs-pink); }
.tgs-menu__servcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tgs-menu__servcol li a { font-family: var(--tgs-body); color: var(--tgs-ink); font-size: .98rem; opacity: .78; transition: color .2s ease, opacity .2s ease, padding-left .2s ease; }
.tgs-menu__servcol li a:hover { color: var(--tgs-pink); opacity: 1; padding-left: 5px; }
@media (max-width: 560px) { .tgs-menu__servgrid { grid-template-columns: 1fr 1fr; } }

/* "Over ons" verschijnt alleen in de grote menulinks op mobiel (op desktop staat het in de previewbeelden). */
.tgs-menu__link-mobile { display: none; }
@media (max-width: 900px) {
	.tgs-menu__link-mobile { display: block; }
	/* Minder loze ruimte bovenaan (clearance voor de sluitknop blijft), zodat het menu eerder in beeld is. */
	.tgs-menu__panel { padding-top: clamp(60px, 8vh, 88px); }
	.tgs-menu__grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 44px); }
	/* Previewbeelden als swipebare strip: ruime tegels (4:5) die je horizontaal langs veegt,
	   i.p.v. drie opgepropte vierkantjes. Compact in hoogte, maar met lucht en leesbare labels. */
	.tgs-menu__media {
		min-height: 0;
		display: flex;
		grid-template-columns: none;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.tgs-menu__media::-webkit-scrollbar { display: none; }
	.tgs-menu__img,
	.tgs-menu__img--tall {
		grid-row: auto; grid-column: auto;
		flex: 0 0 66%;
		max-width: 260px;
		aspect-ratio: 4 / 5;
		scroll-snap-align: start;
	}
	.tgs-menu__imglabel { font-size: .95rem; }
	.tgs-menu__foot { margin-top: 28px; }
}
@media (max-width: 560px) {
	/* De twee kolommen (Blogs/Ervaringen en Instagram/LinkedIn) naast elkaar houden i.p.v. stapelen. */
	.tgs-menu__foot { flex-direction: row; gap: clamp(32px, 14vw, 72px); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.tgs-hero { padding-top: 4px; --tgs-hero-h: calc(min(100vw, var(--tgs-max) - 2 * var(--tgs-pad)) * 739 / 1376); }
.tgs-hero__box {
	position: relative;
	border-radius: var(--tgs-radius);
	overflow: hidden;
	aspect-ratio: 1376 / 739;
}
/* Hero start full-bleed (edge-to-edge) en gaat bij scrollen naar de boxed container.
   Alleen op desktop. De sectie heeft een VASTE hoogte en de box is absoluut gepositioneerd;
   alleen de zijkanten + ronding animeren. Zo verschuift de pagina eronder NIET mee — geen
   reflow, dus een schokvrije overgang. */
@media (min-width: 901px) {
	/* Pin-stage: de hero blijft (sticky) hangen onder de nav en boxt tijdens de eerste ~60vh
	   scroll volledig in; daarna geeft de sticky los en scroll je eroverheen. */
	.tgs-herostage {
		position: relative;
		/* Variabele hier definiëren (niet alleen op .tgs-hero) — custom properties erven naar
		   beneden, dus de stage moet 'm zelf kennen om de pin-hoogte te kunnen berekenen. */
		--tgs-hero-h: calc(min(100vw, var(--tgs-max) - 2 * var(--tgs-pad)) * 739 / 1376);
		height: calc(var(--tgs-hero-h) + 60vh);
	}
	.tgs-hero { position: sticky; top: 0; overflow-x: clip; height: var(--tgs-hero-h); padding-top: 0; }
	.tgs-hero .tgs-container { display: contents; } /* box positioneert t.o.v. de sectie */
	.tgs-hero__box {
		position: absolute; top: 0; bottom: 0; aspect-ratio: auto;
		/* Zijkanten + ronding worden door JS scroll-gestuurd gezet: van full-bleed → boxed onder de nav. */
		left: 0; right: 0; border-radius: 0;
		will-change: left, right, border-radius;
	}
	/* Fallback zonder JS: full-bleed blijft. */
}
.tgs-hero__box img { width: 100%; height: 100%; object-fit: cover; }
.tgs-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tgs-hero__grad {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
}
.tgs-hero__title {
	position: absolute;
	left: clamp(24px, 3vw, 48px);
	bottom: clamp(24px, 3vw, 44px);
	color: var(--tgs-white);
	font-size: var(--tgs-h-hero);
	max-width: 60%;
	margin: 0;
}
.tgs-hero__pill {
	position: absolute;
	right: clamp(24px, 3vw, 44px);
	bottom: clamp(24px, 3vw, 44px);
}
/* Pagina-laad-animatie hero: kaart glijdt omhoog, beeld settelt in, titel rijst, pill popt. */
.tgs-hero__box { animation: tgs-fade-rise 1s cubic-bezier(.2, .65, .2, 1) both; }
.tgs-hero__box img { animation: tgs-hero-zoom 1.9s cubic-bezier(.2, .65, .2, 1) both; }
.tgs-hero__title { animation: tgs-fade-rise .9s cubic-bezier(.2, .65, .2, 1) .35s both; }
.tgs-hero__pill { animation: tgs-fade-pop .7s cubic-bezier(.2, .65, .2, 1) .62s both; }
@keyframes tgs-fade-rise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
@keyframes tgs-hero-zoom { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes tgs-fade-pop { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
/* Speels surf-detail: bij hover over de hero-titel deinen de letters als een golf door de tekst. */
.tgs-hero__word { display: inline-block; }
.tgs-hero__ch { display: inline-block; will-change: transform; }
@keyframes tgs-hero-wave { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-0.14em); } }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.tgs-hero__title:hover .tgs-hero__ch { animation: tgs-hero-wave 1.05s ease-in-out infinite; animation-delay: calc(var(--i) * -0.05s); }
}
/* Entree-animatie voor de grote paginatitels (H1): opkomen + van boven naar onder onthullen. */
.tgs-work-hero__title,
.tgs-ab-hero__title,
.tgs-case-hero__title,
.tgs-teammember__name,
.bb-page-title { animation: tgs-title-in 1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tgs-title-in {
	from { opacity: 0; transform: translateY(30px); clip-path: inset(0 0 105% 0); }
	to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 -15% 0); }
}
@media (prefers-reduced-motion: reduce) {
	.tgs-work-hero__title, .tgs-ab-hero__title, .tgs-case-hero__title, .tgs-teammember__name, .bb-page-title { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tgs-hero__box, .tgs-hero__box img, .tgs-hero__title, .tgs-hero__pill { animation: none; }
}

/* ==========================================================================
   Intro-paragraaf
   ========================================================================== */
.tgs-intro {
	padding: clamp(64px, 9vw, 130px) 0 clamp(48px, 7vw, 90px);
	text-align: center;
}
.tgs-intro__more { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 44px); }
.tgs-intro p {
	max-width: 900px;
	margin: 0 auto;
	font-size: var(--tgs-lead);
	line-height: 1.35;
	color: var(--tgs-ink);
	font-weight: 400;
}
.tgs-divider { height: 1px; background: var(--tgs-grey); border: 0; margin: clamp(28px, 4vw, 64px) 0; }
/* Dunne lijntjes tekenen zich van links naar rechts zodra ze in beeld scrollen (JS zet .tgs-anim-lines). */
.tgs-anim-lines .tgs-divider,
.tgs-anim-lines .tgs-footer__bottom::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.tgs-anim-lines .tgs-divider.is-drawn,
.tgs-anim-lines .tgs-footer__bottom.is-drawn::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
	.tgs-anim-lines .tgs-divider,
	.tgs-anim-lines .tgs-footer__bottom::before { transform: none; transition: none; }
}
/* Balanceer de ruimte onder de divider (de divider heeft nu zelf verticale marge). */
.tgs-divider + .tgs-stories-wrap { padding-top: clamp(20px, 2.5vw, 40px); }

/* Scroll-reveal: elementen komen rustig binnen (fade + rise) zodra ze in beeld scrollen (JS zet de classes). */
.tgs-reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.tgs-reveal.tgs-reveal--fade { transform: translateY(0); }
.tgs-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.tgs-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Scroll-highlight: paragraaf-woorden kleuren van dof naar vol naarmate je scrolt (JS zet .is-hl-ready + .is-on). */
[data-highlight-text].is-hl-ready .tgs-hl__w { color: rgba(41, 41, 41, .22); transition: color .25s linear; }
[data-highlight-text].is-hl-ready .tgs-hl__w.is-on { color: var(--tgs-ink); }
@media (prefers-reduced-motion: reduce) {
	[data-highlight-text].is-hl-ready .tgs-hl__w { color: var(--tgs-ink); }
}

/* ==========================================================================
   Diensten (genummerde lijst)
   ========================================================================== */
.tgs-services { padding: clamp(48px, 6vw, 80px) 0 var(--tgs-section); }
.tgs-services__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(36px, 5vw, 72px);
}
.tgs-services__head h2 { font-size: var(--tgs-h1); text-align: right; max-width: 60%; }
/* Losse 'Bekijk meer' onder de dienstenlijst (alleen mobiel). */
.tgs-services__foot { display: none; margin-top: 32px; }
.tgs-service {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(220px, 1fr) 1.2fr 56px;
	align-items: center;
	column-gap: 24px;
	row-gap: 0; /* geen extra rij-ruimte onder de dichtgeklapte subdiensten → boven/onder gelijk */
	padding: 22px 0;
	border-top: 1px solid var(--tgs-grey);
}
/* Stretched link: de hele rij blijft klikbaar naar de dienstpagina; de subdiensten liggen erboven. */
.tgs-service__title { text-decoration: none; }
.tgs-service__title::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tgs-service:not(:has(~ .tgs-service)) { border-bottom: 1px solid var(--tgs-grey); }
.tgs-service__num { font-size: .85rem; color: var(--tgs-ink); }
.tgs-service__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.tgs-service__desc { color: var(--tgs-ink); font-size: 1.0625rem; }
.tgs-service:hover .tgs-arrow { background: var(--tgs-amber); }
/* Subdiensten die bij hover onder de dienst uitklappen, zodat je direct ziet wat er binnen valt. */
.tgs-service__subs {
	grid-column: 2 / -1; /* uitgelijnd onder titel/omschrijving, niet onder het nummer */
	display: flex; flex-wrap: wrap; gap: 8px 10px;
	max-height: 0; overflow: hidden;
	transition: max-height .5s cubic-bezier(.4, 0, .2, 1), margin-top .4s ease;
}
.tgs-service:hover .tgs-service__subs,
.tgs-service:focus-within .tgs-service__subs { max-height: 240px; margin-top: 16px; }
.tgs-service__sub {
	position: relative; z-index: 2; /* boven de stretched link, dus los klikbaar */
	/* Exact dezelfde pill als de knop (zonder de pijl-bubbel): zelfde hoogte, padding, ronding en gewicht. */
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--tgs-body); font-size: .95rem; font-weight: 500; line-height: 1; color: var(--tgs-ink);
	background: var(--tgs-white); border: 0;
	border-radius: 10em; height: 3.75em; padding: 0 2em; text-decoration: none;
	box-shadow: 0 4px 14px rgba(30, 76, 59, .10);
	/* Gestaggerde entree: elke pill veert omhoog + fade-in; op muis-uit vallen ze samen weg. */
	opacity: 0; transform: translateY(12px) scale(.96);
	transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1),
		background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tgs-service:hover .tgs-service__sub,
.tgs-service:focus-within .tgs-service__sub { opacity: 1; transform: none; }
.tgs-service:hover .tgs-service__sub:nth-child(1) { transition-delay: .05s; }
.tgs-service:hover .tgs-service__sub:nth-child(2) { transition-delay: .11s; }
.tgs-service:hover .tgs-service__sub:nth-child(3) { transition-delay: .17s; }
.tgs-service:hover .tgs-service__sub:nth-child(4) { transition-delay: .23s; }
.tgs-service:hover .tgs-service__sub:nth-child(5) { transition-delay: .29s; }
.tgs-service:hover .tgs-service__sub:nth-child(6) { transition-delay: .35s; }
.tgs-service__sub:hover { background: var(--tgs-green); color: var(--tgs-cream); box-shadow: 0 6px 18px rgba(30, 76, 59, .18); }
@media (prefers-reduced-motion: reduce) {
	.tgs-service__sub { transform: none; transition: opacity .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
	.tgs-service:hover .tgs-service__sub { transition-delay: 0s; }
}

/* Cursor-follower beeldpreview op de diensten-lijst (desktop, met muis) */
.tgs-services { position: relative; }
.tgs-services:has(.tgs-service:hover) .tgs-service:not(:hover) { opacity: .45; }
@media (hover: none), (prefers-reduced-motion: reduce) {
	.tgs-services:has(.tgs-service:hover) .tgs-service:not(:hover) { opacity: 1; }
}

/* ==========================================================================
   Projecten (wit paneel + gekantelde kaarten)
   ========================================================================== */
.tgs-projects {
	position: relative;
	margin-top: var(--tgs-section);
	padding: clamp(56px, 6vw, 108px) 0 clamp(56px, 6vw, 96px); /* boven-/onderruimte: bolletjes vallen binnen het witte vak, los van de sectie eronder */
}
.tgs-projects::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: max(var(--tgs-pad), calc((100% - var(--tgs-max)) / 2 + var(--tgs-pad)));
	right: max(var(--tgs-pad), calc((100% - var(--tgs-max)) / 2 + var(--tgs-pad)));
	top: 24px;
	bottom: 48px;
	background: var(--tgs-white);
	border-radius: 44px;
}
.tgs-projects__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 0 32px;
	margin-bottom: clamp(32px, 4vw, 56px);
}
.tgs-projects__head h2 { font-size: var(--tgs-h1); }

/* Slider met losse projectkaarten (dynamisch uit CPT) */
.tgs-projects__actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* Pijlen alleen tonen als er iets te scrollen valt (JS zet .is-scrollable). */
.tgs-projects:not(.is-scrollable) .tgs-js-prev,
.tgs-projects:not(.is-scrollable) .tgs-js-next { display: none; }
.tgs-stories:not(.is-scrollable) .tgs-stories__nav { display: none; }
/* Losse 'Bekijk meer' onder de slider (alleen mobiel). */
.tgs-projects__foot { display: none; position: relative; z-index: 1; padding: 0 var(--tgs-pad); margin-top: 20px; }
button.tgs-arrow { border: 0; padding: 0; cursor: pointer; }
button.tgs-arrow:disabled { opacity: .35; cursor: default; }
.tgs-arrow--flip svg { transform: rotate(180deg); }

.tgs-projects__stage { position: relative; z-index: 1; }
/* Dynamische bullets onder de team-slider. */
.tgs-projects__dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: clamp(18px, 2vw, 30px); position: relative; z-index: 1; }
.tgs-projects__dots.is-hidden { display: none; }
.tgs-projects__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: var(--tgs-grey); cursor: pointer; transition: width .3s cubic-bezier(.4,0,.2,1), background .25s ease; }
.tgs-projects__dot:hover { background: var(--tgs-olive); }
.tgs-projects__dot.is-active { width: 30px; background: var(--tgs-green); }
@media (prefers-reduced-motion: reduce) { .tgs-projects__dot { transition: none; } }
.tgs-projects__grid {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: safe center;
	flex-wrap: nowrap;
	gap: 0;
	padding: clamp(24px, 2.5vw, 40px) clamp(20px, 4vw, 48px) clamp(120px, 12vw, 180px);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	scroll-padding-left: clamp(20px, 4vw, 48px);
	scroll-behavior: smooth;
	cursor: grab;
	overscroll-behavior-x: contain;
}
.tgs-projects__grid::-webkit-scrollbar { display: none; }
.tgs-projects__grid.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.tgs-projects__grid.is-dragging a { pointer-events: none; }
.tgs-project {
	flex: 0 0 auto;
	position: relative;
	scroll-snap-align: center;
}
.tgs-project:not(:first-child) { margin-left: clamp(-80px, -4.5vw, -40px); }
.tgs-project:hover { z-index: 5; }
/* Speelse kanteling + hoogteverspringing per kaart (6-cyclus), i.p.v. inline styles. */
.tgs-projects__grid .tgs-project:nth-child(6n+1) { --rot: -7deg; --shift: 12px; }
.tgs-projects__grid .tgs-project:nth-child(6n+2) { --rot: 5deg; --shift: 26px; }
.tgs-projects__grid .tgs-project:nth-child(6n+3) { --rot: -5deg; --shift: -24px; }
.tgs-projects__grid .tgs-project:nth-child(6n+4) { --rot: 6deg; --shift: 20px; }
.tgs-projects__grid .tgs-project:nth-child(6n+5) { --rot: -6deg; --shift: 4px; }
.tgs-projects__grid .tgs-project:nth-child(6n+6) { --rot: 5deg; --shift: -6px; }
.tgs-project__card {
	position: relative;
	display: block;
	width: clamp(250px, 25vw, 350px);
	aspect-ratio: 346 / 422;
	overflow: hidden;
	/* Organische maskervorm uit het design (Rectangle 34): foto geclipt naar de vorm. */
	-webkit-clip-path: url("#tgs-cardclip");
	clip-path: url("#tgs-cardclip");
	transform: rotate(var(--rot, 0deg)) translateY(var(--shift, 0px));
	transition: transform .3s ease, filter .3s ease;
	color: var(--tgs-white);
	filter: drop-shadow(0 10px 22px rgba(0,0,0,.12));
}
.tgs-project__card:hover {
	transform: rotate(0deg) translateY(-10px) scale(1.03);
	filter: drop-shadow(0 18px 34px rgba(0,0,0,.20));
	z-index: 2;
}
.tgs-project__card img { width: 100%; height: 100%; object-fit: cover; }
/* Amber rand die exact de maskervorm volgt. vector-effect=non-scaling-stroke houdt de lijn
   overal even dik, ook als de vorm naar een andere verhouding wordt gerekt (brede cases). */
.tgs-project__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20346%20422'%20preserveAspectRatio='none'%3E%3Cpath%20d='M44.4138%2010.5863L297.531%201.52901C323.186%200.611069%20344.294%2021.5311%20343.607%2047.1928L334.99%20368.768C334.361%20392.256%20315.579%20411.208%20292.097%20412.048L79.8808%20419.642C56.4369%20420.481%2036.3676%20402.976%2034.0136%20379.636L1.72929%2059.5229C-0.85035%2033.9432%2018.7208%2011.5056%2044.4138%2010.5863Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 3;
}

.tgs-project__label {
	position: absolute;
	/* Binnen de veilige zone van de maskervorm (onderhoeken buigen naar binnen). */
	left: 13%; right: 8%; bottom: 10%;
	font-family: var(--tgs-display);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--tgs-white);
	font-size: clamp(1.4rem, 1.9vw, 2.05rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 10px rgba(0,0,0,.5);
	z-index: 1;
}
/* Op case-kaarten: jaartal klein eyebrow, opdrachtgever groot (prominent), slogan op hover. */
.tgs-project__year { display: block; font-family: var(--tgs-mono); font-weight: 400; font-size: .72rem; letter-spacing: .1em; color: var(--tgs-amber); margin-bottom: 5px; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.tgs-project__client { display: block; font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-white); line-height: .95; letter-spacing: -.01em; }
/* Slogan blijft in de DOM (voedt het hover-cursorlabel) maar staat niet statisch op de kaart. */
.tgs-project__slogan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tgs-project__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%); }

/* Sfeerbeelden — horizontaal scrollbare slider met pijltjes (geen auto-loop, geen edge-fade).
   Twee rijen; per set staande tegels (1 kolom, ~3:4) en brede liggende paren (2 kolommen). */
.tgs-projects--sfeer::before { content: none; } /* geen wit paneel */
.tgs-projects--sfeer .tgs-projects__grid {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-auto-flow: column;
	grid-auto-columns: clamp(200px, 16vw, 250px);
	justify-content: start; align-items: stretch; /* override de flex-center uit de basisregel */
	gap: clamp(14px, 1.6vw, 24px);
	height: clamp(540px, 64vw, 720px); /* rij ~1,33x kolombreedte → staande tegels ~3:4 */
	overflow-x: auto; scrollbar-width: none;
	/* eerste tegel uitgelijnd op de content-kolom (linkerrand van de kop); pijltjes scrollen verder */
	padding: clamp(20px, 3vw, 40px) var(--tgs-pad);
	padding-left: max(var(--tgs-pad), calc((100% - var(--tgs-max)) / 2 + var(--tgs-pad)));
	scroll-snap-type: x proximity;
	scroll-padding-left: max(var(--tgs-pad), calc((100% - var(--tgs-max)) / 2 + var(--tgs-pad)));
}
.tgs-projects--sfeer .tgs-projects__grid::-webkit-scrollbar { display: none; }
/* Alle tegels 1 rij hoog; variatie zit in de breedte: staand = 1 kolom, breed = 2 kolommen (paar). */
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n+3),
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n) { grid-column: span 2; }
/* Sfeerfoto's in de huisstijl-kaartvorm: organisch masker op de foto, gele rand eromheen. */
.tgs-sfeer {
	position: relative; margin: 0; scroll-snap-align: start;
	min-height: 0; min-width: 0; /* laat de 1fr-rijen gelijk blijven i.p.v. meegroeien met staande foto's */
	transform: rotate(var(--rot, 0deg));
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
/* Hover: hele tegel (foto + rand samen) licht opschalen — plat, geen gekleurde schaduw. */
.tgs-sfeer:hover { transform: rotate(var(--rot, 0deg)) scale(1.045); z-index: 3; }
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n+1) { --rot: -1.6deg; }
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n+2) { --rot: 1.4deg; }
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n+3) { --rot: -1.2deg; }
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n+4) { --rot: 1.8deg; }
.tgs-sfeer img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	-webkit-clip-path: url("#tgs-cardclip"); clip-path: url("#tgs-cardclip");
}
/* Brede beelden krijgen het liggende masker. */
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n+3) img,
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n) img { -webkit-clip-path: url("#tgs-mask-wide"); clip-path: url("#tgs-mask-wide"); }
.tgs-sfeer::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20346%20422'%20preserveAspectRatio='none'%3E%3Cpath%20d='M44.4138%2010.5863L297.531%201.52901C323.186%200.611069%20344.294%2021.5311%20343.607%2047.1928L334.99%20368.768C334.361%20392.256%20315.579%20411.208%20292.097%20412.048L79.8808%20419.642C56.4369%20420.481%2036.3676%20402.976%2034.0136%20379.636L1.72929%2059.5229C-0.85035%2033.9432%2018.7208%2011.5056%2044.4138%2010.5863Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Brede beelden: liggende gele rand die het brede masker volgt. */
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n+3)::after,
.tgs-projects--sfeer .tgs-sfeer:nth-child(4n)::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M7.029%200.375%20L93.308%205.036%20C97.109%205.242%20100.018%2010.737%2099.657%2017.031%20L95.501%2089.505%20C95.171%2095.266%2092.204%2099.608%2088.724%2099.420%20L8.014%2095.060%20C4.540%2094.872%201.751%2090.233%201.639%2084.458%20L0.226%2011.684%20C0.103%205.355%203.222%200.170%207.029%200.375Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
@media (max-width: 600px) { .tgs-projects--sfeer .tgs-projects__grid { height: clamp(440px, 108vw, 560px); grid-auto-columns: clamp(150px, 40vw, 200px); } }

/* Hover: cursor-volgend popup-tipje met de case-intro die horizontaal op 1 regel voorbij scrolt. */
.tgs-project-tip {
	position: fixed; top: 0; left: 0; z-index: 60;
	width: min(420px, 72vw);
	padding: 12px 20px;
	background: var(--tgs-green); color: var(--tgs-white);
	border-radius: 999px; box-shadow: 0 16px 40px rgba(0,0,0,.24);
	pointer-events: none;
	opacity: 0; will-change: transform, opacity, clip-path;
	/* Openklappen: het pilletje rolt van links open. */
	clip-path: inset(0 100% 0 0 round 999px);
	transition: opacity .18s ease, clip-path .42s cubic-bezier(.2,.85,.25,1);
}
.tgs-project-tip.is-visible { opacity: 1; clip-path: inset(0 0 0 0 round 999px); }
.tgs-project-tip__scroll {
	display: block; overflow: hidden; white-space: nowrap;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 88%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 88%, transparent 100%);
}
.tgs-project-tip__track { display: inline-block; white-space: nowrap; }
/* Begin blijft 1,5s stil staan (leesbaar), daarna scrolt de tekst rustig door. */
.tgs-project-tip.is-visible .tgs-project-tip__track { animation: tgs-tip-marquee 22s linear 1.5s infinite; }
.tgs-project-tip__copy {
	display: inline-block; white-space: nowrap; padding-right: 3.5em;
	font-family: var(--tgs-body); font-size: .95rem; line-height: 1.5;
}
@keyframes tgs-tip-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.tgs-project-tip { display: none !important; }
}

/* ==========================================================================
   Werk-archief (Projects Archive)
   ========================================================================== */
.tgs-work-hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(28px, 3.5vw, 48px); }
.tgs-work-hero__title { font-size: var(--tgs-h-hero); color: var(--tgs-green); margin: 0 0 clamp(16px, 2vw, 24px); }
.tgs-work-hero__intro {
	font-family: var(--tgs-body); color: var(--tgs-green);
	font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; max-width: 56ch;
}

.tgs-workfilter { text-align: center; padding-bottom: clamp(36px, 4.5vw, 64px); }
.tgs-workfilter__title { font-size: var(--tgs-h2); color: var(--tgs-green); margin: 0 0 clamp(20px, 2.5vw, 32px); }
.tgs-workfilter__pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Jaar-filter als subtiele dropdown (secundair aan de branche-pillen). */
.tgs-workfilter__year { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; }
.tgs-workfilter__yearlabel { font-family: var(--tgs-mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tgs-ink); opacity: .55; }
.tgs-yearselect {
	font-family: var(--tgs-body); font-size: .95rem; color: var(--tgs-ink);
	padding: 8px 40px 8px 16px; border: 1.5px solid var(--tgs-grey); border-radius: 999px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231e4c3b'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 13px;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	cursor: pointer; transition: border-color .2s ease;
}
.tgs-yearselect:hover { border-color: var(--tgs-ink); }
.tgs-yearselect:focus-visible { outline: 2px solid var(--tgs-blue); outline-offset: 2px; }
.tgs-fpill {
	font-family: var(--tgs-body); font-size: 1rem; line-height: 1;
	padding: 13px 28px; border-radius: 999px;
	border: 1.5px solid var(--tgs-grey); background: transparent; color: var(--tgs-ink);
	cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tgs-fpill:hover { border-color: var(--tgs-green); }
.tgs-fpill.is-active { background: var(--tgs-blue); border-color: var(--tgs-blue); color: var(--tgs-ink); }

.tgs-worklist { padding-bottom: var(--tgs-section); }
.tgs-workgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 28px); grid-auto-flow: row dense; align-items: start; }
.tgs-workcard { display: block; color: var(--tgs-white); perspective: 900px; }
.tgs-workgrid .tgs-project__card { width: 100%; aspect-ratio: var(--asp, 3 / 4); transform: rotate(var(--rot, 0deg)); transition: transform .18s ease, filter .3s ease; }
/* Wisselende beeldverhouding per werkkaart (6-cyclus), i.p.v. inline styles. */
.tgs-workgrid .tgs-workcard:nth-child(6n+1) { --asp: 3 / 4; }
.tgs-workgrid .tgs-workcard:nth-child(6n+2) { --asp: 3 / 4; }
.tgs-workgrid .tgs-workcard:nth-child(6n+3) { --asp: 3 / 4; } /* wordt breed gemaakt in het blok hieronder */
.tgs-workgrid .tgs-workcard:nth-child(6n+4) { --asp: 3 / 4; }
.tgs-workgrid .tgs-workcard:nth-child(6n+5) { --asp: 3 / 4; }
.tgs-workgrid .tgs-workcard:nth-child(6n+6) { --asp: 3 / 4; }
.tgs-workgrid .tgs-workcard:hover .tgs-project__card { transform: rotate(var(--rot, 0deg)) translateY(-10px) scale(1.03); }
/* Sommige kaarten met verticaal omgedraaid masker (smal boven, breed onder) voor variatie. */
.tgs-workgrid .tgs-workcard:nth-child(6n+2) .tgs-project__card,
.tgs-workgrid .tgs-workcard:nth-child(6n+5) .tgs-project__card {
	-webkit-clip-path: url("#tgs-cardclip-flip");
	clip-path: url("#tgs-cardclip-flip");
}
.tgs-workgrid .tgs-workcard:nth-child(6n+2) .tgs-project__card::after,
.tgs-workgrid .tgs-workcard:nth-child(6n+5) .tgs-project__card::after {
	transform: scaleY(-1);
}
/* Af en toe een breed/liggend masker tussendoor (zoals de "HUMAN DIMENSIONS"-kaart in Figma):
   loopt over 2 van de 3 kolommen. */
.tgs-workgrid .tgs-workcard:nth-child(6n+3) { --asp: 16 / 9; grid-column: span 2; }
.tgs-workgrid .tgs-workcard:nth-child(6n+3) .tgs-project__card {
	-webkit-clip-path: url("#tgs-mask-wide");
	clip-path: url("#tgs-mask-wide");
}
.tgs-workgrid .tgs-workcard:nth-child(6n+3) .tgs-project__card::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M7.029%200.375%20L93.308%205.036%20C97.109%205.242%20100.018%2010.737%2099.657%2017.031%20L95.501%2089.505%20C95.171%2095.266%2092.204%2099.608%2088.724%2099.420%20L8.014%2095.060%20C4.540%2094.872%201.751%2090.233%201.639%2084.458%20L0.226%2011.684%20C0.103%205.355%203.222%200.170%207.029%200.375Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* Gekantelde maskers (zoals Figma): de organische vorm licht geroteerd, afwisselend per kaart. */
.tgs-workgrid .tgs-workcard:nth-child(6n+1) { --rot: -3deg; }
.tgs-workgrid .tgs-workcard:nth-child(6n+2) { --rot: 2.5deg; }
.tgs-workgrid .tgs-workcard:nth-child(6n+3) { --rot: -2deg; }
.tgs-workgrid .tgs-workcard:nth-child(6n+4) { --rot: 3deg; }
.tgs-workgrid .tgs-workcard:nth-child(6n+5) { --rot: -3.5deg; }
.tgs-workgrid .tgs-workcard:nth-child(6n+6) { --rot: 2deg; }
/* Case-kaart als div met stretched link, zodat de inline "Bewerk"-knop ernaast kan. */
.tgs-workcard { position: relative; }
.tgs-workcard__link { position: absolute; inset: 0; z-index: 2; }
.tgs-workcard.is-editing .tgs-workcard__link { pointer-events: none; }
.tgs-workcard.is-editing .tgs-project__label { position: relative; z-index: 5; }
.tgs-work-foot { margin-top: clamp(28px, 3vw, 44px); display: flex; justify-content: center; }
.tgs-work-foot .pagination, .tgs-work-foot .nav-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tgs-work-foot a, .tgs-work-foot .page-numbers {
	font-family: var(--tgs-body); padding: 12px 20px; border-radius: 999px;
	border: 1.5px solid var(--tgs-grey); color: var(--tgs-ink); text-decoration: none;
}
.tgs-work-foot .page-numbers.current { background: var(--tgs-blue); border-color: var(--tgs-blue); }
@media (max-width: 900px) { .tgs-workgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
	.tgs-workgrid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
	.tgs-workgrid .tgs-workcard:nth-child(6n+3) { grid-column: span 1; } /* breed vak niet breder dan 1 kolom op mobiel */
}

/* Case-detail (Project Single) */
.tgs-case-hero { padding-top: clamp(28px, 3.5vw, 52px); }
.tgs-case-hero__head { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 4vw, 60px); }
.tgs-case-hero__rule { margin: clamp(22px, 3vw, 40px) 0; }
.tgs-case-hero__title { font-size: var(--tgs-h-hero); color: var(--tgs-green); margin: 0 0 clamp(14px, 1.8vw, 22px); }
.tgs-case-hero__intro { font-family: var(--tgs-body); color: var(--tgs-green); font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; max-width: 52ch; }
.tgs-case-hero__meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; flex: none; justify-content: flex-end; align-items: flex-start; max-width: 520px; }
.tgs-metapill { padding: 12px 24px; border-radius: 999px; border: 0; background: var(--tgs-white); font-family: var(--tgs-body); font-size: .95rem; color: var(--tgs-ink); text-align: center; box-shadow: 0 6px 22px rgba(30, 76, 59, .07); }
.tgs-metapill__label { color: var(--tgs-ink); opacity: .45; }

/* Case-detail: tekst + beeld als samenhangend geheel (mozaiek). */
.tgs-casewrap { display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 64px); }
.tgs-casewrap__text { max-width: 820px; }
/* Projectfoto-slider (bij meerdere beelden): amber kader, faden, bollen + pijlen. */
.tgs-caseslider { scroll-margin-top: 110px; }
.tgs-caseslider__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--tgs-radius-leaf); overflow: hidden; border: 4px solid var(--tgs-amber); box-shadow: 0 14px 40px rgba(30, 76, 59, .08); }
.tgs-caseslide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; }
.tgs-caseslide.is-active { opacity: 1; }
.tgs-caseslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgs-caseslider__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .85); color: var(--tgs-green); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, color .2s ease; }
.tgs-caseslider__nav:hover { background: var(--tgs-green); color: var(--tgs-cream); }
.tgs-caseslider__nav--prev { left: 14px; }
.tgs-caseslider__nav--next { right: 14px; }
.tgs-caseslider__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tgs-caseslider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.tgs-caseslider__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: var(--tgs-grey); cursor: pointer; transition: width .3s cubic-bezier(.4,0,.2,1), background .25s ease; }
.tgs-caseslider__dot:hover { background: var(--tgs-olive); }
.tgs-caseslider__dot.is-active { width: 24px; background: var(--tgs-green); }
@media (prefers-reduced-motion: reduce) { .tgs-caseslide { transition: none; } }
/* Justified collage: rijen met gelijke hoogte, breedte volgt de beeldverhouding (--ar). */
.tgs-casegallery { --rh: clamp(200px, 22vw, 340px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(10px, 1vw, 18px); scroll-margin-top: 110px; }
/* 'Project overzicht' springt naar de fotogalerij; soepel scrollen (tenzij reduced-motion). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Rijen met gelijke hoogte; breedte = de eigen fotoverhouding (--ar), dus geen crop/uitrek. */
.tgs-casegallery__item { height: var(--rh); width: auto; flex: 0 0 auto; margin: 0; position: relative; overflow: hidden; background: var(--tgs-grey); -webkit-clip-path: url("#tgs-cardclip"); clip-path: url("#tgs-cardclip"); filter: drop-shadow(0 10px 22px rgba(30, 76, 59, .10)); }
.tgs-casegallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20346%20422'%20preserveAspectRatio='none'%3E%3Cpath%20d='M44.4138%2010.5863L297.531%201.52901C323.186%200.611069%20344.294%2021.5311%20343.607%2047.1928L334.99%20368.768C334.361%20392.256%20315.579%20411.208%20292.097%20412.048L79.8808%20419.642C56.4369%20420.481%2036.3676%20402.976%2034.0136%20379.636L1.72929%2059.5229C-0.85035%2033.9432%2018.7208%2011.5056%2044.4138%2010.5863Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 2;
}
/* Liggende beelden: liggende maskervorm zodat de organische hoeken niet uitrekken. */
.tgs-casegallery__item.is-wide { -webkit-clip-path: url("#tgs-mask-wide"); clip-path: url("#tgs-mask-wide"); }
.tgs-casegallery__item.is-wide::after {
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20675%20406'%20preserveAspectRatio='none'%3E%3Cpath%20d='M47.4459%201.52398L629.829%2020.4471C655.486%2021.281%20675.119%2043.5918%20672.683%2069.1468L644.634%20363.391C642.404%20386.781%20622.374%20404.408%20598.89%20403.644L54.0912%20385.943C30.6448%20385.181%2011.8168%20366.348%2011.06%20342.901L1.52345%2047.4358C0.694272%2021.7397%2021.75%200.689058%2047.4459%201.52398Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tgs-casegallery__item img { height: 100%; width: auto; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.5,.05,.2,1); }
.tgs-casegallery__item:hover img { transform: scale(1.04); }
/* Scroll-groei (klein → groot). Alleen met JS actief (class op <html>); JS zet zelf de schaal per scrollpositie. */
.tgs-grow-ready [data-scroll-grow] { transform: scale(.82); transform-origin: center; will-change: transform; }
@media (max-width: 600px) { .tgs-casegallery__item { width: 100%; height: auto; flex: 0 0 100%; } .tgs-casegallery__item img { width: 100%; height: auto; } }
.tgs-case-hero__media { border-radius: var(--tgs-radius-leaf); overflow: hidden; aspect-ratio: 16 / 8; border: 4px solid var(--tgs-amber); box-shadow: 0 14px 40px rgba(30, 76, 59, .08); }
/* Video-hero: houd de eigen verhouding van de video aan (geen crop), ook op mobiel. */
.tgs-case-hero__media--video { aspect-ratio: auto; }
.tgs-case-hero__media--video video { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .tgs-case-hero__media { aspect-ratio: 4 / 5; } .tgs-case-hero__media--video { aspect-ratio: auto; } }
.tgs-case-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.tgs-case-back { display: inline-block; margin-top: 16px; color: var(--tgs-green); font-family: var(--tgs-body); text-decoration: none; }
.tgs-case-back:hover { color: var(--tgs-pink); }
.tgs-case-body { padding: clamp(40px, 5vw, 72px) 0 0; }
/* Blog: featured image staat in de main-kolom zodat de snelnavigatie er direct naast begint. */
.tgs-case-body:has(.tgs-article__media) { padding-top: clamp(18px, 2.4vw, 34px); }
.tgs-article__media { margin-bottom: clamp(28px, 3vw, 48px); aspect-ratio: 16 / 10; }
.tgs-richtext { max-width: 820px; font-family: var(--tgs-body); color: var(--tgs-ink); font-size: 1.1875rem; line-height: 1.6; }
.tgs-richtext > * + * { margin-top: 1.1em; }
.tgs-richtext > p:first-of-type { font-size: 1.35rem; line-height: 1.5; color: var(--tgs-green); }
.tgs-richtext img { display: block; margin: 1.8em 0; }

/* Blog-single: artikel + sticky snelnavigatie (TOC) */
.tgs-article { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.tgs-article__main { min-width: 0; }
.tgs-article__main .tgs-richtext { max-width: 760px; }
.tgs-article__aside { position: sticky; top: 120px; align-self: start; }
.tgs-toc[hidden] { display: none; }
.tgs-toc { background: var(--tgs-white); border-radius: var(--tgs-radius); padding: clamp(28px, 2vw, 42px); box-shadow: 0 18px 50px rgba(30, 76, 59, .08); }
.tgs-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.tgs-toc__title { display: block; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; color: var(--tgs-olive); }
.tgs-toc__read { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tgs-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tgs-ink); opacity: .55; white-space: nowrap; }
.tgs-toc__readdot { width: 7px; height: 7px; border-radius: 50%; background: var(--tgs-amber); flex: none; }
.tgs-toc__progress { height: 4px; border-radius: 4px; background: var(--tgs-grey); overflow: hidden; margin-bottom: 28px; }
.tgs-toc__progressbar { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--tgs-green); transform-origin: left center; transition: width .18s linear; }
.tgs-toc__list { position: relative; display: flex; flex-direction: column; gap: 20px; padding-left: 26px; counter-reset: toc; }
.tgs-toc__list::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: var(--tgs-grey); }
.tgs-toc__thumb { position: absolute; left: -1px; width: 4px; height: 18px; border-radius: 4px; background: var(--tgs-green); transform: translateY(0); transition: transform .42s cubic-bezier(.5,.05,.2,1), height .42s cubic-bezier(.5,.05,.2,1); }
.tgs-toc__list a { position: relative; display: flex; align-items: baseline; gap: 11px; color: var(--tgs-ink); text-decoration: none; font-family: var(--tgs-body); font-size: 1.08rem; line-height: 1.32; opacity: .5; transition: opacity .25s ease, color .25s ease, transform .25s cubic-bezier(.65,.05,.2,1); }
/* Subkoppen (H3) ingesprongen en iets kleiner, zonder eigen nummer. */
.tgs-toc__list a.tgs-toc__sub { padding-left: 20px; font-size: .96rem; }
.tgs-toc__list a.tgs-toc__sub::before { counter-increment: none; content: "–"; color: var(--tgs-grey); }
.tgs-toc__list a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--tgs-mono); font-size: .76rem; letter-spacing: .02em; color: var(--tgs-olive); opacity: .85; transition: color .25s ease; }
.tgs-toc__list a:hover { opacity: 1; color: var(--tgs-green); transform: translateX(4px); }
.tgs-toc__list a.is-active { opacity: 1; color: var(--tgs-green); font-weight: 500; }
.tgs-toc__list a.is-active::before { color: var(--tgs-green); }
.tgs-toc__top { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--tgs-grey); font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .05em; font-size: .76rem; color: var(--tgs-ink); text-decoration: none; opacity: .72; outline: none; transition: opacity .25s ease, color .25s ease; }
.tgs-toc__top:hover { opacity: 1; color: var(--tgs-green); }
.tgs-toc__top:focus-visible { opacity: 1; color: var(--tgs-green); }
.tgs-toc__top:focus-visible .tgs-toc__topicon { border-color: var(--tgs-green); box-shadow: 0 0 0 3px rgba(30, 76, 59, .15); }
.tgs-toc__topicon { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--tgs-grey); align-items: center; justify-content: center; flex: none; transition: transform .3s cubic-bezier(.5,.05,.2,1), border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.tgs-toc__topicon svg { width: 14px; height: 14px; }
.tgs-toc__top:hover .tgs-toc__topicon { transform: translateY(-3px); border-color: var(--tgs-green); background: rgba(30, 76, 59, .06); }
@media (max-width: 900px) { .tgs-article { grid-template-columns: 1fr; } .tgs-article__aside { display: none; } }

/* Expert-sectie (blog-single) */
.tgs-expert { padding: var(--tgs-section) 0 0; }
.tgs-expert__box {
	display: grid; grid-template-columns: minmax(190px, 280px) 1fr; gap: clamp(28px, 4vw, 56px);
	background: var(--tgs-white); border-radius: var(--tgs-radius); padding: clamp(24px, 3vw, 44px); align-items: center;
}
.tgs-expert__media { position: relative; aspect-ratio: 346 / 422; overflow: hidden; -webkit-clip-path: url("#tgs-cardclip"); clip-path: url("#tgs-cardclip"); }
.tgs-expert__media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20346%20422'%20preserveAspectRatio='none'%3E%3Cpath%20d='M44.4138%2010.5863L297.531%201.52901C323.186%200.611069%20344.294%2021.5311%20343.607%2047.1928L334.99%20368.768C334.361%20392.256%20315.579%20411.208%20292.097%20412.048L79.8808%20419.642C56.4369%20420.481%2036.3676%20402.976%2034.0136%20379.636L1.72929%2059.5229C-0.85035%2033.9432%2018.7208%2011.5056%2044.4138%2010.5863Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.tgs-expert__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.tgs-expert__label { font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--tgs-ink); font-size: .82rem; }
.tgs-expert__title { font-size: var(--tgs-h2); color: var(--tgs-green); margin: 10px 0 14px; }
.tgs-expert__person { font-family: var(--tgs-body); color: var(--tgs-ink); margin: 0 0 10px; }
.tgs-expert__text { font-family: var(--tgs-body); color: var(--tgs-ink); margin: 0 0 24px; max-width: 46ch; }
/* Contact-knop op het witte expert-vak: cream tekst-pill zodat hij niet wegvalt op wit. */
.wa-btn-bubble-arrow.tgs-expert__cta { --wa-bubble-content-bg: var(--tgs-cream); }

/* Ervaringen (klantreviews). */
.tgs-reviews { padding-bottom: var(--tgs-section); }
.tgs-reviews__grid { column-count: 3; column-gap: clamp(16px, 1.6vw, 24px); }
.tgs-reviewcard { break-inside: avoid; margin: 0 0 clamp(16px, 1.6vw, 24px); background: var(--tgs-white); border-radius: var(--tgs-radius-sm); padding: clamp(24px, 2.2vw, 34px); display: inline-block; width: 100%; }
.tgs-reviewcard__stars { display: flex; gap: 3px; margin-bottom: 16px; }
.tgs-reviewcard__star svg { width: 17px; height: 17px; fill: var(--tgs-grey); display: block; }
.tgs-reviewcard__star.is-on svg { fill: var(--tgs-amber); }
.tgs-reviewcard__quote { font-family: var(--tgs-body); color: var(--tgs-ink); font-size: 1rem; line-height: 1.5; margin: 0 0 18px; }
.tgs-reviewcard__name { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: 1.02rem; letter-spacing: .01em; }
@media (max-width: 900px) { .tgs-reviews__grid { column-count: 2; } }
@media (max-width: 560px) { .tgs-reviews__grid { column-count: 1; } }

/* 404-pagina. */
.tgs-404 { text-align: center; padding-bottom: var(--tgs-section); }
.tgs-404 .tgs-work-hero__intro { margin-left: auto; margin-right: auto; }
.tgs-404__code { display: block; font-family: var(--tgs-display); font-weight: 800; color: var(--tgs-amber); font-size: clamp(4.5rem, 15vw, 12rem); line-height: .85; letter-spacing: -.02em; }
.tgs-404__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 42px); }
.wa-btn-bubble-arrow.tgs-404__pill { --wa-bubble-content-bg: var(--tgs-white); }

/* Subdiensten op single-service (nog niet klikbaar). */
.tgs-subs { padding: var(--tgs-section) 0 0; }
.tgs-subs__head { margin-bottom: clamp(30px, 4vw, 52px); }
.tgs-subs__label { display: block; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: var(--tgs-olive); margin-bottom: 14px; }
.tgs-subs__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: var(--tgs-h2); line-height: 1; margin: 0; max-width: 18ch; }
.tgs-sublist { }
.tgs-subrow {
	display: grid; grid-template-columns: 1.05fr 1.2fr; gap: clamp(24px, 3vw, 52px);
	align-items: start; padding: clamp(24px, 3vw, 42px) 0; border-top: 1.5px solid var(--tgs-grey); scroll-margin-top: 120px;
}
.tgs-subrow:last-child { border-bottom: 1.5px solid var(--tgs-grey); }
.tgs-subrow__num { display: block; font-family: var(--tgs-mono); font-size: .9rem; color: var(--tgs-ink); margin-bottom: 10px; transition: transform .4s cubic-bezier(.65,.05,.2,1); }
.tgs-subrow__title { font-size: var(--tgs-h2); color: var(--tgs-green); margin: 0; transition: transform .4s cubic-bezier(.65,.05,.2,1); }
.tgs-subrow__desc { font-family: var(--tgs-body); color: var(--tgs-ink); line-height: 1.5; margin: 0; align-self: center; max-width: 46ch; }
.tgs-subrow:hover .tgs-subrow__title { transform: translateX(12px); }
.tgs-subrow:hover .tgs-subrow__num { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
	.tgs-subrow__title, .tgs-subrow__num { transition: none; }
	.tgs-subrow:hover .tgs-subrow__title, .tgs-subrow:hover .tgs-subrow__num { transform: none; }
}
@media (max-width: 860px) { .tgs-subrow { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 700px) { .tgs-expert__box { grid-template-columns: 1fr; } .tgs-expert__media { max-width: 240px; } }

/* Dienst-detail: tekst links, media (afbeelding(en)/video) rechts. */
.tgs-service-hero__grid.has-media { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.tgs-service-hero__body { margin-top: clamp(20px, 2.6vw, 38px); }
.tgs-service-hero__body p { color: var(--tgs-green); }
/* Twee CTA-knoppen onder de dienst-intro: "Start een project" (amber, primair) + "Contact". */
.tgs-service-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3vw, 42px); }
.tgs-subs__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(36px, 5vw, 64px); }

/* Contact-popup (modal) */
.tgs-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tgs-modal[hidden] { display: none; }
.tgs-modal__backdrop { position: absolute; inset: 0; background: rgba(30, 76, 59, .55); opacity: 0; transition: opacity .3s ease; }
.tgs-modal.is-open .tgs-modal__backdrop { opacity: 1; }
.tgs-modal__panel {
	position: relative; z-index: 1; width: min(520px, 100%);
	background: var(--tgs-white); border-radius: var(--tgs-radius);
	padding: clamp(28px, 4vw, 48px); box-shadow: 0 30px 80px rgba(30, 76, 59, .25);
	opacity: 0; transform: translateY(18px) scale(.98);
	transition: transform .38s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
}
.tgs-modal.is-open .tgs-modal__panel { opacity: 1; transform: none; }
.tgs-modal__panel:focus { outline: none; }
.tgs-modal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--tgs-bg); color: var(--tgs-green); cursor: pointer; transition: background .2s ease; }
.tgs-modal__close:hover { background: var(--tgs-amber); }
.tgs-modal__close svg { width: 20px; height: 20px; }
.tgs-modal__eyebrow { display: block; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--tgs-olive); margin-bottom: 10px; }
.tgs-modal__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.03; margin: 0 0 12px; }
.tgs-modal__intro { color: var(--tgs-ink); line-height: 1.5; margin: 0 0 clamp(20px, 3vw, 30px); max-width: 42ch; }
.tgs-modal__lines { display: grid; gap: 10px; }
.tgs-modal__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 18px; border-radius: 14px; background: var(--tgs-bg); color: var(--tgs-green); text-decoration: none; transition: background .2s ease, transform .2s ease; }
.tgs-modal__line span { font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; opacity: .6; }
.tgs-modal__line strong { font-weight: 600; }
.tgs-modal__line:hover { background: var(--tgs-amber); transform: translateX(3px); }
.tgs-modal__socials { display: flex; gap: 18px; margin-top: 20px; }
.tgs-modal__socials a { font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--tgs-olive); text-decoration: none; }
.tgs-modal__socials a:hover { color: var(--tgs-pink); }
html.is-modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .tgs-modal__backdrop, .tgs-modal__panel { transition: opacity .2s ease; transform: none; } }

/* ── Landingspagina ─────────────────────────────────────────────────────────────────── */
.tgs-land-hero { padding: clamp(24px, 4vw, 56px) 0 clamp(30px, 5vw, 64px); }
.tgs-land-hero__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 901px) { .tgs-land-hero__grid { grid-template-columns: 1.1fr .9fr; } }
.tgs-land-hero__media { position: relative; border-radius: var(--tgs-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tgs-bg); }
.tgs-land-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgs-land-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 40px); }
/* On-brand placeholder (inline SVG) — vult z'n beeld-container, met subtiel label. */
.tgs-ph { position: absolute; inset: 0; display: block; overflow: hidden; }
.tgs-ph svg { width: 100%; height: 100%; display: block; }
.tgs-ph__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--tgs-olive); }
/* Gedeelde sectiekop (eyebrow + titel) — geeft elke sectie een duidelijke aankondiging. */
.tgs-land-sec__head { margin-bottom: clamp(26px, 3.2vw, 48px); }
.tgs-land-sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tgs-land-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--tgs-olive); margin-bottom: 12px; }
.tgs-land-eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--tgs-amber); flex: 0 0 auto; }
.tgs-land-sec__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: var(--tgs-h2); line-height: 1.02; margin: 0; }

/* Consistente sectie-ritmiek op de landingspagina, zodat het één geheel wordt. */
body.page-template-page-landing .tgs-usps,
body.page-template-page-landing .tgs-land-body,
body.page-template-page-landing .tgs-land-phases,
body.page-template-page-landing .tgs-services,
body.page-template-page-landing .tgs-projects--team,
body.page-template-page-landing .tgs-logos,
body.page-template-page-landing .tgs-reviews,
body.page-template-page-landing .tgs-faq { padding-top: clamp(48px, 6vw, 92px); padding-bottom: clamp(48px, 6vw, 92px); }

/* Afwisselende achtergronden (wit ↔ crème) + hairline op elke sectie-overgang, zodat de
   pagina als duidelijke banden leest en één geheel wordt. Kaart-secties zijn wit met crème
   kaarten (zodat de kaarten poppen); de rest wisselt netjes af. */
body.page-template-page-landing .tgs-usps,
body.page-template-page-landing .tgs-land-phases,
body.page-template-page-landing .tgs-logos { background: var(--tgs-white); }
body.page-template-page-landing .tgs-land-body,
body.page-template-page-landing .tgs-services,
body.page-template-page-landing .tgs-reviews,
body.page-template-page-landing .tgs-faq { background: var(--tgs-bg); }
body.page-template-page-landing .tgs-usps,
body.page-template-page-landing .tgs-land-body,
body.page-template-page-landing .tgs-land-phases,
body.page-template-page-landing .tgs-services,
body.page-template-page-landing .tgs-logos,
body.page-template-page-landing .tgs-reviews,
body.page-template-page-landing .tgs-faq { border-top: 1px solid var(--tgs-grey); }
/* USP-kaarten poppen op hun witte sectie: crème vlak met rand. (Review-kaarten zijn wit
   en poppen vanzelf op de crème reviews-sectie.) */
body.page-template-page-landing .tgs-usp { background: var(--tgs-bg); }

/* Fases: genummerde stappen met verbindingslijn; per fase kun je "instappen". */
.tgs-phases__lead { color: var(--tgs-ink); line-height: 1.5; margin: 14px 0 0; max-width: 60ch; }
/* Stappen-tijdlijn: genummerde "kralen" op een amber gestippelde lijn (wave-motief),
   gecentreerd, met een hover-lift. Compact: één band op desktop. */
.tgs-phases { list-style: none; margin: clamp(32px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 28px); position: relative; }
.tgs-phases::before { content: ''; position: absolute; top: 25px; left: 10%; right: 10%; border-top: 2px dashed var(--tgs-amber); z-index: 0; }
.tgs-phase { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tgs-phase__num { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 999px; background: var(--tgs-green); color: var(--tgs-white); font-family: var(--tgs-display); font-weight: 800; font-size: .95rem; box-shadow: 0 0 0 9px var(--tgs-white); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.tgs-phase:hover .tgs-phase__num { transform: translateY(-4px); }
.tgs-phase__body { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; width: 100%; }
.tgs-phase__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.05; margin: 22px 0 8px; }
.tgs-phase__text { color: var(--tgs-ink); line-height: 1.45; margin: 0; font-size: .92rem; max-width: 22ch; }
/* Strakke tekstlink i.p.v. pill; lijnt onderaan uit dankzij margin-top:auto. */
.tgs-phase__cta { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--tgs-green); background: none; border: 0; cursor: pointer; transition: color .2s ease; }
.tgs-phase__cta-ico { display: inline-flex; width: 15px; height: 15px; transition: transform .25s cubic-bezier(.4,0,.2,1); }
.tgs-phase__cta-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; }
.tgs-phase__cta:hover { color: var(--tgs-olive); }
.tgs-phase__cta:hover .tgs-phase__cta-ico { transform: translateX(5px); }
@media (max-width: 900px) { .tgs-phases { grid-template-columns: 1fr 1fr; } .tgs-phases::before { display: none; } }
@media (max-width: 560px) { .tgs-phases { grid-template-columns: 1fr; } }

/* Contactstrip — afgerond groen blok (in lijn met het CTA-blok) als extra conversiepunt. */
.tgs-contactstrip { padding: clamp(22px, 3vw, 48px) 0; }
.tgs-contactstrip__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; background: var(--tgs-green); color: var(--tgs-white); border-radius: var(--tgs-radius); padding: clamp(30px, 4vw, 58px) clamp(28px, 5vw, 66px); }
.tgs-contactstrip__text { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.3rem, 2.1vw, 2rem); line-height: 1.05; margin: 0; color: var(--tgs-white); max-width: 18ch; }
.tgs-contactstrip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.tgs-contactstrip__call { display: inline-flex; align-items: center; gap: 10px; color: var(--tgs-white); font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; transition: color .2s ease; }
.tgs-contactstrip__call svg { width: 20px; height: 20px; }
.tgs-contactstrip__call:hover { color: var(--tgs-amber); }

/* Gerelateerde landingspagina's onderaan. */
body.page-template-page-landing .tgs-related { background: var(--tgs-white); border-top: 1px solid var(--tgs-grey); padding: clamp(48px, 6vw, 92px) 0; }
.tgs-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 26px); margin-top: clamp(24px, 3vw, 40px); }
.tgs-related__card { display: flex; flex-direction: column; gap: 8px; background: var(--tgs-bg); border: 1px solid var(--tgs-grey); border-radius: var(--tgs-radius-sm); padding: clamp(22px, 2vw, 30px); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease; }
.tgs-related__card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(30, 76, 59, .12); border-color: transparent; }
.tgs-related__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.05; }
.tgs-related__text { color: var(--tgs-ink); line-height: 1.45; font-size: .95rem; }
.tgs-related__arrow { margin-top: 10px; align-self: flex-start; }
@media (max-width: 900px) { .tgs-related__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tgs-related__grid { grid-template-columns: 1fr; } }

/* USP's als omkaderde kaarten i.p.v. losse zwevende tekst. */
.tgs-usps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.tgs-usp { background: var(--tgs-white); border: 1px solid var(--tgs-grey); border-radius: var(--tgs-radius-sm); padding: clamp(24px, 2.4vw, 36px); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease; }
.tgs-usp:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(30, 76, 59, .12); border-color: transparent; }
.tgs-usp__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: var(--tgs-green); color: var(--tgs-white); margin-bottom: 20px; transition: background .3s ease, color .3s ease, transform .3s ease; }
.tgs-usp:hover .tgs-usp__icon { background: var(--tgs-amber); color: var(--tgs-green); transform: rotate(-6deg); }
.tgs-usp__icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tgs-usp__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.05; margin: 0 0 10px; }
.tgs-usp__text { color: var(--tgs-ink); line-height: 1.5; margin: 0; }
.tgs-land-body { padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 6vw, 80px); }
.tgs-land-body .tgs-article__main { max-width: 720px; }
/* Tekst links, sticky samenvatting rechts (vult de rechterkolom + extra contactmoment). */
body.page-template-page-landing .tgs-land-body .tgs-article { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 340px); gap: clamp(32px, 4vw, 72px); align-items: start; }
.tgs-land-aside__card { position: sticky; top: 110px; background: var(--tgs-white); border: 1px solid var(--tgs-grey); border-radius: var(--tgs-radius-sm); padding: clamp(24px, 2vw, 32px); }
.tgs-land-aside__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; }
.tgs-land-aside__list li { position: relative; padding-left: 30px; color: var(--tgs-ink); line-height: 1.4; font-size: .95rem; }
.tgs-land-aside__list li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 999px; background: var(--tgs-green); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.tgs-land-aside__foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--tgs-grey); }
.tgs-land-aside__foot span { display: block; font-size: .9rem; color: var(--tgs-ink); margin-bottom: 10px; }
.tgs-land-aside__cta { font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--tgs-green); transition: color .2s ease; }
.tgs-land-aside__cta:hover { color: var(--tgs-olive); }
@media (max-width: 900px) {
	body.page-template-page-landing .tgs-land-body .tgs-article { grid-template-columns: 1fr; }
	.tgs-land-aside__card { position: static; }
}
.tgs-faq { padding: clamp(40px, 6vw, 80px) 0; }
.tgs-faq__head { margin-bottom: clamp(24px, 3vw, 40px); }
.tgs-faq__label { display: block; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--tgs-olive); margin-bottom: 8px; }
.tgs-faq__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: var(--tgs-h2); margin: 0; }
.tgs-faq__list { border-top: 1px solid var(--tgs-grey); }
.tgs-faq__item { border-bottom: 1px solid var(--tgs-grey); }
.tgs-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; padding: clamp(18px, 2vw, 26px) 0; font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.tgs-faq__q::-webkit-details-marker { display: none; }
.tgs-faq__chevron { width: 24px; height: 24px; flex: 0 0 auto; transition: transform .3s ease; }
.tgs-faq__item[open] .tgs-faq__chevron { transform: rotate(180deg); }
.tgs-faq__a { color: var(--tgs-ink); line-height: 1.6; padding: 0 0 clamp(20px, 2.4vw, 30px); max-width: 760px; }
.tgs-faq__a p { margin: 0 0 .7em; }
.tgs-faq__a p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .tgs-faq__chevron { transition: none; } }
.tgs-service-hero__media { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.tgs-service-hero__video, .tgs-service-hero__img { border-radius: var(--tgs-radius-leaf); overflow: hidden; background: var(--tgs-grey); }
.tgs-service-hero__video { aspect-ratio: 4 / 5; }
.tgs-service-hero__img { aspect-ratio: 4 / 3; }
.tgs-service-hero__media video, .tgs-service-hero__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .tgs-service-hero__grid.has-media { grid-template-columns: 1fr; } .tgs-service-hero__media { margin-top: 8px; } }

/* Afsluitende CTA onder de subdiensten: lees meer + bellen. */
.tgs-subs__cta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(34px, 4vw, 60px); }
.tgs-callbtn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 34px; border-radius: 999px; background: var(--tgs-green); color: var(--tgs-cream); font-family: var(--tgs-body); font-size: 1.05rem; text-decoration: none; border: 1.5px solid var(--tgs-green); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.tgs-callbtn:hover { background: var(--tgs-amber); border-color: var(--tgs-amber); color: var(--tgs-green); }
.tgs-richtext h2, .tgs-richtext h3 { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); line-height: 1; margin-top: 1.6em; }
.tgs-richtext h2 { font-size: var(--tgs-h2); }
.tgs-richtext img { border-radius: var(--tgs-radius-leaf); max-width: 100%; height: auto; border: 4px solid var(--tgs-amber); box-shadow: 0 12px 34px rgba(30, 76, 59, .08); }
@media (max-width: 800px) { .tgs-case-hero__head { flex-direction: column; } .tgs-case-hero__meta { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } }

/* Diensten-archief (Services Archive) */
.tgs-dienstlist { padding-bottom: var(--tgs-section); }
.tgs-dienstrow {
	position: relative;
	display: grid; grid-template-columns: 1.05fr 1.05fr 0.8fr; gap: clamp(24px, 3vw, 52px);
	align-items: start; padding: clamp(30px, 3.6vw, 52px) 0; border-top: 1.5px solid var(--tgs-grey);
}
/* Inline bewerken op overzichten (alleen zichtbaar voor ingelogde redacteuren). */
.tgs-inlinebar { position: absolute; top: 8px; right: 0; z-index: 6; display: flex; gap: 6px; align-items: center; }
.tgs-inlinebar button, .tgs-inlinebar a { font-family: var(--tgs-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; border: 0; cursor: pointer; border-radius: 999px; padding: 6px 14px; text-decoration: none; line-height: 1; }
.tgs-inline-toggle { background: var(--tgs-amber); color: var(--tgs-green); }
.tgs-inline-save { background: var(--tgs-green); color: var(--tgs-cream); }
.tgs-inline-cancel { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tgs-grey); color: var(--tgs-ink); }
.tgs-inline-full { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tgs-grey); color: var(--tgs-green); }
.tgs-inlinebar button:hover, .tgs-inline-full:hover { filter: brightness(1.06); }
[data-tgs-field][contenteditable="true"] { outline: 2px dashed var(--tgs-amber); outline-offset: 4px; border-radius: 6px; background: rgba(241, 178, 67, .08); cursor: text; }
.tgs-dienstrow.is-editing { background: rgba(241, 178, 67, .04); }
.tgs-dienstrow.is-saved { animation: tgs-saved-flash 1.6s ease; }
@keyframes tgs-saved-flash { 0% { background: rgba(30, 76, 59, .12); } 100% { background: transparent; } }

/* Stretched-link kaarten (team, teamcard, verhalen) zodat de inline "Bewerk"-knop naast de kaartlink kan. */
.tgs-project, .tgs-teamcard, .tgs-story { position: relative; }
.tgs-project__link, .tgs-teamcard__link, .tgs-story__link { position: absolute; inset: 0; z-index: 2; }
.is-editing .tgs-project__link, .is-editing .tgs-teamcard__link, .is-editing .tgs-story__link { pointer-events: none; }
.tgs-project.is-editing .tgs-project__label,
.tgs-teamcard.is-editing .tgs-teamcard__name,
.tgs-story.is-editing h3 { position: relative; z-index: 5; }

/* Globale "Snel bewerken"-modus voor vaste paginateksten (alleen redacteuren). */
.tgs-editmode [data-tgs-ed],
.tgs-editmode [data-tgs-edit] [data-tgs-field] { outline: 1px dashed var(--tgs-amber); outline-offset: 3px; border-radius: 4px; cursor: text; position: relative; z-index: 5; }
.tgs-editmode [data-tgs-ed]:hover, .tgs-editmode [data-tgs-ed]:focus,
.tgs-editmode [data-tgs-edit] [data-tgs-field]:hover, .tgs-editmode [data-tgs-edit] [data-tgs-field]:focus { outline-style: solid; background: rgba(241, 178, 67, .10); }
[data-tgs-ed].is-saving, [data-tgs-field].is-saving { opacity: .55; }
[data-tgs-ed].is-saved, [data-tgs-field].is-saved { animation: tgs-saved-flash 1.2s ease; }
/* In bewerk-modus: de hele kaart inert (geen navigatie), alleen de velden + de
   "Volledig"-link blijven klikbaar. Werkt ongeacht kaart-structuur/stacking. */
.tgs-editmode [data-tgs-edit] { pointer-events: none; }
.tgs-editmode [data-tgs-edit] [data-tgs-field],
.tgs-editmode [data-tgs-edit] .tgs-fulllink { pointer-events: auto; }
/* Losse bewerkbare tekst binnen een link (bijv. e-mail/telefoon): link uit, tekst aan. */
.tgs-editmode a:has([data-tgs-ed]) { pointer-events: none; }
.tgs-editmode [data-tgs-ed] { pointer-events: auto; }
/* "Volledig bewerken"-link per item — alleen zichtbaar in bewerk-modus. */
.tgs-fulllink { display: none; }
.tgs-editmode .tgs-fulllink { display: inline-flex; position: absolute; top: 8px; right: 0; z-index: 7; font-family: var(--tgs-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; background: var(--tgs-green); color: var(--tgs-cream); border-radius: 999px; padding: 5px 12px; text-decoration: none; }
.tgs-editmode .tgs-fulllink:hover { background: var(--tgs-amber); color: var(--tgs-green); }
.tgs-editmode .tgs-fulllink.tgs-inlinebar--fixed { position: fixed; top: 96px; right: 16px; }
@media (max-width: 782px) { .tgs-editmode .tgs-fulllink.tgs-inlinebar--fixed { top: 56px; } }
/* Breedte-keuzes per blok — responsive-veilig (max-width, schaalt mee op mobiel). */
.tgs-w-s { max-width: 46ch; }
.tgs-w-m { max-width: 64ch; }
.tgs-w-l { max-width: 82ch; }
.tgs-w-full { max-width: none; }
.tgs-wpick { display: none; }
.tgs-editmode .tgs-wpick { display: inline-flex; gap: 5px; margin: 0 0 10px; pointer-events: auto; }
.tgs-editmode .tgs-wpick button { pointer-events: auto; font-family: var(--tgs-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; border: 1.5px solid var(--tgs-grey); background: var(--tgs-white); color: var(--tgs-ink); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.tgs-editmode .tgs-wpick button.is-active { background: var(--tgs-green); color: var(--tgs-cream); border-color: var(--tgs-green); }

.tgs-editfab { position: fixed; right: 20px; bottom: 20px; z-index: 99990; font-family: var(--tgs-body); font-size: .95rem; background: var(--tgs-green); color: var(--tgs-cream); border: 0; border-radius: 999px; padding: 12px 22px; box-shadow: 0 8px 24px rgba(30, 76, 59, .28); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.tgs-editfab:hover, .tgs-editmode .tgs-editfab { background: var(--tgs-amber); color: var(--tgs-green); }
/* Vaste bewerk-balk op detailpagina's (heel item = de hele pagina). */
.tgs-inlinebar--fixed { position: fixed; top: 96px; right: 16px; z-index: 99991; }
@media (max-width: 782px) { .tgs-inlinebar--fixed { top: 56px; } }
.tgs-dienstrow:last-child { border-bottom: 1.5px solid var(--tgs-grey); }
.tgs-dienstrow__num { display: block; font-family: var(--tgs-mono); font-size: .9rem; color: var(--tgs-ink); margin-bottom: 10px; }
.tgs-dienstrow__title { font-size: var(--tgs-h2); color: var(--tgs-green); margin: 0 0 14px; }
.tgs-dienstrow__desc { font-family: var(--tgs-body); color: var(--tgs-ink); margin: 0 0 22px; line-height: 1.45; }
.tgs-dienstrow__body { font-family: var(--tgs-body); color: var(--tgs-green); line-height: 1.5; }
.tgs-dienstrow__body p { margin: 0; }
.tgs-dienstrow__media { border-radius: var(--tgs-radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--tgs-white); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.tgs-dienstrow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
/* Hover-transitie op de dienst-rij: titel schuift mee, beeldvak licht op. */
.tgs-dienstrow__title, .tgs-dienstrow__num { transition: transform .4s cubic-bezier(.65,.05,.2,1); }
.tgs-dienstrow:hover .tgs-dienstrow__title { transform: translateX(12px); }
.tgs-dienstrow:hover .tgs-dienstrow__num { transform: translateX(6px); }
.tgs-dienstrow:hover .tgs-dienstrow__media { transform: scale(1.03); box-shadow: 0 16px 40px rgba(30,76,59,.12); }
.tgs-dienstrow:hover .tgs-dienstrow__media img { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
	.tgs-dienstrow__title, .tgs-dienstrow__num, .tgs-dienstrow__media, .tgs-dienstrow__media img { transition: none; }
	.tgs-dienstrow:hover .tgs-dienstrow__title, .tgs-dienstrow:hover .tgs-dienstrow__num, .tgs-dienstrow:hover .tgs-dienstrow__media, .tgs-dienstrow:hover .tgs-dienstrow__media img { transform: none; }
}
@media (max-width: 860px) {
	.tgs-dienstrow { grid-template-columns: 1fr; gap: 20px; }
	.tgs-dienstrow__media { max-width: 460px; }
}

/* Contactpagina */
.tgs-contactinfo { padding: clamp(28px, 3.5vw, 48px) 0; }
.tgs-contactinfo__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.tgs-contactinfo__label { font-family: var(--tgs-mono); font-size: .9rem; color: var(--tgs-ink); }
.tgs-contactinfo__details { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 34px); align-items: flex-start; }
.tgs-contactinfo__block { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.08; margin: 0; }
.tgs-contactinfo__block a { color: inherit; text-decoration: none; }
.tgs-contactinfo__block a:hover { color: var(--tgs-pink); }
.tgs-contactinfo__socials { display: flex; gap: 12px; flex-wrap: wrap; }
.tgs-socialpill { padding: 12px 26px; border-radius: 999px; border: 1.5px solid var(--tgs-grey); font-family: var(--tgs-body); color: var(--tgs-ink); text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.tgs-socialpill:hover { background: var(--tgs-green); border-color: var(--tgs-green); color: var(--tgs-cream); }
@media (max-width: 800px) { .tgs-contactinfo__grid { grid-template-columns: 1fr; gap: 16px; } }

.tgs-vibe { padding: clamp(30px, 3.5vw, 52px) 0 var(--tgs-section); }
.tgs-vibe__head { text-align: right; margin-bottom: clamp(24px, 3vw, 40px); }
.tgs-vibe__head h2 { font-size: var(--tgs-h1); color: var(--tgs-green); }
.tgs-vibe__strip {
	display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; scrollbar-width: none;
	/* Verticale ruimte zodat de gekantelde tegels + schaduw niet door de scroll-container
	   (overflow-x knipt ook verticaal) worden afgesneden. */
	padding: clamp(22px, 3vw, 40px) var(--tgs-pad); scroll-snap-type: x proximity;
}
.tgs-vibe__strip::-webkit-scrollbar { display: none; }
.tgs-vibe__img {
	position: relative;
	/* Vaste hoogte, breedte volgt de eigen verhouding van de foto (via --imgar),
	   zodat de VOLLEDIGE foto zichtbaar is — geen enkele bijsnijding. */
	flex: 0 0 auto; height: clamp(230px, 26vw, 320px);
	aspect-ratio: var(--imgar, 3 / 2);
	scroll-snap-align: start;
	border-radius: clamp(16px, 1.8vw, 24px);
	overflow: hidden;
	border: 4px solid var(--tgs-amber);
	transform: rotate(var(--rot, 0deg));
}
.tgs-vibe__img:nth-child(2n) { --rot: 2deg; }
.tgs-vibe__img:nth-child(2n+1) { --rot: -2deg; }
.tgs-vibe__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Team-archief (grid) */
.tgs-teamlist { padding-bottom: var(--tgs-section); }
.tgs-teamgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
/* Lichte kanteling per teamkaart (6-cyclus), i.p.v. inline styles. */
.tgs-teamgrid .tgs-teamcard:nth-child(6n+1) { --rot: -3deg; }
.tgs-teamgrid .tgs-teamcard:nth-child(6n+2) { --rot: 2deg; }
.tgs-teamgrid .tgs-teamcard:nth-child(6n+3) { --rot: -2deg; }
.tgs-teamgrid .tgs-teamcard:nth-child(6n+4) { --rot: 3deg; }
.tgs-teamgrid .tgs-teamcard:nth-child(6n+5) { --rot: -2deg; }
.tgs-teamgrid .tgs-teamcard:nth-child(6n+6) { --rot: 2deg; }
.tgs-teamcard {
	position: relative; display: block; aspect-ratio: 346 / 422; overflow: hidden;
	-webkit-clip-path: url("#tgs-cardclip"); clip-path: url("#tgs-cardclip");
	color: var(--tgs-white); transform: rotate(var(--rot, 0deg));
	transition: transform .3s ease, filter .3s ease; filter: drop-shadow(0 10px 22px rgba(0,0,0,.12));
}
/* Amber rand die de maskervorm volgt, gelijkmatig van dikte (non-scaling-stroke). */
.tgs-teamcard::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20346%20422'%20preserveAspectRatio='none'%3E%3Cpath%20d='M44.4138%2010.5863L297.531%201.52901C323.186%200.611069%20344.294%2021.5311%20343.607%2047.1928L334.99%20368.768C334.361%20392.256%20315.579%20411.208%20292.097%20412.048L79.8808%20419.642C56.4369%20420.481%2036.3676%20402.976%2034.0136%20379.636L1.72929%2059.5229C-0.85035%2033.9432%2018.7208%2011.5056%2044.4138%2010.5863Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tgs-teamcard:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); filter: drop-shadow(0 18px 34px rgba(0,0,0,.20)); }
.tgs-teamcard img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.tgs-teamcard--ph { background: var(--tgs-green); }
.tgs-teamcard__grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%); }
.tgs-teamcard__name {
	position: absolute; left: 13%; right: 8%; bottom: 9%; z-index: 4;
	font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: #fff;
	font-size: clamp(1rem, 1.3vw, 1.3rem); text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
@media (max-width: 900px) { .tgs-teamgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .tgs-teamgrid { grid-template-columns: repeat(2, 1fr); } }

/* Team-detail */
.tgs-teammember { padding-top: clamp(28px, 3.5vw, 52px); }
.tgs-teammember__grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
/* Organische maskervorm (zoals de kaarten) met gelijkmatige amber rand (non-scaling-stroke). */
.tgs-teammember__media { position: relative; aspect-ratio: 346 / 422; overflow: hidden; -webkit-clip-path: url("#tgs-cardclip"); clip-path: url("#tgs-cardclip"); }
.tgs-teammember__media::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20346%20422'%20preserveAspectRatio='none'%3E%3Cpath%20d='M44.4138%2010.5863L297.531%201.52901C323.186%200.611069%20344.294%2021.5311%20343.607%2047.1928L334.99%20368.768C334.361%20392.256%20315.579%20411.208%20292.097%20412.048L79.8808%20419.642C56.4369%20420.481%2036.3676%20402.976%2034.0136%20379.636L1.72929%2059.5229C-0.85035%2033.9432%2018.7208%2011.5056%2044.4138%2010.5863Z'%20fill='none'%20stroke='%23F1B243'%20stroke-width='10'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tgs-teammember__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
/* Speelse hover: lichte kanteling + lift op de losse persoonsfoto's (team-detail + blog-expert). */
.tgs-teammember__media, .tgs-expert__media { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: no-preference) {
	.tgs-teammember__media:hover, .tgs-expert__media:hover { transform: rotate(-2.2deg) translateY(-6px) scale(1.02); }
}
.tgs-teammember__name { font-size: var(--tgs-h-hero); color: var(--tgs-green); margin: 0 0 8px; }
.tgs-teammember__role { font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--tgs-ink); margin: 0 0 24px; }
@media (max-width: 760px) { .tgs-teammember__grid { grid-template-columns: 1fr; } .tgs-teammember__media { max-width: 360px; } }

/* Blog-archief (Verhalen) — wrappend grid, geen slider */
.tgs-bloglist { padding-bottom: var(--tgs-section); }
.tgs-bloggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }
@media (max-width: 900px) { .tgs-bloggrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tgs-bloggrid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }
.tgs-bloglist--more { padding-top: var(--tgs-section); padding-bottom: 0; }
.tgs-more-title { font-size: var(--tgs-h2); color: var(--tgs-green); margin: 0 0 clamp(24px, 3vw, 40px); }

/* ==========================================================================
   Logo-wall
   ========================================================================== */
.tgs-logos { padding: var(--tgs-section) 0; text-align: center; }
.tgs-logos h2 { font-size: var(--tgs-h2); margin-bottom: clamp(36px, 5vw, 64px); }

/* Losse logo's (dynamisch, bewegen onafhankelijk) */
.tgs-logos__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 12 logo's → 3 nette rijen van 4 */
	gap: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 40px);
	align-items: center;
	max-width: none; /* vult de volle 1440-container en schaalt mee */
	margin: 0 auto;
	perspective: 900px;
}
.tgs-logos__grid .tgs-logo-pool { display: none; }
.tgs-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(58px, 6vw, 82px);
}
.tgs-logo-item img {
	max-height: 82%;
	max-width: 88%;
	width: auto;
	object-fit: contain;
	opacity: .85;
	transition: transform .3s ease, opacity .3s ease;
}
.tgs-logo-item:hover img { transform: scale(1.12); opacity: 1; }
/* Flip-wall: tegel draait naar edge (onzichtbaar) en terug; JS wisselt het logo op het midden. */
.tgs-logo-item { transform-style: preserve-3d; will-change: transform; }
.tgs-logo-item.is-flipping { animation: tgs-logo-flip .65s ease; }
@keyframes tgs-logo-flip {
	0%   { transform: rotateY(0); }
	50%  { transform: rotateY(90deg); }
	100% { transform: rotateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.tgs-logo-item.is-flipping { animation: none; }
}

/* Geen continue beweging: items zijn statisch, reageren alleen op hover. */
@media (prefers-reduced-motion: reduce) {
	.tgs-project__card, .tgs-logo-item img { transition: none; }
}

/* ==========================================================================
   Verhalen
   ========================================================================== */
.tgs-stories { padding-top: clamp(24px, 3vw, 40px); }
.tgs-stories__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(36px, 5vw, 64px);
}
.tgs-stories__head h2 { font-size: var(--tgs-h1); text-align: right; max-width: 60%; }
/* Pijl-navigatie + losse 'Bekijk meer': alleen zichtbaar wanneer het een slider is (mobiel). */
.tgs-stories__nav { display: none; gap: 10px; align-items: center; }
.tgs-stories__foot { display: none; margin-top: 30px; }
.tgs-stories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tgs-story {
	background: var(--tgs-white);
	border-radius: 44px;
	padding: 16px 16px 28px;
	display: flex;
	flex-direction: column;
	color: inherit;
}
.tgs-story__media {
	position: relative;
	aspect-ratio: 6 / 5;
	margin-bottom: 6px;
}
.tgs-story__date {
	display: block;
	font-family: var(--tgs-body);
	font-size: .85rem;
	color: var(--tgs-ink);
	opacity: .6;
	text-align: left;
	margin: 0 0 6px;
}
/* Beige-vak exact zoals het ontwerp: rechte bovenkant, verticale zijden, schuine
   onderrand (rechts lager) met ronde hoeken — via een SVG-masker. */
.tgs-story__frame {
	position: absolute;
	inset: 0;
	background: var(--tgs-bg);
	overflow: hidden;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.00%2C26.00%20A26.00%2C26.00%200%200%201%2026.00%2C0.00%20L214.00%2C0.00%20A26.00%2C26.00%200%200%201%20240.00%2C26.00%20L240.00%2C174.00%20A26.00%2C26.00%200%200%201%20214.26%2C196.35%20L25.74%2C169.65%20A26.00%2C26.00%200%200%201%200.00%2C140.00%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0.00%2C26.00%20A26.00%2C26.00%200%200%201%2026.00%2C0.00%20L214.00%2C0.00%20A26.00%2C26.00%200%200%201%20240.00%2C26.00%20L240.00%2C174.00%20A26.00%2C26.00%200%200%201%20214.26%2C196.35%20L25.74%2C169.65%20A26.00%2C26.00%200%200%201%200.00%2C140.00%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}
.tgs-story__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tgs-story:hover .tgs-story__frame img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
	.tgs-story:hover .tgs-story__frame img { transform: none; }
}
.tgs-story__arrow { position: absolute; right: 16px; bottom: 16px; z-index: 2; }
.tgs-story:hover .tgs-story__arrow { transform: translateX(3px); }
.tgs-story h3 {
	font-size: clamp(1.75rem, 2.2vw, 2.1rem); /* boven de ~22-26px band waar GrandBold dubbel rendert */
	color: var(--tgs-ink);
	margin: 0; /* Grand Bold heeft negatieve left-bearing; box-links = beige-vak-links (flush) */
	line-height: 0.98;
}

/* ==========================================================================
   CTA (amber blok)
   ========================================================================== */
.tgs-cta { padding: var(--tgs-section) 0 0; }
.tgs-cta__box {
	background: var(--tgs-amber);
	border-radius: var(--tgs-radius);
	padding: clamp(40px, 6vw, 88px);
}
.tgs-cta__box h2 { color: var(--tgs-green); font-size: var(--tgs-h1); margin-bottom: clamp(28px, 4vw, 48px); max-width: 16ch; }
.tgs-cta__cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: end; max-width: 820px; }
.tgs-cta__label { display: block; margin-bottom: 14px; font-size: 1rem; color: var(--tgs-ink); }
.tgs-cta__form { display: flex; align-items: center; gap: 0; position: relative; }
/* Verzendknop sluit direct rechts op het invulveld aan (geen ruimte, niet erin). */
.tgs-cta__form button { margin-left: 0; }
.tgs-cta__form input {
	flex: 1;
	background: transparent;
	border: 1.6px solid rgba(255, 255, 255, .85);
	border-radius: 999px;
	padding: 18px 26px;
	font-size: 1rem;
	font-family: var(--tgs-body);
	color: var(--tgs-ink);
}
.tgs-cta__form input::placeholder { color: rgba(41, 41, 41, .6); }
.tgs-cta__form input { transition: background-color .25s ease, border-color .25s ease; }
.tgs-cta__form input:focus { outline: none; border-color: var(--tgs-white); background: var(--tgs-white); }
.tgs-cta__form button { background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
/* Als de arrow-class direct op de submit-knop staat (archief/detail/contact): herstel de roze cirkel. */
.tgs-cta__form button.tgs-arrow--pink { background: var(--tgs-pink); }

/* Speels inschrijf-effect: bevestiging in de pill, knop popt naar groen met vinkje, bubbels spatten. */
.tgs-cta__done { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; color: var(--tgs-green); font-family: var(--tgs-body); font-weight: 600; white-space: nowrap; transition: opacity .3s ease .12s; }
.tgs-cta__form.is-done .tgs-cta__done { opacity: 1; }
.tgs-cta__form.is-done input { color: transparent; }
.tgs-cta__form.is-done button.tgs-arrow--pink { background: var(--tgs-green); }
.tgs-cta__form.is-done button svg path { stroke: var(--tgs-cream); }
.tgs-cta__form button.is-pop { animation: tgs-cta-pop .5s cubic-bezier(.2, .7, .3, 1); }
.tgs-cta__form.is-invalid input { animation: tgs-shake .45s ease; border-color: var(--tgs-pink); }
.tgs-cta__burst { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: tgs-burst .9s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes tgs-cta-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes tgs-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes tgs-burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tgs-cta__form button.is-pop { animation: none; } .tgs-cta__form.is-invalid input { animation: none; } .tgs-cta__burst { display: none; } }

/* CTA-knop 'Bekijk meer': pink cirkel + donkere pijl (zoals design). */
.wa-btn-bubble-arrow.tgs-cta__pill { --wa-bubble-alt-bg: var(--tgs-pink); }
.wa-btn-bubble-arrow.tgs-cta__pill .wa-btn-bubble-arrow__arrow.is--duplicate { color: var(--tgs-ink); }

/* Typewriter: de CTA-kop typt zichzelf uit bij in beeld komen (JS). */
[data-typewriter].is-typing::after {
	content: ''; display: inline-block;
	width: .07em; height: .8em; margin-left: .05em;
	background: currentColor; vertical-align: baseline;
	animation: tgs-caret 1s steps(1) infinite;
}
@keyframes tgs-caret { 50% { opacity: 0; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.tgs-footer { padding: var(--tgs-section) 0 32px; }
.tgs-footer__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-bottom: clamp(48px, 6vw, 80px); }
.tgs-footer__col { display: grid; gap: 28px; align-content: start; }
.tgs-footer__block { display: grid; gap: 4px; }
.tgs-footer a, .tgs-footer__block span, .tgs-footer__block b {
	font-family: var(--tgs-display);
	font-weight: 800;
	text-transform: uppercase;
	color: var(--tgs-green);
	font-size: 1.125rem;
	line-height: 1.15;
	letter-spacing: .01em;
}
.tgs-footer a:hover { color: var(--tgs-pink); }

/* Open sollicitatie — footer-knop + speelse popup. */
.tgs-jobs { display: grid; gap: 4px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.tgs-jobs b { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: 1.125rem; line-height: 1.15; letter-spacing: .01em; transition: color .2s ease; }
.tgs-jobs:hover b { color: var(--tgs-pink); }
.tgs-jobs__hint { font-family: var(--tgs-mono); text-transform: none; font-weight: 400; font-size: .8rem; letter-spacing: .02em; color: var(--tgs-amber); margin-top: 6px; }
.tgs-jobsmodal { position: fixed; inset: 0; z-index: 99995; display: grid; place-items: center; padding: 24px; }
.tgs-jobsmodal[hidden] { display: none; }
.tgs-jobsmodal__overlay { position: absolute; inset: 0; background: rgba(30, 76, 59, .55); animation: tgs-fade .25s ease; }
.tgs-jobsmodal__card { position: relative; z-index: 1; width: min(92vw, 480px); background: var(--tgs-cream); border: 4px solid var(--tgs-amber); border-radius: var(--tgs-radius-leaf); padding: clamp(30px, 4vw, 46px); text-align: center; box-shadow: 0 30px 70px rgba(0, 0, 0, .3); animation: tgs-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
.tgs-jobsmodal__close { position: absolute; top: 10px; right: 16px; background: none; border: 0; font-size: 1.9rem; line-height: 1; color: var(--tgs-green); cursor: pointer; }
.tgs-jobsmodal__close:hover { color: var(--tgs-pink); }
.tgs-jobsmodal__emoji { display: block; font-size: clamp(2.4rem, 6vw, 3.4rem); animation: tgs-jobs-bob 2.4s ease-in-out infinite; }
.tgs-jobsmodal__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.05; margin: 10px 0 12px; }
.tgs-jobsmodal__text { font-family: var(--tgs-body); color: var(--tgs-ink); line-height: 1.55; margin: 0 0 22px; }
.tgs-jobsmodal .tgs-jobsmodal__btn { display: inline-block; max-width: 100%; background: var(--tgs-green); color: var(--tgs-cream); font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(.85rem, 3.4vw, 1rem); line-height: 1.2; border-radius: 999px; padding: 14px 26px; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.tgs-jobsmodal .tgs-jobsmodal__btn:hover { background: var(--tgs-amber); color: var(--tgs-green); }
.is-jobs-open { overflow: hidden; }
@keyframes tgs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tgs-pop { from { opacity: 0; transform: translateY(20px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes tgs-jobs-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .tgs-jobsmodal__card, .tgs-jobsmodal__overlay, .tgs-jobsmodal__emoji { animation: none; } }

.tgs-footer__bottom {
	position: relative;
	display: flex; justify-content: space-between; gap: 24px;
	padding-top: 22px;
	color: var(--tgs-ink); font-size: 1rem;
}
.tgs-footer__bottom::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--tgs-grey); }
.tgs-footer__bottom .right { display: flex; gap: 40px; }

/* ==========================================================================
   Overige templates (archief/single/pagina) — beknopt
   ========================================================================== */
.tgs-main-simple { padding: clamp(48px, 7vw, 96px) 0; }
.tgs-page-title { font-size: var(--tgs-h1); margin-bottom: 12px; }
.tgs-lead-simple { font-size: var(--tgs-lead); max-width: 800px; color: var(--tgs-ink); margin-bottom: 40px; }
.tgs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.tgs-card { border-radius: var(--tgs-radius-sm); overflow: hidden; color: inherit; }
.tgs-card__thumb { aspect-ratio: 3/2; background: var(--tgs-grey); border-radius: var(--tgs-radius-sm); overflow: hidden; }
.tgs-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tgs-card h3 { color: var(--tgs-green); font-size: 1.25rem; margin: 14px 0 6px; }
.tgs-card p { color: var(--tgs-ink); text-transform: none; font-family: var(--tgs-body); font-size: .95rem; margin: 0; }
.tgs-single { max-width: 760px; margin: 0 auto; }
.tgs-single__content { font-size: 1.1875rem; }
.tgs-single__content h2 { font-size: var(--tgs-h2); margin-top: 1.4em; }
.tgs-back { display: inline-block; margin-top: 40px; color: var(--tgs-green); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
	.tgs-service { grid-template-columns: 32px 1fr 48px; }
	.tgs-service__desc { display: none; }
	.tgs-service__subs { display: none; } /* hover-reveal heeft geen zin op touch */
	/* Op mobiel geen afsluitlijntje boven de projecten-sectie. */
	.tgs-service:not(:has(~ .tgs-service)) { border-bottom: 0; }
	/* Passen er geen 3 meer naast elkaar, dan wordt het een horizontale slider. */
	.tgs-stories__grid {
		display: flex;
		grid-template-columns: none;
		max-width: none;
		gap: 18px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-left: var(--tgs-pad);
		margin-inline: calc(-1 * var(--tgs-pad));
		padding: 4px var(--tgs-pad) 10px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.tgs-stories__grid::-webkit-scrollbar { display: none; }
	.tgs-stories__grid > * { flex: 0 0 min(80%, 320px); scroll-snap-align: start; }
	/* Slider-modus: titel + pijlen boven de blogs, 'Bekijk meer' onder de blogs. */
	.tgs-stories__head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
	.tgs-stories__head h2 { text-align: left; max-width: 100%; }
	.tgs-stories__cta { display: none; }
	.tgs-stories__nav { display: flex; }
	.tgs-stories__foot { display: flex; justify-content: flex-start; }
	.tgs-cta__cols { grid-template-columns: 1fr; gap: 28px; }
	.tgs-footer__grid { grid-template-columns: 1fr 1fr; }
	/* Hero al vanaf 900px gestapeld: titel boven het beeld, geen overlappende knop. */
	.tgs-hero__box { display: flex; flex-direction: column; gap: 16px; aspect-ratio: auto; overflow: visible; border-radius: 0; }
	.tgs-hero__box img { display: none; } /* de video is de mobiele hero-media */
	.tgs-hero__video { position: static; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 11; border-radius: var(--tgs-radius); }
	.tgs-hero__title { position: static; order: 1; color: var(--tgs-green); max-width: 100%; line-height: .92; }
	.tgs-hero__grad, .tgs-hero__pill { display: none; }
	.tgs-services__head h2, .tgs-stories__head h2 { max-width: 100%; }
	.tgs-logos__grid { grid-template-columns: repeat(3, 1fr); }
	.tgs-projects__grid { justify-content: flex-start; }
	/* Team-slider op mobiel: rechte, iets kleinere kaarten met minder overlap, zodat
	   ze als hele kaarten lezen en niet schuin half in beeld hangen bij de overgang. */
	.tgs-projects--team .tgs-project__card { width: clamp(190px, 54vw, 240px); transform: none; }
	.tgs-projects--team .tgs-project:not(:first-child) { margin-left: clamp(-32px, -3vw, -16px); }
}

@media (max-width: 820px) {
	.tgs-topnav { display: none; } /* burgermenu is op mobiel de nav; voorkomt dat links tegen de rand lopen */
}

@media (max-width: 600px) {
	:root { --tgs-pad: 20px; }
	.tgs-topnav { gap: 16px; font-size: .9rem; }
	/* Op mobiel: titel bovenaan, de losse knop/paragraaf eronder. */
	.tgs-services__head { flex-direction: column; align-items: flex-start; gap: 22px; }
	.tgs-services__head h2 { text-align: left; }
	.tgs-services__cta { display: none; }   /* knop verhuist naar onder de lijst */
	.tgs-services__foot { display: flex; }
	.tgs-projects__head { flex-direction: column; align-items: flex-start; }
	/* stories-kop wordt al in het slider-blok (max-width:900px) geregeld */

	/* Projecten: 'Bekijk meer' onder de slider, netjes binnen het witte vak. */
	.tgs-projects { padding-bottom: 76px; }        /* wit vak loopt door onder de knop */
	.tgs-projects__grid { padding-bottom: 44px; }  /* minder leegte boven de knop */
	.tgs-projects__cta { display: none; }
	.tgs-projects__foot { display: flex; margin-top: 18px; padding-left: calc(var(--tgs-pad) + 32px); }
	/* Mobiele footer rustiger: kleinere tekst + krappere tussenruimte, minder druk. */
	.tgs-footer { padding: clamp(36px, 9vw, 56px) 0 24px; }
	.tgs-footer__grid { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
	.tgs-footer__col { gap: 18px; }
	.tgs-footer__block { gap: 2px; }
	.tgs-footer a, .tgs-footer__block span, .tgs-footer__block b { font-size: .95rem; line-height: 1.25; }
	.tgs-jobs b { font-size: .95rem; }
	.tgs-footer__bottom { flex-direction: column; gap: 8px; }
	.tgs-logos__grid { grid-template-columns: repeat(2, 1fr); }
	/* Altijd even aantal op mobiel: verberg de laatste tile bij een oneven aantal (geen los logo in de rij). */
	.tgs-logos__grid .tgs-logo-item:last-of-type:nth-of-type(odd) { display: none; }
}

/* ==========================================================================
   Over ons
   ========================================================================== */
.tgs-ab-hero { padding: clamp(40px, 5vw, 80px) 0 var(--tgs-line-gap); }
.tgs-ab-hero__title { font-size: var(--tgs-h-hero); margin-bottom: 20px; }
.tgs-ab-hero__intro {
	max-width: 820px;
	/* Exact naar Figma: Uncut Sans Light, ~25px op desktop, line-height 150%. */
	font-size: clamp(1.2rem, 1.75vw, 1.5625rem);
	line-height: 1.5;
	color: var(--tgs-ink);
	font-weight: 300;
	margin: 0 0 clamp(32px, 4vw, 56px);
}
.tgs-ab-hero__intro p + p { margin-top: 1.5em; }
.tgs-ab-hero__media { border-radius: var(--tgs-radius-leaf); overflow: hidden; aspect-ratio: 16 / 8; border: 4px solid var(--tgs-amber); box-shadow: 0 14px 40px rgba(30, 76, 59, .08); }
.tgs-ab-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Editorial-blokken (Figma node 1145-24): label linksboven boven een scheidingslijn,
   daaronder een grote gecentreerde lead of een rechts uitgelijnde titel + body. */
.tgs-ab-block { padding: 0; }
/* Hairline boven elk blok; de rechter-blokken krijgen ook een lijn onder zich (zoals Figma).
   Ruime onderkant zodat er veel lucht onder de content staat. */
.tgs-ab-block .tgs-container { border-top: 1px solid var(--tgs-grey); padding-top: var(--tgs-line-gap); padding-bottom: var(--tgs-line-gap); }
.tgs-ab-block--right .tgs-container { border-bottom: 1px solid var(--tgs-grey); }
.tgs-ab-block__label { display: block; font-family: var(--tgs-body); font-size: .9rem; color: var(--tgs-ink); opacity: .5; }
/* Center-blok: label linksboven, daaronder een grote gecentreerde lead. */
.tgs-ab-block--center .tgs-ab-block__label { margin-bottom: clamp(40px, 7vw, 110px); }
.tgs-ab-block--center .tgs-ab-block__lead {
	max-width: 900px; margin: 0 auto; text-align: center;
	font-family: var(--tgs-body); font-weight: 300; color: var(--tgs-ink);
	font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.3;
}
.tgs-ab-block--center .tgs-ab-block__lead p + p { margin-top: .7em; }
/* Laatste content-element flush laten eindigen, zodat de padding = de enige ruimte tot de lijn
   (anders duwt een default p-marge de gaps ongelijk). */
.tgs-ab-block__lead > :last-child,
.tgs-ab-block__col .tgs-richtext > :last-child,
.tgs-drive__text .tgs-richtext > :last-child { margin-bottom: 0; }
/* Rechter-blok: label links + content rechts, beide bovenaan uitgelijnd (2-koloms). */
.tgs-ab-block--right .tgs-container { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(24px, 4vw, 64px); align-items: start; }
.tgs-ab-block--right .tgs-ab-block__label { margin: 0; }
.tgs-ab-block--right .tgs-ab-block__col { max-width: none; margin: 0; }
.tgs-ab-block__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: var(--tgs-h2); line-height: 1; margin: 0 0 clamp(14px, 1.4vw, 20px); }
@media (max-width: 720px) {
	.tgs-ab-block--right .tgs-container { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 40px); }
	.tgs-ab-block .tgs-container { padding-bottom: clamp(56px, 12vw, 90px); }
	.tgs-ab-block--center .tgs-ab-block__lead { font-size: clamp(1.3rem, 5vw, 1.7rem); }
}

/* Onze drijfveren — witte, afgeronde kaart met tekst links + beeld rechts. */
.tgs-drive { padding: var(--tgs-line-gap) 0 clamp(48px, 8vw, 120px); }
/* Team-kaart (Meet the team) op Over ons: zelfde line-gap boven én onder t.o.v. de lijnen.
   De kaart (::before) hangt met var(--tgs-line-gap) los van beide lijnen. */
.tgs-projects--team { margin-top: calc(var(--tgs-line-gap) - 24px); }
.tgs-projects--team::before { bottom: var(--tgs-line-gap); }
.tgs-drive__card {
	background: var(--tgs-white); border-radius: clamp(24px, 3vw, 40px);
	padding: clamp(26px, 4vw, 64px);
	display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 60px); align-items: center;
	box-shadow: 0 20px 60px rgba(30, 76, 59, .06);
}
.tgs-drive__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: var(--tgs-h2); line-height: 1; margin: 0 0 clamp(14px, 1.4vw, 22px); }
.tgs-drive__text .tgs-richtext { color: var(--tgs-ink); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.6; }
.tgs-drive__text .tgs-richtext p + p { margin-top: .8em; }
.tgs-drive__media { margin: 0; border-radius: clamp(16px, 2vw, 28px); overflow: hidden; aspect-ratio: 4 / 3; }
.tgs-drive__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
	.tgs-drive__card { grid-template-columns: 1fr; }
}
/* Body-tekst in de editorial-blokken + drijfveren-kaart: rustige, uniforme grijstekst.
   De globale .tgs-richtext maakt de eerste alinea groen/groter — dat willen we hier niet. */
.tgs-ab-block__col .tgs-richtext,
.tgs-drive__text .tgs-richtext {
	max-width: none;
	font-size: clamp(.95rem, 1vw, 1.05rem);
	line-height: 1.65;
	color: var(--tgs-ink);
}
.tgs-ab-block__col .tgs-richtext > p:first-of-type,
.tgs-drive__text .tgs-richtext > p:first-of-type {
	font-size: inherit; line-height: inherit; color: inherit;
}
.tgs-ab-block__col .tgs-richtext p + p,
.tgs-drive__text .tgs-richtext p + p { margin-top: .9em; }

/* Over ons — merkverhaal: intro-lead + alternerende verhaalblokken. */
.tgs-bstory-lead { padding: clamp(36px, 5vw, 72px) 0 clamp(8px, 2vw, 20px); }
.tgs-bstory-lead .tgs-richtext { max-width: 62ch; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.55; color: var(--tgs-green); }
.tgs-bstory-lead .tgs-richtext p + p { margin-top: .8em; }
.tgs-bstory { padding: clamp(40px, 6vw, 90px) 0; }
.tgs-bstory__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.tgs-bstory--flip .tgs-bstory__media { order: -1; }
.tgs-bstory__title { font-size: var(--tgs-h2); color: var(--tgs-green); margin: 0 0 clamp(16px, 2vw, 26px); }
.tgs-bstory__text .tgs-richtext { color: var(--tgs-ink); font-size: clamp(1.02rem, 1.15vw, 1.18rem); line-height: 1.6; }
.tgs-bstory__text .tgs-richtext p + p { margin-top: .8em; }
.tgs-bstory__cta { margin: clamp(20px, 2.5vw, 32px) 0 0; }
.tgs-bstory__cta a { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.05; color: var(--tgs-green); text-decoration: none; border-bottom: 3px solid var(--tgs-amber); padding-bottom: 4px; transition: color .2s ease, border-color .2s ease; }
.tgs-bstory__cta a:hover { color: var(--tgs-amber); border-color: var(--tgs-green); }
.tgs-bstory__media { margin: 0; border-radius: var(--tgs-radius-leaf); overflow: hidden; aspect-ratio: 4 / 3; border: 4px solid var(--tgs-amber); box-shadow: 0 14px 40px rgba(30, 76, 59, .10); }
.tgs-bstory__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) {
	.tgs-bstory__grid { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 36px); }
	.tgs-bstory--flip .tgs-bstory__media { order: 0; }
}

/* Anchor-doelen niet onder de sticky header laten vallen. */
#drijfveer, #team { scroll-margin-top: clamp(80px, 10vh, 120px); }

/* Eyebrow-label boven de blok-koppen. */
.tgs-bstory__eyebrow { display: block; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--tgs-amber); margin-bottom: 14px; }

/* Pull-quote met scroll-highlight — groot, groen, vult woord-voor-woord. */
.tgs-pullquote { padding: clamp(30px, 5vw, 70px) 0; }
.tgs-pullquote__text { max-width: 20ch; margin: 0; font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; line-height: .98; letter-spacing: -.01em; font-size: clamp(2.2rem, 6vw, 4.6rem); color: var(--tgs-green); }
.tgs-pullquote__text[data-highlight-text].is-hl-ready .tgs-hl__w { color: rgba(30, 76, 59, .18); }
.tgs-pullquote__text[data-highlight-text].is-hl-ready .tgs-hl__w.is-on { color: var(--tgs-green); }

/* Gekantelde beeldframes + zwevende bubbels rond de verhaalblokken. */
.tgs-bstory { position: relative; }
.tgs-bstory__media { position: relative; z-index: 1; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.tgs-bstory__media--tilt { transform: rotate(-2.2deg); }
.tgs-bstory__media--tilt-alt { transform: rotate(2.2deg); }
.tgs-bstory__media--tilt:hover, .tgs-bstory__media--tilt-alt:hover { transform: rotate(0); }
.tgs-bstory::before, .tgs-bstory::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; background: var(--tgs-white); pointer-events: none; animation: tgs-bstory-float 7s ease-in-out infinite; will-change: transform; }
.tgs-bstory::before { width: clamp(70px, 12vw, 150px); aspect-ratio: 1; top: 6%; right: 4%; opacity: .6; animation-duration: 6.6s; }
.tgs-bstory::after { width: clamp(40px, 7vw, 90px); aspect-ratio: 1; bottom: 8%; left: 3%; opacity: .5; animation-duration: 7.8s; animation-delay: -2.3s; }
.tgs-bstory--flip::before { right: auto; left: 5%; }
.tgs-bstory--flip::after { left: auto; right: 4%; }
@keyframes tgs-bstory-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce) {
	.tgs-bstory::before, .tgs-bstory::after { animation: none; }
	.tgs-bstory__media--tilt, .tgs-bstory__media--tilt-alt { transform: none; }
}

/* Impact — uitgelichte groene band (omgekeerde kleuren). */
.tgs-bstory--band { background: var(--tgs-green); margin-top: clamp(20px, 3vw, 40px); }
.tgs-bstory--band .tgs-bstory__title { color: var(--tgs-cream); }
.tgs-bstory--band .tgs-bstory__eyebrow { color: var(--tgs-amber); }
.tgs-bstory--band .tgs-bstory__text .tgs-richtext { color: rgba(243, 238, 227, .88); }
.tgs-bstory--band .tgs-bstory__media { border-color: var(--tgs-cream); }
.tgs-bstory--band::before, .tgs-bstory--band::after { background: rgba(243, 238, 227, .10); }

.tgs-ab-help { padding: var(--tgs-section) 0; }
.tgs-ab-help__title { font-size: var(--tgs-h1); text-align: center; margin-bottom: clamp(40px, 5vw, 72px); }
.tgs-ab-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.tgs-ab-help__text h3 { font-size: var(--tgs-h2); margin-bottom: 18px; }
.tgs-ab-help__text p { font-size: 1.125rem; color: var(--tgs-ink); margin: 0 0 28px; max-width: 46ch; }

/* "Our magic circle"-graphic */
/* Magic circle = de 5 fases. Grote ring met 5 bolletjes; een gouden "actief" bolletje
   draait langs de ring van fase naar fase en toont de fasenaam. */
.tgs-magic { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; container-type: size; }
.tgs-magic__ring { position: absolute; top: 50%; left: 50%; width: 84%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid var(--tgs-grey); }
.tgs-magic__core {
	position: absolute; top: 50%; left: 50%; width: 46%; aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%; background: var(--tgs-white);
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
	padding: 8%; box-shadow: 0 12px 30px rgba(0, 0, 0, .07);
	animation: tgs-magic-breathe 5s ease-in-out infinite;
}
.tgs-magic__coretitle { font-family: var(--tgs-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(.66rem, 2.4cqmin, .9rem); color: var(--tgs-olive); white-space: nowrap; }
.tgs-magic__dots { position: absolute; inset: 0; }
.tgs-magic__dot {
	position: absolute; top: 50%; left: 50%; width: 13cqmin; height: 13cqmin;
	transform: translate(-50%, -50%) rotate(var(--a)) translateY(-42cqmin);
	border-radius: 50%; background: #F3F4EF; border: 1px solid var(--tgs-grey);
}
.tgs-magic__marker { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--rot, 180deg)); transition: transform 1s cubic-bezier(.65, 0, .35, 1); }
.tgs-magic__gold {
	position: absolute; top: 0; left: 0; width: 15cqmin; height: 15cqmin;
	transform: translate(-50%, -50%) translateY(-42cqmin);
	border-radius: 50%; background: #F1C343; border: 1px solid var(--tgs-grey);
}
/* Actieve fase in de kern (verschijnt met een fade zodra het gouden bolletje is aangekomen). */
.tgs-magic__active { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transition: opacity .55s ease; }
.tgs-magic__active.is-in { opacity: 1; }
.tgs-magic__fase { font-family: var(--tgs-mono); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(.58rem, 2cqmin, .72rem); color: var(--tgs-amber); }
.tgs-magic__name { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(.9rem, 3.7cqmin, 1.3rem); line-height: 1; white-space: nowrap; }
@keyframes tgs-magic-breathe {
	0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 12px 30px rgba(0, 0, 0, .07); }
	50%      { transform: translate(-50%, -50%) scale(1.03); box-shadow: 0 20px 46px rgba(30, 76, 59, .14); }
}
@media (prefers-reduced-motion: reduce) {
	.tgs-magic__marker { transition: none; }
	.tgs-magic__core { animation: none; }
}

/* Meet the team = zelfde slider/kaart als 'projecten'; placeholder-vlak zonder foto. */
.tgs-project__card--ph { background: var(--tgs-green); cursor: default; }

/* Hoe we werken — full-bleed compositie: amber stippel-S-lijn + 3 witte bubbels + één fase (1:1 Figma) */
.tgs-work { padding: var(--tgs-section) 0; overflow: hidden; }
.tgs-work__comp { position: relative; width: 100%; aspect-ratio: 1440 / 526; }
.tgs-work__wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* ==========================================================================
   Hoe we werken: horizontale scroll-sectie (pinned)
   ========================================================================== */
.tgs-flow { position: relative; background: var(--tgs-bg); }
.tgs-flow__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tgs-flow__head { position: absolute; top: clamp(28px, 5vw, 72px); right: max(var(--tgs-pad), calc((100% - var(--tgs-max)) / 2 + var(--tgs-pad))); z-index: 5; text-align: right; pointer-events: none; }
.tgs-flow__eyebrow { display: block; font-family: var(--tgs-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--tgs-olive); margin-bottom: 10px; }
.tgs-flow__title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(2rem, 4.2vw, 3.75rem); line-height: 1.02; margin: 0; }
.tgs-flow__track { position: absolute; inset: 0; display: flex; will-change: transform; z-index: 1; }
/* Eén doorlopende golf achter alle fases; door JS in echte px getekend (onvervormd). */
.tgs-flow__wave { position: absolute; left: 0; top: 0; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
/* Golf-bol = groep die zacht dobbert (float) met daarin een cirkel die op hover 'popt'. */
.tgs-flow__bubble { transform-box: fill-box; transform-origin: center; animation: tgs-bubble-float var(--fdur, 6s) ease-in-out var(--fdelay, 0s) infinite; will-change: transform; }
.tgs-flow__bubble-c { fill: var(--tgs-white); pointer-events: auto; transform-box: fill-box; transform-origin: center; stroke: var(--tgs-amber); stroke-width: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), stroke-width .3s ease, fill .3s ease; }
.tgs-flow__bubble-c:hover { transform: scale(1.16); stroke-width: 5; fill: var(--tgs-green); cursor: pointer; }
/* Anchor-bollen: klikbaar; geen ring in rust — die verschijnt pas op hover/focus. */
.tgs-flow__bubble.is-anchor .tgs-flow__bubble-c { stroke-width: 0; cursor: pointer; }
.tgs-flow__bubble.is-anchor { outline: none; }
.tgs-flow__bubble.is-anchor:focus-visible .tgs-flow__bubble-c { stroke-width: 6; fill: var(--tgs-green); }
/* Geen fase in die richting → bol reageert niet (geen hover-pop, niet klikbaar). */
.tgs-flow__bubble.is-disabled .tgs-flow__bubble-c { pointer-events: none; cursor: default; }
.tgs-flow__bubble-img { pointer-events: auto; cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 14px 26px rgba(30, 76, 59, .12)); }
.tgs-flow__bubble--surfer:hover .tgs-flow__bubble-img,
.tgs-flow__bubble--surfer:focus-visible .tgs-flow__bubble-img { transform: scale(1.06); }
.tgs-flow__bubble--surfer.is-disabled .tgs-flow__bubble-img { pointer-events: none; cursor: default; }
@keyframes tgs-bubble-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6%) scale(1.045); } }
.tgs-flow__line { fill: none; stroke: var(--tgs-amber); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 13; }
.tgs-flow__ball { fill: var(--tgs-green); stroke: var(--tgs-amber); stroke-width: 3; }
/* Paneel laat de muis door (naar de bollen in de golf eronder); alleen de tekst vangt events. */
.tgs-flow__panel { position: relative; flex: 0 0 min(100vw, 1120px); height: 100%; overflow: hidden; pointer-events: none; }
/* Tekst blijft leesbaar maar vangt geen muis, zodat elke bol eronder klikbaar blijft. */
/* Fase-content start altijd ónder de vaste kop "HOE WE WERKEN" — nooit overlap,
   ook niet tijdens het horizontaal scrollen of bij lange teksten. */
.tgs-flow__content { position: absolute; left: calc(max(var(--tgs-pad), calc((100% - var(--tgs-max)) / 2 + var(--tgs-pad))) + clamp(0px, 4vw, 96px)); top: clamp(150px, 17vh, 190px); bottom: clamp(60px, 9vh, 110px); z-index: 2; max-width: min(46%, 620px); display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.tgs-flow__eyebrow--phase { display: block; font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: var(--tgs-green); font-size: clamp(1.4rem, 2.4vw, 2.15rem); line-height: 1; margin-bottom: 4px; }
.tgs-flow__panel-title { font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1; margin: 0 0 clamp(16px, 1.8vw, 26px); }
.tgs-flow__panel-text { font-family: var(--tgs-body); color: var(--tgs-ink); font-size: clamp(1.05rem, 1.05vw, 1.2rem); line-height: 1.6; max-width: 58ch; margin: 0; }
.tgs-flow__panel-text p { margin: 0 0 .55em; }
.tgs-flow__panel-text p:last-child { margin-bottom: 0; }
/* Mobiel / reduced-motion: geen pin, nette verticale stapel. Golf verborgen; in plaats
   daarvan speelse witte bollen (gevarieerd van formaat/positie) achter de fase-tekst. */
@media (max-width: 900px) {
	.tgs-flow { height: auto; overflow: hidden; } /* clip decoratieve bollen: geen horizontale scroll */
	.tgs-flow__pin { height: auto; position: static; display: block; overflow: visible; padding: var(--tgs-section) 0; }
	.tgs-flow__head { position: static; text-align: left; padding: 0 var(--tgs-pad); margin-bottom: clamp(28px, 6vw, 48px); }
	.tgs-flow__track { position: static; inset: auto; flex-direction: column; transform: none !important; gap: clamp(48px, 12vw, 88px); }
	.tgs-flow__panel { flex: none; width: 100%; height: auto; padding: clamp(20px, 6vw, 40px) var(--tgs-pad); position: relative; overflow: visible; }
	.tgs-flow__wave { display: none; }
	.tgs-flow__content { position: relative; left: auto; top: auto; z-index: 1; transform: none; max-width: 560px; }
	/* Twee bollen per fase; nth-of-type telt alleen de <article>-panels (svg is ander type). */
	.tgs-flow__panel::before, .tgs-flow__panel::after { content: ''; position: absolute; z-index: 0; border-radius: 50%; background: var(--tgs-white); pointer-events: none; transform-origin: center; animation: tgs-bubble-float 6s ease-in-out infinite; will-change: transform; }
	.tgs-flow__panel:nth-of-type(1)::before { animation-duration: 6.4s; animation-delay: -.4s; }
	.tgs-flow__panel:nth-of-type(1)::after  { animation-duration: 5.2s; animation-delay: -2.1s; }
	.tgs-flow__panel:nth-of-type(2)::before { animation-duration: 7.1s; animation-delay: -1.3s; }
	.tgs-flow__panel:nth-of-type(2)::after  { animation-duration: 5.6s; animation-delay: -3.0s; }
	.tgs-flow__panel:nth-of-type(3)::before { animation-duration: 6.8s; animation-delay: -2.4s; }
	.tgs-flow__panel:nth-of-type(3)::after  { animation-duration: 5.9s; animation-delay: -0.7s; }
	.tgs-flow__panel:nth-of-type(4)::before { animation-duration: 5.4s; animation-delay: -1.8s; }
	.tgs-flow__panel:nth-of-type(4)::after  { animation-duration: 7.4s; animation-delay: -3.4s; }
	.tgs-flow__panel:nth-of-type(5)::before { animation-duration: 6.2s; animation-delay: -1.0s; }
	.tgs-flow__panel:nth-of-type(5)::after  { animation-duration: 5.7s; animation-delay: -2.7s; }
	.tgs-flow__panel:nth-of-type(1)::before { width: clamp(120px, 40vw, 200px); aspect-ratio: 1; top: -28px; right: -34px; }
	.tgs-flow__panel:nth-of-type(1)::after  { width: clamp(46px, 14vw, 74px);  aspect-ratio: 1; bottom: 8px; left: -22px; opacity: .7; }
	.tgs-flow__panel:nth-of-type(2)::before { width: clamp(90px, 28vw, 140px);  aspect-ratio: 1; bottom: -30px; right: -24px; }
	.tgs-flow__panel:nth-of-type(2)::after  { width: clamp(38px, 11vw, 60px);  aspect-ratio: 1; top: -18px; left: 12%; opacity: .6; }
	.tgs-flow__panel:nth-of-type(3)::before { width: clamp(130px, 44vw, 220px); aspect-ratio: 1; bottom: -46px; left: -48px; }
	.tgs-flow__panel:nth-of-type(3)::after  { width: clamp(52px, 15vw, 84px);  aspect-ratio: 1; top: -22px; right: 8%; opacity: .7; }
	.tgs-flow__panel:nth-of-type(4)::before { width: clamp(70px, 22vw, 110px);  aspect-ratio: 1; top: -30px; left: -20px; }
	.tgs-flow__panel:nth-of-type(4)::after  { width: clamp(110px, 34vw, 172px); aspect-ratio: 1; bottom: -34px; right: -40px; opacity: .85; }
	.tgs-flow__panel:nth-of-type(5)::before { width: clamp(96px, 30vw, 150px);  aspect-ratio: 1; top: -26px; right: -30px; }
	.tgs-flow__panel:nth-of-type(5)::after  { width: clamp(44px, 13vw, 70px);  aspect-ratio: 1; bottom: 0; left: -18px; opacity: .65; }
	/* Mobiel: de grote bol per fase wordt de surfer-floater van die fase (transparant PNG).
	   De kleine ::after-bol blijft wit schuim. Surfers blijven volledig binnen het scherm
	   (positieve insets → geen horizontaal scrollen) en zweven in de tussenruimte tussen
	   fases, zodat ze niet door de tekst heen lopen. */
	.tgs-flow__panel::before { background: center / contain no-repeat; border-radius: 0; opacity: .9; filter: drop-shadow(0 10px 18px rgba(30, 76, 59, .12)); }
	.tgs-flow__panel:nth-of-type(1)::before { background-image: url(assets/img/surfer-1.png); width: clamp(120px, 34vw, 190px); aspect-ratio: 2.73; top: auto; bottom: -22px; right: 6%; left: auto; }
	.tgs-flow__panel:nth-of-type(2)::before { background-image: url(assets/img/surfer-2.png); width: clamp(110px, 30vw, 160px); aspect-ratio: 1.83; top: auto; bottom: -22px; left: 6%; right: auto; }
	.tgs-flow__panel:nth-of-type(3)::before { background-image: url(assets/img/surfer-3.png); width: clamp(130px, 38vw, 210px); aspect-ratio: 3.35; top: auto; bottom: -16px; right: 6%; left: auto; }
	.tgs-flow__panel:nth-of-type(4)::before { background-image: url(assets/img/surfer-4.png); width: clamp(120px, 34vw, 190px); aspect-ratio: 2.37; top: auto; bottom: -22px; left: 6%; right: auto; }
	.tgs-flow__panel:nth-of-type(5)::before { background-image: url(assets/img/surfer-5.png); width: clamp(120px, 34vw, 190px); aspect-ratio: 2.64; top: -22px; bottom: auto; right: 6%; left: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.tgs-flow__bubble, .tgs-flow__panel::before, .tgs-flow__panel::after { animation: none !important; }
	.tgs-flow, .tgs-flow__pin { height: auto; }
	.tgs-flow__pin { position: static; display: block; overflow: visible; padding: var(--tgs-section) 0; }
	.tgs-flow__head { position: static; text-align: left; margin-bottom: 40px; }
	.tgs-flow__track { position: static; inset: auto; flex-direction: column; transform: none !important; gap: clamp(36px, 9vw, 64px); }
	.tgs-flow__panel { flex: none; width: 100%; height: auto; padding: 0 var(--tgs-pad); }
	.tgs-flow__wave { display: none; }
	.tgs-flow__content { position: static; left: auto; top: auto; transform: none; max-width: 560px; }
}

@media (max-width: 900px) {
	.tgs-ab-help__grid { grid-template-columns: 1fr; }
}

/* Aanpassingen 31-08-2026 */

.tgs-hero__video{
	position:absolute; inset:0;
	overflow:hidden;
	pointer-events:none;
	container-type:size;
}
.tgs-hero__video iframe{
	position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	width:max(100cqw, 100cqh * 16 / 9);
	height:max(100cqh, 100cqw * 9 / 16);
	border:0;
}