/* ==========================================================================
   Roxit Clean — schone reproductie van de live front-end.
   Vervangt de Tailwind/GSAP/bundle.js-afhankelijke styling door nette CSS.
   Merk-tokens (uit live Elementor kit):
     groen        #4DA86D / circle #48AF6D
     donkergroen  #143F26  (bg-darkroxit)
     perzik       #F8DDCA  (bg-lightblue is in werkelijkheid groen)
     creme        #FEFEE3
     tekst        #151516
   Font: StudioPro (merk) + Roboto (body).
   ========================================================================== */

/* StudioPro merk-font self-hosted (vervangt use-any-font plugin).
   Familienaam 'studiopro' matcht de bestaande Elementor-CSS (case-insensitive). */
@font-face {
	font-family: "studiopro";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/7252StudioPro.woff2") format("woff2"), url("fonts/7252StudioPro.woff") format("woff");
}
@font-face {
	font-family: "studiopro";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/7341StudioPro.woff2") format("woff2"), url("fonts/7341StudioPro.woff") format("woff");
}
@font-face {
	font-family: "studiopro";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/1307StudioPro.woff2") format("woff2"), url("fonts/1307StudioPro.woff") format("woff");
}
/* De 400/600-gewicht StudioPro-bestanden zijn zwaar gesubsette exports (6-9KB, vs 55KB voor
   500) en missen het gewone koppelteken + het typografische minteken (U+2212) — rendert
   anders als een "tofu"-blok tussen de StudioPro-letters (bv. "Common Ground[]software",
   "ICT[]besparing"; ook op live zo, want live gebruikt dezelfde gesubsette bestanden).
   Vult alléén die ontbrekende tekens aan vanuit het completere 500-gewicht-bestand. Een
   bredere multi-range EXCLUDE op de hoofd-@font-face's (om dit gat "weg te snijden") gaf
   averechts effect — Chrome liet dan de hele tekst op Arial vallen, dus niet meer doen. */
@font-face {
	font-family: "studiopro";
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url("fonts/7341StudioPro.woff2") format("woff2"), url("fonts/7341StudioPro.woff") format("woff");
	unicode-range: U+002D, U+2010-2015, U+2212;
}

:root {
	--rox-green: #4da86d;
	--rox-green-circle: #48af6d;
	--rox-dark: #143f26;
	--rox-peach: #f8ddca;
	--rox-cream: #fefee3;
	--rox-text: #151516;
}

/* --------------------------------------------------------------------------
   0. Basis-typografie. Live zette de body-font via Tailwind-preflight
   (ui-sans-serif, system-ui, sans-serif). Na het droppen van Tailwind viel
   alle ongestylede tekst terug op serif (Times New Roman) — hier hersteld.
   Webflow-nav-klassen (.nav-link) gebruiken het merk-font StudioPro.
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* live body-tekst is licht (300); koppen/nav/knoppen zetten eigen gewicht. */
	font-weight: 300;
}

/* Pagina-achtergrond near-white (#FFFFFA) zoals live. De Elementor-kit zet de
   body op cream #FEFEE3; live overschreef dat (Tailwind-laag, nu gestript),
   waardoor transparante secties (cirkels, blog, intro) cream leken i.p.v. wit.
   De footer houdt zijn eigen expliciete cream-bg. */
html,
body {
	/* !important overschrijft de per-pagina Elementor-regel
	   body.elementor-page-XXXX{background-color:var(--e-global-color-accent)} (#FEFEE3).
	   De footer heeft een eigen cream-bg op zijn eigen element, dus blijft cream. */
	background-color: #fffffa !important;
}

/* Link-reset zoals de Tailwind-preflight op live: links erven de tekstkleur
   van hun omgeving i.p.v. browser-standaard blauw (#00EE). Specifiek gestylede
   links (Elementor-knoppen, menu, in-content links) houden hun eigen kleur. */
a {
	color: inherit;
	text-decoration: inherit;
}

.nav-link,
#rox-nav .nav-link,
.mobile-navigation .nav-link {
	font-family: "studiopro", sans-serif;
}

/* --------------------------------------------------------------------------
   1b. Desktop hoofdmenu (#62 Webflow-markup). Live legt dit met absolute
   positionering + transforms neer (Webflow); die CSS zat in de gestripte
   laag. Hier schoon herbouwd als horizontale flex-balk rechtsboven, met
   ruimte links voor het logo en rechts voor de contact-button.
   -------------------------------------------------------------------------- */
.header-meta {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 92px;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 300px 0 180px;
	box-sizing: border-box;
	pointer-events: none;
}
.header-meta a { pointer-events: auto; }

#rox-nav,
.navcontainer,
.rox-nav-logo-navcontainer {
	position: static !important;
	display: flex !important;
	align-items: center;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	inset: auto !important;
}

.rox-nav-items {
	display: flex !important;
	/* Spacing komt nu van de li's eigen padding (0 2rem) i.p.v. flex-gap; beide
	   tegelijk liet de nav breder worden dan de gereserveerde ruimte naast het
	   logo (.header-meta padding-left:180px), met overlap tot gevolg. */
	gap: 0;
	align-items: center;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
}
.rox-nav-items > li {
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0 2rem;
	display: flex;
	align-items: center;
}

/* menu-hover-indicator: het groene location-dot verschijnt onder het item
   (live-gedrag; default opacity 0). */
.rox-nav-items .location-dot {
	display: block;
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rox-green);
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}
.rox-nav-items > li:hover .location-dot { opacity: 1; }

#rox-nav .nav-link {
	color: #000; /* live = puur zwart */
	text-decoration: none;
	font-size: 16px;
	font-weight: 400; /* nav blijft 400, niet de lichte body-300 */
	line-height: 1;
	white-space: nowrap;
	transition: color .2s ease;
}
.rox-nav-items > li:hover .nav-link,
#rox-nav .nav-link:hover { color: var(--rox-dark); }

/* teamtailor "openstaande vacatures"-badge in het menu: live plaatst 'm als
   losse notificatie-badge (position:absolute, top:-20px/left:115px t.o.v. de
   <li>) via een <style> die bij het widget-script hoort. Die inline-stijl komt
   op dev niet (betrouwbaar) mee, dus hier zelf gezet met live's exacte
   waarden i.p.v. te vertrouwen op het externe teamtailor-script. */
#rox-nav .tt-hiring {
	position: absolute !important;
	top: -20px;
	left: 115px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgb(74, 73, 74);
	background-color: rgb(250, 231, 217);
	box-sizing: border-box;
	border-radius: 0.9em;
	padding: 0.5em;
	font-size: 0.8em;
	height: 1.8em;
	min-width: 1.8em;
	text-align: center;
}

/* submenu (dropdown onder Ontdek Roxit): tekstgewicht 300 zoals live (was 500) */
#rox-nav .rox-submenu p { font-weight: 300; }

/* Verberg de desktop-navbalk onder dezelfde breakpoint als waarop de hamburger
   verschijnt (1200px), anders blijft een lege navbalk staan tussen 991–1199px. */
@media screen and (max-width: 1199px) {
	.header-meta { display: none; }
}

/* hello-elementor's eigen themaheader (blauwe site-title + tagline) verbergen:
   de echte header is de geïnjecteerde snippet (#62 logo+menu). Live doet dit ook. */
#site-header.site-header,
.site-header.dynamic-header {
	display: none !important;
}

/* hello-elementor's eigen single-post tags-footer ("Getagged ...", template-parts/
   single.php) lekt onder Elementor-gebouwde blogposts die post_tag hebben — live
   toont dit niet (volledig Elementor-gerenderd). */
.post-tags {
	display: none !important;
}

/* --------------------------------------------------------------------------
   1. Fixed "Neem contact op"-button  (was: Tailwind-classes + bundle.js Vue)
   Markup: .cta-fixed > a.btn > (.btn__label + .btn__circle > svg.btn__icon)
   Live computed: pill 258x78, radius 9999, dark-green bg, witte StudioPro-tekst
   ~19px/300, groene cirkel 45px rechtsboven met zwarte pijl. top:8 right:20 z:999

   1b. Zelfde knop als losse in-page component: wrap dezelfde a.btn-markup in
   .rox-btn-inline i.p.v. .cta-fixed (geen position:fixed, gewoon inline op de
   plek waar je 'm neerzet in de pagina-content).
   -------------------------------------------------------------------------- */
.cta-fixed {
	position: fixed;
	top: 14px;
	right: 20px;
	z-index: 999;
}

.rox-btn-inline {
	display: inline-block;
}

.cta-fixed .btn, .rox-btn-inline .btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 64px;
	padding: 0 64px 0 32px; /* ruimte rechts voor de cirkel */
	border-radius: 9999px;
	background-color: var(--rox-dark);
	color: #fff;
	font-family: "StudioPro", "studiopro", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.cta-fixed .btn:hover, .rox-btn-inline .btn:hover {
	background-color: #0d2d1a;
}

/* hover: label schuift iets naar links (live-gedrag) + cirkel licht groter */
.cta-fixed .btn__label, .rox-btn-inline .btn__label {
	display: block;
	transition: transform .5s cubic-bezier(.9, 0, .1, 1);
}
.cta-fixed .btn:hover .btn__label, .rox-btn-inline .btn:hover .btn__label { transform: translateX(-14px); }
.cta-fixed .btn:hover .btn__circle, .rox-btn-inline .btn:hover .btn__circle { transform: translateY(-50%) scale(1.08); }

.cta-fixed .btn__circle, .rox-btn-inline .btn__circle {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	background-color: var(--rox-green-circle);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .5s cubic-bezier(.9, 0, .1, 1);
}

/* --------------------------------------------------------------------------
   1c. ".bttn"-knoppen (bv "Maatschappelijke waarde") — witte pill met een
   groene overlay (.bttn__circle) die default tot een pill-segment rechts is
   geclipt en op hover over de hele knop "wipet" (live clip-path-reveal).
   De Tailwind-utils (absolute/inset/bg) waren weg → overlay schoon herzet.
   -------------------------------------------------------------------------- */
.bttn {
	position: relative;
	overflow: hidden;
	text-decoration: none;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* anchor-wrapper zoals live */
}

.bttn .font-mediums {
	position: relative;
	z-index: 1;
	font-family: "studiopro", sans-serif;
	font-weight: 300; /* live nieuwe design = 300 (was 500) */
	color: #000;
}

.bttn .bttn__circle {
	position: absolute !important;
	inset: 0 !important;
	width: auto !important;
	height: auto !important;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
	background: var(--rox-green);
	color: #000;
	border-radius: 9999px;
	clip-path: inset(24px 32px 24px calc(100% - 120px) round 9999px);
	transition: clip-path .6s cubic-bezier(.9, 0, .1, 1), color .4s ease;
}

.bttn:hover .bttn__circle {
	clip-path: inset(8px 8px 8px 8px round 9999px);
	color: #fffff8;
}
.bttn:hover .font-mediums { color: #fffff8; }

.cta-fixed .btn__icon, .rox-btn-inline .btn__icon {
	width: 12px;
	height: 12px;
	overflow: hidden;
}

.cta-fixed .btn__path, .rox-btn-inline .btn__path {
	fill: #000;
}

/* Onder de desktop-menubreakpoint (1200px) verbergen we de header-CTA-pill;
   navigatie loopt dan via het hamburger-menu. (Was 990px, maar de desktop-nav
   overlapte het logo tot ~1200px — zie sectie 2.) */
@media screen and (max-width: 1199px) {
	.cta-fixed { display: none; }
}

/* --------------------------------------------------------------------------
   2. Mobiel menu  (#5806 "Menu mobile")  — was: Tailwind/bundle.js
   De overlay-markup staat altijd in de DOM; zonder de oude laag rendert hij
   full-screen met reuze (1424px) icoontjes. Default verbergen, off-canvas;
   tonen wanneer body[data-navigation-status="active"] (hamburger-toggle in JS).
   -------------------------------------------------------------------------- */
.hamburger { display: none; }

/* Hamburger-icoon: de oude Webflow/bundle.js-CSS die .box/.bar maat gaf is
   gestript, waardoor het icoon 0×0 (onzichtbaar) was. Hier opnieuw als 3 lijntjes. */
.hamburger .box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 20px;
}
.hamburger .bar {
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 2px;
	background: var(--rox-dark);
	transition: background-color .2s ease;
}
/* Menu open → hamburger verbergen; het menu heeft een eigen ✕ sluit-icoon (live). */
body[data-navigation-status="active"] .hamburger { display: none; }

/* Off-canvas mobiel menu — cream RECHTER-drawer met donkere tekst (zoals live;
   NIET een donkergroen full-screen paneel). De <ul> is de zichtbare drawer die
   van rechts inschuift; .mobile-navigation-back is een transparante klik-laag
   (de pagina blijft links zichtbaar). */
.mobile-navigation {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	pointer-events: none;
}
.mobile-navigation-back { position: absolute; inset: 0; background: transparent; }

.mobile-navigation > ul {
	position: absolute;
	top: 0;
	right: 0;
	width: min(85vw, 430px);
	height: 100%;
	margin: 0;
	padding: 30px 36px 48px;
	list-style: none;
	background: var(--rox-cream);
	color: var(--rox-text);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
	box-shadow: -16px 0 50px rgba(0, 0, 0, .10);
}

body[data-navigation-status="active"] .mobile-navigation {
	visibility: visible;
	pointer-events: auto;
}
body[data-navigation-status="active"] .mobile-navigation > ul { transform: none; }

/* "Menu"-label bovenin (groen, klein) */
.mobile-navigation .title {
	margin: 0 0 18px;
	font-family: "studiopro", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: #21683e;
}

/* hoofd-menu-items: grote donkere tekst */
.mobile-navigation li { list-style: none; }
.mobile-navigation .nav-link-click { display: block; padding: 8px 0; color: var(--rox-text); }
.mobile-navigation [class*="nav-link-line-header"] {
	font-family: "studiopro", sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
}
.mobile-navigation .nav-link-click:hover [class*="nav-link-line-header"] { text-decoration: underline; }

/* submenu "– Thema …": ingesprongen + kleiner (dash + bold "Thema" zit in markup) */
.mobile-navigation .mobile-submenu { margin: 2px 0; padding-left: 2px; list-style: none; }
.mobile-navigation .mobile-submenu a { display: block; padding: 4px 0; font-size: 16px; color: var(--rox-text); }

/* ✕ sluit-icoon rechtsboven (de .close-icon is een lege div → met CSS getekend) */
.mobile-navigation .close-icon-wrap {
	position: absolute;
	top: 30px;
	right: 34px;
	width: 26px;
	height: 26px;
	cursor: pointer;
	z-index: 2;
}
.mobile-navigation .close-icon { position: relative; display: block; width: 100%; height: 100%; }
.mobile-navigation .close-icon::before,
.mobile-navigation .close-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--rox-text);
}
.mobile-navigation .close-icon::before { transform: rotate(45deg); }
.mobile-navigation .close-icon::after { transform: rotate(-45deg); }

.mobile-navigation .external svg,
.mobile-navigation svg { width: 1em; height: 1em; }

/* Onder 1200px: desktop-nav verbergen (overlapte het logo) en hamburger tonen.
   #rox-nav krijgt zijn display:flex van een specifiekere/latere regel, dus
   !important is nodig om hem hier echt te verbergen. */
@media screen and (max-width: 1199px) {
	.hamburger {
		display: block;
		position: fixed;
		top: 22px;
		right: 20px;
		z-index: 1001;
		cursor: pointer;
	}
	#rox-nav { display: none !important; }
}

/* --------------------------------------------------------------------------
   3. Cirkel-constellatie "Roxit Belooft"  (was: Webflow-CSS + GSAP circles.js)
   Live: 2 kolommen (is--1 = 1 cirkel rechts/gecentreerd, is--2 = 2 cirkels
   links gestaggerd) → zigzag. Cirkel ~457px, donkergroene rand (#143f26),
   StudioPro KPI-tekst (#143f26, ~23px) gecentreerd in de cirkel.
   De cream .out-circle1 was enkel de GSAP-draw-track → verbergen.
   -------------------------------------------------------------------------- */
.circles-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0px, 2vw, 40px);
	max-width: 1140px;
	margin: 0 auto;
	/* één gedeelde scroll-tijdlijn voor alle dots (zoals de live GSAP-timeline op
	   .circles-wrap) → alle dots draaien synchroon en vloeiend, niet los van elkaar. */
	view-timeline-name: --rox-circles;
	view-timeline-axis: block;
}

.circles__col {
	display: flex;
	flex-direction: column;
	flex: 1 1 50%;
}

.circles__col.is--1 { align-items: flex-end; justify-content: center; }
.circles__col.is--2 { align-items: flex-start; justify-content: center; gap: clamp(24px, 5vw, 80px); }

.circles__circle {
	position: relative;
	width: min(420px, 32vw);
	height: min(420px, 32vw);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* col-2 staggert de twee cirkels horizontaal voor de constellatie-look */
.circles__col.is--2 .circles__circle:nth-child(1) { align-self: flex-start; }
.circles__col.is--2 .circles__circle:nth-child(2) { align-self: flex-end; }

.circle__circle-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.circle__circle-svg svg { width: 100%; height: 100%; display: block; }

/* cream-track verbergen; donkergroene rand tonen */
.circles__circle .out-circle1 { display: none; }
.circles__circle .out-circle { stroke: var(--rox-dark); }

/* De groene "bulb"-dot orbiteert rond het cirkelmidden, gekoppeld aan de
   scrollpositie (scroll-driven animation = scrub). Scroll omhoog/omlaag draait
   de dot terug/vooruit — net als de live GSAP-scrub (circles.js).
   transform-box:view-box → transform-origin 50% 50% = midden van de 411-viewBox. */
.circles__circle svg .inner-circle {
	transform-box: view-box;
	transform-origin: 50% 50%;
	animation: rox-dot-orbit linear both;
	animation-timeline: --rox-circles; /* gedeelde tijdlijn van .circles-wrap */
	animation-range: cover 0% cover 100%;
}
@keyframes rox-dot-orbit {
	from { transform: rotate(0deg); }
	to { transform: rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.circles__circle svg .inner-circle { animation: none; }
}

.circles__circle-text {
	position: relative;
	z-index: 1;
	max-width: 64%;
	text-align: center;
}

.circles__circle-text .roxit-kpi {
	font-family: "StudioPro", "studiopro", sans-serif;
	font-size: 1.45rem; /* live = 23.2px */
	line-height: 1.2;
	font-weight: 500; /* live = 500 */
	color: var(--rox-dark);
	margin: 0;
}

@media screen and (max-width: 990px) {
	.circles-wrap { flex-direction: column; }
	.circles__col { align-items: center !important; }
	.circles__circle { width: min(360px, 80vw); height: min(360px, 80vw); }
}

/* --------------------------------------------------------------------------
   4. Logo-slider (klantenlogo's)  — was: CSS-marquee waarvan de keyframes
   in de gestripte Webflow-laag zaten. Markup: .slider > .slide-track > .slide.
   De logoset staat 2x in de track → translateX(-50%) loopt naadloos rond.
   Pure CSS, geen JS.
   -------------------------------------------------------------------------- */
.klant-vertrouwen {
	text-align: center;
	font-family: "StudioPro", "studiopro", sans-serif;
	font-weight: 400; /* live = 400, niet de H3-default 700 */
	color: var(--rox-dark);
	max-width: 820px;
	margin: 0 auto 48px;
}

.slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.slider .slide-track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: rox-marquee 40s linear infinite;
}

.slider:hover .slide-track { animation-play-state: paused; }

.slider .slide {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0 36px;
	box-sizing: border-box;
}

.slider .slide img {
	max-height: 64px;
	width: auto;
	object-fit: contain;
	opacity: .65;
	filter: grayscale(1);
	transition: opacity .3s ease, filter .3s ease;
}

.slider .slide img:hover { opacity: 1; filter: none; }

@keyframes rox-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.slider .slide-track { animation: none; }
}

/* --------------------------------------------------------------------------
   5. Hover-states die in de gestripte Tailwind/Webflow-laag zaten.
   -------------------------------------------------------------------------- */
/* Footer- en in-content links: subtiele underline op hover */
.footerroxit a:hover,
.elementor-location-footer a:hover,
.elementor-widget-text-editor a:hover,
.entry-content a:hover,
.elementor-widget-theme-post-content a:hover {
	text-decoration: underline;
}

/* Blog-kaarten (posts-widget): lichte lift + thumbnail-zoom */
.elementor-post {
	transition: transform .25s ease, box-shadow .25s ease;
}
.elementor-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(20, 63, 38, .12);
}
.elementor-post__thumbnail {
	overflow: hidden;
}
.elementor-post__thumbnail img {
	transition: transform .45s ease;
}
.elementor-post:hover .elementor-post__thumbnail img {
	transform: scale(1.05);
}

/* Algemene Elementor-knoppen: subtiele hover als ze er geen hebben */
.elementor-button {
	transition: background-color .2s ease, transform .2s ease;
}

/* --------------------------------------------------------------------------
   6. Footer-wordmerk "roxit" (#4122). Eigen cream-achtergrond (anders wit door
   de near-white body) + scroll-reveal: het wordmerk rijst omhoog/fade-in als
   het in beeld komt (verving GSAP/DrawSVG). Trigger via IntersectionObserver
   in roxit-clean.js (class .rox-in).
   -------------------------------------------------------------------------- */
.footerroxit {
	background-color: var(--rox-cream);
	overflow: hidden;
}
.footerroxit .overflow { overflow: hidden; }
.footerroxit svg { display: block; }

/* Letter-voor-letter reveal: elke letter-vorm (de "i" is een <rect>, de rest
   <path>) fade + rijst los in, met oplopende delay — zoals de live GSAP-stagger.
   Stagger via nth-child op de <g> zodat de volgorde r-o-x-i-t klopt incl. de rect. */
.footerroxit svg path,
.footerroxit svg rect,
.footerroxit svg polygon,
.footerroxit svg circle {
	opacity: 0;
	transform: translateY(28%);
	transform-box: fill-box;
	transform-origin: center bottom;
	transition: opacity .55s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.footerroxit.rox-in svg path,
.footerroxit.rox-in svg rect,
.footerroxit.rox-in svg polygon,
.footerroxit.rox-in svg circle {
	opacity: 1;
	transform: translateY(0);
}
.footerroxit.rox-in svg g > :nth-child(1) { transition-delay: 0s; }
.footerroxit.rox-in svg g > :nth-child(2) { transition-delay: .12s; }
.footerroxit.rox-in svg g > :nth-child(3) { transition-delay: .24s; }
.footerroxit.rox-in svg g > :nth-child(4) { transition-delay: .36s; }
.footerroxit.rox-in svg g > :nth-child(5) { transition-delay: .48s; }
.footerroxit.rox-in svg g > :nth-child(6) { transition-delay: .60s; }

@media (prefers-reduced-motion: reduce) {
	.footerroxit svg path,
	.footerroxit svg rect,
	.footerroxit svg polygon,
	.footerroxit svg circle { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   7. Typografie-correcties t.o.v. live (na Tailwind/Webflow-strip).
   -------------------------------------------------------------------------- */
/* footer-kolomkoppen (Navigatie/Socials/...) — live: 11.2px / 600 / groen / StudioPro */
.footer-p-small {
	font-size: 11.2px;
	font-weight: 600;
	color: #21683e;
	font-family: "studiopro", sans-serif;
}

/* circ-KPI iets kleiner op mobiel zodat 23px niet uit de kleinere cirkel loopt */
@media screen and (max-width: 990px) {
	.circles__circle-text .roxit-kpi { font-size: 1.2rem; }
}

/* Body-tekst in Elementor text-widgets ook licht (300) zoals live; sommige
   widgets hebben een eigen 400 in de gegenereerde CSS → hier overschreven. */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-theme-post-content p {
	font-weight: 300;
}

/* .bttn-anchor zelf op 400 (de zichtbare .font-mediums-label blijft 500) */
.bttn { font-weight: 400; }

/* Cookie-banner (complianz) in het merk-font StudioPro, zoals live. */
[class^="cmplz-"],
[class*=" cmplz-"] {
	font-family: "studiopro", sans-serif;
}

/* --------------------------------------------------------------------------
   8. Body-tekst fonts 1-op-1 met huidige live (kit-default Roboto wordt op
   live globaal overschreven naar StudioPro voor text-editor-paragrafen;
   blockquotes blijven ui-sans-serif/400). De per-widget Roboto in de
   gegenereerde Elementor-CSS heeft hoge specificiteit → !important nodig.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor p {
	font-family: "studiopro", sans-serif !important;
}

/* Blockquote-widget: wrapper/cite = ui-sans-serif/400, zichtbare quote-<p> = StudioPro/300 (zoals live) */
.elementor-widget-blockquote blockquote {
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-weight: 400;
}
.elementor-widget-blockquote blockquote > p {
	font-family: "studiopro", sans-serif;
	font-weight: 300;
}

/* --------------------------------------------------------------------------
   9. Footer-kolom-links elk op eigen regel (waren inline) + layout-correcties.
   -------------------------------------------------------------------------- */
.footer-p {
	display: block;
}

/* hero-heading (absolute) tekst gecentreerd zoals live */
.elementor-widget-heading.elementor-absolute .elementor-heading-title {
	text-align: center;
}

/* cirkels: kleinere cream-gevulde binnencirkel met ring-gap tot de groene rand
   (zoals live — niet edge-to-edge). Via ::before, achter tekst + SVG-rand. */
.circles__circle::before {
	content: "";
	position: absolute;
	inset: 9%;
	border-radius: 50%;
	background-color: #fefee3;
	z-index: 0;
	pointer-events: none;
}
.circles__circle-text { z-index: 1; }

/* --------------------------------------------------------------------------
   10. Fixes (24-06): footer-link-spacing, dropdown interactie, button-pijl centreren.
   -------------------------------------------------------------------------- */
.footer-p { margin-bottom: 1rem; font-size: 1.1rem; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Footer 1-op-1 met live:
   - de 5 kolommen + intro-kop over de VOLLE breedte spreiden (waren links
     gebundeld met lege ruimte rechts);
   - locatie-links (.footer-cred) elk op een EIGEN regel (waren inline → liepen
     "Arnhem Enschede Nieuwegein…" aan elkaar);
   - kolomkoppen (NAVIGATIE/SOCIALS/…) in kapitaal met letterspatie + ruimte
     onder de kop, zoals live.
   -------------------------------------------------------------------------- */
/* Alleen op desktop (≥1025px) spreiden: daar zijn alle 5 kolommen zichtbaar
   (Socials + Locaties zijn elementor-hidden-tablet/mobile). Onder 1025px zou
   space-between lege gaten trekken waar die 2 kolommen verborgen zijn. */
@media screen and (min-width: 1025px) {
	.elementor-element-60b9a9a8 {
		justify-content: space-between !important;
		align-items: flex-start;
		gap: clamp(24px, 3vw, 64px);
	}
}
.footer-cred { display: block; margin-bottom: 1rem; line-height: 1.4; }
.footer-p-small {
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 14px;
}
/* footer-kolomtekst groen (#21683e), zoals live — was zwart/near-black. Matcht
   de "Voor een betere samenleving"-kop. Geldt voor nav-, ondersteunings-,
   contact- en locatie-links. (a{color:inherit} laat de <a>'s dit erven.) */
.footer-p,
.footer-p a,
.footer-cred,
.footer-cred a,
.footer-cred-contact,
.footer-cred-contact a { color: #21683e; }

/* bottom-bar links (Whistleblowing/Work with us/Visma Group/Visma Nederland) —
   zelfde merkgroen, kleiner formaat dan de kolomlinks erboven. De Visma-eigen
   logo-SVG (#visma/#visma-mobile) blijft bewust ongemoeid — dat is een extern
   partnerlogo, geen eigen footer-tekst. */
.footer-visma,
.footer-visma a {
	font-size: 0.75rem;
	color: #21683e;
}

/* Onzichtbare dropdown mag geen interactie blokkeren (was 'broken'). */
#rox-nav .rox-submenu { visibility: hidden; pointer-events: none; }
#rox-nav .rox-nav-items li:hover > .rox-submenu,
#rox-nav .rox-submenu:hover { visibility: visible; pointer-events: auto; }

/* De dropdown staat ~14px onder het menu-item (top:30px, item ~16px hoog). Bij
   het naar beneden bewegen van de muis viel :hover weg in dat gat → dropdown
   verdween vóór je hem kon klikken. Onzichtbare "brug" over het gat houdt de
   hover-keten heel (zonder de visuele positie te wijzigen). */
#rox-nav .rox-submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 20px;
}

/* .bttn-pijl gecentreerd in de groene cirkel (stond rechts) */
.bttn .bttn__circle { padding-right: 64px; }

/* dropdown-item als volledige grijze kaart (a had flex:1 maar parent niet flex
   → kaart vulde niet). display:block laat de kaart de dropdown-breedte vullen. */
#rox-nav .rox-submenu li a { display: block; }

/* zorg-om-data certificaten: de 3e download-link ("ISO14001") stond 16px lager
   dan de andere twee. Oorzaak: die link zit in een <p> met 16px marge (de eerste
   twee zijn een kale <a>). Marge nullen lijnt 'm uit met de andere twee. */
.elementor-element-ed6e82f p { margin: 0; }

/* ==========================================================================
   11. WPForms — merk-styling (vervangt FormCraft). De WPForms "modern"-render
   gebruikt standaard blauw (#066aab) en het systeemlettertype. Hier op
   Roxit-merk gezet: StudioPro, donkergroene pill-knop, cream tekst. De velden/
   layout blijven gelijk aan hoe het formulier nu staat (labels boven velden).
   ========================================================================== */
.wpforms-container {
	font-family: "studiopro", sans-serif;
	/* WPForms-modern CSS-variabelen → merk */
	--wpforms-button-background-color: var(--rox-dark);       /* #143f26 */
	--wpforms-button-background-color-alt: #0e2e1b;           /* hover (donkerder) */
	--wpforms-button-text-color: var(--rox-cream);            /* #fefee3 */
	--wpforms-button-text-color-alt: #ffffff;
	--wpforms-button-border-color: var(--rox-dark);
	--wpforms-button-border-color-alt: #0e2e1b;
	--wpforms-button-border-radius: 9999px;                   /* pill, zoals .bttn */
	--wpforms-field-border-radius: 8px;
	--wpforms-field-border-color: rgba(20, 63, 38, .20);      /* subtiele groen-getinte rand i.p.v. grijs */
	--wpforms-label-color: var(--rox-text);                   /* #151516 */
	--wpforms-label-sublabel-color: #666666;
}
/* consistente verticale ritme tussen velden */
.wpforms-container .wpforms-field { padding: 0 0 18px; }
/* iets ruimere, comfortabelere invoervelden */
.wpforms-container .wpforms-field input.wpforms-field-medium,
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field textarea {
	padding: 12px 14px;
	border-color: rgba(20, 63, 38, .20);
	transition: border-color .2s ease, box-shadow .2s ease;
}
/* duidelijke, on-brand focus-state (was: generieke browser-outline) */
.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field textarea:focus {
	border-color: var(--rox-green) !important;
	box-shadow: 0 0 0 3px rgba(77, 168, 109, .18);
	outline: none;
}
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-submit { font-family: "studiopro", sans-serif; }
.wpforms-container .wpforms-field-label { font-weight: 500; }
.wpforms-container input.wpforms-field-medium,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
	font-family: "studiopro", sans-serif;
	font-weight: 300;
}
/* groene pill-submit (zoals de site-knoppen) */
.wpforms-container button.wpforms-submit {
	font-weight: 500;
	padding: 14px 34px;
	border-radius: 9999px;
	transition: background-color .25s ease;
}
/* GDPR-consent: kleine grijze tekst, zoals de oude FormCraft-toelichting */
.wpforms-container .wpforms-field-gdpr-checkbox label.wpforms-field-label-inline {
	font-size: 13px;
	color: #666666;
	font-weight: 300;
}

/* ==========================================================================
   12. Responsive — fixes voor alle schermformaten.
   ========================================================================== */

/* 12a. Product-portfolio: de 3 productsecties (alle 9 producten) waren
   elementor-hidden-tablet ZONDER tablet-variant. Elementor verbergt
   hidden-tablet in 768–1024px → in die band toonde de pagina helemaal geen
   producten (tablet "dead zone"). Het zijn flex-containers die op mobiel
   stapelen en op desktop in een rij staan; we tonen ze ook in de tablet-band
   (flex-wrap regelt de layout). */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-885cdb2.elementor-hidden-tablet,
	.elementor-element-206b520.elementor-hidden-tablet,
	.elementor-element-c433ba6.elementor-hidden-tablet {
		display: flex !important;
	}
}