/*
Theme Name: The Green Surfer — Offerte
Theme URI: https://offerte.thegreensurfer.com/
Author: The Green Surfer
Description: Gecodeerde offertetool in de huisstijl van The Green Surfer. Vervangt de Elementor/JetEngine-opzet; alle secties komen uit de meta-velden van de offertepagina.
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: tgsofferte
*/

/* ==========================================================================
   Fonts

   Let op: van beide letters is er maar één bestand. Uncut Sans bestaat alleen in
   Light, Grand alleen in Bold. `font-weight` doet daardoor niets — 400 en 700
   renderen exact gelijk (gemeten: identieke breedte én inkt). Nadruk in lopende
   tekst maken we daarom met een dunne contour (-webkit-text-stroke) in plaats
   van met een gewicht. Zodra er een Uncut Sans Medium of Bold beschikbaar is,
   kan dat hier als extra @font-face erbij en vervallen die contouren.
   ========================================================================== */
@font-face {
	font-family: "Grand";
	src: url("assets/fonts/GrandBold.woff2") format("woff2"),
	     url("assets/fonts/GrandBold.woff") format("woff");
	font-weight: 100 900;
	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;
	font-style: normal;
	font-display: swap;
	ascent-override: 92%;
	descent-override: 28%;
	line-gap-override: 0%;
}

/* ==========================================================================
   Design tokens — gelijk aan de hoofdsite
   ========================================================================== */
:root {
	--tgs-green:  #1E4C3B;
	--tgs-ink:    #292929;
	--tgs-pink:   #E06FA6;
	--tgs-amber:  #F1B243;
	--tgs-olive:  #B2A044;      /* merkkleur — voor vlakken en accenten */
	--tgs-olive-ink: #736628;   /* dezelfde kleur, donker genoeg om te lezen (≥4,9:1) */
	--tgs-grey:   #CACBBF;
	--tgs-blue:   #B5E7FF;
	--tgs-cream:  #F3EEE3;
	--tgs-white:  #FFFFFF;
	--tgs-bg:     #F3F4EF;

	--tgs-display: "Grand", "Arial Black", "Helvetica Neue", Arial, sans-serif;
	--tgs-body:    "Uncut Sans", "Helvetica Neue", Arial, sans-serif;
	/* Kleine labels, datums en bedragen. Grand is een display-letter en wordt
	   onder ~18px vermoeiend, zeker in hoofdletters met spatiëring; hier dus de
	   leesletter, met dezelfde behandeling (hoofdletters + spatiëring). */
	--tgs-label:   "Uncut Sans", "Helvetica Neue", Arial, sans-serif;

	--tgs-h-hero: clamp(2.75rem, 6vw, 5rem);
	--tgs-h1:     clamp(2.25rem, 4.6vw, 3.75rem);
	--tgs-h2:     clamp(1.75rem, 3vw, 2.5rem);
	--tgs-h3:     clamp(1.25rem, 1.9vw, 1.7rem);
	--tgs-lead:   clamp(1.25rem, 2.2vw, 1.9rem);
	--tgs-body-sz: 1.125rem;

	--tgs-radius: 35px;
	--tgs-radius-sm: 22px;
	--tgs-radius-leaf: 26px;
	--tgs-pad: 32px;
	--tgs-max: calc(1200px + 2 * var(--tgs-pad));
	--tgs-section: clamp(64px, 8vw, 128px);
	--tgs-head-h: 76px;
}

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

html {
	scrollbar-gutter: stable;
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--tgs-head-h) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

img { max-width: 100%; height: auto; display: block; }
#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: 1.05;
	text-transform: uppercase;
	letter-spacing: .005em;
}

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

.tgs-h1 { font-size: var(--tgs-h1); }
.tgs-h2 { font-size: var(--tgs-h2); }
.tgs-h3 { font-size: var(--tgs-h3); line-height: 1.15; }

.tgs-eyebrow {
	font-family: var(--tgs-label);
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: .78rem;
	color: var(--tgs-olive-ink);
	margin: 0 0 14px;
	font-weight: 500;
}

.tgs-lead { font-size: var(--tgs-lead); line-height: 1.35; color: var(--tgs-green); margin: 18px 0 0; max-width: 34ch; }
.tgs-link { color: var(--tgs-green); text-decoration: underline; text-underline-offset: 3px; }

/* Rijke tekst uit de editor */
.tgs-richtext { font-size: 1.0625rem; line-height: 1.62; color: var(--tgs-ink); max-width: 68ch; }
.tgs-richtext > * + * { margin-top: 1em; }
.tgs-richtext p { margin: 0; }
.tgs-richtext strong, .tgs-richtext b { color: var(--tgs-green); -webkit-text-stroke: .3px currentColor; }
.tgs-richtext h2, .tgs-richtext h3, .tgs-richtext h4 { font-family: var(--tgs-display); text-transform: uppercase; color: var(--tgs-green); margin-top: 1.5em; }
.tgs-richtext h2 { font-size: var(--tgs-h3); }
.tgs-richtext h3 { font-size: 1.15rem; }
.tgs-richtext ul, .tgs-richtext ol { margin: 0; padding-left: 1.15em; }
.tgs-richtext li + li { margin-top: .35em; }
.tgs-richtext ul ul { margin-top: .35em; }
.tgs-richtext a { color: var(--tgs-green); text-decoration: underline; text-underline-offset: 3px; }
.tgs-richtext img { border-radius: var(--tgs-radius-leaf); margin: 1.4em 0; }

/* --------------------------------------------------------------------------
   Detaillering van de tekstzetting.

   Nederlands heeft lange samenstellingen; in een smalle kolom levert dat anders
   grote gaten of een woord dat uit de kolom loopt. Koppen worden uitgebalanceerd
   zodat er geen enkel woord op de laatste regel achterblijft, en alinea's krijgen
   dezelfde behandeling voor hun slotregel.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
/* Géén automatische woordafbreking. De tekstkolommen zijn hier zo'n 35 tekens
   breed, en dan grijpt de browser gretig in: "samenkom-sten", "Neder-land".
   Een rafelige rechterrand leest in het Nederlands prettiger dan een afgebroken
   samenstelling. Alleen een woord dat écht niet past mag nog breken. */
.tgs-richtext, .tgs-fase__text, .tgs-doel__text, .tgs-deflist dd, .tgs-hero__intro {
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
}
/* Tussenkop binnen een lopend tekstblok (kwam uit de editor als een vetgedrukte
   regel; zie tgs_richtext_opmaken). Krijgt lucht erboven en een eigen gewicht,
   zodat je bij het scannen de onderdelen uit elkaar houdt. */
.tgs-richtext__kop {
	font-family: var(--tgs-body);
	font-size: 1.05rem;
	line-height: 1.35;
	letter-spacing: .01em;
	text-transform: none;
	color: var(--tgs-green);
	-webkit-text-stroke: .35px currentColor;
	margin-top: 1.9em;
}
.tgs-richtext > .tgs-richtext__kop:first-child { margin-top: 0; }
/* De kop hoort bij de tekst eronder, niet bij de alinea erboven. */
.tgs-richtext > .tgs-richtext__kop + p { margin-top: .45em; }

/* Opsomming met eigen letters of nummers (a. b. c.). De letter staat in de kantlijn,
   zodat vervolgregels netjes onder de tekst uitlijnen in plaats van onder de letter. */
.tgs-abc { list-style: none; margin: 0; padding: 0; }
.tgs-abc li {
	position: relative;
	padding-left: 2.1em;
	margin-top: .45em;
}
.tgs-abc li:first-child { margin-top: 0; }
.tgs-abc__merk {
	position: absolute;
	left: 0;
	top: 0;
	width: 1.6em;
	color: var(--tgs-olive-ink);
	font-variant-numeric: tabular-nums;
}
.tgs-richtext > .tgs-abc { margin-top: .6em; }

/* Cijfers in lopende tekst even breed, zodat bedragen onder elkaar uitlijnen. */
.tgs-richtext { font-variant-numeric: tabular-nums lining-nums; }

/* De eerste alinea van een blok draagt het verhaal: iets groter en in het groen,
   zodat je bij het scannen meteen weet waar een sectie over gaat. */
.tgs-split__text .tgs-richtext > p:first-child,
.tgs-planning__text > p:first-child {
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--tgs-green);
}

/* ==========================================================================
   Leesvoortgang + kop
   ========================================================================== */
.tgs-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: transparent; pointer-events: none; }
.tgs-progress__bar { display: block; height: 100%; width: 0; background: var(--tgs-amber); transition: width .12s linear; }
.admin-bar .tgs-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .tgs-progress { top: 46px; } }

.tgs-head {
	position: sticky;
	top: 0;
	z-index: 110;
	background: var(--tgs-bg);
	border-bottom: 1px solid rgba(30, 76, 59, .1);
}
.admin-bar .tgs-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .tgs-head { top: 46px; } }

.tgs-head__inner {
	max-width: var(--tgs-max);
	margin: 0 auto;
	padding: 0 var(--tgs-pad);
	height: var(--tgs-head-h);
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
}
.tgs-head__logo { flex: none; display: flex; align-items: center; }
.tgs-head__logo img { width: 128px; height: auto; }
.tgs-head__mail {
	flex: none;
	font-family: var(--tgs-label);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-size: .76rem;
	color: var(--tgs-green);
	border: 1.5px solid var(--tgs-green);
	border-radius: 999px;
	padding: 8px 16px;
	transition: background-color .2s ease, color .2s ease;
	font-weight: 500;
}
.tgs-head__mail:hover { background: var(--tgs-green); color: var(--tgs-cream); }

@media (min-width: 861px) {
	@supports (backdrop-filter: blur(1px)) {
		.tgs-head { background: rgba(243, 244, 239, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
	}
}

/* Sectienavigatie */
.tgs-secnav { flex: 1 1 auto; min-width: 0; }
.tgs-secnav__track {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	padding: 4px 0;
	mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.tgs-secnav__track::-webkit-scrollbar { display: none; }
.tgs-secnav__link {
	flex: none;
	font-size: .88rem;
	line-height: 1.2;
	color: var(--tgs-ink);
	padding: 8px 15px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}
.tgs-secnav__link:hover { background: rgba(30, 76, 59, .08); }
.tgs-secnav__link.is-current { background: var(--tgs-green); color: var(--tgs-cream); }
@media (max-width: 860px) {
	.tgs-head__mail { display: none; }
	.tgs-head__logo img { width: 104px; }
}

/* Groot achtergrondbeeld als <img>: de browser kiest zo zelf het juiste formaat
   uit de srcset, in plaats van altijd het volledige bestand te laden. */
.tgs-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.tgs-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(88vh, 860px);
	padding: calc(var(--tgs-section) * 1.2) 0 var(--tgs-section);
	background: var(--tgs-green);
	color: var(--tgs-cream);
	overflow: hidden;
}
.tgs-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(30, 76, 59, .25) 0%, rgba(30, 76, 59, .62) 18%, rgba(30, 76, 59, .84) 34%, rgba(30, 76, 59, .94) 100%);
}
.tgs-hero__inner { position: relative; z-index: 2; }
.tgs-hero__eyebrow {
	font-family: var(--tgs-label);
	text-transform: none;
	letter-spacing: .01em;
	font-size: 1.05rem;
	color: var(--tgs-cream);
	margin: 0 0 20px;
	max-width: 52ch;
	font-weight: 400;
	line-height: 1.45;
}
.tgs-hero__title {
	font-size: var(--tgs-h-hero);
	color: var(--tgs-cream);
	line-height: .95;
	max-width: 16ch;
}
.tgs-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.tgs-pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--tgs-label);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .8rem;
	color: var(--tgs-green);
	background: var(--tgs-amber);
	border-radius: 999px;
	padding: 9px 18px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.tgs-pill--link { background: var(--tgs-blue); transition: transform .2s ease; }
.tgs-pill--link:hover { transform: translateY(-2px); }
.tgs-hero__intro { margin: 32px 0 0; max-width: 62ch; font-size: 1.15rem; line-height: 1.6; color: rgba(243, 238, 227, .92); }
.tgs-hero__intro p { margin: 0; }
.tgs-hero__intro p + p { margin-top: .9em; }
.tgs-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	color: var(--tgs-cream);
	opacity: .7;
	animation: tgs-bob 2.4s ease-in-out infinite;
}
.tgs-hero__scroll svg { width: 100%; height: 100%; }
@keyframes tgs-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .tgs-hero__scroll { animation: none; } }

.tgs-hero--landing { min-height: min(62vh, 620px); }

/* ==========================================================================
   Secties & scheidingslijn
   ========================================================================== */
.tgs-sec { padding: var(--tgs-section) 0; }
.tgs-sec--empty { text-align: left; }

/* De naad tussen twee secties. Hier stond een amberkleurig blaadje in het midden,
   tien keer herhaald over een offerte; dat vroeg meer aandacht dan het verdiende.
   Nu alleen een haarlijn die aan de randen wegvalt — de witruimte doet het werk. */
.tgs-divider { max-width: var(--tgs-max); margin: 0 auto; padding: 0 var(--tgs-pad); }
.tgs-divider__line {
	display: block;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(30, 76, 59, .22) 12%, rgba(30, 76, 59, .22) 88%, transparent);
}

/* ==========================================================================
   De route (werkfases)
   ========================================================================== */
.tgs-route__title { max-width: 18ch; margin-bottom: clamp(36px, 5vw, 64px); }
.tgs-fases { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 32px); grid-template-columns: repeat(3, 1fr); }
.tgs-fase {
	position: relative;
	background: var(--tgs-white);
	border-radius: var(--tgs-radius-leaf);
	padding: clamp(24px, 2.4vw, 34px);
	border: 1px solid rgba(30, 76, 59, .08);
	transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.tgs-fase:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(30, 76, 59, .1); }
.tgs-fase__dot { position: absolute; top: 26px; right: 26px; width: 12px; height: 12px; border-radius: 999px; background: var(--tgs-amber); }
.tgs-fase__title { font-size: 1.22rem; line-height: 1.05; margin: 0 0 14px; padding-right: 26px; }
.tgs-fase__text { font-size: 1rem; line-height: 1.65; color: var(--tgs-ink); }
.tgs-fase__text p { margin: 0; }
.tgs-fase__text p + p { margin-top: .7em; }
.tgs-fase:last-child { background: var(--tgs-green); border-color: var(--tgs-green); }
.tgs-fase:last-child .tgs-fase__title { color: var(--tgs-cream); }
.tgs-fase:last-child .tgs-fase__text { color: rgba(243, 238, 227, .86); }
.tgs-fase:last-child .tgs-fase__dot { background: var(--tgs-blue); }
@media (max-width: 1000px) { .tgs-fases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tgs-fases { grid-template-columns: 1fr; } }

/* ==========================================================================
   Doelstellingen
   ========================================================================== */
.tgs-doelen__grid { display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: repeat(2, 1fr); margin-top: clamp(36px, 4vw, 56px); }
.tgs-doel {
	position: relative;
	background: var(--tgs-cream);
	border-radius: var(--tgs-radius-leaf);
	padding: clamp(26px, 2.6vw, 38px);
	padding-top: clamp(46px, 4vw, 58px);
}
.tgs-doel__num {
	position: absolute;
	top: clamp(22px, 2.4vw, 30px);
	left: clamp(26px, 2.6vw, 38px);
	font-family: var(--tgs-label);
	font-size: .85rem;
	letter-spacing: .08em;
	color: var(--tgs-olive-ink);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.tgs-doel__title { font-size: 1.3rem; line-height: 1.2; margin: 0 0 12px; text-transform: none; letter-spacing: 0; }
.tgs-doel__text { font-size: 1.02rem; line-height: 1.65; }
.tgs-doel__text p { margin: 0; }
.tgs-doel__text p + p { margin-top: .7em; }
@media (max-width: 760px) { .tgs-doelen__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Twee kolommen: tekst + beeld
   ========================================================================== */
.tgs-split__head { max-width: 16ch; margin-bottom: clamp(36px, 4vw, 60px); }
.tgs-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.tgs-split__grid.is-single { grid-template-columns: minmax(0, 68ch); }
.tgs-split--flip .tgs-split__head { margin-left: auto; text-align: right; }
.tgs-split__text .tgs-h3 { margin-bottom: 18px; max-width: 24ch; text-transform: none; letter-spacing: 0; }
.tgs-split__media { margin: 0; }
.tgs-split__media img {
	width: 100%;
	border-radius: var(--tgs-radius-leaf);
	border: 4px solid var(--tgs-amber);
	box-shadow: 0 18px 44px rgba(30, 76, 59, .12);
}
.tgs-split--flip .tgs-split__media img { border-color: var(--tgs-blue); }
@media (max-width: 860px) {
	.tgs-split__grid { grid-template-columns: 1fr; }
	.tgs-split--flip .tgs-split__head { margin-left: 0; text-align: left; }
	.tgs-split--flip .tgs-split__media { order: 2; }
}

/* Punten van aandacht */
.tgs-punten { margin-top: clamp(44px, 5vw, 76px); background: var(--tgs-white); border-radius: var(--tgs-radius-leaf); padding: clamp(28px, 3vw, 46px); border: 1px solid rgba(30, 76, 59, .08); }
.tgs-punten__title { margin-bottom: 20px; }
.tgs-ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
.tgs-ul li { break-inside: avoid; position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 1rem; line-height: 1.5; }
.tgs-ul li::before { content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 999px; background: var(--tgs-amber); }
@media (max-width: 700px) { .tgs-ul { columns: 1; } }

/* ==========================================================================
   Kleur, vorm en beeld (moodboard)
   ========================================================================== */
.tgs-beeld__text { max-width: 68ch; margin-top: 26px; font-size: 1.05rem; line-height: 1.65; }
.tgs-beeld__text p { margin: 0; }
.tgs-beeld__text p + p { margin-top: .9em; }

.tgs-spread { position: relative; display: flex; align-items: center; justify-content: center; margin-top: clamp(36px, 4vw, 64px); padding: 30px 0; overflow: hidden; }
.tgs-spread__track { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
.tgs-spread__slide {
	flex: none;
	width: 260px;
	height: 340px;
	transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease;
	transform: scale(.62) translateY(26px);
	opacity: 0;
	pointer-events: none;
}
.tgs-spread__inner {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--tgs-radius-leaf);
	background-size: cover;
	background-position: center;
	box-shadow: 0 20px 44px rgba(30, 76, 59, .18);
}
.tgs-spread__slide.left2, .tgs-spread__slide.right2 { transform: scale(.62) translateY(26px); opacity: .55; }
.tgs-spread__slide.left1, .tgs-spread__slide.right1 { transform: scale(.82) translateY(12px); opacity: .85; }
.tgs-spread__slide.center { transform: scale(1); opacity: 1; }
.tgs-spread__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: var(--tgs-blue);
	color: var(--tgs-green);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(30, 76, 59, .18);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.tgs-spread__nav svg { width: 22px; height: 22px; }
.tgs-spread__nav:hover { background: var(--tgs-green); color: var(--tgs-cream); }
.tgs-spread__nav--prev { left: 16px; }
.tgs-spread__nav--next { right: 16px; }
@media (max-width: 700px) {
	.tgs-spread__slide { width: 180px; height: 240px; }
	.tgs-spread__track { gap: 14px; }
}

/* ==========================================================================
   Onze expertise (accordeon)
   ========================================================================== */
.tgs-acc { margin-top: clamp(32px, 4vw, 52px); border-top: 1.5px solid var(--tgs-grey); }
.tgs-acc__item { border-bottom: 1.5px solid var(--tgs-grey); position: relative; }
.tgs-acc__head {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 0;
}
.tgs-acc__head::-webkit-details-marker { display: none; }
.tgs-acc__title { flex: 1 1 auto; font-family: var(--tgs-display); font-weight: 800; text-transform: uppercase; color: var(--tgs-green); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.1; }
.tgs-acc__plus { flex: none; position: relative; width: 22px; height: 22px; }
.tgs-acc__plus::before, .tgs-acc__plus::after { content: ''; position: absolute; background: var(--tgs-green); transition: transform .3s ease, opacity .3s ease; }
.tgs-acc__plus::before { left: 0; right: 0; top: 10px; height: 2px; }
.tgs-acc__plus::after { top: 0; bottom: 0; left: 10px; width: 2px; }
.tgs-acc__item[open] .tgs-acc__plus::after { transform: scaleY(0); opacity: 0; }
.tgs-acc__body { padding: 0 0 28px; max-width: 68ch; position: relative; }
.tgs-tag {
	flex: none;
	font-family: var(--tgs-label);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .72rem;
	border-radius: 999px;
	padding: 5px 11px;
	font-weight: 500;
}
.tgs-tag--basis { background: var(--tgs-blue); color: var(--tgs-green); }
.tgs-tag--wens { background: var(--tgs-pink); color: var(--tgs-ink); }

/* ==========================================================================
   Service Level Agreement
   ========================================================================== */
.tgs-sla__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); margin-top: clamp(36px, 4vw, 56px); }
.tgs-sla__col--wens { background: var(--tgs-green); color: var(--tgs-cream); border-radius: var(--tgs-radius-leaf); padding: clamp(28px, 3vw, 44px); }
.tgs-sla__for { font-family: var(--tgs-label); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; color: var(--tgs-amber); margin: 0 0 22px; font-weight: 500; }
.tgs-sla__col--wens .tgs-deflist dt { color: var(--tgs-blue); }
.tgs-sla__col--wens .tgs-deflist dd { color: rgba(243, 238, 227, .86); }
.tgs-sla__col--wens .tgs-def + .tgs-def { border-top-color: rgba(243, 238, 227, .18); }

.tgs-deflist { margin: 0; }
.tgs-def { padding: 16px 0; }
.tgs-def + .tgs-def { border-top: 1px solid rgba(30, 76, 59, .14); }
.tgs-deflist dt { color: var(--tgs-green); font-size: 1.05rem; -webkit-text-stroke: .3px currentColor; }
.tgs-deflist dd { margin: 5px 0 0; font-size: 1rem; line-height: 1.65; color: var(--tgs-ink); }
@media (max-width: 860px) { .tgs-sla__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Planning
   ========================================================================== */
.tgs-planning__text { max-width: 68ch; margin-top: 24px; }
.tgs-planning__timeline { margin-top: clamp(32px, 4vw, 52px); }
.tgs-planning__media { margin: clamp(32px, 4vw, 52px) 0 0; }
.tgs-planning__media img { width: 100%; border-radius: var(--tgs-radius-leaf); border: 4px solid var(--tgs-amber); }

/* ==========================================================================
   Begroting
   ========================================================================== */
.tgs-kosten { margin-top: clamp(32px, 4vw, 48px); background: var(--tgs-white); border-radius: var(--tgs-radius-leaf); padding: clamp(24px, 2.6vw, 38px); border: 1px solid rgba(30, 76, 59, .08); }
.tgs-kosten__title { margin-bottom: 18px; }
.tgs-kosten__table { width: 100%; border-collapse: collapse; }
.tgs-kosten__table th, .tgs-kosten__table td { text-align: left; padding: 14px 0; font-weight: 500; font-size: 1rem; font-family: var(--tgs-label); font-variant-numeric: tabular-nums; }
.tgs-kosten__table td { text-align: right; white-space: nowrap; font-size: 1.05rem; color: var(--tgs-green); }
.tgs-kosten__table tbody tr + tr th, .tgs-kosten__table tbody tr + tr td { border-top: 1px solid rgba(30, 76, 59, .12); }
.tgs-kosten__table tfoot th, .tgs-kosten__table tfoot td { border-top: 2px solid var(--tgs-green); color: var(--tgs-green); padding-top: 18px; }
/* Het woord "Totaal" mag in de display-letter; het bedrag zelf niet — dat is het
   getal waar het hele gesprek over gaat en moet in één oogopslag te lezen zijn. */
.tgs-kosten__table tfoot th { font-family: var(--tgs-display); text-transform: uppercase; }
.tgs-kosten__table tfoot td { font-size: 1.2rem; -webkit-text-stroke: .35px currentColor; }
.tgs-moneybird { margin-top: clamp(32px, 4vw, 48px); }

/* ==========================================================================
   Algemene informatie
   ========================================================================== */
.tgs-algemeen__grid { display: grid; gap: clamp(18px, 2vw, 28px); grid-template-columns: repeat(3, 1fr); margin-top: clamp(32px, 4vw, 52px); }
.tgs-infokaart { position: relative; background: var(--tgs-cream); border-radius: var(--tgs-radius-leaf); padding: clamp(24px, 2.4vw, 34px); }
.tgs-infokaart__title { font-size: 1.15rem; line-height: 1.1; margin: 0 0 12px; }
.tgs-infokaart__text { font-size: .98rem; }
@media (max-width: 960px) { .tgs-algemeen__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tgs-algemeen__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Overzicht (alleen redacteuren)
   ========================================================================== */
.tgs-overzicht__note { font-family: var(--tgs-label); text-transform: uppercase; letter-spacing: .07em; font-size: .76rem; color: var(--tgs-olive-ink); margin: 10px 0 0; font-weight: 500; }
.tgs-overzicht__grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
.tgs-offkaart { background: var(--tgs-white); border-radius: var(--tgs-radius-leaf); padding: 28px; border: 1px solid rgba(30, 76, 59, .08); }
.tgs-offkaart__title { font-size: 1.2rem; line-height: 1.1; }
.tgs-offkaart__meta, .tgs-offkaart__secties { font-size: .85rem; color: var(--tgs-ink); margin: 10px 0 0; }
.tgs-offkaart__secties { color: var(--tgs-olive-ink); }
.tgs-offkaart .tgs-link { display: inline-block; margin-top: 14px; font-size: .85rem; }
@media (max-width: 960px) { .tgs-overzicht__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tgs-overzicht__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Wachtwoordscherm
   ========================================================================== */
.tgs-pw {
	position: relative;
	min-height: calc(100vh - var(--tgs-head-h));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px var(--tgs-pad);
	background: var(--tgs-green);
	overflow: hidden;
}
.tgs-pw__veil { position: absolute; inset: 0; z-index: 1; background: rgba(30, 76, 59, .82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tgs-pw__card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 460px;
	background: var(--tgs-cream);
	border-radius: var(--tgs-radius);
	padding: clamp(32px, 4vw, 48px);
	text-align: center;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.tgs-pw__mark { width: 52px; height: auto; margin: 0 auto 20px; }
.tgs-pw__title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.05; }
.tgs-pw__intro { margin: 14px 0 26px; font-size: 1rem; line-height: 1.55; color: var(--tgs-ink); }
.tgs-pw__label { display: block; font-family: var(--tgs-label); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--tgs-olive-ink); margin-bottom: 8px; text-align: left; font-weight: 500; }
.tgs-pw__row { display: flex; gap: 10px; }
.tgs-pw__input {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--tgs-body);
	font-size: 1rem;
	color: var(--tgs-ink);
	background: var(--tgs-white);
	border: 1.5px solid var(--tgs-grey);
	border-radius: 999px;
	padding: 13px 20px;
	transition: border-color .2s ease;
}
.tgs-pw__input:focus { outline: none; border-color: var(--tgs-green); }
.tgs-pw__btn {
	flex: none;
	font-family: var(--tgs-body);
	font-size: .95rem;
	color: var(--tgs-cream);
	background: var(--tgs-green);
	border: 0;
	border-radius: 999px;
	padding: 13px 24px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.tgs-pw__btn:hover { background: var(--tgs-amber); color: var(--tgs-green); }
.tgs-pw__error { margin: 14px 0 0; font-size: .9rem; color: #A8333A; text-align: left; }
@media (max-width: 460px) { .tgs-pw__row { flex-direction: column; } }

/* ==========================================================================
   Wegwijzers en contactmomenten
   ========================================================================== */

/* Inhoudsopgave in de opening: in één blik zie je hoe de offerte is opgebouwd
   en spring je meteen naar het onderdeel dat je zoekt. */
.tgs-overzicht { margin-top: clamp(30px, 4vw, 46px); }
.tgs-overzicht__kop {
	display: block;
	font-family: var(--tgs-label);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .72rem;
	/* Crème, geen amber: amber van 12px haalt op een lichte bannerfoto maar 3:1.
	   Het amber-accent zit nu in de onderlijn bij hover. */
	color: var(--tgs-cream);
	margin-bottom: 14px;
}
.tgs-overzicht__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 2px 26px;
	max-width: 760px;
}
.tgs-overzicht__lijst a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 0;
	font-size: .98rem;
	color: rgba(243, 238, 227, .88);
	border-bottom: 1px solid rgba(243, 238, 227, .16);
	transition: color .2s ease, border-color .2s ease;
}
.tgs-overzicht__lijst a:hover { color: var(--tgs-cream); border-bottom-color: var(--tgs-amber); }
.tgs-overzicht__nr {
	flex: none;
	font-family: var(--tgs-label);
	font-size: .7rem;
	letter-spacing: .06em;
	color: rgba(243, 238, 227, .72);
	font-variant-numeric: tabular-nums;
}
.tgs-overzicht__lijst a:hover .tgs-overzicht__nr { color: var(--tgs-amber); }

/* Vraag bij een onderwerp. Bewust klein en rustig: het moet er zijn op het moment
   dat je het nodig hebt, zonder de tekst te overstemmen. */
.tgs-vraag {
	max-width: var(--tgs-max);
	margin: -18px auto 0;
	padding: 0 var(--tgs-pad);
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 8px;
	font-size: .92rem;
	color: var(--tgs-olive-ink);
}
.tgs-vraag__link {
	color: var(--tgs-green);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .2s ease;
}
.tgs-vraag__link:hover { color: var(--tgs-olive-ink); }
@media (max-width: 600px) {
	.tgs-vraag { justify-content: flex-start; margin-top: -6px; }
}

/* Afsluitend contactblok: bellen, mailen of appen, vlak voor de voet.
   Crème (niet groen) zodat het zich losmaakt van zowel de pagina als de voet. */
.tgs-contactblok { padding: 0 0 var(--tgs-section); }
.tgs-contactblok__box {
	background: var(--tgs-cream);
	border: 2px solid var(--tgs-amber);
	border-radius: var(--tgs-radius-leaf);
	padding: clamp(28px, 4vw, 52px);
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.tgs-contactblok__titel { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 14ch; }
.tgs-contactblok__intro { margin: 16px 0 0; max-width: 46ch; line-height: 1.6; }
.tgs-contactblok__acties { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tgs-contactblok__bel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.15rem;
	color: var(--tgs-green);
	transition: color .2s ease;
}
.tgs-contactblok__bel svg { width: 20px; height: 20px; flex: none; }
.tgs-contactblok__bel:hover { color: var(--tgs-olive-ink); }
.tgs-contactblok__app {
	font-size: .92rem;
	color: var(--tgs-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 800px) {
	.tgs-contactblok__box { grid-template-columns: 1fr; }
	.tgs-contactblok__titel { max-width: none; }
}

/* ==========================================================================
   Voet
   ========================================================================== */
.tgs-foot { background: var(--tgs-green); color: var(--tgs-cream); padding: var(--tgs-section) 0 34px; }
.tgs-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 4vw, 72px); }
.tgs-foot__claim { font-family: var(--tgs-display); text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.05; color: var(--tgs-cream); margin: 0; max-width: 18ch; }
.tgs-foot__text { margin: 18px 0 0; max-width: 46ch; color: rgba(243, 238, 227, .82); line-height: 1.6; }
.tgs-foot__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tgs-foot__link { font-size: 1.05rem; color: var(--tgs-cream); border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; }
.tgs-foot__link:hover { color: var(--tgs-amber); border-bottom-color: var(--tgs-amber); }
.tgs-foot__adres { margin: 8px 0; color: rgba(243, 238, 227, .82); line-height: 1.5; }
.tgs-foot__bar { display: flex; align-items: center; gap: 14px; margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid rgba(243, 238, 227, .18); font-size: .85rem; color: rgba(243, 238, 227, .7); }
.tgs-foot__mark { width: 34px; height: auto; }
@media (max-width: 760px) { .tgs-foot__grid { grid-template-columns: 1fr; } }

/* Terug naar boven */
.tgs-totop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--tgs-green);
	color: var(--tgs-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(30, 76, 59, .28);
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.tgs-totop svg { width: 20px; height: 20px; }
.tgs-totop.is-on { opacity: 1; pointer-events: auto; transform: none; }
.tgs-totop:hover { background: var(--tgs-amber); color: var(--tgs-green); }
body.tgs-editmode .tgs-totop { display: none; }

/* ==========================================================================
   Knop met bubbel-pijl (zelfde als op de hoofdsite)
   ========================================================================== */
.wa-btn-bubble-arrow {
	--wa-bubble-content-bg: var(--tgs-white);
	--wa-bubble-content-fg: var(--tgs-ink);
	--wa-bubble-alt-bg: var(--tgs-green);
	--wa-bubble-accent: var(--tgs-blue);
	--wa-bubble-arrow-fg: var(--tgs-ink);
	font-size: .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);
	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;
	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; }
}

/* ==========================================================================
   Toetsenbord: altijd zien waar je bent
   ========================================================================== */
:focus-visible { outline: 3px solid var(--tgs-amber); outline-offset: 3px; border-radius: 4px; }
.tgs-hero :focus-visible, .tgs-pw :focus-visible, .tgs-foot :focus-visible,
.tgs-sla__col--wens :focus-visible { outline-color: var(--tgs-blue); }

.tgs-skip {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -140%);
	z-index: 200;
	background: var(--tgs-green);
	color: var(--tgs-cream);
	padding: 12px 22px;
	border-radius: 0 0 999px 999px;
	transition: transform .18s ease;
}
.tgs-skip:focus { transform: translate(-50%, 0); }

/* ==========================================================================
   Plaatshouder + scroll-reveal
   ========================================================================== */
.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-label); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--tgs-olive-ink); font-weight: 500; }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Snel bewerken
   ========================================================================== */
.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, .1); }
[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; }
@keyframes tgs-saved-flash { 0% { background: rgba(30, 76, 59, .12); } 100% { background: transparent; } }
.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; }
.tgs-editmode a:has([data-tgs-ed]) { pointer-events: none; }
.tgs-editmode [data-tgs-ed] { pointer-events: auto; }

.tgs-fulllink { display: none; }
.tgs-editmode .tgs-fulllink { display: inline-flex; position: absolute; top: 8px; right: 0; z-index: 7; font-family: var(--tgs-label); font-weight: 500; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; background: var(--tgs-green); color: var(--tgs-cream); border-radius: 999px; padding: 5px 12px; }
.tgs-editmode .tgs-fulllink:hover { background: var(--tgs-amber); 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); }

/* ==========================================================================
   Print — een offerte moet ook op papier kloppen
   ========================================================================== */
@media print {
	.tgs-head, .tgs-progress, .tgs-totop, .tgs-editfab, .tgs-spread__nav, .tgs-hero__scroll { display: none !important; }
	body { background: #fff; font-size: 11pt; }
	.tgs-sec { padding: 24pt 0; break-inside: avoid; }
	.tgs-hero { min-height: auto; padding: 24pt 0; background: none !important; color: var(--tgs-ink); }
	.tgs-hero__veil { display: none; }
	.tgs-hero__title, .tgs-hero__intro { color: var(--tgs-ink); }
	.tgs-acc__body { display: block !important; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.tgs-fase, .tgs-doel, .tgs-infokaart, .tgs-kosten { break-inside: avoid; }
}

/* Reserveer ruimte zolang een beeld nog laadt (voorkomt verspringen). */
.tgs-split__media, .tgs-planning__media { min-height: 120px; }

/* ==========================================================================
   Twee plugins leveren hun eigen opmaak: de Moneybird-offerte en de tijdlijn.
   Hieronder trekken we die in de huisstijl, zonder de plugins zelf aan te raken.
   ========================================================================== */
.tgs-moneybird .mb-offerte h2 { font-family: var(--tgs-display); text-transform: uppercase; color: var(--tgs-green); font-size: var(--tgs-h3); }
.tgs-moneybird .mb-meta { font-family: var(--tgs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; color: var(--tgs-olive-ink); list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tgs-moneybird .mb-heading { font-family: var(--tgs-display); text-transform: uppercase; color: var(--tgs-green); font-size: 1.1rem; }
.tgs-moneybird .mb-table-wrap { border: 1px solid rgba(30, 76, 59, .12); border-radius: var(--tgs-radius-sm); background: var(--tgs-white); overflow-x: auto; }
.tgs-moneybird .mb-th { border-bottom: 2px solid var(--tgs-green); font-family: var(--tgs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; color: var(--tgs-green); }
.tgs-moneybird .mb-td { border-bottom: 1px solid rgba(30, 76, 59, .1); font-size: 1rem; line-height: 1.6; }
.tgs-moneybird .mb-td-right, .tgs-moneybird .mb-totals-table td { font-family: var(--tgs-label); font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--tgs-green); }
.tgs-moneybird .mb-totals-strong td { border-top: 2px solid var(--tgs-green); font-size: 1.15rem; -webkit-text-stroke: .35px currentColor; }
.tgs-moneybird .mb-btn { border-radius: 999px; border: 1.5px solid var(--tgs-green); color: var(--tgs-green); font-family: var(--tgs-body); transition: background-color .2s ease, color .2s ease; }
.tgs-moneybird .mb-btn:hover { background: var(--tgs-green); color: var(--tgs-cream); }

.tgs-planning__timeline .gs-timeline__title { font-family: var(--tgs-display); text-transform: uppercase; color: var(--tgs-green); }
.tgs-planning__timeline .gs-timeline__intro { color: var(--tgs-ink); }
.tgs-planning__timeline .gs-timeline__viewport { border-radius: var(--tgs-radius-sm); }
.tgs-planning__timeline .gs-timeline__btn { border-radius: 999px; border: 1.5px solid var(--tgs-green); background: var(--tgs-white); color: var(--tgs-green); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.tgs-planning__timeline .gs-timeline__btn:hover { background: var(--tgs-green); color: var(--tgs-cream); }
.tgs-planning__timeline .gs-period__label { font-family: var(--tgs-body); font-size: .8rem; }
/* De tijdlijn-plugin zet zijn labels op 11px; in een offerte wil je die lezen. */
.tgs-planning__timeline .gs-weekruler__cell,
.tgs-planning__timeline .gs-timeline__meta { font-family: var(--tgs-label); font-size: .78rem; letter-spacing: .04em; }
.tgs-planning__timeline .gs-period__range { font-size: .85rem; font-variant-numeric: tabular-nums; }

/* Zakelijke gegevens onderaan (alleen zichtbaar als ze ingevuld zijn). */
.tgs-foot__zakelijk { margin-left: auto; font-variant-numeric: tabular-nums; }
a.tgs-foot__adres { display: block; transition: color .2s ease; }
a.tgs-foot__adres:hover { color: var(--tgs-amber); }
@media (max-width: 600px) { .tgs-foot__bar { flex-wrap: wrap; } .tgs-foot__zakelijk { margin-left: 0; width: 100%; } }