/* ==========================================================================
   Adsure - child theme stylesheet (assets/css/adsure.css)  v1.10.0
   Opbouw:
   1. Fonts (zelf gehost)
   2. Tokens (kleuren, maten, breakpoints)
   3. Typografie (koppen, body, intro)
   4. Knoppen
   5. Secties en achtergronden
   6. Kaarten: hover, ademen, reduced motion
   7. Hulpklassen (lijsten, svg, hero-media, video)
   8. Header (vaste balk, hamburger, overlaymenu)
   9. Footer (lint, contactgegevens, mobiele lijst)
   10. Secties homepage (per stap aangevuld)
   11. Avada Live, voorbeeldframe
   Breakpoints: mobiel <= 767, tablet 768-1023, desktop >= 1024.
   ========================================================================== */

/* 1. Fonts ------------------------------------------------------------------
   Koppen: Ambit (licentie van Adsure), zelf gehost: SemiBold (600) voor de
   grote koppen, Bold (700) voor de kaarttitels (cases, diensten, team).
   Body: Inter als variabel font (SIL Open Font License, assets/fonts/OFL-Inter.txt),
   zelf gehost zodat ook Light (300) en Medium (500) bestaan; Avada laadt Inter
   alleen in 400/500/700 via Google. Deze @font-face komt later in de cascade
   en wint, dus Google Fonts wordt niet meer aangesproken.
   Quotes: Funnel Sans cursief (OFL, assets/fonts/OFL-Funnel-Sans.txt). */
@font-face {
	font-family: 'Ambit';
	src: url('../fonts/ambit-semibold.woff2') format('woff2'),
		url('../fonts/ambit-semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Ambit';
	src: url('../fonts/ambit-bold.woff2') format('woff2'),
		url('../fonts/ambit-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-italic-variable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Funnel Sans';
	src: url('../fonts/funnel-sans-variable.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Funnel Sans';
	src: url('../fonts/funnel-sans-italic-variable.woff2') format('woff2');
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}

/* 2. Tokens ------------------------------------------------------------- */
:root {
	--ads-zwart: #000000;
	--ads-wit: #FFFFFF;
	--ads-creme: #FCF8EE;
	--ads-roze: #FF7CF8;
	--ads-lime: #CBFF00;
	--ads-blauw: #2975FF;
	--ads-lavendel: #DEDEFF;
	--ads-grijs: #D9D9D9;
	--ads-grijs-donker: #8F928E;

	--ads-font-kop: 'Ambit', 'Funnel Sans', 'Inter', Arial, sans-serif;
	--ads-font-quote: 'Funnel Sans', 'Inter', Arial, sans-serif; /* cursieve quotes; Ambit heeft geen cursief */
	--ads-font-body: 'Inter', Arial, sans-serif;

	--ads-container: 1280px;
	--ads-rand: 40px;          /* zijmarge van brede blokken (hero-beeld) */
	--ads-sectie: 120px;       /* sectiepadding boven en onder */
	--ads-gap: 24px;           /* ruimte tussen kaarten */
	--ads-radius: 40px;        /* kaarten, hero-beeld */
	--ads-radius-s: 24px;      /* foto's binnen een kaart */
	--ads-kop-intro: 32px;     /* kop -> intro */
	--ads-intro-knop: 40px;    /* intro -> knop */
	--ads-knop-kaarten: 64px;  /* knop -> kaarten (of kaarten -> knop) */

	--ads-header-h: 150px;     /* hoogte van de vaste header; de balk staat in het midden */
	--ads-header-h-dicht: 90px;/* hoogte na scrollen (dichte crème balk) */
	--ads-header-x: 76px;      /* zijafstand van hamburger en knop (hero-marge + 36 px) */
	--ads-anchor-offset: 100px;/* ruimte boven een sectie bij anchor-scroll */
	--ads-footer-x: 96px;      /* zijafstand van de contactgegevens in de footer */

	--ads-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ads-schaduw: 0 16px 40px rgba(0, 0, 0, 0.16);
}
@media (max-width: 1023px) {
	:root {
		--ads-sectie: 80px;
		--ads-rand: 32px;
		--ads-knop-kaarten: 48px;
		--ads-header-h: 120px;
		--ads-header-x: 56px;
		--ads-anchor-offset: 80px;
		--ads-footer-x: 48px;
	}
}
@media (max-width: 767px) {
	:root {
		--ads-sectie: 56px;
		--ads-rand: 20px;
		--ads-gap: 16px;
		--ads-radius: 24px;
		--ads-radius-s: 16px;
		--ads-kop-intro: 20px;
		--ads-intro-knop: 28px;
		--ads-knop-kaarten: 40px;
		--ads-header-h: 96px;
		--ads-header-h-dicht: 72px;
		--ads-header-x: 36px;
		--ads-anchor-offset: 64px;
		--ads-footer-x: 24px;
	}
}

/* 3. Typografie ---------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}
body,
.fusion-body {
	font-family: var(--ads-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 767px) {
	body,
	.fusion-body,
	.fusion-body p,
	.fusion-text p {
		font-size: 18px;
	}
}

/* !important op de koppen: Avada's gecompileerde CSS zet dezelfde eigenschappen
   vanuit Global Options. Hier wint het ontwerp. */
h1, h2, h3, h4, h5, h6,
.fusion-title,
.fusion-title-heading {
	font-family: var(--ads-font-kop) !important;
	font-weight: 600 !important; /* Ambit is er alleen in SemiBold; geen nep-vet */
	font-synthesis: none;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	line-height: 1.25;
}
/* Maten als clamp(): klein scherm -> ontwerp op 1440 px. "Responsive Headings"
   in Avada staat uit. */
h1,
.fusion-title-size-one,
.fusion-title-size-one .fusion-title-heading {
	font-size: clamp(2.5rem, 5.9vw, 5.25rem) !important;    /* 40 - 84 px */
	line-height: 1.25 !important;
}
h2,
.fusion-title-size-two,
.fusion-title-size-two .fusion-title-heading {
	font-size: clamp(2.25rem, 4.7vw, 4.25rem) !important;   /* 36 - 68 px */
	line-height: 1.25 !important;
}
h3,
.fusion-title-size-three,
.fusion-title-size-three .fusion-title-heading {
	font-size: clamp(1.25rem, 1.8vw, 1.625rem) !important;  /* 20 - 26 px: kaarttitels */
	line-height: 1.25 !important;
}
h4,
.fusion-title-size-four,
.fusion-title-size-four .fusion-title-heading {
	font-size: clamp(1.125rem, 1.5vw, 1.375rem) !important; /* 18 - 22 px */
	line-height: 1.3 !important;
}
/* Grote koppen in SemiBold (600). De kaarttitels (cases, diensten, team) staan
   op Bold (700), zie de secties 10b t/m 10d. */

/* Introtekst onder een kop: gecentreerd, beperkte regelbreedte. */
.ads-intro {
	max-width: 62ch;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.ads-intro p:last-child {
	margin-bottom: 0;
}
/* Verticale ritmes */
.ads-kop {
	margin-bottom: var(--ads-kop-intro) !important;
}
.ads-intro {
	margin-bottom: var(--ads-intro-knop);
}
.ads-knop-rij {
	margin-bottom: var(--ads-knop-kaarten);
}
.ads-kaarten-knop {
	margin-top: var(--ads-knop-kaarten);
}

/* Cursieve quote (testimonials): Funnel Sans, Ambit heeft geen cursief. */
.ads-quote,
.ads-quote p {
	font-family: var(--ads-font-quote);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.8vw, 2.5rem); /* 24 - 40 px */
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

/* 4. Knoppen ----------------------------------------------------------------
   Kleuren komen uit Global Options > Button (roze, zwarte tekst). Maat, vorm
   en hover staan hier, zodat ze niet afhangen van de Avada-versie. */
.fusion-button {
	border-radius: 999px !important;
	font-family: var(--ads-font-body) !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	line-height: 1.3 !important;
	transition: background-color 0.3s var(--ads-ease), color 0.3s var(--ads-ease), transform 0.3s var(--ads-ease), box-shadow 0.3s var(--ads-ease);
}
/* Grote knop (CONTACT in de secties): 300 x 61 px in het ontwerp */
.fusion-button.button-large,
.fusion-button.button-xlarge,
.fusion-button.fusion-button-default-size {
	font-size: 20px !important;
	padding: 17px 56px !important;
}
.fusion-button.button-medium {
	font-size: 18px !important;
	padding: 14px 44px !important;
}
/* Kleine knop (header): 176 x 36 px in het ontwerp */
.fusion-button.button-small {
	font-size: 16px !important;
	padding: 8px 32px !important;
}
@media (max-width: 767px) {
	.fusion-button.button-large,
	.fusion-button.button-xlarge,
	.fusion-button.fusion-button-default-size {
		font-size: 18px !important;
		padding: 14px 40px !important;
	}
	.fusion-button.button-small {
		font-size: 14px !important;
		padding: 8px 20px !important;
	}
}
@media (hover: hover) and (pointer: fine) {
	.fusion-button:hover {
		transform: translateY(-2px);
	}
}
.fusion-button:hover,
.fusion-button:focus-visible {
	background: var(--ads-zwart) !important;
	color: var(--ads-creme) !important;
}
.ads-dark .fusion-button:hover,
.ads-dark .fusion-button:focus-visible {
	background: var(--ads-creme) !important;
	color: var(--ads-zwart) !important;
}
.fusion-button:focus-visible {
	outline: 3px solid var(--ads-blauw);
	outline-offset: 3px;
}

/* 5. Secties en achtergronden -------------------------------------------- */
.ads-section {
	padding-top: var(--ads-sectie) !important;
	padding-bottom: var(--ads-sectie) !important;
}
.ads-section--strak {
	padding-top: 0 !important;
}
/* Anchor-scroll: ruimte voor de vaste header (geldt voor elk element met een id). */
.ads-section,
#main [id] {
	scroll-margin-top: var(--ads-anchor-offset);
}
/* .ads-dark / .ads-light op de container: tekstkleuren en herkenning door de header.
   De achtergrondkleur zelf staat in de container-instellingen van Avada.
   In een donkere sectie erven koppen en tekst hun kleur van de dichtstbijzijnde
   ouder met een kleur: de sectie (crème) of een gekleurde kaart (.ads-tekst-zwart). */
.ads-dark {
	color: var(--ads-creme);
}
.ads-dark :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, .fusion-title .fusion-title-heading, .fusion-text, .fusion-text p) {
	color: inherit !important;
}
.ads-dark a:not(.fusion-button) {
	color: inherit;
}
.ads-tekst-zwart,
.ads-tekst-zwart > .fusion-column-wrapper {
	color: var(--ads-zwart);
}
.ads-tekst-creme,
.ads-tekst-creme > .fusion-column-wrapper {
	color: var(--ads-creme);
}
.ads-tekst-zwart :is(h1, h2, h3, h4, h5, h6, p, li, .fusion-title .fusion-title-heading, .fusion-text, .fusion-text p),
.ads-tekst-creme :is(h1, h2, h3, h4, h5, h6, p, li, .fusion-title .fusion-title-heading, .fusion-text, .fusion-text p) {
	color: inherit !important;
}
/* Standaardtemplate: Avada geeft #main 30 px zijpadding; het ontwerp loopt van
   rand tot rand, dus 0. Bij het paginatemplate "100% Width" (de Home) regelt
   Avada het zelf: #main krijgt 40 px padding en elke container 40 px negatieve
   marge, netto rand tot rand. Daar blijven we van af: zonder die padding steken
   alle containers 40 px buiten het scherm (hero-beeld zonder rand, op mobiel
   afgesneden kaarten). */
#main:not(.width-100) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Pagina's zonder hero (bijv. privacyverklaring): ruimte onder de vaste header. */
body:not(.home) #main {
	padding-top: var(--ads-header-h) !important;
}

/* 6. Kaarten ----------------------------------------------------------------
   Buitenlaag (.ads-card: een Avada-kolom, of een kaart uit [adsure_team]):
   hover-schaal en schaduw. Binnenlaag (.fusion-column-wrapper bij een kolom,
   .ads-card__inner bij een shortcode-kaart): radius, clipping en de
   ademanimatie. Zo vechten hover en ademen niet om dezelfde transform. */
.ads-card {
	border-radius: var(--ads-radius);
	transition: transform 0.45s var(--ads-ease), box-shadow 0.45s var(--ads-ease);
	position: relative;
}
.ads-card > .fusion-column-wrapper,
.ads-card > .ads-card__inner {
	border-radius: var(--ads-radius);
	overflow: hidden;
	height: 100%;
}
@media (hover: hover) and (pointer: fine) {
	.ads-card--hover:hover {
		transform: scale(1.02);
		box-shadow: var(--ads-schaduw);
		z-index: 2;
	}
}
@keyframes ads-adem {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.015); }
}
.ads-adem > .fusion-column-wrapper,
.ads-adem > .ads-card__inner {
	animation: ads-adem 6s ease-in-out infinite;
	animation-delay: var(--ads-delay, 0s);
	transform-origin: 50% 50%;
	will-change: transform;
}
/* Kaarten in een rij ademen niet tegelijk. */
.ads-adem:nth-child(4n + 2) { --ads-delay: -1.5s; }
.ads-adem:nth-child(4n + 3) { --ads-delay: -3s; }
.ads-adem:nth-child(4n + 4) { --ads-delay: -4.5s; }

/* Geen beweging voor wie dat heeft ingesteld, ook niet van Avada's eigen animaties. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.ads-card--hover:hover {
		transform: none;
	}
}

/* 7. Hulpklassen --------------------------------------------------------- */
/* Lijst met ronde bullets in de tekstkleur (dienstenkaarten). */
.ads-lijst,
.ads-lijst ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ads-lijst li {
	position: relative;
	padding-left: 1.6em;
	margin: 0 0 0.7em !important;
	line-height: 1.5;
}
.ads-lijst li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.65em;
	height: 0.65em;
	border-radius: 50%;
	background: currentColor;
}

/* Inline svg's via [adsure_svg]: volgen de tekstkleur, schalen met hun box. */
.ads-svg {
	display: block;
	width: 100%;
	height: auto;
	fill: currentColor;
}
.ads-svg--logo-adsure {
	width: 168px;
	max-width: 45vw;
}

/* Hero-media: afgerond beeld met zijmarge, video eroverheen als die laadt. */
.ads-hero__media {
	position: relative;
	margin: 0 var(--ads-rand);
	border-radius: var(--ads-radius);
	overflow: hidden;
	aspect-ratio: 5928 / 3861;
	background: var(--ads-grijs);
	isolation: isolate;
}
/* hoogte="..." in [adsure_hero]: vaste hoogte, nooit hoger dan de foto zelf zou
   zijn; het beeld wordt boven en onder bijgesneden (object-fit). Niet via
   max-height op een aspect-ratio-box, want dan maakt de browser het beeld smaller. */
.ads-hero__media--begrensd {
	aspect-ratio: auto;
	height: min(var(--ads-hero-max), calc((100vw - 2 * var(--ads-rand)) * 3861 / 5928));
}
@media (max-width: 767px) {
	.ads-hero__media {
		aspect-ratio: 4 / 5;
	}
	.ads-hero__media--begrensd {
		aspect-ratio: auto;
		height: min(var(--ads-hero-max), calc((100vw - 2 * var(--ads-rand)) * 5 / 4));
	}
}
.ads-hero__media img,
.ads-video__el {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ads-video__el {
	z-index: 1;
}
.ads-hero__badge {
	position: absolute;
	left: 4.3%;
	bottom: 4.5%;
	width: 19.5%;
	min-width: 120px;
	max-width: 268px;
	z-index: 2;
}
/* Badge: de tekstring met de vier dots draait langzaam om de vaste "a"
   (groep .ads-badge__ring in badge-adsure-zwart.svg en -creme.svg). */
@keyframes ads-badge-draai {
	to { transform: rotate(360deg); }
}
.ads-svg--badge-adsure-zwart .ads-badge__ring,
.ads-svg--badge-adsure-creme .ads-badge__ring {
	transform-box: view-box;
	transform-origin: 150px 150px;
	animation: ads-badge-draai 30s linear infinite;
}

/* Schermlezers: wel lezen, niet tonen. */
.ads-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 8. Header ------------------------------------------------------------------
   Layout Section "Adsure header": één container met class ads-header en drie
   kolommen (hamburger, logo, knop). De container ligt vast (fixed) en
   transparant over de pagina; alleen de drie onderdelen vangen klikken.
   Bovenaan (over de hero-foto) kijkt adsure.js wat er onder hamburger en logo
   ligt en zet .ads-header--dark-links / .ads-header--dark-midden (crème) of
   niets (zwart). Zodra de onderkant van de hero-foto de balk bereikt (of bij
   10 px scrollen op een pagina zonder foto) komt .ads-header--dicht: dichte
   crème balk, zwarte tekst, geen detectie meer. .ads-header--menu-open als het
   overlaymenu open is. */
.ads-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1200;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	color: var(--ads-zwart);
	pointer-events: none;
	transition: color 0.3s var(--ads-ease), background-color 0.3s var(--ads-ease), box-shadow 0.3s var(--ads-ease);
}
/* Dichte balk na de hero: crème, zwarte tekst, vangt klikken. */
.ads-header--dicht:not(.ads-header--menu-open) {
	background: var(--ads-creme) !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
	pointer-events: auto;
}
.ads-header--dicht:not(.ads-header--menu-open) .ads-bar__links,
.ads-header--dicht:not(.ads-header--menu-open) .ads-bar__midden {
	color: var(--ads-zwart);
}
.ads-header--dicht .ads-bar__logo .ads-svg path {
	stroke: none !important;
}
.admin-bar .ads-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .ads-header {
		top: 46px;
	}
}
.ads-header .ads-bar__links,
.ads-header .ads-bar__midden {
	color: var(--ads-zwart);
	transition: color 0.3s var(--ads-ease);
}
.ads-header--dark-links .ads-bar__links,
.ads-header--dark-midden .ads-bar__midden,
.ads-header--menu-open .ads-bar__links,
.ads-header--menu-open .ads-bar__midden {
	color: var(--ads-creme);
}
.ads-header .fusion-builder-row {
	box-sizing: border-box;
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 var(--ads-header-x) !important;
	height: var(--ads-header-h) !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	transition: height 0.3s var(--ads-ease);
}
/* Na scrollen schuift de balk omhoog, zodat hij minder over de content hangt. */
.ads-header--scrolled .fusion-builder-row {
	height: var(--ads-header-h-dicht) !important;
}
.ads-header .fusion-layout-column {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0;
	position: relative;
	z-index: 2; /* boven het overlaymenu, mocht dat (zonder JS) nog in de header staan */
}
.ads-header .fusion-column-wrapper {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	display: flex;
	align-items: center;
}
.ads-header .ads-bar__links .fusion-column-wrapper { justify-content: flex-start; }
.ads-header .ads-bar__midden .fusion-column-wrapper { justify-content: center; }
.ads-header .ads-bar__rechts .fusion-column-wrapper { justify-content: flex-end; }
.ads-header .fusion-text {
	margin: 0 !important;
}
.ads-header .fusion-text p {
	margin: 0 !important;
	line-height: 1;
}
/* Hamburger, logo en knop exact op één hoogte. In een gewoon tekstblok staan
   ze op de tekstbasislijn (hamburger zakt zo'n 6 px, logo hangt 5 px te hoog);
   als flexbox staan ze in het midden van de balk. */
.ads-header .fusion-text,
.ads-header .fusion-text p {
	display: flex;
	align-items: center;
}
.ads-header .ads-bar__midden .fusion-text,
.ads-header .ads-bar__midden .fusion-text p {
	justify-content: center;
}
.ads-header .ads-bar__rechts .fusion-text,
.ads-header .ads-bar__rechts .fusion-text p {
	justify-content: flex-end;
}
.ads-header .ads-hamburger,
.ads-header .ads-bar__logo,
.ads-header .fusion-button {
	pointer-events: auto;
}
.ads-bar__logo {
	display: inline-block;
	color: inherit;
	line-height: 0;
}
/* Logo bij hover zwart (niet Avada's blauwe linkkleur), ook over de hero-foto;
   alleen bij open menu (zwart vlak) blijft het crème. */
.ads-header:not(.ads-header--menu-open) .ads-bar__logo:hover,
.ads-header:not(.ads-header--menu-open) .ads-bar__logo:focus-visible {
	color: var(--ads-zwart) !important;
}
.ads-header--menu-open .ads-bar__logo:hover,
.ads-header--menu-open .ads-bar__logo:focus-visible {
	color: inherit !important;
}
.ads-bar__logo .ads-svg--logo-adsure {
	width: 168px;
	max-width: 34vw;
	color: inherit;
}
/* Logo deels boven licht en deels boven donker (gesplitste sectie): dunne rand
   in de tegenkleur, zodat het aan beide kanten leesbaar blijft. */
.ads-header--contrast .ads-bar__logo .ads-svg path {
	paint-order: stroke;
	stroke: var(--ads-creme);
	stroke-width: 16px;
	stroke-linejoin: round;
}
.ads-header--contrast.ads-header--dark-midden .ads-bar__logo .ads-svg path {
	stroke: var(--ads-zwart);
}
.ads-header .fusion-button-wrapper {
	margin: 0 !important;
}
/* Hamburger: drie streepjes, bij open menu een kruis. */
.ads-hamburger {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 46px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	position: relative;
	z-index: 3;
}
.ads-hamburger span {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: currentColor;
	transform-origin: center;
	transition: transform 0.3s var(--ads-ease), opacity 0.2s var(--ads-ease);
}
.ads-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.ads-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.ads-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.ads-hamburger:focus-visible {
	outline: 3px solid var(--ads-blauw);
	outline-offset: 6px;
	border-radius: 2px;
}
@media (max-width: 767px) {
	.ads-hamburger {
		width: 34px;
		height: 17px;
	}
	.ads-hamburger span {
		height: 3px;
	}
	.ads-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ads-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.ads-bar__logo .ads-svg--logo-adsure {
		width: 100px;
	}
	/* Smal scherm: zijzones zo breed als hun inhoud, het logo precies tussen
	   hamburger en knop in (even veel lucht links als rechts). Met drie gelijke
	   zones stond het logo wel op het midden van het scherm, maar tegen de
	   brede knop aan. */
	.ads-header .ads-bar__links,
	.ads-header .ads-bar__rechts {
		flex: 0 0 auto !important;
	}
	.ads-header .ads-bar__midden {
		flex: 1 1 auto !important;
	}
	.ads-header .fusion-button.button-small {
		padding: 8px 16px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}
}

/* Overlaymenu: zwart, fullscreen, grote koppen. Ligt onder de header (z 1100
   tegen 1200), zodat logo, hamburger (kruis) en CONTACT zichtbaar blijven. */
.ads-menu {
	position: fixed;
	inset: 0;
	z-index: 1100;
	background: var(--ads-zwart);
	color: var(--ads-creme);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ads-header-h) var(--ads-rand) var(--ads-rand);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s var(--ads-ease), visibility 0s linear 0.35s;
}
.ads-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.35s var(--ads-ease);
}
body.ads-menu-open {
	overflow: hidden;
}
.ads-menu__nav {
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
}
.ads-menu__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center;
}
.ads-menu__list li {
	margin: 0;
	padding: 0;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s var(--ads-ease), transform 0.4s var(--ads-ease);
}
.ads-menu.is-open .ads-menu__list li {
	opacity: 1;
	transform: none;
}
.ads-menu.is-open .ads-menu__list li:nth-child(2) { transition-delay: 0.05s; }
.ads-menu.is-open .ads-menu__list li:nth-child(3) { transition-delay: 0.1s; }
.ads-menu.is-open .ads-menu__list li:nth-child(4) { transition-delay: 0.15s; }
.ads-menu.is-open .ads-menu__list li:nth-child(5) { transition-delay: 0.2s; }
.ads-menu.is-open .ads-menu__list li:nth-child(6) { transition-delay: 0.25s; }
.ads-menu__list a {
	display: inline-block;
	font-family: var(--ads-font-kop);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: clamp(2rem, 6vw, 4.25rem);
	line-height: 1.35;
	color: var(--ads-creme);
	text-decoration: none;
	padding: 0.05em 0.3em;
	transition: color 0.2s var(--ads-ease);
}
.ads-menu__list a:hover,
.ads-menu__list a:focus-visible {
	color: var(--ads-roze);
	outline: none;
}
.ads-menu__list .current-menu-item > a {
	color: var(--ads-roze);
}
.ads-menu__hint {
	font-size: 16px;
	text-align: center;
	max-width: 36ch;
}

/* 9. Footer ------------------------------------------------------------------
   Layout Section "Adsure footer": één zwarte container met drie kolommen:
   lijst (tagline en diensten met dots), logo en adres links, KvK/BTW en
   social links rechts. Op alle schermen dezelfde opbouw (het lint uit het
   ontwerp is vervallen; de regels voor .ads-footer__lint blijven staan voor
   als het terugkomt). */
.fusion-tb-footer,
.fusion-tb-footer .fusion-footer-widget-area {
	background: var(--ads-zwart) !important;
	padding: 0 !important;
	margin: 0 !important;
}
.ads-footer {
	color: var(--ads-creme);
	overflow: hidden;
}
.ads-footer .fusion-builder-row {
	box-sizing: border-box;
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 var(--ads-footer-x) !important;
	align-items: flex-start;
}
.ads-footer .fusion-layout-column {
	margin-bottom: 0 !important;
}
.ads-footer .fusion-column-wrapper {
	padding: 0 !important;
}
.ads-footer .fusion-text {
	font-size: 18px;
	line-height: 1.6;
	margin: 0 !important;
}
.ads-footer .fusion-text p {
	margin: 0 0 0.6em;
}
.ads-footer .fusion-text p:last-child {
	margin-bottom: 0;
}
.ads-footer a:not(.fusion-button) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
.ads-footer a:not(.fusion-button):hover {
	color: var(--ads-roze);
}
/* Lint: kolom over de volle breedte (buiten de rij-padding), tekstrij schuift
   6,2vw omhoog zodat logo en adres naast het uiteinde van het lint komen. */
.ads-footer__lint {
	width: calc(100% + 2 * var(--ads-footer-x)) !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	margin: 0 calc(-1 * var(--ads-footer-x)) -6.2vw !important;
}
.ads-footer__lint .ads-svg--lint-desktop {
	width: 100%;
	height: auto;
	display: block;
}
.ads-footer__adres {
	text-align: left;
}
.ads-footer__adres .ads-svg--logo-adsure {
	display: block;
	width: 168px;
	margin: 0 0 12px;
}
/* Social links (Avada-element Social Links in de KvK-kolom): crème, roze bij hover. */
.ads-footer .fusion-social-links,
.ads-footer .ads-footer__social {
	margin-top: 20px;
}
.ads-footer .fusion-social-networks a {
	color: var(--ads-creme) !important;
	transition: color 0.2s var(--ads-ease), transform 0.2s var(--ads-ease);
}
.ads-footer .fusion-social-networks a:hover,
.ads-footer .fusion-social-networks a:focus-visible {
	color: var(--ads-roze) !important;
	transform: translateY(-2px);
}
/* Gestapelde variant (klein en medium scherm): tagline en diensten met dots. */
.ads-footer__tagline {
	font-family: var(--ads-font-kop);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.25;
	margin: 0 0 20px !important;
}
.ads-dots {
	list-style: none !important;
	margin: 0 0 40px !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}
.ads-dots li {
	position: relative;
	padding-left: 24px;
	margin: 0 !important;
	font-family: var(--ads-font-kop);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 16px;
}
.ads-dots li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--ads-creme);
}
.ads-dots li.ads-dots__item--grijs::before    { background: var(--ads-grijs-donker); }
.ads-dots li.ads-dots__item--lime::before     { background: var(--ads-lime); }
.ads-dots li.ads-dots__item--blauw::before    { background: var(--ads-blauw); }
.ads-dots li.ads-dots__item--lavendel::before { background: var(--ads-lavendel); }
@media (max-width: 767px) {
	.ads-footer__kvk {
		margin-top: 24px !important;
	}
}

/* 10. Secties homepage ------------------------------------------------------- */

/* 10a. Hero -------------------------------------------------------------------
   Container 1 (class ads-hero): beeld met badge via [adsure_hero]; de header
   ligt eroverheen. Container 2 (class ads-hero-tekst): H1, intro, knop. */
.ads-hero {
	padding: 35px 0 0 !important;
}
.ads-hero .fusion-builder-row {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ads-hero .fusion-layout-column,
.ads-hero .fusion-column-wrapper,
.ads-hero .fusion-text {
	padding: 0 !important;
	margin: 0 !important;
}
.ads-hero .fusion-text p {
	margin: 0 !important;
}
.ads-hero-tekst {
	padding: 74px 0 82px !important;
	text-align: center;
}
/* Twee regels zoals in het ontwerp, ook op brede schermen. */
.ads-hero-tekst .fusion-title {
	max-width: 1000px;
	margin-left: auto !important;
	margin-right: auto !important;
}
@media (max-width: 767px) {
	.ads-hero {
		padding-top: 20px !important;
	}
	.ads-hero-tekst {
		padding: 44px 0 56px !important;
	}
}
.ads-hint {
	background: var(--ads-roze);
	color: var(--ads-zwart);
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 15px;
}

/* 10b. Werk: cases-marquee met flip ------------------------------------------
   [adsure_cases] in een Text Block. Drie kolommen die omhoog lopen (adsure.js
   zet de transform; zonder script staan ze stil). Hover pauzeert, schuift de
   kaart in beeld en draait hem om; op touch doet een tik dat. Met de muis
   kun je de kolommen slepen. Achterkant: titel, eventueel subtitel (tweede
   regel) en tekst met alinea's, allemaal uit het menu Cases. */
.ads-werk {
	padding-bottom: 0 !important;
}
.ads-cases {
	--ads-cases-cols: 3;
	--ads-cases-gap: clamp(16px, 6.9vw, 100px);
	--ads-cases-h: 940px;
	--ads-case-radius: 46px;
	display: grid;
	grid-template-columns: repeat(var(--ads-cases-cols), minmax(0, 1fr));
	column-gap: var(--ads-cases-gap);
	height: var(--ads-cases-h);
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	scroll-margin-top: var(--ads-anchor-offset);
}
.ads-cases.is-dragging,
.ads-cases.is-dragging .ads-case {
	cursor: grabbing;
}
.ads-cases img {
	-webkit-user-drag: none;
}
@media (max-width: 1023px) {
	.ads-cases {
		--ads-cases-h: 760px;
		--ads-case-radius: 32px;
	}
}
.ads-cases--mobiel {
	display: none;
}
@media (max-width: 767px) {
	.ads-cases--desktop {
		display: none;
	}
	.ads-cases--mobiel {
		display: grid;
	}
	.ads-cases {
		--ads-cases-gap: 16px;
		--ads-cases-h: 640px;
		--ads-case-radius: 22px;
	}
}
.ads-cases__col {
	height: 100%;
	overflow: hidden;
}
.ads-cases__track {
	display: flex;
	flex-direction: column;
	will-change: transform;
}
.ads-case {
	margin: 0 0 var(--ads-cases-gap);
	perspective: 1400px;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.ads-case__inner {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.7s var(--ads-ease);
	border-radius: var(--ads-case-radius);
}
.ads-case:hover .ads-case__inner,
.ads-case:focus-visible .ads-case__inner,
.ads-case.is-flipped .ads-case__inner {
	transform: rotateY(180deg);
}
@media (hover: none) {
	.ads-case:hover:not(.is-flipped) .ads-case__inner {
		transform: none;
	}
}
/* Tijdens slepen niet omdraaien. */
.ads-cases.is-dragging .ads-case:hover:not(.is-flipped) .ads-case__inner {
	transform: none;
}
.ads-case__front,
.ads-case__back {
	border-radius: var(--ads-case-radius);
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.ads-case__front {
	display: flex;
	flex-direction: column;
	background: var(--ads-grijs);
	color: var(--ads-wit);
}
.ads-case__back {
	--ads-case-fit: 1; /* adsure.js zet dit lager als de tekst niet past */
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	background: var(--ads-case-bg, var(--ads-blauw));
	color: var(--ads-case-fg, var(--ads-creme));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	justify-content: safe center; /* past het toch niet: begin van de tekst in beeld, niet het midden */
	text-align: center;
	padding: 10% 11%;
}
.ads-case__bar {
	flex: 0 0 auto;
	aspect-ratio: 1480 / 315;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 7%;
}
.ads-case__avatar {
	width: 13%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ads-wit);
}
.ads-case__dots {
	display: flex;
	gap: 18%;
	width: 11%;
}
.ads-case__dots i {
	flex: 1 1 0;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ads-wit);
}
.ads-case__beeld {
	aspect-ratio: 37 / 62; /* de aangeleverde beelden zijn 1480 x 2480 (telefoonschermen); in het ontwerp 4:5 */
	overflow: hidden;
	background: var(--ads-grijs); /* zelfde grijs als de balkjes: transparante png's vallen weg in de kaart */
}
.ads-case__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ads-case__bar--bottom {
	justify-content: flex-start;
	gap: 5.5%;
}
.ads-case__bar--bottom svg {
	width: 10%;
	height: auto;
	display: block;
}
.ads-case__save {
	margin-left: auto;
	display: flex;
	width: 10%;
}
.ads-case__save svg {
	width: 100%;
}
.ads-case__titel {
	color: inherit !important;
	font-weight: 700 !important; /* merk in Ambit Bold */
	font-size: calc(clamp(1rem, 2.4vw, 2.1rem) * var(--ads-case-fit, 1)) !important;
	line-height: 1.2 !important;
	margin: 0 0 0.7em !important;
}
/* Subtitel (vak Case): tweede regel onder het merk, Inter Regular in kapitalen,
   ongeveer twee derde van de titel. */
.ads-case__subtitel {
	display: block;
	margin-top: 0.2em;
	font-family: var(--ads-font-body);
	font-weight: 400;
	font-size: 0.66em;
	letter-spacing: 0.05em;
	line-height: 1.3;
}
.ads-case__tekst,
.ads-case__tekst p {
	color: inherit !important;
	font-weight: 300; /* Inter Light */
	font-size: calc(clamp(0.8rem, 1.4vw, 1.25rem) * var(--ads-case-fit, 1));
	line-height: 1.55;
	margin: 0 0 1em;
}
.ads-case__tekst p:last-child {
	margin-bottom: 0;
}
/* Vet in de tekst (bijv. grote cijfers): echt vet, niet "iets dikker dan Light". */
.ads-case__tekst strong,
.ads-case__tekst b {
	font-weight: 700;
}
/* Dunne lijn tussen regels (<hr> in de tekst achterkant): in de tekstkleur, licht. */
.ads-case__tekst hr {
	height: 0;
	background: none;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.4;
	margin: 1em 0;
}

/* 10c. Diensten: vier gekleurde kaarten op zwart -----------------------------
   Kolommen met class "ads-card ads-card--hover ads-tekst-zwart ads-dienst",
   achtergrondkleur per kolom in Avada. Titel (H3) en lijst (.ads-lijst). */
.ads-diensten .ads-intro {
	margin-bottom: var(--ads-knop-kaarten);
}
.ads-dienst > .fusion-column-wrapper {
	padding: 56px 48px !important;
	min-height: 460px;
	box-sizing: border-box;
}
.ads-dienst .fusion-title {
	margin: 0 0 40px !important;
}
.ads-dienst .fusion-title .fusion-title-heading,
.ads-dienst .fusion-title-heading {
	font-weight: 700 !important; /* titel van de dienst in Ambit Bold */
}
.ads-dienst .fusion-text {
	margin: 0 !important;
	font-weight: 300; /* tekst in Inter Light */
}
.ads-dienst .fusion-text p,
.ads-dienst .fusion-text li {
	font-weight: inherit;
}
.ads-dienst .ads-lijst li {
	margin-bottom: 0.85em !important;
}
@media (max-width: 1023px) {
	.ads-dienst > .fusion-column-wrapper {
		padding: 44px 36px !important;
		min-height: 380px;
	}
	/* Twee of een per rij: ruimte tussen de rijen (de kolomafstand van Avada
	   geldt alleen horizontaal); de knop eronder compenseert de laatste marge. */
	.ads-diensten .ads-dienst {
		margin-top: 0 !important; /* Avada geeft kolommen op klein scherm 10 px bovenmarge */
		margin-bottom: var(--ads-gap) !important;
	}
	.ads-diensten .fusion-button,
	.ads-diensten .fusion-button-wrapper {
		margin-top: calc(var(--ads-knop-kaarten) - var(--ads-gap)) !important;
	}
}
@media (max-width: 767px) {
	.ads-dienst > .fusion-column-wrapper {
		padding: 36px 28px !important;
		min-height: 0;
	}
	.ads-dienst .fusion-title {
		margin-bottom: 24px !important;
	}
}

/* 10d. Team: zwarte kaarten met foto, sticker, naam, rol en quote --------------
   Via [adsure_team] (menu Team): eigen grid .ads-team-grid met kaarten
   "ads-card ads-card--hover ads-adem ads-team" > .ads-card__inner. Of handmatig:
   Avada-kolommen met dezelfde classes, zwarte achtergrond, padding 0 en
   [adsure_teamlid] in een Text Block. */
.ads-team-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ads-gap);
}
@media (max-width: 1023px) {
	.ads-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.ads-team-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
.ads-team-grid > .ads-card {
	min-width: 0;
}
.ads-team-grid .ads-card__inner {
	background: var(--ads-zwart);
}
.ads-team > .fusion-column-wrapper,
.ads-team > .ads-card__inner {
	padding: 0 !important;
}
.ads-team .fusion-text {
	margin: 0 !important;
}
.ads-team .fusion-text p {
	margin: 0;
}
.ads-teamlid {
	color: var(--ads-creme);
	text-align: center;
}
.ads-teamlid__foto {
	position: relative;
	margin: 12px 12px 0;
}
.ads-teamlid__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1491 / 1370;
	object-fit: cover;
	border-radius: var(--ads-radius-s);
}
.ads-teamlid__sticker {
	position: absolute;
	left: 8%;
	bottom: -11%;
	width: 24%;
	max-width: 92px;
	min-width: 56px;
	line-height: 0;
}
.ads-teamlid__sticker .ads-svg {
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
.ads-teamlid__tekst {
	padding: 30px 20px 26px;
}
.ads-teamlid__naam {
	color: inherit !important;
	font-weight: 700 !important; /* naam in Ambit Bold */
	font-size: clamp(1.25rem, 1.9vw, 1.7rem) !important;
	line-height: 1.2 !important;
	margin: 0 0 6px !important;
}
.ads-teamlid__rol {
	font-family: var(--ads-font-body);
	font-weight: 500; /* functie in Inter Medium */
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 16px;
	line-height: 1.3;
	margin: 0 0 14px !important;
}
.ads-teamlid__quote {
	font-weight: 300; /* quote in Inter Light */
	font-size: 17px;
	line-height: 1.4;
	margin: 0 !important;
}
@media (max-width: 767px) {
	.ads-teamlid__sticker {
		max-width: 76px;
	}
	.ads-teamlid__tekst {
		padding: 26px 16px 22px;
	}
}

/* 10e. Merken: doorlopende logocarousel ----------------------------------------
   [adsure_merken] in een Text Block: pijl, viewport met de rij kaarten, pijl.
   Drie vierkante witte kaarten met zwarte rand (ontwerp 335 px, radius 36,
   tussenruimte 40); tablet twee, mobiel twee met de pijlen eronder.
   adsure.js laat de rij lopen, pauzeert bij hover en verwerkt pijlen en slepen. */
.ads-merken-sectie .ads-intro {
	margin-bottom: var(--ads-knop-kaarten);
}
.ads-merken {
	--ads-merken-kaarten: 3;
	--ads-merken-gap: 40px;
	--ads-merken-pijl: 56px;
	--ads-merken-radius: 36px;
	display: flex;
	align-items: center;
	gap: 36px;
}
.ads-merken__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}
.ads-merken__viewport.is-dragging {
	cursor: grabbing;
}
.ads-merken__track {
	display: flex;
	gap: var(--ads-merken-gap);
	will-change: transform;
}
.ads-merken__item {
	flex: 0 0 calc((100% - (var(--ads-merken-kaarten) - 1) * var(--ads-merken-gap)) / var(--ads-merken-kaarten));
	min-width: 0;
}
.ads-merken__kaart {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 1;
	padding: 10%;
	background: var(--ads-wit);
	border: 2px solid var(--ads-zwart);
	border-radius: var(--ads-merken-radius);
	color: var(--ads-zwart);
	text-decoration: none;
	transition: transform 0.45s var(--ads-ease), box-shadow 0.45s var(--ads-ease);
}
.ads-merken__kaart img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
	pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
	a.ads-merken__kaart:hover {
		transform: scale(1.02);
		box-shadow: var(--ads-schaduw);
	}
}
.ads-merken__pijl {
	flex: 0 0 var(--ads-merken-pijl);
	width: var(--ads-merken-pijl);
	height: var(--ads-merken-pijl);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ads-roze);
	color: var(--ads-zwart);
	cursor: pointer;
	transition: background-color 0.3s var(--ads-ease), color 0.3s var(--ads-ease), transform 0.3s var(--ads-ease);
}
.ads-merken__pijl .ads-svg {
	width: 42%;
	height: auto;
}
.ads-merken__pijl:hover,
.ads-merken__pijl:focus-visible {
	background: var(--ads-zwart);
	color: var(--ads-creme);
}
.ads-merken__pijl:active {
	transform: scale(0.94);
}
.ads-merken__pijl:focus-visible {
	outline: 3px solid var(--ads-blauw);
	outline-offset: 3px;
}
@media (max-width: 1023px) {
	.ads-merken {
		--ads-merken-kaarten: 2;
		--ads-merken-gap: 24px;
		gap: 24px;
	}
}
@media (max-width: 767px) {
	.ads-merken {
		--ads-merken-gap: 16px;
		--ads-merken-radius: 24px;
		--ads-merken-pijl: 48px;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px 16px;
	}
	.ads-merken__viewport {
		flex: 0 0 100%;
		order: 1;
	}
	.ads-merken__pijl {
		order: 2;
	}
}

/* 10f. Reviews: gesplitste sectie, links statisch, rechts de slider -------------
   Container met class "ads-reviews-sectie" (100 % breed, padding 0), kolom 1
   "ads-reviews__links ads-light" (wit, 50 %) met kop, intro en knop, kolom 2
   "ads-reviews__rechts ads-dark" (zwart, 50 %) met [adsure_reviews]. De badge
   staat op de scheidslijn op 72 % van de hoogte. Onder 1024 px staan de blokken
   onder elkaar en zit de badge op de naad. */
.ads-reviews-sectie {
	--ads-badge: clamp(150px, 16.4vw, 240px);
	position: relative;
}
.ads-reviews-sectie .fusion-builder-row {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ads-reviews-sectie .fusion-layout-column {
	margin: 0 !important;
}
.ads-reviews-sectie .fusion-layout-column.ads-reviews__links {
	--awb-width-large: 50% !important;
	width: 50% !important;
}
.ads-reviews-sectie .fusion-layout-column.ads-reviews__rechts {
	--awb-width-large: 50% !important;
	width: 50% !important;
	position: relative;
}
.ads-reviews-sectie .fusion-column-wrapper {
	box-sizing: border-box;
}
.ads-reviews__links > .fusion-column-wrapper {
	padding: var(--ads-sectie) 10% var(--ads-sectie) 21% !important;
}
.ads-reviews__links .fusion-title {
	max-width: 10em;
}
.ads-reviews__links .ads-intro {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
	max-width: 17em;
}
.ads-reviews__rechts > .fusion-column-wrapper {
	padding: var(--ads-sectie) 10% !important;
}
.ads-reviews__rechts .fusion-text {
	margin: 0 !important;
	width: 100%;
}
.ads-reviews {
	position: static;
	text-align: center;
	color: var(--ads-creme);
}
.ads-reviews__slides {
	display: grid;
	touch-action: pan-y;
}
.ads-review {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateX(48px);
	transition: opacity 0.6s var(--ads-ease), transform 0.6s var(--ads-ease), visibility 0s linear 0.6s;
}
.ads-reviews--terug .ads-review {
	transform: translateX(-48px);
}
.ads-review.is-leaving {
	transform: translateX(-48px);
}
.ads-reviews--terug .ads-review.is-leaving {
	transform: translateX(48px);
}
.ads-review.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
	position: relative;
	z-index: 1;
}
.ads-review__sterren {
	display: flex;
	gap: 5px;
	color: var(--ads-roze);
	margin: 0 0 clamp(24px, 2.8vw, 40px);
}
.ads-review__sterren .ads-svg {
	width: clamp(22px, 2.3vw, 33px);
	height: auto;
}
/* Avada zet op elke blockquote (.fusion-body blockquote) een eigen kleur, font,
   maat, achtergrond en rand; daarom hier alles expliciet en met !important. */
.fusion-body .ads-review__quote,
.ads-review__quote {
	margin: 0 0 clamp(28px, 3.3vw, 48px) !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	max-width: 18em; /* ca. 45-50 tekens per regel; lange reviews worden anders een smalle toren */
	color: inherit !important;
	font-family: var(--ads-font-quote) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	font-size: clamp(1.125rem, 2vw, 1.5rem) !important; 
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
}
.fusion-body .ads-review__quote p,
.ads-review__quote p {
	color: inherit !important;
	font: inherit !important;
	letter-spacing: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ads-review__quote::before,
.ads-review__quote::after {
	content: none !important;
}
.ads-review__bron {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}
.ads-review__auteur {
	font-family: var(--ads-font-quote);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.125rem, 1.9vw, 1.625rem); /* 18 - 26 px, mee omlaag met de quote */
	line-height: 1.25;
}
.ads-review__logo {
	display: block;
	width: 220px;
	max-width: 100%;
	height: 96px; /* vak waarin het logo past (object-fit): breed logo max 220 px breed, vierkant logo 96 px hoog */
}
.ads-review__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.ads-reviews__dots {
	display: flex;
	justify-content: center;
	gap: 2px;
	margin-top: clamp(28px, 3.3vw, 48px);
}
.ads-reviews__dot {
	width: 26px;
	height: 26px;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background: var(--ads-roze);
	background-clip: content-box;
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.3s var(--ads-ease), transform 0.3s var(--ads-ease);
}
.ads-reviews__dot:hover {
	opacity: 0.75;
}
.ads-reviews__dot.is-active {
	opacity: 1;
}
.ads-reviews__dot:focus-visible {
	outline: 3px solid var(--ads-blauw);
	outline-offset: 0;
}
.ads-reviews__badge {
	position: absolute;
	left: 0;
	top: 72%;
	width: var(--ads-badge);
	transform: translate(-50%, -50%);
	z-index: 5;
	pointer-events: none;
	line-height: 0;
}
.ads-reviews__badge .ads-svg {
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.18));
}
@media (max-width: 1023px) {
	.ads-reviews-sectie {
		--ads-badge: 150px;
	}
	.ads-reviews-sectie .fusion-layout-column.ads-reviews__links,
	.ads-reviews-sectie .fusion-layout-column.ads-reviews__rechts {
		--awb-width-large: 100% !important;
		--awb-width-medium: 100% !important;
		--awb-width-small: 100% !important;
		width: 100% !important;
	}
	.ads-reviews__links > .fusion-column-wrapper {
		padding: var(--ads-sectie) var(--ads-rand) calc(var(--ads-sectie) + var(--ads-badge) / 2) !important;
	}
	.ads-reviews__links .ads-intro {
		max-width: 26em;
	}
	.ads-reviews__rechts > .fusion-column-wrapper {
		padding: calc(var(--ads-sectie) + var(--ads-badge) / 2) var(--ads-rand) var(--ads-sectie) !important;
	}
	.ads-reviews__badge {
		left: 50%;
		top: 0;
	}
	/* Gestapeld: kop, intro en knop gecentreerd, net als de slider eronder.
	   De knop zit in een div met text-align:left als inline stijl van Avada,
	   vandaar !important; kop en intro hebben een max-breedte en komen met
	   auto-marges in het midden. */
	.ads-reviews__links > .fusion-column-wrapper > div {
		text-align: center !important;
	}
	.ads-reviews__links .fusion-title-heading {
		text-align: center !important;
	}
	.ads-reviews__links .fusion-title,
	.ads-reviews__links .ads-intro {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ads-review,
	.ads-review.is-leaving,
	.ads-reviews--terug .ads-review,
	.ads-reviews--terug .ads-review.is-leaving {
		transform: none;
	}
}

/* 10g. Contact: crème blok met kop, intro en knop ------------------------------
   Container "ads-section ads-light ads-contact", id contact. Geen formulier:
   de knop is een mailto. Alles komt uit de standaardritmes (kop, intro, knop). */
.ads-contact .fusion-title {
	max-width: 14em;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 11. Avada Live, voorbeeldframe ----------------------------------------------
   functions.php geeft body de class ads-builder-preview in het voorbeeldframe
   van Avada Live en laadt daar adsure.js niet (de builder tekent elementen
   opnieuw, het script zou erdoorheen lopen). Daarom hier: header scrolt mee in
   plaats van vast (anders hangt hij over de bewerkbalkjes van de elementen) en
   de cases-marquee staat stil omdat het script er niet is. */
.ads-builder-preview .ads-header {
	position: absolute !important;
}