/**
 * Stoere Binken - sitestyling op het Figma-design "SBD-website 2026".
 * Tokens staan in style.css onder :root; hier alleen variabelen.
 * Maatvoering volgt het 1600-frame: container 1504, zijmarge 48.
 */

/* =========================================================
   Hulpklassen
   ========================================================= */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	background: var(--c-green);
	color: var(--c-black);
	border-radius: var(--radius-hoek-s);
}

/* Tekstreveal-regels (SplitText): niet herwrappen tijdens de animatie */
.sbd-reveal-line {
	white-space: nowrap;
	will-change: transform, clip-path;
}

/* Reethi Rah leadtekst */
.lead,
.lead p {
	font-family: var(--font-lead);
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	font-weight: 400;
}

.lead a {
	color: var(--c-green);
}

/* =========================================================
   Custom underline: groeit bij hover van links naar rechts en
   verlaat het element ook naar rechts, met de osmo-curve.
   Techniek: een gradient als background die via background-size
   groeit; de positie wisselt alleen op momenten dat de lijn
   onzichtbaar of volledig is, dus zonder sprong.
   ========================================================= */
.site-topmenu__link,
.taalwissel__link,
.takeover__link,
.site-notificatie__tekst a,
.lead a,
.site-footer__links a,
.site-footer__introtekst a,
.site-footer__fonts-tekst a,
.site-footer__copyright a,
.partners__naam a,
.insights__topic,
.archief__titel a,
.entry-content a,
.pijl-link__tekst,
.diensten__titel {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	transition: background-size 0.55s var(--cubic-default), color var(--duration-fast);
}

.site-topmenu__link:hover,
.site-topmenu__link[aria-current="page"],
.taalwissel__link:hover,
.takeover__link:hover,
.site-notificatie__tekst a:hover,
.lead a:hover,
.site-footer__links a:hover,
.site-footer__introtekst a:hover,
.site-footer__fonts-tekst a:hover,
.site-footer__copyright a:hover,
.partners__naam a:hover,
.insights__topic:hover,
.insights__topic.is-actief,
.archief__titel a:hover,
.entry-content a:hover,
.pijl-link:hover .pijl-link__tekst,
a.diensten__item:hover .diensten__titel {
	background-position: 0% 100%;
	background-size: 100% 1px;
}

/* Subtitel-stijl (Figma "Subtitle"): 12px bold, letterspacing 3, kapitalen */
.subtitle {
	font-size: var(--fs-subtitle);
	font-weight: 600;
	letter-spacing: var(--ls-subtitle);
	text-transform: uppercase;
	line-height: 26px;
}

/* Auteursregel (avatar + naam + functie) */
.auteur {
	display: flex;
	align-items: center;
	gap: 16px;
}

.auteur__avatar img {
	width: 49px;
	height: 49px;
	object-fit: cover;
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
}

.auteur__gegevens {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.auteur__naam {
	font-weight: 700;
}

/* =========================================================
   Secties
   ========================================================= */
.section {
	padding-block: calc(var(--space-standard) / 2);
	position: relative;
}

.section--marge-compact { padding-block: calc(var(--space-compact) / 2); }
.section--marge-ruim    { padding-block: calc(var(--space-ruim) / 2); }
.section--marge-geen    { padding-block: 0; }

.section--bg-wit         { background: var(--c-white); color: var(--c-black); }
.section--bg-donkergrijs { background: var(--c-grey-80); }
.section--bg-zwart       { background: var(--c-black); }
.section--bg-accent      { background: var(--c-green); color: var(--c-black); }

/* =========================================================
   Knoppen
   ========================================================= */
.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.buttons:empty {
	display: none;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 50px;
	padding: 9px 20px;
	border: 1px solid transparent;
	/* Signatuurvorm: alleen linksboven en rechtsonder afgerond */
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	font-family: var(--font-ui);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--duration-fast) var(--cubic-default),
		color var(--duration-fast) var(--cubic-default),
		border-color var(--duration-fast) var(--cubic-default);
}

.button::after {
	content: "";
	width: 10px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 10 10 2M4 2h6v6' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 10 10 2M4 2h6v6' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--duration-fast) var(--cubic-default);
}

.button:hover::after {
	transform: translate(2px, -2px);
}

.button--primair {
	background: var(--c-green);
	border-color: var(--c-green);
	color: var(--c-black);
}

.button--primair:hover,
.button--primair:focus-visible {
	background: var(--c-white);
	border-color: var(--c-white);
	color: var(--c-black);
}

.button--secundair {
	background: var(--c-black);
	border-color: var(--c-black);
	color: var(--c-white);
}

.button--secundair:hover,
.button--secundair:focus-visible {
	background: var(--c-grey-80);
	border-color: var(--c-grey-80);
	color: var(--c-green);
}

.button--omlijnd {
	background: transparent;
}

.button--omlijnd-donker {
	border-color: var(--c-black);
	color: var(--c-black);
}

.button--omlijnd-donker:hover,
.button--omlijnd-donker:focus-visible {
	background: var(--c-black);
	color: var(--c-green);
}

.button--omlijnd-licht {
	border-color: var(--c-grey-60);
	color: var(--c-white);
}

.button--omlijnd-licht:hover,
.button--omlijnd-licht:focus-visible {
	border-color: var(--c-green);
	color: var(--c-green);
}

/* Tertiaire link: tekst + diagonaal pijltje */
.pijl-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: inherit;
	text-decoration: none;
}

.pijl-link__pijl {
	display: inline-flex;
	transition: transform var(--duration-fast) var(--cubic-default);
}

.pijl-link:hover .pijl-link__pijl {
	transform: translate(2px, -2px);
}

.pijl-link:hover .pijl-link__tekst {
	color: var(--c-green);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
	position: relative;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 48px var(--gutter) 24px;
}

/* Sticky variant: verschijnt alleen bij omhoog scrollen (nav.js stuurt de
   beweging met GSAP), met een subtiele gradient van de paginakleur en een
   lichte blur erachter zodat het contrast behouden blijft. */
.site-header.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-block: 14px 18px;
	background: linear-gradient(180deg, rgba(21, 21, 21, 0.92) 0%, rgba(21, 21, 21, 0.78) 62%, rgba(21, 21, 21, 0) 100%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.site-header.is-sticky .site-notificatie {
	display: none;
}

.site-logo {
	flex: 0 0 auto;
	display: inline-flex;
}

.site-logo img {
	width: 58px;
	height: 48px;
}

/* Exact gecentreerd in de header, los van logo en menu. De GSAP-tweens in
   nav.js gebruiken xPercent -50, dus de translate hier is de no-JS basis. */
.site-notificatie {
	position: absolute;
	left: 50%;
	top: 48px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 16px;
	height: 38px;
	padding: 0 20px;
	background: var(--c-grey-80);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	white-space: nowrap;
}

.site-notificatie__tekst {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	white-space: nowrap;
}

.site-notificatie__tekst a {
	color: var(--c-green);
}

.site-notificatie__sluit {
	position: relative;
	width: 14px;
	height: 14px;
}

/* Kruisje draait 90 graden bij hover, met de osmo-curve */
.site-notificatie__sluit span {
	position: absolute;
	inset: 0;
	display: block;
	transition: transform 0.5s cubic-bezier(0.625, 0.05, 0, 1);
}

.site-notificatie__sluit:hover span {
	transform: rotate(90deg);
}

.site-notificatie__sluit span::before,
.site-notificatie__sluit span::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1.3px;
	background: var(--c-grey-30);
	transition: background var(--duration-fast);
}

.site-notificatie__sluit span::before { transform: rotate(45deg); }
.site-notificatie__sluit span::after  { transform: rotate(-45deg); }

.site-notificatie__sluit:hover span::before,
.site-notificatie__sluit:hover span::after {
	background: var(--c-white);
}

.site-header__rechts {
	display: flex;
	align-items: center;
	gap: 20px;
}

.site-topmenu__lijst {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-topmenu__link {
	font-size: var(--fs-body);
	line-height: 27px;
	color: var(--c-white);
}

.site-topmenu__link:hover {
	color: var(--c-green);
}

/* Taalwissel (Polylang) */
.taalwissel__lijst {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.taalwissel__link {
	font-size: 12px;
	line-height: 27px;
	color: var(--c-grey-30);
}

.taalwissel__link.is-current,
.taalwissel__link:hover {
	color: var(--c-white);
}

/* Hamburger uit Figma: twee grijze hoekhaken met een groen plusje. Open:
   de haken draaien 180 graden naar buiten, het plusje wordt een minnetje. */
.site-burger {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 70; /* boven het takeover-menu, zodat hij als sluitknop werkt */
}

.site-burger__icoon {
	overflow: visible;
	display: block;
}

.site-burger__icoon path {
	fill: none;
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.5s var(--cubic-default), stroke var(--duration-fast);
}

.site-burger__haak {
	stroke: var(--c-grey-30);
}

.site-burger:hover .site-burger__haak {
	stroke: var(--c-white);
}

.site-burger__lijn {
	stroke: var(--c-green);
}

/* Open: haken 180 graden gedraaid en naar buiten geschoven (de exacte
   verplaatsing tussen de twee Figma-varianten), plus -> min. */
.takeover-open .site-burger__haak--boven {
	transform: translate(9px, -7px) rotate(180deg);
}

.takeover-open .site-burger__haak--onder {
	transform: translate(-9px, 7px) rotate(180deg);
}

.takeover-open .site-burger__lijn--v {
	transform: scaleY(0);
}

/* =========================================================
   Takeover-menu
   ========================================================= */
.takeover {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
}

.takeover[aria-hidden="false"] {
	display: block;
}

.no-js .takeover:target {
	display: block;
}

.takeover__achtergrond {
	position: absolute;
	inset: 0;
	background: var(--c-black);
}

.takeover__binnen {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 120px var(--gutter) 60px;
	overflow-y: auto;
}

.takeover__kolommen {
	display: flex;
	gap: 70px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.takeover__kolomtitel {
	margin: 0 0 33px;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	color: var(--c-grey-30);
}

.takeover__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.takeover__link {
	font-size: var(--fs-h6);
	line-height: 38px;
	color: var(--c-white);
}

.takeover__link:hover {
	color: var(--c-green);
}

/* =========================================================
   Hero
   ========================================================= */
.section--hero {
	padding-top: clamp(60px, 8vw, 130px);
}

.hero__boven {
	display: grid;
	grid-template-columns: minmax(0, 994fr) minmax(0, 354fr);
	gap: clamp(32px, 8vw, 156px);
	align-items: start;
}

.hero__titel {
	margin: 0;
	max-width: 994px;
}

.hero__zij {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-top: clamp(0px, 4vw, 79px);
}

.google-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.google-badge__logo {
	width: 73px;
	height: 24px;
}

.google-badge__tekst {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.google-badge__sterren {
	color: var(--c-green);
	letter-spacing: 1px;
}

.hero__media {
	margin: clamp(32px, 4vw, 50px) 0 0;
}

.hero__beeld,
.hero__video {
	width: 100%;
	aspect-ratio: 1504 / 800;
	object-fit: cover;
}

/* =========================================================
   Introtekst
   ========================================================= */
/* Gecentreerde 994px-kolom, zoals in het ontwerp */
.intro-tekst__tekst {
	max-width: 994px;
	margin-inline: auto;
}

.intro-tekst__kop {
	max-width: 994px;
	margin-inline: auto;
	margin-bottom: 30px;
}

/* =========================================================
   Diensten (2x2) - gecentreerd blok van 994px
   ========================================================= */
.diensten__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 482px));
	column-gap: 30px;
	row-gap: 51px;
	max-width: 994px;
	margin-inline: auto;
	justify-content: space-between;
}

.diensten__kop {
	max-width: 994px;
	margin-inline: auto;
	margin-bottom: 40px;
}

.diensten__titel {
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-green);
	margin-bottom: 23px;
	/* Niet breder dan de tekst, anders loopt de hover-underline de hele
	   kolombreedte over. */
	width: fit-content;
}

/* Het hele dienstenitem is klikbaar; de groeiende underline op de titel
   staat in het underline-blok hierboven. */
a.diensten__item {
	display: block;
	color: inherit;
}

.diensten__tekst {
	max-width: 482px;
}

.diensten__tekst p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   Uitgelicht werk
   ========================================================= */
.werk__kopregel {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 20px;
}

.werk__label {
	margin: 0;
	font-size: var(--fs-h6);
	line-height: 28px;
}

.werk__grid {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 5.6vw, 90px);
}

.werk__rij--paar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.werk__rij--quote {
	display: grid;
	grid-template-columns: minmax(0, 482px) minmax(0, 737px);
	justify-content: space-between;
	gap: 30px;
	align-items: center;
}

/* Projectkaart */
.project-kaart {
	display: block;
	color: inherit;
}

.project-kaart__media {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Subtiele beeldschaal bij hover; de media clipt, dus de layout blijft
   exact staan. */
.project-kaart__beeld {
	width: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s var(--cubic-default);
	will-change: transform;
}

.project-kaart:hover .project-kaart__beeld {
	transform: scale(1.04);
}

.project-kaart--wide .project-kaart__beeld { aspect-ratio: 1504 / 564; }
.project-kaart--half .project-kaart__beeld { aspect-ratio: 737 / 564; }

.project-kaart__reel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s var(--cubic-default);
	pointer-events: none;
}

.project-kaart.is-playing .project-kaart__reel {
	opacity: 1;
}

.project-kaart__onder {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-top: 16px;
	min-height: 60px;
}

.project-kaart__titel {
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-white);
	transition: color var(--duration-fast);
}

.project-kaart:hover .project-kaart__titel {
	color: var(--c-green);
}

.project-kaart__diensten {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-grey-30);
}

/* Quote in het werkgrid */
.ref-quote {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	max-width: 482px;
}

.ref-quote__label {
	margin: 0;
	color: var(--c-sage);
}

.ref-quote__tekst {
	margin: 0;
}

.ref-quote__tekst p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   Klanten + logowall
   ========================================================= */
.klanten__tekst {
	max-width: 856px;
	margin-top: 40px;
}

.klanten__alles {
	margin-top: 10px;
}

.logowall {
	margin-top: 52px;
	background: var(--c-white);
	padding: clamp(32px, 4.6vw, 74px) clamp(32px, 5.3vw, 85px);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 170px));
	justify-content: space-between;
	row-gap: 39px;
}

.logowall__vak {
	position: relative;
	aspect-ratio: 1;
}

.logowall__vak--reserve {
	display: none;
}

.logowall__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* =========================================================
   Referenties-slider
   ========================================================= */
.referenties__kopregel {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 60px;
}

.referenties__kop {
	font-size: var(--fs-h4);
	line-height: 40px;
	white-space: nowrap;
}

/* De kaarten staan stil; alleen de active-state wandelt door de rij en
   fadet zachtjes (dekking + verloopvlak), zonder zichtbare verplaatsing. */
.ref-slider {
	position: relative;
	overflow: hidden;
}

.ref-slider__spoor {
	display: flex;
	gap: 16px;
	will-change: transform;
}

.ref-kaart {
	position: relative;
	flex: 0 0 414px;
	width: 414px;
	max-width: 86vw;
	min-height: 348px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.9s var(--cubic-default);
}

.ref-kaart.is-actief {
	opacity: 1;
}

/* Het verloopvlak als eigen laag, zodat hij kan meefaden */
.ref-kaart::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--c-grey-80) 0%, rgba(60, 60, 60, 0) 100%);
	border-radius: var(--radius-hoek) 0 var(--radius-hoek) 0;
	opacity: 0;
	transition: opacity 0.9s var(--cubic-default);
	pointer-events: none;
}

.ref-kaart.is-actief::before {
	opacity: 1;
}

.ref-kaart__tijd {
	font-size: var(--fs-small);
	color: var(--c-grey-30);
}

.ref-kaart__binnen {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	padding: 31px;
}

.ref-kaart__quote {
	margin: 0;
	font-family: var(--font-lead);
	font-size: var(--fs-body);
	line-height: 26px;
	max-width: 353px;
	flex: 1 1 auto;
}

.ref-kaart__quote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* =========================================================
   Premium partners
   ========================================================= */
.partners__inner {
	display: grid;
	grid-template-columns: minmax(0, 737fr) minmax(0, 737fr);
	gap: 30px;
	align-items: start;
}

.partners__tekstkolom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	max-width: 737px;
}

.partners__tekst p:last-child {
	margin-bottom: 0;
}

.partners__lijstkader {
	position: relative;
	height: min(517px, 60vh);
	overflow: hidden;
	/* Vervagende randen boven en onder, zoals de gradients in het design */
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}

.partners__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	will-change: transform;
}

.partners__rij {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hairline);
}

.partners__lijst .partners__rij:first-child {
	border-top: 1px solid var(--hairline);
}

.partners__naam a:hover {
	color: var(--c-green);
}

.partners__discipline {
	color: var(--c-white);
	font-size: var(--fs-body);
}

/* =========================================================
   Expertises (Osmo tab-systeem)
   ========================================================= */
.expertises__head {
	display: flex;
	flex-direction: column;
	gap: 34px;
	margin-bottom: 60px;
}

.expertises__intro {
	max-width: 578px;
}

.expertises__intro p:last-child {
	margin-bottom: 0;
}

.tab-layout__wrap {
	z-index: 1;
	display: flex;
	flex-flow: wrap;
	align-items: stretch;
	position: relative;
	grid-row-gap: 3em;
}

.tab-layout__col {
	width: 42%;
	padding-right: 1.5em;
}

.tab-layout__col:last-child {
	width: 58%;
	padding-right: 0;
	padding-left: 0.5em;
}

.tab-content__wrap {
	width: 100%;
	max-width: 609px;
	height: 100%;
}

/* flex-start: tabs.js reserveert de hoogte van het langste detail als
   min-height, zodat het blok nooit verspringt bij tabwissel. */
.tab-content__bottom {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding-left: 0;
}

.tab-content__item {
	color: var(--c-white);
	width: 100%;
	padding: 27px 0;
	text-decoration: none;
	position: relative;
	transition: opacity 0.25s;
}

.tab-content__item:first-child {
	border-top: 1px solid var(--hairline);
}

.tab-content__item-main {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	grid-column-gap: 15px;
}

/* Het plusje voor elke tab; de actieve tab kleurt groen */
.content-item__nr {
	color: var(--c-white);
	opacity: 0.6;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 21px;
	height: 21px;
	flex: none;
	transition: transform 0.4s var(--cubic-default), color 0.3s, opacity 0.3s;
}

.tab-content__item.active .content-item__nr,
.tab-content__item:hover .content-item__nr {
	color: var(--c-green);
	opacity: 1;
	transform: rotate(90deg);
}

.content-item__nr .icon {
	width: 21px;
	height: 21px;
}

.content-item__heading {
	margin: 0;
	font-size: var(--fs-h5);
	line-height: 36px;
	transition: color 0.3s;
}

.tab-content__item.active .content-item__heading {
	color: var(--c-green);
}

.tab-content__item-detail {
	width: 100%;
	height: 0;
	padding-left: 36px;
	overflow: hidden;
}

.tab-description {
	margin-bottom: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.tab-description p:last-child {
	margin-bottom: 0;
}

.tab-description__spacer {
	padding-top: 0.75em;
}

.tab-content__item-bottom {
	background-color: var(--hairline);
	width: 100%;
	height: 1px;
	position: absolute;
	inset: auto 0% 0%;
	transition: background-color 0.2s;
}

.tab-progress {
	transform-origin: 0%;
	transform-style: preserve-3d;
	background-color: var(--c-green);
	width: 100%;
	height: 1px;
	transform: scale3d(0, 1, 1);
}

.tab-visual__wrap {
	height: 100%;
	min-height: min(737px, 48vw);
	width: 100%;
	position: relative;
}

.tab-visual__item {
	visibility: hidden;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	height: 100%;
	position: absolute;
}

.tab-visual__item.active {
	visibility: visible;
}

.tab-visual__inner {
	width: 100%;
	overflow: hidden;
	transform: translateY(var(--py, 0));
	will-change: transform;
}

.tab-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   Insights
   ========================================================= */
.insights__tekst {
	max-width: 856px;
	margin-top: 40px;
}

.insights__kopregel {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.insights__inner {
	display: grid;
	grid-template-columns: minmax(0, 353fr) minmax(0, 1121fr);
	gap: 30px;
	margin-top: 60px;
	align-items: start;
}

.insights__topics-titel {
	margin: 0 0 34px;
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-grey-30);
}

.insights__topics-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Topics zijn tabbladen die de kaarten filteren, geen links */
.insights__topic {
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-white);
	text-align: left;
	transition: color var(--duration-fast);
}

.insights__topic:hover {
	color: var(--c-green);
}

.insights__topic.is-actief {
	color: var(--c-green);
}

.insights__kaarten {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.insight-kaart {
	display: grid;
	grid-template-columns: 226px 1fr;
	min-height: 150px;
	border: 1px solid var(--hairline);
	color: inherit;
	transition: border-color var(--duration-fast);
}

.insight-kaart:hover {
	border-color: var(--c-green);
}

.insight-kaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.insight-kaart__inhoud {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 24px 30px;
}

.insight-kaart__titel {
	font-size: var(--fs-h5);
	line-height: 36px;
	color: var(--c-white);
}

.insight-kaart__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.insight-kaart__onderwerp {
	color: var(--c-grey-30);
}

/* Hover (Figma-variant Active): achter de categorie schuift "• -> Read
   article" gestaggerd in - eerst de bullet, dan de pijl, dan de tekst,
   elk met de osmo-curve. */
.insight-kaart__lees {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--c-green);
}

.insight-kaart__bullet {
	color: var(--c-grey-30);
	opacity: 0;
	transition: opacity 0.35s var(--cubic-default);
}

.insight-kaart__pijl {
	display: inline-flex;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.45s var(--cubic-default) 0.05s, transform 0.45s var(--cubic-default) 0.05s;
}

.insight-kaart__leestekst {
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.45s var(--cubic-default) 0.12s, transform 0.45s var(--cubic-default) 0.12s;
}

.insight-kaart:hover .insight-kaart__bullet {
	opacity: 1;
}

.insight-kaart:hover .insight-kaart__pijl,
.insight-kaart:hover .insight-kaart__leestekst {
	opacity: 1;
	transform: translateX(0);
}

/* De pijl wipt nog even door bij hover op de kaart */
.insight-kaart:hover .insight-kaart__pijl svg {
	animation: sbd-pijl-door 0.6s var(--cubic-default) 0.4s;
}

@keyframes sbd-pijl-door {
	0%   { transform: translateX(0); }
	40%  { transform: translateX(4px); }
	100% { transform: translateX(0); }
}

/* =========================================================
   CTA
   ========================================================= */
.cta__doos {
	background: var(--c-green);
	color: var(--c-black);
	padding: clamp(48px, 6.9vw, 110px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.cta__kop {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	max-width: 1011px;
	color: var(--c-black);
}

.cta__tekst {
	max-width: 865px;
}

.cta__tekst p:last-child {
	margin-bottom: 0;
}

.cta__knoppen {
	margin-top: 0;
}

/* =========================================================
   Footer + marquee
   ========================================================= */
.site-footer {
	position: relative;
	padding-top: var(--space-standard);
	overflow: hidden;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 609fr) minmax(0, 300fr) minmax(0, 380fr);
	gap: clamp(32px, 4vw, 80px);
	align-items: start;
}

.site-footer__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.site-footer__introkop {
	margin: 0;
	font-family: var(--font-introkop);
	font-size: 30px;
	line-height: 1.2;
}

.site-footer__introtekst p:last-child {
	margin-bottom: 0;
}

.site-footer__introtekst a {
	color: var(--c-green);
}

/* Strak links uitgelijnd in de introkolom */
.site-footer__sinds {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.site-footer__sinds-label {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.site-footer__sinds-jaar {
	font-family: var(--font-since);
	font-size: 52px;
	line-height: 36px;
	padding-top: 8px;
}

/* Figma-exports zolang Nantua en Kryptonite niet als font geleverd zijn */
.site-footer__sinds-jaar--svg img {
	height: 36px;
	width: auto;
}

.site-footer__introkop--svg img {
	height: 27px;
	width: auto;
}

.site-footer__col-titel {
	margin: 0 0 34px;
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-grey-30);
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.site-footer__links a {
	font-size: var(--fs-h6);
	line-height: 38px;
	color: var(--c-white);
}

.site-footer__links a:hover {
	color: var(--c-green);
}

.site-footer__fonts-tekst {
	font-size: var(--fs-body);
}

.site-footer__fonts-tekst a {
	color: var(--c-green);
}

.site-footer__fonts-tekst p:last-child {
	margin-bottom: 0;
}

/* De grote marquee-tekst: font wisselt per paginaweergave (--font-marquee),
   beweging via marquee.js gekoppeld aan de scrollsnelheid. */
.marquee {
	margin-top: clamp(40px, 6vw, 90px);
	overflow: hidden;
	white-space: nowrap;
}

.marquee__spoor {
	display: inline-flex;
	will-change: transform;
}

.marquee__tekst {
	font-family: var(--font-marquee, var(--font-display));
	font-size: clamp(90px, 15.6vw, 250px);
	line-height: 1.05;
	color: var(--c-white);
	white-space: pre;
}

.site-footer__onder {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 18px 39px;
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
}

.site-footer__copyright a {
	color: inherit;
}

.site-footer__copyright a:hover {
	color: var(--c-green);
}

/* =========================================================
   Paginatransitie: pixelgrid-overlay (pixels in brandgroen)
   ========================================================= */
.transition {
	z-index: 100;
	pointer-events: none;
	position: fixed;
	inset: 0;
	overflow: clip;
}

.transition__panel {
	opacity: 0;
	flex-flow: row;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
}

.transition__col {
	flex-flow: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	display: flex;
}

.transition__pixel {
	aspect-ratio: 1;
	background-color: var(--c-green);
	width: 100%;
}

/* =========================================================
   Artikelen, archieven, 404 (donker thema)
   ========================================================= */
.section--artikel .entry-content {
	max-width: 74ch;
	margin-top: 1.5rem;
}

/* =========================================================
   Tekstpagina: sticky inhoudsopgave links, leestekst rechts
   ========================================================= */
.tekstpagina__kop {
	max-width: 994px;
	margin-bottom: clamp(40px, 5vw, 80px);
}

.tekstpagina__inner {
	display: grid;
	grid-template-columns: minmax(0, 353fr) minmax(0, 1121fr);
	gap: 30px;
	align-items: start;
}

.tekstpagina__inner--zonder-toc {
	grid-template-columns: 1fr;
}

.tekstpagina__zij {
	position: sticky;
	top: 130px;
}

.toc__titel {
	margin: 0 0 24px;
	font-size: var(--fs-h6);
	line-height: 28px;
	color: var(--c-grey-30);
}

.toc__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-left: 1px solid var(--c-grey-80);
}

.toc__link {
	display: block;
	padding: 4px 0 4px 20px;
	margin-left: -1px;
	border-left: 1px solid transparent;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-grey-30);
	transition: color var(--duration-fast), border-color 0.35s var(--cubic-default);
}

.toc__link:hover {
	color: var(--c-white);
}

.toc__link.is-actief {
	color: var(--c-green);
	border-left-color: var(--c-green);
}

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

	.tekstpagina__zij {
		position: static;
	}
}

/* Contentlinks krijgen het diagonale pijltje van de huisstijl */
.entry-content a::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 5px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 10 10 2M4 2h6v6' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 10 10 2M4 2h6v6' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--duration-fast) var(--cubic-default);
}

.entry-content a:hover::after {
	transform: translate(2px, -2px);
}

/* Juridische en andere tekstpagina's: rustige leesopmaak */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.entry-content h2 { font-size: var(--fs-h4); line-height: 1.15; }
.entry-content h3 { font-size: var(--fs-h5); line-height: var(--lh-h5); }
.entry-content h4 { font-size: var(--fs-h6); line-height: var(--lh-h6); color: var(--c-grey-30); }

.entry-content a {
	color: var(--c-green);
}

.entry-content ul,
.entry-content ol {
	margin-bottom: 1.2em;
}

.entry-content li {
	margin-bottom: 0.35em;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: var(--fs-body);
}

.entry-content td,
.entry-content th {
	border: 1px solid var(--c-grey-80);
	padding: 0.5em 0.75em;
	text-align: left;
}

.entry-meta {
	color: var(--c-grey-30);
	font-size: var(--fs-small);
}

.entry-hero {
	margin: 1.5rem 0;
}

.archief__item {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--c-grey-80);
}

.archief__titel a:hover {
	color: var(--c-green);
}

.section--404__inner {
	max-width: 60ch;
	text-align: center;
	margin-inline: auto;
	padding-block: clamp(2rem, 8vw, 5rem);
}

.section--404__code {
	font-family: var(--font-display);
	font-size: clamp(64px, 14vw, 140px);
	line-height: 1;
	color: var(--c-green);
	margin: 0 0 0.25em;
}

.section--404__inner .buttons {
	justify-content: center;
}

/* =========================================================
   Verborgen blok: balk voor ingelogde redacteuren
   ========================================================= */
.sb-hidden-block {
	position: relative;
	outline: 2px dashed #f0b429;
	outline-offset: -2px;
}

.sb-hidden-block__notice {
	margin: 0;
	padding: 0.6rem 1rem;
	background: #f0b429;
	color: var(--c-black);
	font-size: var(--fs-small);
	font-weight: 600;
	text-align: center;
}

/* =========================================================
   Gravity Forms in huisstijl (gravity-theme markup, donker)
   ========================================================= */
.gform_wrapper.gravity-theme .gfield_label {
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.gform_wrapper.gravity-theme input[type="text"],
.gform_wrapper.gravity-theme input[type="email"],
.gform_wrapper.gravity-theme input[type="tel"],
.gform_wrapper.gravity-theme input[type="url"],
.gform_wrapper.gravity-theme input[type="number"],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--c-grey-60);
	border-radius: var(--radius-hoek-s) 0 var(--radius-hoek-s) 0;
	background: var(--c-black);
	color: var(--c-white);
	font: inherit;
}

.gform_wrapper.gravity-theme input:focus,
.gform_wrapper.gravity-theme select:focus,
.gform_wrapper.gravity-theme textarea:focus {
	border-color: var(--c-green);
	outline: 2px solid var(--c-green);
	outline-offset: 1px;
}

.gform_wrapper.gravity-theme .gform_footer {
	padding-top: 1rem;
}

.gform_wrapper.gravity-theme .gfield_error .gfield_label,
.gform_wrapper.gravity-theme .validation_message {
	color: #ff7d69;
}

.gform_wrapper .gform_submission_error {
	font-size: 1.05rem;
	color: #ff7d69;
	margin-bottom: 1rem;
}

/* =========================================================
   Responsief
   ========================================================= */
@media (max-width: 1100px) {
	.diensten__grid,
	.partners__inner {
		grid-template-columns: 1fr;
	}

	.tab-layout__col,
	.tab-layout__col:last-child {
		width: 100%;
		padding: 0;
	}

	.tab-visual__wrap {
		min-height: 320px;
		margin-top: 24px;
	}

	.insights__inner {
		grid-template-columns: 1fr;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 900px) {
	.site-notificatie {
		display: none;
	}

	.site-topmenu {
		display: none;
	}

	.hero__boven {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hero__zij {
		padding-top: 0;
	}

	.werk__rij--paar,
	.werk__rij--quote {
		grid-template-columns: 1fr;
	}

	.logowall {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.referenties__kopregel {
		flex-direction: column;
		align-items: flex-start;
	}

	.takeover__kolommen {
		flex-direction: column;
		gap: 40px;
		width: 100%;
	}

	.takeover__binnen {
		align-items: flex-start;
	}

	.insight-kaart {
		grid-template-columns: 1fr;
	}

	.insight-kaart__beeld img {
		aspect-ratio: 226 / 149;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.logowall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}