/*!
 * The Nudgency – Huisstijl
 * Alle regels werken alleen op elementen met een tn-klasse.
 * Bestaande pagina's veranderen hierdoor niet.
 */


.tn-page, .e-con.tn-sec, .tn-tp {
	--tn-blauw: #072BB8;
	--tn-papier: #F6F7F4;
	--tn-inkt: #282828;
	--tn-lavendel: #9BB3D0;
	--tn-grijs: #6B6D68;
	--tn-lijn-l: rgba(7,43,184, 0.18);
	--tn-lijn-d: rgba(246, 247, 244, 0.18);
	--tn-font: 'Neulis Neue', sans-serif;
	
}

/* =========================================================
   Secties
   Geef een container de klasse tn-sec (+ een kleur).
   ========================================================= */
.e-con.tn-sec {
	--content-width: 1152px;
	--padding-top: 96px;
	--padding-bottom: 96px;
	--padding-left: 28px;
	--padding-right: 28px;
	--gap: 44px 44px;
	--row-gap: 44px;
	--column-gap: 44px;
	font-family: var(--tn-font);
	color: var(--tn-inkt);
	background-color: var(--tn-papier);
}
.e-con.tn-sec.tn-sec--top0 { --padding-top: 0px; }
.e-con.tn-sec.tn-sec--hero { --padding-top: 0px; --padding-bottom: 72px; }
.e-con.tn-sec.tn-blauw { background-color: var(--tn-blauw); color: var(--tn-papier); }
.e-con.tn-sec.tn-inkt { background-color: var(--tn-inkt); color: var(--tn-papier); }
.e-con.tn-sec.tn-wit { background-color: #FFFFFF; }

@media (min-width: 900px) {
	.e-con.tn-sec { --padding-top: 144px; --padding-bottom: 144px; --padding-left: 64px; --padding-right: 64px; --gap: 64px 64px; --row-gap: 64px; --column-gap: 64px; }
	.e-con.tn-sec.tn-sec--hero { --padding-top: 64px; --padding-bottom: 112px; }
}

/* =========================================================
   Typografie
   Geef een Heading- of Text-widget één van deze klassen.
   Een deel in lichter gewicht: <span class="tn-soft">…</span>
   ========================================================= */
.elementor-widget.tn-h1 .elementor-heading-title,
.elementor-widget.tn-h2 .elementor-heading-title,
.elementor-widget.tn-statement .elementor-heading-title,
.elementor-widget.tn-h3 .elementor-heading-title {
	font-family: var(--tn-font);
	color: inherit;
	margin: 0;
}
.elementor-widget.tn-h1 .elementor-heading-title { font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.elementor-widget.tn-h2 .elementor-heading-title { font-size: 34px; font-weight: 500; line-height: 1.04; letter-spacing: -0.04em; }
.elementor-widget.tn-statement .elementor-heading-title { font-size: 25px; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }
.elementor-widget.tn-h3 .elementor-heading-title { font-size: 21px; font-weight: 500; line-height: 1.22; letter-spacing: -0.02em; }

/* Kopjes: het Site Kit kan koppen in kapitalen zetten; de huisstijl niet. */
.elementor-widget.tn-h1 .elementor-heading-title,
.elementor-widget.tn-h2 .elementor-heading-title,
.elementor-widget.tn-statement .elementor-heading-title,
.elementor-widget.tn-h3 .elementor-heading-title,
.elementor-widget.tn-body, .elementor-widget.tn-body p { text-transform: none; font-family: var(--tn-font); }

.elementor-widget.tn-body,
.elementor-widget.tn-body p { font-family: var(--tn-font); font-size: 17px; line-height: 1.6; font-weight: 300; color: inherit; }
.elementor-widget.tn-body p:last-child { margin-bottom: 0; }

.elementor-widget.tn-label,
.elementor-widget.tn-label .elementor-heading-title,
.elementor-widget.tn-label p,
.tn-label {
	font-family: var(--tn-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--tn-blauw);
	margin: 0;
}
.tn-blauw .tn-label, .tn-blauw .elementor-widget.tn-label .elementor-heading-title,
.tn-inkt .tn-label, .tn-inkt .elementor-widget.tn-label .elementor-heading-title { color: var(--tn-lavendel); }

.tn-soft { font-weight: 300; color: var(--tn-grijs); }

/* Labels: Medium = wat het is, Light = bijzaak. Wisselt het gewicht, dan geen scheidingsteken.
   Alleen tussen twee gegevens van gelijk gewicht: <span class="tn-sep"></span> (dunne lijnplus). */
.tn-lt { font-weight: 300; }
.tn-sep { display: inline-block; width: 0.62em; height: 0.62em; margin: 0 0.45em 0 0.2em; vertical-align: 0.1em;
	background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.tn-blauw .tn-soft, .tn-inkt .tn-soft { color: var(--tn-lavendel); }

@media (min-width: 900px) {
	.elementor-widget.tn-h1 .elementor-heading-title { font-size: 84px; }
	.elementor-widget.tn-h2 .elementor-heading-title { font-size: 56px; }
	.elementor-widget.tn-statement .elementor-heading-title { font-size: 38px; }
	.elementor-widget.tn-h3 .elementor-heading-title { font-size: 24px; }
	.elementor-widget.tn-body, .elementor-widget.tn-body p { font-size: 18px; }
	.elementor-widget.tn-label, .elementor-widget.tn-label .elementor-heading-title, .elementor-widget.tn-label p, .tn-label { font-size: 12px; }
}

/* =========================================================
   Knoppen en links met plus
   Button-widget: klasse tn-btn (papier), tn-btn-blauw of tn-btn-lijn.
   Tekstlink: klasse tn-link op een Heading- of Text-widget met link.
   Bij hover draait de plus een kwartslag en wordt een ×.
   ========================================================= */
.elementor-widget[class*="tn-btn"] .elementor-button {
	font-family: var(--tn-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border-radius: 0;
	min-height: 54px;
	padding: 0 28px;
	display: inline-flex;
	align-items: center;
	border: 1px solid transparent;
	box-shadow: none;
}
.elementor-widget.tn-btn .elementor-button { background: var(--tn-papier); color: var(--tn-blauw); }
.elementor-widget.tn-btn-blauw .elementor-button { background: var(--tn-blauw); color: var(--tn-papier); }
.elementor-widget.tn-btn-lijn .elementor-button { background: transparent; color: var(--tn-blauw); border-color: var(--tn-blauw); }
.elementor-widget[class*="tn-btn"] .elementor-button-text::after,
.tn-link a::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 14px;
	vertical-align: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpolygon points='-0.2857,-1 0.2857,-1 0.2857,-0.2857 1,-0.2857 1,0.2857 0.2857,0.2857 0.2857,1 -0.2857,1 -0.2857,0.2857 -1,0.2857 -1,-0.2857 -0.2857,-0.2857'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpolygon points='-0.2857,-1 0.2857,-1 0.2857,-0.2857 1,-0.2857 1,0.2857 0.2857,0.2857 0.2857,1 -0.2857,1 -0.2857,0.2857 -1,0.2857 -1,-0.2857 -0.2857,-0.2857'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.elementor-widget[class*="tn-btn"] .elementor-button:hover .elementor-button-text::after,
.elementor-widget[class*="tn-btn"] .elementor-button:focus-visible .elementor-button-text::after,
.tn-link a:hover::after,
.tn-link a:focus-visible::after { transform: rotate(45deg); }
.tn-link a, .elementor-widget.tn-link .elementor-heading-title, .elementor-widget.tn-link .elementor-heading-title a {
	font-family: var(--tn-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* =========================================================
   Sectiemarkering: shortcode [tn_marker label="02 · EXPERTISES"]
   ========================================================= */
.tn-marker { display: flex; align-items: center; gap: 10px; color: var(--tn-blauw); font-family: var(--tn-font); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.tn-marker .tn-plus { flex: none; width: 14px; height: 14px; }
.tn-marker .tn-plus polygon { fill: currentColor; }
.tn-marker-arm { flex: 1; height: 4px; background: currentColor; margin-left: -10.5px; transform-origin: left center; }
.tn-marker--lav, .tn-blauw .tn-marker, .tn-inkt .tn-marker { color: var(--tn-lavendel); }

/* =========================================================
   Modulair raster
   Grid-container met klasse tn-mg (Content Width: Full Width).
   Vakken (kind-containers) krijgen klasse tn-cell.
   Plaatsing: tn-span-2…6 (kolommen), tn-rows-2…4 (rijen),
   of de vaste plekken voor projecten (tn-g-…) en kennishub (tn-k-…).
   ========================================================= */
.tn-mg { --rl: var(--tn-lijn-l, rgba(7,43,184, 0.18)); --cols: 4; --row: 120px; }
.tn-blauw .tn-mg, .tn-inkt .tn-mg, .tn-mg.tn-mg--licht { --rl: rgba(246, 247, 244, 0.18); }

.e-con-full.tn-mg,
.e-con-boxed.tn-mg > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) !important;
	grid-auto-rows: var(--row);
	grid-auto-flow: row dense;
	gap: 0 !important;
	--gap: 0px 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	border-top: 1px solid var(--rl);
	border-left: 1px solid var(--rl);
	background-image: linear-gradient(to left, var(--rl) 1px, transparent 1px), linear-gradient(to top, var(--rl) 1px, transparent 1px);
	background-size: calc(100% / var(--cols)) 100%, 100% var(--row);
}
.e-con.tn-mg { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }

.tn-mg > .e-con.tn-cell, .tn-mg > .e-con-inner > .e-con.tn-cell,
.tn-mg > .elementor-widget, .tn-mg > .e-con-inner > .elementor-widget {
	min-width: 0;
	--padding-top: 16px; --padding-bottom: 16px; --padding-left: 18px; --padding-right: 18px;
	--gap: 8px 8px; --row-gap: 8px;
}
.tn-mg .tn-media { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; overflow: hidden; }
.tn-mg .tn-media, .tn-mg .tn-media > .elementor-widget-container, .tn-mg .tn-media .elementor-widget, .tn-mg .tn-media .elementor-widget > .elementor-widget-container { height: 100%; }
.tn-mg .tn-media .tn-tp { height: 100% !important; }

.tn-span-2 { grid-column: span 2; } .tn-span-3 { grid-column: span 3; } .tn-span-4 { grid-column: span 4; }
.tn-rows-2 { grid-row: span 2; } .tn-rows-3 { grid-row: span 3; } .tn-rows-4 { grid-row: span 4; }

/* Recent werk – mobiel */
.tn-g-h { grid-column: 1 / 5; grid-row: 1; }
.tn-g-1i { grid-column: 1 / 4; grid-row: 2 / 4; }
.tn-g-1t { grid-column: 1 / 4; grid-row: 4 / 6; }
.tn-g-2i { grid-column: 2 / 5; grid-row: 6 / 8; }
.tn-g-2t { grid-column: 2 / 5; grid-row: 8 / 10; }
.tn-g-3i { grid-column: 1 / 4; grid-row: 10 / 12; }
.tn-g-3t { grid-column: 1 / 4; grid-row: 12 / 14; }
.tn-g-l { grid-column: 1 / 5; grid-row: 14; justify-content: flex-end; }

/* Kennishub – mobiel */
.tn-k-h { grid-column: 1 / 5; grid-row: 1; }
.tn-k-m { grid-column: 1 / 5; grid-row: 2 / 4; }
.tn-k-f { grid-column: 1 / 5; grid-row: 4; }
.tn-k-1 { grid-column: 1 / 5; grid-row: 5; }
.tn-k-2 { grid-column: 1 / 5; grid-row: 6; }
.tn-k-3 { grid-column: 1 / 5; grid-row: 7; }
.tn-k-hub { grid-column: 1 / 5; grid-row: 8; justify-content: flex-end; }
.tn-k-mod { grid-column: 1 / 3; grid-row: 9; justify-content: flex-end; }
.tn-k-tr { grid-column: 3 / 5; grid-row: 9; justify-content: flex-end; }

@media (min-width: 900px) {
	.tn-mg { --cols: 6; }
	.tn-mg > .e-con.tn-cell, .tn-mg > .e-con-inner > .e-con.tn-cell,
	.tn-mg > .elementor-widget, .tn-mg > .e-con-inner > .elementor-widget { --padding-top: 18px; --padding-bottom: 18px; --padding-left: 22px; --padding-right: 22px; }

	.tn-g-h { grid-column: 1 / 3; grid-row: 3 / 5; justify-content: center; }
	.tn-g-1i { grid-column: 1 / 3; grid-row: 1 / 3; }
	.tn-g-1t { grid-column: 3 / 5; grid-row: 1 / 3; }
	.tn-g-2i { grid-column: 3 / 5; grid-row: 3 / 5; }
	.tn-g-2t { grid-column: 5 / 7; grid-row: 3 / 5; }
	.tn-g-3i { grid-column: 5 / 7; grid-row: 5 / 7; }
	.tn-g-3t { grid-column: 3 / 5; grid-row: 5 / 7; align-items: flex-end; text-align: right; }
	.tn-g-l { grid-column: 1 / 3; grid-row: 6; }

	.tn-k-h { grid-column: 1 / 4; grid-row: 1 / 3; }
	.tn-k-m { grid-column: 4 / 7; grid-row: 1 / 3; }
	.tn-k-f { grid-column: 4 / 7; grid-row: 3 / 5; }
	.tn-k-1 { grid-column: 1 / 4; grid-row: 3; }
	.tn-k-2 { grid-column: 1 / 4; grid-row: 4; }
	.tn-k-3 { grid-column: 1 / 4; grid-row: 5; }
	.tn-k-hub { grid-column: 4 / 7; grid-row: 5; }
	.tn-k-mod { grid-column: 1 / 4; grid-row: 6; }
	.tn-k-tr { grid-column: 4 / 7; grid-row: 6; }

	.tn-span-d-2 { grid-column: span 2; } .tn-span-d-3 { grid-column: span 3; } .tn-span-d-4 { grid-column: span 4; } .tn-span-d-6 { grid-column: span 6; }
}

/* Recent werk: lijnen over de hele sectie + vervagen bij hover.
   Sectie-container: tn-sec tn-inkt tn-projects. */
.e-con.tn-projects { container-type: inline-size; position: relative; z-index: 0; overflow: hidden; }
.tn-projects .tn-mg { --cw: calc((100cqw - 56px) / 4); position: relative; }
.tn-projects .e-con-full.tn-mg, .tn-projects .e-con-boxed.tn-mg > .e-con-inner { background: none; border: 0; }
.tn-projects .tn-mg::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	left: -3000px; right: -3000px; top: -360px; bottom: -360px;
	background-image: linear-gradient(to right, var(--rl) 1px, transparent 1px), linear-gradient(to bottom, var(--rl) 1px, transparent 1px);
	background-size: var(--cw) 100%, 100% var(--row);
	background-position: 3000px 0, 0 360px;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 300px, #000 calc(100% - 300px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 300px, #000 calc(100% - 300px), transparent 100%);
}
@media (min-width: 900px) { .tn-projects .tn-mg { --cw: calc(min(100cqw - 128px, 1152px) / 6); } }

.tn-projects [class*="tn-hover-"] { transition: opacity .3s; }
.tn-projects.tn-dim [class*="tn-hover-"] { opacity: .3; }
.tn-projects.tn-dim .tn-on { opacity: 1; }
.tn-projects .tn-on .elementor-heading-title { color: var(--tn-lavendel); transition: color .2s; }

/* Logo van de opdrachtgever onderaan het projectvak: klasse tn-plogo op een Image-widget. */
.elementor-widget.tn-plogo { margin-top: auto; }
.elementor-widget.tn-plogo img { height: 30px; width: auto; max-width: 180px; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .3s; }
.tn-on .elementor-widget.tn-plogo img, .elementor-widget.tn-plogo:hover img { opacity: .9; }

/* =========================================================
   Logobalk: shortcode [tn_logos ids="…"]
   ========================================================= */
.tn-logos { position: relative; overflow: hidden; border-top: 1px solid rgba(7,43,184, 0.18); border-bottom: 1px solid rgba(7,43,184, 0.18); --tn-fade: #F6F7F4; }
.tn-logos::before, .tn-logos::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 1; pointer-events: none; }
.tn-logos::before { left: 0; background: linear-gradient(to right, var(--tn-fade), rgba(246, 247, 244, 0)); }
.tn-logos::after { right: 0; background: linear-gradient(to left, var(--tn-fade), rgba(246, 247, 244, 0)); }
.tn-logos-track { display: flex; width: max-content; }
.tn-logo-cell { flex: none; width: 168px; height: 96px; border-right: 1px solid rgba(7,43,184, 0.18); display: flex; align-items: center; justify-content: center; padding: 0 24px; box-sizing: border-box; opacity: .5; transition: opacity .3s; font-family: 'Neulis Neue', sans-serif; font-size: 17px; font-weight: 500; color: #282828; }
.tn-logo-cell img { max-width: 100%; max-height: 40px; width: auto; height: auto; filter: grayscale(1) brightness(0); }
.tn-logo-cell:hover { opacity: 1; }
@media (min-width: 900px) { .tn-logo-cell { width: 192px; height: 120px; font-size: 19px; } .tn-logo-cell img { max-height: 48px; } }
@keyframes tn-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
	.tn-logos-track { animation: tn-marq 48s linear infinite; }
	.tn-logos:hover .tn-logos-track { animation-play-state: paused; }
}

/* =========================================================
   Touchpoint-beeld
   ========================================================= */
.tn-tp { position: relative; width: 100%; height: 480px; background: var(--tn-bg, #072BB8); overflow: hidden; }
.tn-tp canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; cursor: crosshair; touch-action: pan-y; }
.tn-tp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(1.15); }
.tn-tp-tint { position: absolute; inset: 0; background: #072BB8; mix-blend-mode: multiply; opacity: .62; }

/* =========================================================
   Beweging bij scrollen: klasse tn-reveal
   ========================================================= */
@keyframes tn-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes tn-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.tn-reveal { animation: tn-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
		.tn-marker-arm { animation: tn-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
	}
}

/* 0.2.2 — containers die als link werken (html_tag a) erven de tekstkleur van de sectie, niet de linkkleur van het Site Kit. */
.e-con.tn-sec a.e-con, .e-con.tn-sec a.e-con:hover, .e-con.tn-sec a.e-con:focus, .e-con.tn-sec a.e-con:visited { color: inherit; text-decoration: none; }
/* Beeldvakken in het raster vullen het hele vak. */
.tn-mg > .e-con.tn-cell.tn-media, .tn-mg > .e-con-inner > .e-con.tn-cell.tn-media { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }

/* =========================================================
   0.3 — verbeteringen na eerste bouwronde
   ========================================================= */

/* Raster achter Recent werk: Elementor geeft ::before een vaste maat; die heffen we op. */
.tn-projects .tn-mg::before { width: auto !important; height: auto !important; }

/* Nooit horizontaal scrollen door huisstijlsecties. */
.e-con.tn-sec { overflow-x: clip; }

/* Knoppen houden hun kleur bij hover/focus (het Site Kit kleurt ze anders wit). */
.elementor-widget.tn-btn .elementor-button:hover, .elementor-widget.tn-btn .elementor-button:focus, .elementor-widget.tn-btn .elementor-button:visited { background: var(--tn-papier); color: var(--tn-blauw); }
.elementor-widget.tn-btn-blauw .elementor-button:hover, .elementor-widget.tn-btn-blauw .elementor-button:focus, .elementor-widget.tn-btn-blauw .elementor-button:visited { background: var(--tn-blauw); color: var(--tn-papier); }
.elementor-widget.tn-btn-lijn .elementor-button:hover, .elementor-widget.tn-btn-lijn .elementor-button:focus, .elementor-widget.tn-btn-lijn .elementor-button:visited { background: transparent; color: var(--tn-blauw); }

/* Beeld van rand tot rand op mobiel: klasse tn-bleed-m op de container rond het beeld. */
@media (max-width: 899px) {
	.e-con.tn-sec .e-con.tn-bleed-m { --width: calc(100% + 56px); width: calc(100% + 56px); max-width: none; margin-left: -28px; margin-right: -28px; }
}

/* Expertiselijst: klasse tn-exp op elke rij (container als link). Hover = kobalt vlak + plus. */
.tn-sec .e-con.tn-exp {
	transition: background-color .3s cubic-bezier(.2,.7,.2,1), color .3s, padding .3s cubic-bezier(.2,.7,.2,1), background-size .4s cubic-bezier(.2,.7,.2,1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpolygon fill='%23F6F7F4' points='-0.2857,-1 0.2857,-1 0.2857,-0.2857 1,-0.2857 1,0.2857 0.2857,0.2857 0.2857,1 -0.2857,1 -0.2857,0.2857 -1,0.2857 -1,-0.2857 -0.2857,-0.2857'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 22px center; background-size: 0 0;
}
.tn-sec .e-con.tn-exp:hover, .tn-sec .e-con.tn-exp:focus-visible { background-color: var(--tn-blauw); color: var(--tn-papier); --padding-left: 20px; --padding-right: 56px; background-size: 16px 16px; }
.tn-sec .e-con.tn-exp:hover .tn-label .elementor-heading-title, .tn-sec .e-con.tn-exp:focus-visible .tn-label .elementor-heading-title { color: var(--tn-lavendel); }
@media (max-width: 899px) { .tn-sec .e-con.tn-exp .elementor-widget.tn-body { display: none; } }

/* Kennishub: kaarten met beeld. Container tn-kgrid (volle breedte) met kaarten tn-kcard.
   Eerste kaart: tn-kcard--feat (twee kolommen breed). Afsluiter: tn-kcard--hub (kobalt). */
.e-con.tn-kgrid { --rl: rgba(7,43,184, 0.18); display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 0 !important; --gap: 0px 0px;
	border-top: 1px solid var(--rl); border-left: 1px solid var(--rl); --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.tn-kgrid > .e-con.tn-kcard { border-right: 1px solid var(--rl); border-bottom: 1px solid var(--rl); --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; color: inherit; text-decoration: none; min-width: 0; }
.tn-kcard .tn-kcard-tekst { --padding-top: 18px; --padding-bottom: 26px; --padding-left: 22px; --padding-right: 22px; --gap: 10px 10px; --row-gap: 10px; }
.tn-kcard .elementor-widget-tn_touchpoint { width: 100%; }
.tn-kcard .tn-h3 .elementor-heading-title { transition: color .3s; }
.tn-kcard:hover .tn-h3 .elementor-heading-title, .tn-kcard:focus-visible .tn-h3 .elementor-heading-title { color: var(--tn-blauw); }
.tn-kgrid > .e-con.tn-kcard--hub { background: var(--tn-blauw); color: var(--tn-papier); justify-content: space-between; }
.tn-kcard--hub .tn-label .elementor-heading-title { color: var(--tn-lavendel); }
.tn-kcard--hub:hover .tn-h3 .elementor-heading-title { color: var(--tn-papier); }
.tn-kcard--feat .tn-label .elementor-heading-title { color: var(--tn-blauw); }
@media (min-width: 900px) {
	.e-con.tn-kgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tn-kgrid > .e-con.tn-kcard--feat { grid-column: span 2; }
}
.e-con.tn-sec a.e-con.tn-exp:hover, .e-con.tn-sec a.e-con.tn-exp:focus-visible { color: var(--tn-papier); }
.tn-kgrid > .e-con.tn-kcard--hub { --padding-top: 22px; --padding-right: 22px; --padding-bottom: 26px; --padding-left: 22px; }

/* 0.3.2 — Recent werk compacter op mobiel: tekstvak één rij, resultaatregel alleen op desktop. */
@media (max-width: 899px) {
	.tn-g-1t { grid-row: 4; } .tn-g-2i { grid-row: 5 / 7; } .tn-g-2t { grid-row: 7; }
	.tn-g-3i { grid-row: 8 / 10; } .tn-g-3t { grid-row: 10; } .tn-g-l { grid-row: 11; }
	.tn-projects .tn-mg .elementor-widget.tn-body { display: none; }
}

/* 0.3.5 — Knoppen blijven altijd recht; op mobiel knop en tekstlink naast elkaar. */
.elementor-widget[class*="tn-btn"] .elementor-button, .elementor-widget[class*="tn-btn"] .elementor-button:hover, .elementor-widget[class*="tn-btn"] .elementor-button:focus { border-radius: 0; }
@media (max-width: 899px) {
	.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link, > .elementor-widget.tn-body) { --flex-direction: row; flex-direction: row; flex-wrap: nowrap; align-items: center; --gap: 18px 18px; --column-gap: 18px; gap: 18px; }
	.elementor-widget[class*="tn-btn"] { width: auto; flex: 0 0 auto; }
	.elementor-widget[class*="tn-btn"] .elementor-button { padding: 0 18px; letter-spacing: 0.1em; }
}

/* 0.3.6 — Hover op knoppen. Gevuld: alleen een lijn in de vulkleur. Lijnknop en tekstlink: het raster verschijnt erachter. */
.elementor-widget[class*="tn-btn"] .elementor-button { transition: background-color .25s, color .25s, border-color .25s; }
.elementor-widget.tn-btn .elementor-button:hover, .elementor-widget.tn-btn .elementor-button:focus-visible { background: transparent; color: var(--tn-papier); border-color: var(--tn-papier); }
.elementor-widget.tn-btn-blauw .elementor-button:hover, .elementor-widget.tn-btn-blauw .elementor-button:focus-visible { background: transparent; color: var(--tn-blauw); border-color: var(--tn-blauw); }
.elementor-widget.tn-btn-lijn .elementor-button { position: relative; isolation: isolate; }
.elementor-widget.tn-btn-lijn .elementor-button::before,
.tn-link a::before { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
	background-image: linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px);
	background-size: 12px 12px; background-position: -1px -1px; }
.elementor-widget.tn-btn-lijn .elementor-button::before { inset: 0; }
.tn-link a { position: relative; isolation: isolate; }
.tn-link a::before { inset: 4px -12px; border: 1px solid currentColor; }
.elementor-widget.tn-btn-lijn .elementor-button:hover::before, .elementor-widget.tn-btn-lijn .elementor-button:focus-visible::before,
.tn-link a:hover::before, .tn-link a:focus-visible::before { opacity: .22; }

/* 0.3.7 — Raster achter knoppen zonder vulling rustiger: 3 x 2 vakken. Lichtblauwe sectie. */
.elementor-widget.tn-btn-lijn .elementor-button::before, .tn-link a::before { background-size: calc(100% / 3) 50%; background-position: 0 0; }
.e-con.tn-sec.tn-lichtblauw { background-color: var(--tn-lavendel); color: var(--tn-inkt); }
.tn-lichtblauw .e-con.tn-exp { border-color: rgba(7, 43, 184, 0.28) !important; }

/* 0.3.8 — Vlakkleur: NUD-BLUE 50% gemengd met papier. Geen uitzonderingsregels voor tekst nodig. */
.tn-page, .e-con.tn-sec, .tn-tp { --tn-vlak: #C8D5E2; }
.e-con.tn-sec.tn-lichtblauw { background-color: var(--tn-vlak); }

/* 0.3.9 — Raster achter knoppen: overal exact 1 px (scherp getekend), 3 x 2 vakken.
   Knop + tekstlink naast elkaar: even hoog en even breed. */
.elementor-widget.tn-btn-lijn .elementor-button::before, .tn-link a::before { border: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cg fill='none' stroke='%23072BB8' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Crect x='0.5' y='0.5' width='299' height='199' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M100 0V200M200 0V200M0 100H300' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; background-position: 0 0; }
.tn-blauw .tn-link a::before, .tn-inkt .tn-link a::before, .tn-kcard--hub .tn-link a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cg fill='none' stroke='%23F6F7F4' stroke-width='1' vector-effect='non-scaling-stroke'%3E%3Crect x='0.5' y='0.5' width='299' height='199' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M100 0V200M200 0V200M0 100H300' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E"); }
.elementor-widget.tn-btn-lijn .elementor-button:hover::before, .elementor-widget.tn-btn-lijn .elementor-button:focus-visible::before,
.tn-link a:hover::before, .tn-link a:focus-visible::before { opacity: .35; }
.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link) { display: grid !important; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; max-width: 100%; align-items: stretch; }
.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link) > .elementor-widget { width: 100%; }
.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link) > .elementor-widget[class*="tn-btn"] .elementor-button { width: 100%; justify-content: flex-start; }
.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link) > .elementor-widget.tn-link .elementor-heading-title,
.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link) > .elementor-widget.tn-link a { display: flex; width: 100%; min-height: 54px; box-sizing: border-box; align-items: center; }
.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link) > .elementor-widget.tn-link a { padding: 0 28px; gap: 14px; }
.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link) > .elementor-widget.tn-link a::before { inset: 0; }
@media (max-width: 899px) {
	.e-con:has(> .elementor-widget[class*="tn-btn"]):has(> .elementor-widget.tn-link) > .elementor-widget.tn-link a { padding: 0 18px; }
}

/* 0.4.0 — Rouleren van projecten: per tekstvak meerdere containers .tn-proj; één tegelijk zichtbaar. */
.tn-tp-photo { transition: opacity .6s; }
.tn-projects .e-con.tn-proj { flex: 1 1 auto; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 8px 8px; --row-gap: 8px; color: inherit; text-decoration: none; }
.tn-projects .e-con.tn-proj ~ .e-con.tn-proj { display: none; }
.tn-projects .tn-rot-on .e-con.tn-proj { display: none; }
.tn-projects .tn-rot-on .e-con.tn-proj.tn-actief { display: flex; animation: tn-proj-in .7s ease both; }
.elementor-editor-active .tn-projects .e-con.tn-proj { display: flex !important; }
@keyframes tn-proj-in { from { opacity: 0; } to { opacity: 1; } }
.tn-proj .elementor-widget.tn-pfoto { display: none; }
.tn-proj .elementor-widget.tn-plogo { margin-top: auto; }
@media (min-width: 900px) { .tn-g-3t .e-con.tn-proj { align-items: flex-end; text-align: right; } }

/* 0.4.2 — Logo bij projecten alleen in het beeld (scherp, wit). Het logo in de tekstkolom blijft als bron voor de animatie, maar wordt niet getoond. */
.tn-proj .elementor-widget.tn-plogo { display: none !important; }

/* 0.4.3 — Logobalk: bij hover verschijnt het logo in de originele kleur. */
.tn-logo-ink { position: relative; display: inline-flex; max-width: 100%; }
.tn-logo-ink > img { transition: opacity .3s; }
.tn-logo-ink:not(.tn-logo-ink--bestand)::after { content: ""; position: absolute; inset: 0; background: var(--tn-c); -webkit-mask: var(--tn-m) center / contain no-repeat; mask: var(--tn-m) center / contain no-repeat; opacity: 0; transition: opacity .3s; }
.tn-logo-ink > img.tn-logo-kleur { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; filter: none; opacity: 0; }
.tn-logo-cell:hover .tn-logo-ink > img:first-child { opacity: 0; }
.tn-logo-cell:hover .tn-logo-ink::after, .tn-logo-cell:hover .tn-logo-ink > img.tn-logo-kleur { opacity: 1; }

/* 0.4.4 — Rouleren: tekst komt subtiel van boven binnen (label, titel, klant licht verspringend) en zakt weg bij het wisselen.
   Klantnaam als tekst onder de titel: klasse tn-pklant op een Heading-widget. */
.tn-projects .tn-rot-on .e-con.tn-proj.tn-actief { animation: none; }
.tn-projects .tn-rot-on .e-con.tn-proj.tn-actief > .elementor-widget { animation: tn-proj-in .8s cubic-bezier(.2, .7, .2, 1) both; }
.tn-projects .tn-rot-on .e-con.tn-proj.tn-actief > .elementor-widget:nth-child(2) { animation-delay: .08s; }
.tn-projects .tn-rot-on .e-con.tn-proj.tn-actief > .elementor-widget:nth-child(n+3) { animation-delay: .16s; }
.tn-projects .tn-rot-on .e-con.tn-proj.tn-weg > .elementor-widget { animation: tn-proj-uit .45s ease both; }
@keyframes tn-proj-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes tn-proj-uit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .tn-projects .tn-rot-on .e-con.tn-proj > .elementor-widget { animation: none !important; } }
.tn-proj .elementor-widget.tn-pklant .elementor-heading-title { font-family: 'Neulis Neue', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: inherit; opacity: .65; margin: 0; }
@media (min-width: 900px) { .tn-proj .elementor-widget.tn-pklant .elementor-heading-title { font-size: 16px; } }

/* 0.4.5 — Nieuwe header (template met klasse tn-hdr op de buitenste container). */
.e-con.tn-hdr { background-color: #F6F7F4 !important; border-bottom: 1px solid rgba(7,43,184,0.18); }
.tn-hdr .e-n-menu-title { position: relative; }
.tn-hdr .e-n-menu-title-text, .tn-hdr .e-n-menu-title-text a { font-family: 'Neulis Neue', sans-serif !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 12px !important; color: #072BB8 !important; }
.tn-hdr .e-n-menu-dropdown-icon { color: #072BB8 !important; }
.tn-hdr .e-n-menu-dropdown-icon i { font-size: 9px !important; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.tn-hdr .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-opened { display: none !important; }
.tn-hdr .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed { display: flex !important; }
.tn-hdr .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed i,
.tn-hdr .e-n-menu-title:hover .e-n-menu-dropdown-icon-closed i { transform: rotate(45deg); }
/* Megamenu */
.tn-hdr .e-con.tn-mega { background-color: #F6F7F4 !important; border-top: 1px solid rgba(7,43,184,0.18); border-bottom: 1px solid rgba(7,43,184,0.18); --padding-top: 0px; --padding-bottom: 0px; padding-top: 0 !important; padding-bottom: 0 !important; }
.tn-hdr .e-con.tn-mega .e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; background: none; border: 0; }
.tn-hdr .tn-m-intro { padding: 22px 22px 22px 0 !important; justify-content: space-between !important; gap: 20px; }
.tn-hdr .tn-m-lbl .elementor-heading-title { color: #072BB8 !important; }
.tn-hdr .tn-m-h .elementor-heading-title { font-family: 'Neulis Neue', sans-serif !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: -0.03em !important; text-transform: none !important; color: #282828 !important; }
.tn-hdr .tn-m-h .tn-lt { color: #072BB8; font-weight: 300; }
.tn-hdr .e-con.tn-mr { display: grid !important; grid-template-columns: 44px minmax(0,.9fr) minmax(0,1.5fr) 16px; align-items: center; column-gap: 14px; padding: 0 22px !important; min-height: 48px; border-bottom: 1px solid rgba(7,43,184,0.18) !important; color: #282828 !important; text-decoration: none; transition: background-color .3s, color .3s, padding .3s cubic-bezier(.2,.7,.2,1); }
.tn-hdr .e-con.tn-mr:last-child { border-bottom: 0 !important; }
.tn-hdr .e-con.tn-mr::after { content: ""; width: 12px; height: 12px; opacity: 0; transform: scale(.4) rotate(-45deg); transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpolygon transform='rotate(45)' fill='%23F6F7F4' points='-0.2857,-1 0.2857,-1 0.2857,-0.2857 1,-0.2857 1,0.2857 0.2857,0.2857 0.2857,1 -0.2857,1 -0.2857,0.2857 -1,0.2857 -1,-0.2857 -0.2857,-0.2857'/%3E%3C/svg%3E") center / contain no-repeat; }
.tn-hdr .e-con.tn-mr > .elementor-widget { width: auto; margin: 0 !important; }
.tn-hdr .tn-mr .elementor-heading-title { font-family: 'Neulis Neue', sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0; color: inherit !important; transition: color .3s; }
.tn-hdr .tn-mr-nr .elementor-heading-title { font-size: 12px !important; font-weight: 300 !important; letter-spacing: 0.08em !important; color: #072BB8 !important; }
.tn-hdr .tn-mr-t .elementor-heading-title { font-size: 18px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; }
.tn-hdr .tn-mr-d .elementor-heading-title { font-size: 13px !important; line-height: 1.3 !important; font-weight: 300 !important; color: #5D5F5A !important; }
.tn-hdr .e-con.tn-mr:hover, .tn-hdr .e-con.tn-mr:focus-visible { background-color: #072BB8 !important; color: #F6F7F4 !important; padding-left: 30px !important; }
.tn-hdr .e-con.tn-mr:hover::after, .tn-hdr .e-con.tn-mr:focus-visible::after { opacity: 1; transform: none; }
.tn-hdr .e-con.tn-mr:hover .tn-mr-nr .elementor-heading-title { color: #9BB3D0 !important; }
.tn-hdr .e-con.tn-mr:hover .tn-mr-d .elementor-heading-title { color: rgba(246,247,244,0.75) !important; }
.tn-hdr .e-con.tn-m-photo { position: relative; overflow: hidden; background-color: #072BB8 !important; min-height: 240px; }
.tn-hdr .tn-m-photo .elementor-widget-image { position: absolute; inset: 0; margin: 0 !important; }
.tn-hdr .tn-m-photo .elementor-widget-image .elementor-widget-container, .tn-hdr .tn-m-photo img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 0 !important; filter: grayscale(1) brightness(1.35) contrast(1.15); }
.tn-hdr .tn-m-photo::after { content: ""; position: absolute; inset: 0; background: #072BB8; mix-blend-mode: screen; pointer-events: none; }
@media (min-width: 1025px) {
	.tn-hdr .e-con.tn-mega > .e-con-inner, .tn-hdr .e-con-full.tn-mega { display: grid !important; grid-template-columns: minmax(0,2fr) minmax(0,3fr) minmax(0,1fr); align-items: stretch; }
	.tn-hdr .e-con.tn-mega .e-con { width: auto !important; max-width: none !important; }
	.tn-hdr .e-con.tn-m-list { display: grid !important; grid-auto-rows: minmax(48px, 1fr); border-left: 1px solid rgba(7,43,184,0.18) !important; border-right: 1px solid rgba(7,43,184,0.18) !important; }
}
@media (max-width: 1024px) {
	.tn-hdr .e-con.tn-m-photo, .tn-hdr .tn-m-intro .tn-m-h, .tn-hdr .tn-mr-d, .tn-hdr .tn-m-lbl { display: none !important; }
	.tn-hdr .tn-m-intro { padding: 0 !important; }
	.tn-hdr .e-con.tn-mr { grid-template-columns: 32px minmax(0,1fr) 16px; padding: 0 4px !important; min-height: 44px; }
}