/* SpijkerenPrins - basisstijlen
   Kleuren, typografie en maatvoering gemeten op spijkerenprins.nl. */

:root {
	/* Vloeiende kopmaten (november 2026): desktopmaat vanaf 1440px, minimummaat op 360px, daartussen lineair. */
	--sep-fs-85: min(clamp(2.25rem, 1.229rem + 4.537vw, 5.313rem), 10vw);
	--sep-fs-45: clamp(1.75rem, 1.396rem + 1.574vw, 2.813rem);
	--sep-fs-40: clamp(1.688rem, 1.417rem + 1.204vw, 2.5rem);
	--sep-fs-35: clamp(1.5rem, 1.271rem + 1.019vw, 2.188rem);
	--sep-fs-34: clamp(1.5rem, 1.292rem + 0.926vw, 2.125rem);
	--sep-fs-32: clamp(1.438rem, 1.25rem + 0.833vw, 2rem);
	--sep-fs-30: clamp(1.375rem, 1.208rem + 0.741vw, 1.875rem);
	--sep-fs-28: clamp(1.313rem, 1.167rem + 0.648vw, 1.75rem);
	--sep-fs-27: clamp(1.313rem, 1.188rem + 0.556vw, 1.688rem);
	--sep-fs-24: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);
	--sep-fs-22: clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem);

	--sep-green-dark: #344725;
	--sep-green: #3f5a2c;
	--sep-logo-bg: #344725;
	--sep-circle: rgba(52, 71, 37, 0.53);
	--sep-sand: #f1d2a9;
	--sep-sand-dark: #e5bf8e;
	--sep-text: #2f2f2f;
	--sep-white: #ffffff;
	--sep-bg-soft: #f5f6f3;
	--sep-bg-warm: #fcfaf7;
	--sep-border: #e2e4e0;

	--sep-font-heading: "Montserrat", system-ui, sans-serif;
	--sep-font-body: "Source Sans Pro", system-ui, sans-serif;

	--sep-radius: 10px;
	--sep-radius-lg: 16px;
	--sep-container: 1200px;
	--sep-container-wide: 1620px;
	--sep-gap: clamp(3rem, 2.2rem + 3vw, 6rem);
	--sep-header-h: 94px;
	--sep-topbar-h: 80px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--sep-font-body);
	color: var(--sep-text);
	background: var(--sep-white);
	line-height: 1.65;
	font-size: 17px;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sep-font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--sep-green-dark);
	margin: 0 0 20px; /* sitebrede regel: 20px tussen kop en lopende tekst, H1 25px (zie hieronder) */
}

/* 85px op 1512px breed, net als op de bron */
h1 { margin-bottom: 25px; font-size: min(clamp(2.25rem, 1.186rem + 4.367vw, 5.3125rem), 10vw); } /* min(…, 10vw): onder 360px schaalt de kop verder omlaag, 32px op 320px */
h2 { font-size: clamp(1.75rem, 1.381rem + 1.515vw, 2.8125rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem); }

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }

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

.sep-container {
	width: 100%;
	max-width: var(--sep-container);
	margin-inline: auto;
	padding-inline: 15px;
}

/* Header en topbar lopen breder door dan de contentbreedte, net als op de bron. */
.sep-container--wide {
	max-width: var(--sep-container-wide);
	padding-inline: 40px;
}
@media (max-width: 700px) {
	.sep-container--wide { padding-inline: 15px; }
}

/* Eyebrow: 24px, gewicht 600. Alleen in de hero met streepje ervoor. */
.sep-eyebrow {
	position: relative;
	display: block;
	font-family: var(--sep-font-heading);
	font-weight: 600;
	font-size: clamp(1.125rem, 0.994rem + 0.535vw, 1.5rem);
	line-height: 1.25;
	color: var(--sep-text);
	margin-bottom: 0.8em;
}
.sep-eyebrow--light { color: var(--sep-white); }
.sep-eyebrow--green { color: var(--sep-green-dark); }
.sep-eyebrow--icon {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: clamp(1.0625rem, 0.944rem + 0.47vw, 1.375rem); /* 22px op desktop, 2px kleiner dan de gewone eyebrow; het icoon schaalt mee via em */
}
.sep-eyebrow--icon i { font-size: 1.8em; line-height: 1; }
.sep-eyebrow--line { padding-inline-start: clamp(58px, 3.5vw + 26px, 85px); }
.sep-eyebrow--line::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6em;
	width: clamp(38px, 2.3vw + 17px, 55px);
	height: 3px;
	background: currentColor;
}

/* Knoppen: 16px/600, radius 10px, padding 12px 41px (bron) */
.sep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 12px 41px;
	border-radius: var(--sep-radius);
	font-family: var(--sep-font-heading);
	font-weight: 600;
	font-size: 1rem;
	line-height: 25px;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
@media (max-width: 480px) { .sep-btn { padding: 12px 26px; } }

.sep-btn--sand { background: var(--sep-sand); border-color: var(--sep-sand); color: #0b3d2c; }
.sep-btn--sand:hover { background: var(--sep-sand-dark); border-color: var(--sep-sand-dark); }
.sep-btn--outline { border-color: var(--sep-white); color: var(--sep-white); }
.sep-btn--outline:hover { background: var(--sep-white); color: var(--sep-green-dark); }
.sep-btn--primary { background: var(--sep-green-dark); color: var(--sep-white); }
.sep-btn--primary:hover { background: var(--sep-green); }
.sep-btn--ghost { border-color: var(--sep-green-dark); color: var(--sep-green-dark); }
.sep-btn--ghost:hover { background: var(--sep-green-dark); color: var(--sep-white); }


/* Hoveranimatie op knoppen: label zakt weg, letters komen van boven in beeld (bron) */
.sep-btn { position: relative; overflow: hidden; }
.sep-btn__text {
	display: flex;
	position: relative;
	justify-content: center;
}
.sep-btn__text::before {
	content: attr(data-text);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	white-space: pre;
	transition: transform 0.2s cubic-bezier(0.75, 0, 0.125, 1), opacity 0.2s;
}
.sep-btn__letters { display: flex; position: relative; }
.sep-btn__letters > span {
	display: inline-block;
	transform: translate3d(0, -14px, 0);
	opacity: 0;
	transition: transform 0.2s cubic-bezier(0.75, 0, 0.125, 1), opacity 0.2s;
	transition-delay: calc(var(--sep-i, 0) * 0.05s);
}
.sep-btn:hover .sep-btn__text::before,
.sep-btn:focus-visible .sep-btn__text::before {
	transform: translate3d(0, 100%, 0);
	opacity: 0;
}
.sep-btn:hover .sep-btn__letters > span,
.sep-btn:focus-visible .sep-btn__letters > span {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

/* Topbar */
.sep-topbar { background: var(--sep-white); position: relative; z-index: 30; }
/* Opgemeten op de bron (1512px): balk 80px, items 45px hoog op 21px van boven, rechts 60px vrij, 80 en 55px tussen de items. */
.sep-topbar__inner {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0;
	min-height: var(--sep-topbar-h);
	padding: 21px 60px 14px 40px;
	flex-wrap: wrap;
}
.sep-topbar__item { display: inline-flex; align-items: flex-start; gap: 15px; }
.sep-topbar__item + .sep-topbar__item { margin-left: 80px; }
.sep-topbar__item + .sep-topbar__item--offerte { margin-left: 55px; }
.sep-topbar__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px; height: 45px;
	border-radius: 50%;
	background: #3e552b;
	color: #f2f2f2;
	flex: none;
}
.sep-topbar__item--offerte .sep-topbar__icon { background: #f2d2a9; color: #0b3d2c; }
.sep-topbar__glyph { font-size: 16px; line-height: 1; font-style: normal; }
.sep-topbar__glyph--fa { font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.sep-topbar__glyph--icomoon { font-family: 'Icomoon'; font-weight: 400; }
.sep-topbar__text { display: flex; flex-direction: column; }
.sep-topbar__label { font-family: var(--sep-font-heading); font-size: 14px; line-height: 20px; font-weight: 400; color: #000; }
.sep-topbar__value { margin-top: 5px; font-family: var(--sep-font-body); font-size: 20px; line-height: 20px; font-weight: 500; color: #0b3d2c; }
.sep-topbar__item--offerte .sep-topbar__value { font-weight: 600; }

/* Header: transparant over de hero, groen bij scrollen */
.sep-header {
	position: sticky;
	top: 0;
	z-index: 50;
	margin-bottom: calc(var(--sep-header-h) * -1);
	transition: background-color 0.3s ease;
}
.sep-header__inner { display: flex; align-items: center; gap: 40px; min-height: var(--sep-header-h); position: relative; } /* 40px tussen menu en knop op verzoek van Tonny (bron 20px) */
.sep-header .sep-container--wide { padding-right: 38px; }
.sep-header__logo {
	position: absolute;
	inset-inline-start: 40px;
	top: calc(var(--sep-topbar-h) * -1); /* tegen de bovenrand, op verzoek (bron: 27px lager) */
	z-index: 60;
	background: var(--sep-logo-bg);
	width: 212px;
	display: block;
	transition: top 0.3s ease, width 0.3s ease;
}
.sep-header__logo-img { width: 100%; height: auto; }
.sep-header__logo-img--liggend { display: none; }
.sep-nav { margin-inline-start: auto; }
/* Bron: ul rechts uitgelijnd, li inline-block met -5px marge, a 18/32.4 met padding 30px 0 30px 30px (6px rechts zonder submenu), capitalize. */
.sep-nav__list {
	display: block;
	text-align: right;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--sep-font-body); /* de witruimte tussen de li's is op de bron een Source Sans-spatie van 16px */
	font-weight: 600;
	font-size: 16px;
	color: #f2f2f2;
}
.sep-header .sep-nav__list, .sep-sticky .sep-nav__list { position: relative; top: 1px; } /* bron: menu op 81px, balk vanaf 80px */
.sep-nav__list > li { display: inline-block; vertical-align: middle; margin: 0 -5px; line-height: 30px; }
.sep-nav__list > li > a { display: inline-block; padding: 30px 0 30px 30px; font-family: var(--sep-font-heading); font-size: 18px; line-height: 32.4px; text-transform: capitalize; }
.sep-nav__list > li:not(.menu-item-has-children) > a { padding-right: 6px; }
.sep-nav__list a { color: #f2f2f2; }
.sep-nav__list a:hover { color: var(--sep-sand); }
.sep-nav__list li { position: relative; }
/* Dropdown zoals op de bron: wit paneel met groene rand, pijltje bovenaan, 0.2s in-fade. Geen underline bij hover (afspraak). */
.sep-nav__list > .menu-item-has-children > a::after { content: "\f102"; font-family: Bravisicon; font-size: 10px; padding-inline-start: 5px; font-weight: 400; }
.sep-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	text-align: left; /* de hoofdlijst staat rechts uitgelijnd, de sublinks horen links */
	left: 6px; /* bron: left -20px plus margin-left 26.4px, zodat de sublinks onder de menutekst beginnen */
	z-index: 20;
	min-width: 220px;
	margin: 0;
	padding: 20px 0;
	list-style: none;
	background: var(--sep-white);
	border: 1px solid #2a7d2e;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(104, 104, 104, 0.2);
	font-family: var(--sep-font-heading);
	font-size: 14px;
	font-weight: 700;
	opacity: 0;
	visibility: hidden;
	transition: 0.2s linear;
}
.sep-nav__list .sub-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 20%;
	width: 15px;
	height: 15px;
	background: var(--sep-white);
	border-top: 1px solid #2a7d2e;
	border-left: 1px solid #2a7d2e;
	transform: rotate(45deg);
}
.sep-nav__list li:hover > .sub-menu,
.sep-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.sep-nav__list .sub-menu li a { display: block; padding: 5px 20px; line-height: 1.8; color: #0b3d2c; white-space: nowrap; }
/* bron: bij hover rolt een blad binnen en schuift de link naar rechts */
.sep-nav__list .sub-menu li a { position: relative; transition: padding 0.3s ease-out; }
.sep-nav__list .sub-menu li a::before { content: "\edc5"; font-family: Icomoon; position: absolute; left: 15px; bottom: -15px; width: 15px; height: 15px; color: #2a7d2e; opacity: 0; transition: bottom 0.3s ease-out; }
.sep-nav__list .sub-menu li a:hover { color: #2a7d2e; padding-left: 40px; }
.sep-nav__list .sub-menu li a:hover::before { bottom: 12px; opacity: 1; }
/* bron: de pagina waar je op staat krijgt hetzelfde blad en dezelfde inspringing */
.sep-nav__list .sub-menu li.current-menu-item > a { color: #2a7d2e; padding-left: 40px; }
.sep-nav__list .sub-menu li.current-menu-item > a::before { bottom: 12px; opacity: 1; }
.sep-header__cta { flex: none; width: 250px; padding: 13px 0; border: 0; }
.sep-header.is-stuck { background: var(--sep-green-dark); }
.sep-header.is-stuck .sep-header__logo { top: 0; width: 130px; }

.sep-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 10px;
	margin-inline-start: auto;
}
.sep-nav__toggle span { width: 26px; height: 2px; background: #f2f2f2; }

/* Onderdelen die alleen in het mobiele paneel meedoen. */
.sep-nav__panel-logo,
.sep-nav__panel-extra,
.sep-nav__sub-toggle { display: none; }

/* ---------------------------------------------------------------------------
   Mobiele header (bron: ct-header-mobile), vanaf 1199px en lager, zoals de bron.
   Balk van 80px met het liggende logo links en de hamburger rechts, allebei op 15px;
   topbar en vaste balk vervallen. Het menu schuift als paneel van 260px van links in.
   Kleur op verzoek van Tonny het huisstijlgroen (de bron gebruikt hier #3e552b).
   --------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.sep-topbar { display: none; }

	.sep-header { position: static; background: var(--sep-green-dark); margin-bottom: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }
	.sep-header__inner { max-width: none; min-height: 80px; padding: 0 15px; gap: 0; justify-content: space-between; }
	.sep-header .sep-container--wide { padding-right: 15px; }
	.sep-header__logo { position: static; top: auto; width: auto; background: none; }
	.sep-header__logo-img { width: auto; height: 45px; }
	.sep-header__logo-img--staand { display: none; }
	.sep-header__logo-img--liggend { display: block; }
	.sep-header__cta { display: none; }
	.sep-header.is-stuck .sep-header__logo { top: auto; width: auto; }
	.sep-hero { padding-top: 0; }

	/* Hamburger: 40x36 met rand van 1px, drie streepjes van 24x2 op 9, 16 en 23px (bron), 300ms linear naar een kruis. */
	.sep-nav__toggle { display: block; position: relative; flex: none; width: 40px; height: 36px; margin: 0; padding: 0; background: none; border: 1px solid #f2f2f2; border-radius: 3px; cursor: pointer; }
	.sep-nav__toggle > span { position: absolute; left: 0; right: 0; margin: auto; width: 24px; height: 2px; background: var(--sep-white); transition: all 300ms linear; }
	.sep-nav__toggle > span:nth-child(1) { top: 9px; }
	.sep-nav__toggle > span:nth-child(2) { top: 16px; }
	.sep-nav__toggle > span:nth-child(3) { top: 23px; }
	.sep-nav__toggle[aria-expanded="true"] > span:nth-child(1) { top: 15px; transform: rotate(45deg); }
	.sep-nav__toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
	.sep-nav__toggle[aria-expanded="true"] > span:nth-child(3) { top: 15px; transform: rotate(-45deg); }

	/* Uitschuifpaneel: 260px breed, van links, 200ms linear, schaduw 0 0 12px (bron). */
	.sep-nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 999; display: block; width: 300px; padding: 32px 16px 45px; overflow-y: auto; background: var(--sep-green-dark); border-radius: 0; box-shadow: 0 0 12px rgba(0, 0, 0, 0.22); transform: translateX(-100%); visibility: hidden; transition: transform 200ms linear, visibility 0s linear 200ms; }
	.sep-nav.is-open { transform: translateX(0); visibility: visible; transition: transform 200ms linear; }

	.sep-nav__panel-logo { display: block; margin-bottom: 28px; text-align: center; }
	.sep-nav__panel-logo img { display: block; width: auto; height: 65px; margin: 0 auto; }

	.sep-header .sep-nav__list { top: 0; } /* de 1px van de desktopbalk hoort hier niet */
	.sep-nav__list { display: block; text-align: left; padding: 0; }
	.sep-nav__list > li { display: block; position: relative; margin: 0; padding: 0; line-height: normal; border: 0; }
	.sep-nav__list > li > a,
	.sep-nav__list > li:not(.menu-item-has-children) > a { display: block; padding: 0; font-family: var(--sep-font-body); font-size: 25px; line-height: 50px; font-weight: 700; text-transform: none; color: #f2f2f2; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
	.sep-nav__list > .menu-item-has-children > a::after { content: none; } /* chevron van de desktopheader, hier de knop hieronder */

	/* Uitklapknop per submenu: 30x30 met rand, chevron van het thema (Bravisicon f102). */
	.sep-nav__sub-toggle { display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 0; width: 30px; height: 30px; padding: 0; background: none; border: 1px solid #ebebeb; border-radius: 3px; color: #f2f2f2; font-size: 10px; cursor: pointer; }
	.sep-nav__sub-toggle::before { content: "\f102"; font-family: "Bravisicon"; transition: transform 300ms linear; }
	.sep-nav__sub-toggle[aria-expanded="true"]::before { transform: rotate(180deg); }

	.sep-nav__list .sub-menu { position: static; display: none; width: auto; min-width: 0; padding: 9px 0; background: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; font-size: 1rem; }
	.sep-nav__list .sub-menu.is-open { display: block; }
	.sep-nav__list .sub-menu::before { display: none; }
	.sep-nav__list .sub-menu li a { padding: 0 0 0 10px; font-family: var(--sep-font-body); font-size: 17px; line-height: 34px; font-weight: 700; color: #f2f2f2; white-space: normal; }
	.sep-nav__list .sub-menu li a::before { content: none; } /* het blad hoort bij de dropdown op desktop */
	.sep-nav__list .sub-menu li a:hover,
	.sep-nav__list .sub-menu li.current-menu-item > a { padding-left: 10px; color: var(--sep-sand); }

	/* Knop en contactgegevens onder in het paneel, omdat de topbar op mobiel vervalt. */
	.sep-nav__panel-extra { display: block; margin-top: 30px; }
	.sep-nav__panel-cta { display: flex; width: 100%; padding: 12px 20px; }
	.sep-nav__panel-item { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: #f2f2f2; font-family: var(--sep-font-body); font-size: 17px; line-height: 28px; }
	.sep-nav__panel-item .sep-glyph { font-size: 16px; color: var(--sep-sand); }

	/* Zakelijk is grijs in plaats van groen, ook op mobiel. */
	.sep-zakelijk .sep-header,
	.sep-zakelijk .sep-nav { background: #4a4a4a; }
}

/* Hero */
.sep-hero {
	position: relative;
	background: var(--sep-green-dark);
	color: var(--sep-white);
	min-height: 646px;
	display: flex;
	align-items: center;
	padding-top: var(--sep-header-h);
	overflow: hidden;
}
.sep-hero__slides { position: absolute; inset: 0; }
/* Bron: Elementor slideshow met Ken Burns "in": 3s per slide, fade 0.5s, actieve slide zoomt lineair van 1 naar 1.3 in 20s, inactieve slide zoomt in 10s terug */
.sep-hero__slides { overflow: hidden; }
.sep-hero__slide {
	position: absolute;
	inset: 0;
	background: center/cover no-repeat;
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.5s ease, transform 10s linear;
}
.sep-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sep-hero__slide.is-active { opacity: 1; transform: scale(1.3); transition: opacity 0.5s ease, transform 20s linear; }

/* Zwarte overlay op 50%, net als op de bron. De groene cirkel ligt daar bovenop. */
.sep-hero__overlay {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0.5;
	pointer-events: none;
}

/* Cirkel: 835px met radius 50%, linkerrand 170px voor de contentlijn (bron) */
.sep-hero__shape {
	position: absolute;
	top: calc(20% - 30px);
	inset-inline-start: calc((100% - min(100% - 30px, var(--sep-container))) / 2 - 170px);
	width: 835px;
	height: 835px;
	border-radius: 50%;
	background: var(--sep-circle);
	pointer-events: none;
}
/* Onder 768px toont de bron de cirkel niet. */
@media (max-width: 767px) {
	.sep-hero__shape { display: none; }
	.sep-hero { min-height: 520px; }
}

.sep-hero__inner { position: relative; z-index: 2; padding-block: var(--sep-gap); }
.sep-hero__title { color: var(--sep-white); max-width: 16ch; margin-bottom: 0.7em; }
.sep-hero__actions { display: flex; flex-wrap: wrap; gap: 20px; }

/* Diensten */
.sep-services { background: var(--sep-bg-warm); }
.sep-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.sep-services .sep-container { max-width: 1422px; } /* bron (1920px): drie kaarten van 444px met 30px tussenruimte, 1392px breed */
.sep-services .sep-services__grid { gap: 30px; }
.sep-zakelijk .sep-services .sep-container { max-width: var(--sep-container); } /* zakelijk ongewijzigd */
.sep-service { position: relative; padding-bottom: 24%; }
.sep-service__media img {
	width: 100%;
	aspect-ratio: 515 / 382;
	object-fit: cover;
	border-radius: var(--sep-radius);
}
.sep-service__panel {
	position: absolute;
	inset-inline: 8.7% 4.3%;
	bottom: 0;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	background: var(--sep-white);
	border-radius: var(--sep-radius);
	box-shadow: 0 18px 40px rgba(52, 71, 37, 0.14);
	padding: 35px;
	transition: transform 0.3s;
}
/* Bron: de uitgeklapte kaart staat 80px lager dan de ingeklapte, dus de kaart groeit naar boven en naar beneden */
.sep-service:hover .sep-service__panel,
.sep-service:focus-within .sep-service__panel { transform: translateY(80px); }
/* Bron: de uitgeklapte kaart heeft geen pijlcirkel */
.sep-service__arrow { transition: opacity 0.3s; }
.sep-service:hover .sep-service__arrow,
.sep-service:focus-within .sep-service__arrow { opacity: 0; }
.sep-service__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 80px;
}
.sep-service__icon { display: block; font-size: 50px; line-height: 1; color: var(--sep-green-dark); }
.sep-service__arrow {
	display: grid;
	place-items: center;
	width: 50px; height: 50px;
	border-radius: 50%;
	border: 1px solid rgba(52, 71, 37, 0.1);
	background: var(--sep-white);
	color: var(--sep-green-dark);
	flex: none;
	margin-top: 15px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sep-service__arrow:hover {
	background: var(--sep-green-dark);
	border-color: var(--sep-green-dark);
	color: var(--sep-white);
}
.sep-service__arrow i {
	font-size: 30px;
	line-height: 1;
	display: block;
	transform: translate(-7px, 15px) rotate(-45deg); /* bron: in rust 7px links en 15px onder het midden */
	transition: 0.3s;
}
.sep-service:hover .sep-service__arrow i,
.sep-service:focus-within .sep-service__arrow i { transform: translate(0, 0) rotate(-45deg); }
.sep-service__title { margin: 20px 0 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* zakelijke homepage: Aanplantwerkzaamheden liep uit de kaart (klantcheck 36), zelfde oplossing als .sep-dienst-card__title */
.sep-service__top { order: -1; } /* titel staat in de HTML voor de icoonregel (eerste link), visueel eronder */
/* Titel-link maakt het hele paneel klikbaar (de foto is al een link); pijl en "lees meer" blijven eigen links. */
.sep-service__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--sep-radius); }
.sep-service__arrow, .sep-service__link { position: relative; z-index: 2; }

/* Bron: tussenkop in het tuindesignblok is daar een vette alinea (Source Sans Pro 16px/20.8px, #2f2f2f, 20px eronder) */
.sep-design__subheading { margin: 0 0 20px; font-family: var(--sep-font-body); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--sep-text); }

/* Kenmerken verschijnen bij hover, net als op de bron */
.sep-service__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.35s ease, opacity 0.25s ease;
}
.sep-service__reveal > * { overflow: hidden; }
.sep-service:hover .sep-service__reveal,
.sep-service:focus-within .sep-service__reveal { grid-template-rows: 1fr; opacity: 1; }

.sep-service__tags {
	list-style: none;
	margin: 0;
	padding: 0.9em 0 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.375rem);
	line-height: 1.25;
}
.sep-service__tags li { display: flex; align-items: flex-start; gap: 0.55em; }
.sep-check { flex: none; margin-top: 0.18em; fill: var(--sep-green-dark); }
.sep-service__link {
	display: inline-block;
	margin-top: 1em;
	font-family: var(--sep-font-heading);
	font-weight: 600;
	font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.375rem);
	color: var(--sep-green-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 980px) {
	.sep-services__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.sep-service__panel { inset-inline: 6% 6%; }
}

/* Tekst met beelden en teller */
.sep-design__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2.5rem, 0.5rem + 6vw, 7rem);
	row-gap: 2.5rem;
	align-items: start; /* bron: beelden en tekst lijnen aan de bovenkant uit */
}
/* Verhoudingen gemeten op de bron: beeldvlak 585 bij 565 op 1512px breed */
.sep-design__media {
	position: relative;
	aspect-ratio: 585 / 565;
	width: 102.6%;
	margin-inline-start: -9.6%;
}
.sep-design__img { margin: 0; position: absolute; }
.sep-design__img img { border-radius: var(--sep-radius-lg); width: 100%; height: 100%; object-fit: cover; }
.sep-design__img--small { left: 9.4%; top: 0; width: 34.2%; height: 38.9%; }
.sep-design__img--logo { left: 0; top: 44.2%; width: 28.2%; aspect-ratio: 165 / 285; }
.sep-design__img--logo img { height: 100%; border-radius: 0; object-fit: contain; }
.sep-design__img--large { left: 31.6%; top: 26.5%; width: 68.4%; height: 73.5%; }
.sep-design__img--large img { max-height: none; }
/* Teller rechts van het kleine beeld, maten van de bron: 65px cijfer, 24px plus en label */
.sep-design__counter {
	position: absolute;
	left: 51.5%;
	top: 7.5%;
	display: flex;
	align-items: baseline;
	gap: 0.1em;
	white-space: nowrap;
	font-family: var(--sep-font-heading);
	color: var(--sep-green-dark);
}
.sep-counter {
	font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4.0625rem);
	font-weight: 600;
	line-height: 1;
}
.sep-counter__plus,
.sep-design__counter-label {
	font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem);
	font-weight: 600;
	line-height: 1.2;
}
.sep-design__counter-label { margin-inline-start: 0.9em; }
@media (max-width: 980px) {
	.sep-design__inner { grid-template-columns: minmax(0, 1fr); }
	.sep-design__media { order: 2; width: 100%; max-width: 585px; margin-inline: auto; }
}
@media (max-width: 600px) {
	.sep-design__counter { position: static; margin-bottom: 1rem; }
	.sep-design__media { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
	.sep-design__img { position: static; }
	.sep-design__img--small, .sep-design__img--logo, .sep-design__img--large { width: 100%; height: auto; }
	.sep-design__img--large { grid-column: 1 / -1; }
	.sep-design__img--logo { display: none; }
}

/* Troeven, in de rechterkolom van het designblok (bron: kop 16px bold, items 16px, rond icoon van 30px) */
.sep-usps__heading {
	font-weight: 700;
	font-size: 1rem;
	color: var(--sep-text);
	margin: 2em 0 1.2em;
}
.sep-usps__list {
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.sep-usps__list li { display: flex; align-items: center; gap: 15px; }
/* Tekstwaarden uit de bron: 20px, gewicht 500, lijnhoogte 1em, 5px marge boven */
.sep-usps__list li > span:last-child {
	margin-top: 5px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1em;
}
.sep-usps__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--sep-green-dark);
	color: #f2f2f2;
}

/* Visie met tabbladen */
.sep-vision {
	position: relative;
	background: var(--sep-green-dark);
	color: var(--sep-white);
	padding-block: 50px 85px;
	overflow: hidden;
}
.sep-vision__leaf {
	position: absolute;
	width: 273px;
	opacity: 0.35;
	pointer-events: none;
	transition: opacity 0.75s ease, transform 0.75s ease; /* bron: fadeInRight/fadeInLeft, animated-fast 0.75s, vertraging 200ms */
	transition-delay: 0.2s;
}
.sep-vision { overflow: hidden; }
.sep-vision__stage { position: relative; }
.sep-vision__stage .sep-vision__card { position: relative; z-index: 1; } /* kaart boven de takjes, zodat ze erachter vandaan schuiven */
.sep-vision__leaf--left { right: calc(100% - 8px); bottom: 24px; z-index: 0; } /* bron (1920px): rechterkant blad 8px achter de kaart, onderkant 24px boven onderkant kaart */
.sep-vision__leaf--right { left: calc(100% - 2px); top: -75px; z-index: 0; } /* bron (1920px): linkerkant blad 2px achter de kaart, bovenkant 75px boven de kaart */
.sep-vision__leaf.is-hidden { opacity: 0; transition: none; } /* beginstand zonder overgang; de overgang zit op de eindstand */
.sep-vision__leaf--left.is-hidden { transform: translateX(100%); } /* bron fadeInRight: start achter de kaart */
.sep-vision__leaf--right.is-hidden { transform: translateX(-100%); } /* bron fadeInLeft: start achter de kaart */
/* Titel: per woord omhoog in beeld, zoals op de bron (slide-in-container, translateY 80px, 0.4s cubic-bezier) */
.sep-slide-in { display: inline-block; overflow: hidden; vertical-align: middle; position: relative; }
.sep-slide-in__word { display: inline-block; transition: transform 0.4s cubic-bezier(0.24, 0.74, 0.58, 1); }
.is-hidden .sep-slide-in__word { transform: translateY(80px); transition: none; }
/* Intro-animaties uit de bron (WOW.js): skewIn 0.8s, bounceIn 1.25s, fadeIn 1.25s; vertraging per element via --sep-delay */
.sep-reveal.is-hidden { visibility: hidden; }
.sep-reveal--skew.is-in { animation: sep-skew-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: var(--sep-delay, 0ms); will-change: transform; }
@keyframes sep-skew-in {
	0% { clip-path: inset(0 100% 0 0); transform: translateX(30px); }
	100% { clip-path: inset(0); transform: translateX(0); }
}
.sep-reveal--bounce.is-in { animation: sep-bounce-in 1.25s both; animation-delay: var(--sep-delay, 0ms); }
@keyframes sep-bounce-in {
	0%, 20%, 40%, 60%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
	20% { transform: scale3d(1.1, 1.1, 1.1); }
	40% { transform: scale3d(0.9, 0.9, 0.9); }
	60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80% { transform: scale3d(0.97, 0.97, 0.97); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
.sep-reveal--fade { transition: opacity 1.25s ease; transition-delay: var(--sep-delay, 0ms); }
.sep-reveal--fade.is-hidden { opacity: 0; visibility: visible; transition: none; }
.sep-vision__inner { position: relative; z-index: 1; }
.sep-vision__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	color: var(--sep-sand);
	font-size: clamp(1.05rem, 0.97rem + 0.32vw, 1.375rem);
	text-align: center;
}
.sep-vision__eyebrow i {
	font-size: 1.7em;
	line-height: 1;
	animation: sep-icon-bounce-right 2s ease infinite backwards; /* bron: icon-bounce-right op de eyebrow van het visieblok */
}
@keyframes sep-icon-bounce-right {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(4px); }
}
.sep-vision__heading {
	color: var(--sep-white);
	text-align: center;
	font-size: clamp(1.75rem, 1.381rem + 1.515vw, 2.8125rem);
	margin-bottom: 1.2em;
}
.sep-vision__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 418px);
	gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
	align-items: start;
	background: var(--sep-white);
	border-radius: var(--sep-radius);
	padding: 25px 40px;
	color: var(--sep-text);
}
.sep-vision__media img { border-radius: var(--sep-radius); width: 100%; object-fit: cover; }

.sep-tabs {
	display: flex;
	gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin-bottom: 1.6rem;
}
.sep-tabs__title {
	position: relative;
	background: none;
	border: 0;
	padding: 0 0 22px;
	font-family: var(--sep-font-heading);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
	font-weight: 600;
	color: var(--sep-text);
	cursor: pointer;
}
/* Bron: lijn groeit bij hover van links naar 100% in 0.25s (3px, #2a7d2e); actieve tab heeft de volle lijn in het huisstijlgroen */
.sep-tabs__title::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 3px;
	background: #2a7d2e;
	transition: 0.25s;
}
.sep-tabs__title:hover::before,
.sep-tabs__title:focus::before { width: 100%; }
.sep-tabs__title.is-active::before { width: 100%; background: var(--sep-green-dark); }
.sep-tabs__title.is-active:hover::before,
.sep-tabs__title.is-active:focus::before { background: #2a7d2e; }
.sep-tabs__panels { display: grid; }
.sep-tabs__panel {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.sep-tabs__panel.is-active { visibility: visible; opacity: 1; }
.sep-tabs__panel p:last-child { margin-bottom: 0; }
.sep-tabs__title:focus-visible {
	outline: 2px solid var(--sep-green-dark);
	outline-offset: 4px;
	border-radius: 4px;
}

@media (max-width: 900px) {
	.sep-vision__card { grid-template-columns: minmax(0, 1fr); padding: 20px; }
	.sep-vision__media { order: -1; }
	.sep-vision__leaf { display: none; }
	.sep-tabs { gap: 1.5rem; }
}

/* Statistieken (bron: vier zandkleurige kaarten op groen, kaart 1 en 3 30px lager, fadeIn 0.75s met 100ms oplopende vertraging per kaart) */
.sep-section.sep-stats { background: var(--sep-green-dark); padding-block: 15px 100px; } /* bron: sectie 422px hoog bij 1512 */
.sep-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; align-items: start; }
.sep-stats__item {
	background: var(--sep-sand);
	border-radius: 10px;
	padding: 40px 25px 30px 40px;
	color: #0b3d2c;
	transition: opacity 0.75s ease, background-color 0.3s;
}
.sep-stats__item.is-hidden { opacity: 0; transition: none; }
.sep-stats__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--sep-white);
	border: 1px solid rgba(18, 74, 47, 0.1);
	margin-bottom: 33px;
	transition: 0.3s;
}
.sep-stats__icon i { font-size: 30px; line-height: 1; transform: translate(-7px, 15px) rotate(-45deg); transition: 0.3s; } /* bron: pijl staat in rust 7px links en 15px onder het midden, deels buiten de cirkel */
.sep-stats__item:hover .sep-stats__icon i { transform: translate(0, 0) rotate(-45deg); }
/* Hover (bron): kaart wit, cirkel donkergroen met witte pijl die naar het midden schuift, alles 0.3s */
.sep-stats__item:hover { background: var(--sep-white); }
.sep-stats__item:hover .sep-stats__icon { background: #3e552b; color: var(--sep-white); }
.sep-stats__number {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	font-family: var(--sep-font-heading);
	font-size: var(--sep-fs-45);
	font-weight: 700;
	line-height: 54px;
}
.sep-stats__number .sep-counter { font-size: inherit; font-weight: inherit; line-height: inherit; } /* de teller uit het tuindesignblok heeft eigen maten */
.sep-stats__suffix { font-size: 24px; line-height: 66px; }
.sep-stats__label { display: block; font-family: var(--sep-font-heading); font-size: 24px; font-weight: 600; line-height: 0.8; }
@media (min-width: 781px) { .sep-stats__item:nth-child(odd) { margin-top: 30px; } }
@media (max-width: 780px) { .sep-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }

/* Klantbeoordelingen */
.sep-testimonials__count { color: var(--sep-green); }
.sep-testimonials__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.sep-testimonial { margin: 0; background: var(--sep-bg-soft); border-radius: var(--sep-radius); padding: 1.5rem; }
.sep-testimonial footer { display: flex; align-items: center; gap: 0.6em; margin-top: 1em; font-weight: 700; }
.sep-testimonial footer img { border-radius: 50%; }
.sep-testimonials__empty { opacity: 0.7; font-style: italic; }

/* Nieuws */
/* Nieuws en blog (acf/news): gemeten op de zakelijke home van de bron bij 1512px. Sectie 50px boven, 0 onder; kaarten hebben 30px marge boven en onder. */
.sep-section.sep-news { padding: 50px 0 30px; }
.sep-news__eyebrow { display: flex; align-items: center; justify-content: center; gap: 0.5em; height: 19px; margin: 0 0 19px; font-size: 22px; line-height: 19px; } /* bron: regel van 19px, het icoon steekt eroverheen */
.sep-news__eyebrow i { font-size: 1.7em; line-height: 1; }
.sep-news__heading { margin: 0 0 30px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; text-align: center; color: #0b3d2c; }
.sep-news__heading .sep-slide-in { vertical-align: top; }
.sep-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 370px)); gap: 30px; justify-content: start; margin: 0; }
.sep-news__card { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07); }
.sep-news__media { display: block; height: 200px; overflow: hidden; }
.sep-news__media img { display: block; width: 100%; height: 254px; object-fit: cover; object-position: top; }
.sep-news__body { padding: 0 25px 15px; }
.sep-news__category { position: relative; margin: 25px 0; padding-left: 55px; font-family: var(--sep-font-heading); font-size: 20px; font-weight: 500; line-height: 21px; }
.sep-news__category::before { content: ""; position: absolute; left: 0; top: 10px; width: 36px; height: 2px; background: var(--sep-green-dark); }
.sep-news__category a { color: #2f2f2f; text-decoration: none; }
.sep-news__category a:hover { color: #0b3d2c; }
.sep-news__title { margin: 0 0 20px; min-height: 60px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-24); font-weight: 600; line-height: 31.2px; }
.sep-news__title a { color: #0b3d2c; text-decoration: none; }
.sep-news__title a:hover { text-decoration: underline; }
.sep-news__text { margin: 0; font-size: 17px; line-height: 28px; color: #2f2f2f; }
.sep-news__date { margin: 25px 0 0; padding: 15px 0 10px; border-top: 1px solid rgba(0, 0, 0, 0.1); font-family: var(--sep-font-heading); font-size: 15px; line-height: 30px; color: #2f2f2f; }
.sep-zakelijk .sep-news__category::before { background: #4a4a4a; }
@media (max-width: 1279px) { .sep-news__grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } }
@media (max-width: 767px) { .sep-news__heading {  line-height: 40px; letter-spacing: -0.6px; } }

/* Vacature-banner (bron opgemeten bij 1512: wit, padding 50, twee kolommen van 600, rechterkolom 145px inspringing) */
.sep-section.sep-vacancy { background: var(--sep-bg-warm); padding-block: 50px; } /* op verzoek: zelfde creme als het dienstenblok, bron is wit */
.sep-vacancy__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.sep-vacancy__intro, .sep-vacancy__aside { padding-block: 15px; }
.sep-vacancy__aside { padding-inline-start: 145px; }
.sep-vacancy__eyebrow {
	position: relative;
	display: block;
	padding-inline-start: 60px;
	margin: -4px 0 14px;
	font-size: 22px;
	line-height: 27px;
	color: #114a2f;
}
.sep-vacancy__eyebrow i { position: absolute; inset-inline-start: 0; top: 0; font-size: 40px; line-height: 1; }
.sep-vacancy__heading { margin: 0; font-size: var(--sep-fs-45); line-height: 54px; color: #0b3d2c; }
.sep-vacancy__text { max-width: 440px; margin: 0 0 28px; font-size: 17px; line-height: 28px; color: var(--sep-text); }
.sep-vacancy__btn { width: 250px; padding: 13px 0; border: 0; font-size: 16px; line-height: 25px; color: #0b3d2c; }
@media (max-width: 780px) {
	.sep-vacancy__inner { grid-template-columns: minmax(0, 1fr); }
	.sep-vacancy__aside { padding-inline-start: 0; }
	.sep-vacancy__heading { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.8125rem); line-height: 1.2; }
}

/* Sectie-ritme: elke sectie draagt eigen ruimte boven en onder */
.sep-section { padding-block: var(--sep-gap); }
.sep-section--soft { background: var(--sep-bg-soft); }

/* Footer */
@media (max-width: 780px) { .sep-footer__inner { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Detailpagina's (dienst, project, vacature), opgemeten op de bron bij 1512px
   ========================================================================== */
.sep-banner { position: relative; line-height: 0; }
.sep-banner::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0.5; pointer-events: none; } /* zelfde donkere laag als de hero op de homepage (.sep-hero__overlay), zodat de witte navigatie leesbaar is */
.sep-banner img { width: 100%; height: auto; aspect-ratio: 1512 / 208.6875; object-fit: cover; } /* bron: beeld van 1511x208 op 1512px breed, 208.69px hoog */

.sep-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 75px; }
.sep-detail--sidebar { grid-template-columns: minmax(0, 770px) minmax(0, 370px); justify-content: space-between; align-items: start; }

/* Lopende inhoud uit de blokeditor */
.sep-content { color: var(--sep-text); font-size: 17px; line-height: 28px; }
.sep-content__title, .sep-content > h1 { margin: 0 0 25px; font-size: var(--sep-fs-45); line-height: 54px; font-weight: 700; color: #0b3d2c; }
.sep-content h2 { margin: 55px 0 20px; font-size: var(--sep-fs-27); line-height: 1.2; font-weight: 700; color: #0b3d2c; }
.sep-content p + h2 { margin-top: 80px; }
.sep-content h3 { margin: 30px 0 20px; font-size: var(--sep-fs-22); line-height: 1.2; font-weight: 700; color: #0b3d2c; }
.sep-content p { margin: 0 0 20px; }
.sep-content a:not(.sep-btn) { color: #0b3d2c; font-weight: 700; text-decoration: underline; }
.sep-content .wp-block-image { margin: 35px 0 15px; }
.sep-content .wp-block-image img, .sep-content figure img { border-radius: 15px; height: auto; }
.sep-content .wp-block-columns { gap: 30px; margin: 15px 0 35px; }
.sep-content .wp-block-columns img { width: 100%; aspect-ratio: 370 / 300; object-fit: cover; }
.sep-content .wp-block-columns .wp-block-image { margin: 0; }
.sep-content ul:not([class]), .sep-content ol:not([class]) { margin: 0 0 20px; padding-inline-start: 1.2em; }

/* Stappen (bron: cirkels van 110px met icoon, nummerbadge en dashed lijn) */
.sep-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 26px 0 35px; padding: 15px 0 43px; }
.sep-step { position: relative; text-align: center; }
.sep-step__icon { position: relative; display: grid; place-items: center; width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; background: var(--sep-white); box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1); }
.sep-step__icon i { font-size: 45px; line-height: 1; color: #2a7d2e; }
.sep-step__number { position: absolute; top: 0; right: -5px; width: 32px; height: 32px; border-radius: 50%; background: #3e552b; color: var(--sep-white); font-family: var(--sep-font-heading); font-size: 14px; font-weight: 600; line-height: 32px; text-align: center; }
.sep-step:not(:last-child)::after { content: ""; position: absolute; top: 55px; left: calc(50% + 70px); width: calc(100% - 140px + 30px); border-top: 2px dashed rgba(11, 61, 44, 0.25); }
.sep-step__title, .sep-content .sep-step__title { margin: 30px 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-24); line-height: 28.8px; font-weight: 600; color: #0b3d2c; }
.sep-step__text { margin: 0; font-size: 17px; line-height: 28px; color: var(--sep-text); }

/* Checklist (bron: cirkel 25px #2a7d2e met wit vinkje, tekst Montserrat 500 20px, 40px per regel) */
.sep-checklist { margin: 0 0 35px; }
.sep-checklist__heading { margin: 40px 0 25px; font-size: var(--sep-fs-27); line-height: 1.2; font-weight: 700; color: #0b3d2c; }
.sep-checklist__list { list-style: none; margin: 0; padding: 0; }
.sep-checklist__list li { display: flex; align-items: flex-start; gap: 15px; min-height: 27px; margin-bottom: 13px; font-family: var(--sep-font-heading); font-size: 20px; line-height: 20px; font-weight: 500; color: #0b3d2c; }
.sep-checklist__list li > span:last-child { padding-top: 3px; }
.sep-checklist__icon { flex: none; display: grid; place-items: center; width: 25px; height: 25px; margin-top: 1px; border-radius: 50%; background: #2a7d2e; color: var(--sep-white); }

/* Zijbalk op dienstpagina's */
.sep-sidebar { position: sticky; top: calc(var(--sep-header-h) + 20px); display: grid; gap: 30px; }
.sep-sidebar__card { padding: 40px 40px 30px; background: var(--sep-bg-warm); border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 10px; }
.sep-sidebar__title { position: relative; margin: 0 0 25px; padding-bottom: 20px; border-bottom: 3px solid rgba(11, 61, 44, 0.1); font-size: var(--sep-fs-22); font-weight: 700; color: #0b3d2c; }
.sep-sidebar__title::before { content: ""; position: absolute; left: 0; bottom: -3px; width: 70px; height: 3px; background: #3e552b; }
.sep-sidebar__list { list-style: none; margin: 0; padding: 0; }
.sep-sidebar__list li { margin-bottom: 10px; }
.sep-sidebar__list a { display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; border-radius: 10px; background: rgba(11, 61, 44, 0.07); font-family: var(--sep-font-heading); font-size: 16px; line-height: 20px; font-weight: 600; color: #0b3d2c; transition: background-color 0.3s; }
.sep-sidebar__list a i { font-size: 12px; }
.sep-sidebar__list a:hover, .sep-sidebar__list .is-current a { background: rgba(11, 61, 44, 0.14); }
.sep-sidebar__cta { padding: 50px 40px; border-radius: 10px; background: rgb(53, 70, 37); color: #f2f2f2; }
.sep-sidebar__cta p { margin: 0 0 20px; font-size: 20px; line-height: 24px; }
.sep-btn--wide { width: 250px; padding: 13px 0; border: 0; font-size: 16px; line-height: 25px; color: #0b3d2c; }

/* Project */
.sep-project { grid-template-columns: minmax(0, 704px) minmax(0, 428px); justify-content: space-between; align-items: start; padding-bottom: 65px; }
.sep-project__intro p { font-size: 17px; line-height: 28px; color: #000; }
.sep-project__info { padding: 45px 40px; border-radius: 10px; background: var(--sep-bg-warm); }
.sep-project__info-title { position: relative; margin: 0 0 30px; padding-bottom: 30px; font-size: var(--sep-fs-35); line-height: 42px; font-weight: 700; color: #0b3d2c; }
.sep-project__info-title::before { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background: #3e552b; }
.sep-project__info dl { margin: 0; }
.sep-project__info dl > div { display: flex; gap: 10px; padding: 5px 0 15px; border-bottom: 1px solid rgba(11, 61, 44, 0.15); font-family: var(--sep-font-heading); font-size: 20px; }
.sep-project__info dt, .sep-project__info dd { line-height: 20px; }
.sep-project__info dt { font-weight: 600; color: var(--sep-text); }
.sep-project__info dd { margin: 0; font-weight: 500; color: #0b3d2c; }
.sep-project__wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; padding: 15px 40px; }
.sep-project__wide img { width: 100%; height: auto; aspect-ratio: 701 / 584; object-fit: cover; border-radius: 15px; }
.sep-project__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-block: 45px 15px; }
.sep-project__wide:last-child, .sep-project__gallery:last-child, .sep-project__wide:has(+ .sep-project-cta), .sep-project__gallery:has(+ .sep-project-cta) { padding-bottom: var(--sep-gap); } /* projectpagina: onder de laatste foto's dezelfde ruimte tot de footer als onder elke sectie (was 15px) */
.sep-project__gallery img { width: 100%; height: auto; aspect-ratio: 383 / 319; object-fit: cover; border-radius: 15px; }

/* Vacature */
.sep-vacature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; padding-block: 65px 50px; align-items: start; }
.sep-vacature__media { padding-right: 15px; }
.sep-vacature__content { padding-left: 70px; }
.sep-vacature__content .sep-content__title { margin-top: 18px; }
.sep-vacature__btn { margin: 10px 0 30px; }
.sep-vacature__slot { margin: 0; }

@media (max-width: 1024px) {
	.sep-detail--sidebar, .sep-project { grid-template-columns: minmax(0, 1fr); }
	.sep-sidebar { position: static; }
	.sep-vacature { grid-template-columns: minmax(0, 1fr); }
	.sep-vacature__content { padding-left: 0; }
	.sep-project__wide { padding-inline: 15px; }
}
@media (max-width: 780px) {
	.sep-detail { padding-block: 40px; }
	.sep-content__title, .sep-content > h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.8125rem); line-height: 1.2; }
	.sep-steps { grid-template-columns: minmax(0, 1fr); }
	.sep-step:not(:last-child)::after { display: none; }
	.sep-project__wide, .sep-project__gallery { grid-template-columns: minmax(0, 1fr); }
	.sep-sidebar__card, .sep-sidebar__cta, .sep-project__info { padding: 30px 25px; }
}

/* Vacature-detail: opgemeten op bron /werkenbij/vacature-meewerkend-voorman/ (sectie margin 100, padding 50/100, kolompadding 15). */
.sep-detail.sep-vacature { margin-top: 100px; padding: 65px 15px 245px; }
.sep-vacature__content .sep-vacature__eyebrow { position: relative; margin: 0 0 18px; padding-left: 60px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 19.2px; color: #2a7d2e; }
.sep-vacature__eyebrow .flaticon-plant { position: absolute; left: 0; top: 0; width: 40px; height: 40px; font-size: 40px; line-height: 1; color: #2a7d2e; }
.sep-vacature__content .sep-content__title { margin: 0 0 25px; padding-bottom: 12px; letter-spacing: -0.9px; }
.sep-vacature__content p { margin: 0 0 20px; }
.sep-vacature__btn { margin-top: 10px; margin-bottom: 0; }
.sep-vacature__content .sep-vacature__slot { margin: 30px 0 0; }
.sep-vacature__slot a { color: #3e552b; text-decoration: underline; }
.sep-vacature .sep-design__media { width: 615px; height: 516px; aspect-ratio: auto; margin-inline-start: -55px; }
.sep-vacature .sep-design__img--small { left: 85px; top: 0; width: 183px; height: 201px; }
.sep-vacature .sep-design__img--logo { left: 0; top: 231px; width: 165px; }
.sep-vacature .sep-design__img--large { left: 215px; top: 131px; width: 400px; height: 415px; }
.sep-vacature .sep-design__counter { left: 303px; top: 55px; align-items: flex-start; gap: 0; white-space: normal; }
.sep-vacature .sep-design__counter .sep-counter { font-size: 65px; line-height: 31px; }
.sep-vacature .sep-counter__plus { font-size: 24px; line-height: 31px; }
.sep-vacature .sep-design__counter-label { max-width: 234px; margin: -4px 0 0 41px; font-size: 24px; line-height: 19.2px; }
/* Sollicitatieformulier onder aan de vacature: opgemeten op de bron-sollicitatiepagina
   (sectie padding 50/100, twee kolommen van 585, kaart 570 breed, velden vol breedte).
   Afwijking: 20px tussen kop en tekst volgens de sitebrede regel, de bron heeft 30px. */
.sep-vacature:has(+ .sep-sollicitatie) { padding-bottom: 50px; }
.sep-sollicitatie { padding: var(--sep-gap) 0; background: var(--sep-green-dark); } /* donkergroene band (oktober 2026) */
.sep-sollicitatie__inner { display: grid; grid-template-columns: minmax(0, 585px) minmax(0, 585px); justify-content: space-between; column-gap: 30px; align-items: start; }
.sep-sollicitatie__text { padding: 11px 15px 0 55px; }
.sep-sollicitatie__eyebrow { position: relative; margin: 0 0 18px; padding-left: 60px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 27px; color: #2a7d2e; }
.sep-sollicitatie__eyebrow .flaticon-plant { position: absolute; left: 0; top: 0; width: 40px; height: 40px; font-size: 40px; line-height: 1; color: #2a7d2e; }
.sep-sollicitatie__title { max-width: 515px; margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: #fff; }
.sep-sollicitatie__lead { max-width: 515px; margin: 0 0 20px; font-size: 20px; font-weight: 600; line-height: 32px; color: #fff; }
.sep-sollicitatie__intro { max-width: 515px; margin: 0; font-size: 17px; line-height: 28px; color: #fff; }
.sep-sollicitatie__form { justify-self: end; width: 570px; max-width: 100%; padding-top: 15px; }
.sep-sollicitatie .sep-form__field--file .sep-form__label { margin: 0 0 8px; font-size: 17px; line-height: 28px; }

@media (max-width: 1024px) {
	.sep-sollicitatie__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.sep-sollicitatie__text { padding: 0; }
	.sep-sollicitatie__form { justify-self: stretch; width: auto; padding-top: 0; }
}
@media (max-width: 780px) {
	.sep-sollicitatie { padding: 30px 0 60px; }
	.sep-sollicitatie .sep-form { padding: 30px 25px; }
}

/* ---------------------------------------------------------------------------
   Overzichtspagina's: pagina-intro, diensten kaarten, projecten overzicht.
   Opgemeten op bron /ons-aanbod/ en /projecten/ bij 1512px.
   --------------------------------------------------------------------------- */

/* Pagina-intro: sectie 60px onder de banner, eyebrow 22px, kop 45/54 max 585px breed. */
.sep-page-intro { margin-top: 60px; padding: 6px 0 45px; }
.sep-page-intro__eyebrow { margin: 0 0 14px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 27px; color: #114a2f; }
.sep-page-intro__eyebrow--zand { color: #f3d2a9; }
/* Bron Projecten: eyebrow staat 5px lager dan op Ons aanbod (11px i.p.v. 6px onder de sectierand). */
.sep-page-intro:has(.sep-page-intro__eyebrow--zand) { padding-top: 11px; }
.sep-page-intro__heading .sep-slide-in { vertical-align: top; }
.sep-page-intro__heading { max-width: var(--sep-intro-breedte, 585px); margin: 0; padding-bottom: 8px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: var(--sep-green-dark); }

/* Diensten kaarten: twee kolommen van 570px, rechterkolom 180px lager, kaartafstand 29px. */
.sep-dienst-cards { padding: 30px 0 65px; }
.sep-dienst-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: start; }
.sep-dienst-cards__col { display: flex; flex-direction: column; gap: 29px; }
.sep-dienst-cards__col:nth-child(2) { padding-top: 180px; }
.sep-dienst-card { position: relative; overflow: hidden; padding: 35px 30px 35px 35px; border-radius: 10px; background: #fcfaf7; transition: background-color 220ms linear; }
.sep-dienst-card__icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; border-radius: 50%; background: #fff; transition: background-color 220ms linear; }
.sep-dienst-card__icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #f2d2a9; transform: scale(0); transition: transform 0.5s cubic-bezier(0.62, 0.21, 0.45, 1.52); }
.sep-dienst-card__icon::after { content: ""; position: absolute; inset: 7.5%; border-radius: 50%; border: 2px dashed #fff; opacity: 0; transition: opacity 220ms linear; }
.sep-dienst-card__icon i { position: relative; z-index: 1; font-size: 30px; line-height: 1; color: #2a7d2e; transition: color 220ms linear; }
.sep-dienst-card__watermark { position: absolute; top: 25px; right: 30px; width: 100px; height: 100px; font-size: 100px; line-height: 1; color: rgba(11, 61, 44, 0.05); transition: color 220ms linear; }
.sep-dienst-card__meta { padding-top: 25px; }
.sep-dienst-card__title { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: max(18px, min(var(--sep-fs-24), 10.5cqi)); font-weight: 600; line-height: 28.8px; color: var(--sep-green-dark); overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; transition: color 220ms linear; }
.sep-dienst-card__text { margin: 0 0 18px; font-family: var(--sep-font-heading); font-size: 17px; font-weight: 500; line-height: 28px; color: var(--sep-text); transition: color 220ms linear; }
.sep-dienst-card__more { margin: 0; line-height: 20px; }
.sep-dienst-card__more a { display: inline-flex; align-items: center; font-size: 20px; font-weight: 600; line-height: 19.2px; color: var(--sep-green-dark); text-decoration: none; transition: color 220ms linear; }
.sep-dienst-card__more a span { margin-right: 5px; text-decoration: underline; }
.sep-dienst-card__more a i { font-size: 14px; line-height: 14px; }
/* Titel is de echte link (ankertekst) en maakt de hele kaart klikbaar; "Lees meer" blijft een eigen link. */
.sep-dienst-card__link { color: inherit; text-decoration: none; }
.sep-dienst-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.sep-dienst-card__more { position: relative; z-index: 2; }
.sep-dienst-card:hover { background: #3e552b; }
.sep-dienst-card:hover .sep-dienst-card__icon { background: transparent; }
.sep-dienst-card:hover .sep-dienst-card__icon::before { transform: scale(1); }
.sep-dienst-card:hover .sep-dienst-card__icon::after { opacity: 1; }
.sep-dienst-card:hover .sep-dienst-card__icon i,
.sep-dienst-card:hover .sep-dienst-card__title,
.sep-dienst-card:hover .sep-dienst-card__text,
.sep-dienst-card:hover .sep-dienst-card__more a { color: #fff; }
.sep-dienst-card:hover .sep-dienst-card__watermark { color: rgba(255, 255, 255, 0.05); }

/* Projecten overzicht: tegels 570x380, afstand 30, groen vlak met titel op hover. */
.sep-project-grid { padding: 14px 0 var(--sep-gap); } /* onder de standaard sectieafstand (was 49px van de bron) */
.sep-project-grid__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.sep-project-tile { position: relative; overflow: hidden; border-radius: 10px; }
.sep-project-tile__media { display: block; aspect-ratio: 570 / 380; overflow: hidden; }
.sep-project-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms linear; }
.sep-project-tile__holder { position: absolute; left: 0; right: 0; bottom: 0; padding: 31px 49px; background: #3e552b; opacity: 0; transform: scaleY(0); transform-origin: center bottom; transition: transform 220ms linear, opacity 220ms linear; }
.sep-project-tile__title { margin: 0 0 8px; font-family: var(--sep-font-heading); font-size: max(18px, min(var(--sep-fs-35), 9cqi)); font-weight: 700; line-height: 42px; }
.sep-project-tile__title a { color: #f2f2f2; text-decoration: none; }
.sep-project-tile:hover .sep-project-tile__media img { transform: scale(1.05); }
.sep-project-tile:hover .sep-project-tile__holder { opacity: 1; transform: scaleY(1); }

@media (max-width: 900px) {
	.sep-dienst-cards__grid, .sep-project-grid__grid { grid-template-columns: minmax(0, 1fr); }
	.sep-dienst-cards__col:nth-child(2) { padding-top: 0; }
	.sep-page-intro__heading {  line-height: 42px; }
	.sep-project-tile__holder { padding: 20px 25px; }
	.sep-project-tile__title {  line-height: 32px; }
}

/* Ken Burns hero: keyframe-animatie in plaats van transition, zodat ook de eerste slide bij het laden inzoomt
   (een transition start niet op een class die al in de HTML staat). Actief: 1 -> 1.3 in 20s; verlaten: 1.3 -> 1 in 10s. */
.sep-hero__slide { animation: sep-ken-burns-out 10s linear forwards; }
.sep-hero__slide.is-active { animation: sep-ken-burns-in 20s linear forwards; }
@keyframes sep-ken-burns-in { from { transform: scale(1); } to { transform: scale(1.3); } }
@keyframes sep-ken-burns-out { from { transform: scale(1.3); } to { transform: scale(1); } }

/* Vaste balk bij scrollen (bron: ct-header-elementor-sticky). Schuift in vanaf 80px, 0.6s cubic-bezier(0.24,0.74,0.58,1).
   94px hoog, achtergrond rgb(52,70,37), schaduw 0 10px 20px rgba(0,0,0,.08). Logo liggend 253x70 op 25px, menu rechts uitgelijnd
   in een kolom van 313 tot 1237, knop 250px rechts (26px van de rand). */
.sep-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: 94px; background: #344625; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); transform: translateY(-100%); visibility: hidden; transition: transform 0.6s cubic-bezier(0.24, 0.74, 0.58, 1), visibility 0s linear 0.6s; }
.sep-sticky.is-stuck { transform: translateY(0); visibility: visible; transition: transform 0.6s cubic-bezier(0.24, 0.74, 0.58, 1); }
.admin-bar .sep-sticky { top: 32px; }
.sep-sticky__inner { display: flex; align-items: center; gap: 40px; height: 94px; max-width: var(--sep-container-wide); margin-inline: auto; padding: 0 38px 0 40px; }
.sep-sticky__logo { display: block; flex: 0 0 auto; width: 253px; }
.sep-sticky__logo img { display: block; width: 253px; height: auto; }
.sep-sticky__nav { flex: 0 1 auto; width: auto; margin: 0 0 0 auto; }
.sep-sticky__nav .sep-nav__list { width: auto; margin: 0; padding: 0; list-style: none; }
.sep-sticky__nav .sep-nav__list > li { position: relative; }
.sep-sticky__nav .sep-nav__list > li > a { display: inline-block; padding: 30px 0 30px 30px; font-size: 18px; font-weight: 600; line-height: 32.4px; color: #f2f2f2; }
.sep-sticky__nav .sep-nav__list > li:not(.menu-item-has-children) > a { padding-right: 6px; }
.sep-sticky__nav .sep-nav__list > li.menu-item-has-children > a { padding-right: 0; }
.sep-sticky__cta { flex: none; width: 250px; padding: 13px 0; border: 0; }
/* De gewone header scrolt mee (bron: absolute header over de hero); de vaste balk hierboven neemt het over. */
.sep-header { position: relative; top: auto; }
.sep-header.is-stuck { background: transparent; }
.sep-header.is-stuck .sep-header__logo { top: calc(var(--sep-topbar-h) * -1); width: 212px; }
@media (max-width: 1199px) {
	.sep-sticky { display: none; } }

/* ---------------------------------------------------------------------------
   Footer, opgemeten op bron (Elementor-footer 3414) bij 1512px. Vervangt de eerdere footerregels hierboven.
   --------------------------------------------------------------------------- */
.sep-footer { background: #344625; color: #fff; }
.sep-footer__main { display: grid; grid-template-columns: minmax(0, 345px) minmax(0, 270px) minmax(0, 270px) minmax(0, 285px); align-items: start; padding-top: 85px; padding-bottom: 70px; }
.sep-footer__col--intro { padding-right: 15px; }
.sep-footer__col--particulier { padding-left: 53px; }
.sep-footer__col--zakelijk { padding-left: 95px; }
.sep-footer__col--teller { padding-left: 67px; }
.sep-footer__logo { display: block; width: 330px; }
.sep-footer__logo img { display: block; width: 330px; height: auto; }
.sep-footer__text { padding: 30px 0 25px; }
.sep-footer__logo + .sep-footer__btn { margin-top: 30px; } /* zonder footertekst: zelfde afstand als de bovenruimte van de tekst */
.sep-footer__text p { margin: 0; font-size: 16px; line-height: 20.8px; color: #fff; }
.sep-btn--outline.sep-footer__btn { display: inline-block; padding: 10px 30px; border: 1px solid #fff; border-radius: 40px; background: transparent; color: #fff; font-family: var(--sep-font-heading); font-size: 16px; font-weight: 600; line-height: 25px; }
.sep-footer__title { position: relative; margin: 0; padding: 0 0 25px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-35); font-weight: 700; line-height: 42px; letter-spacing: -0.7px; color: #f2f2f2; }
.sep-footer__title .sep-slide-in { vertical-align: top; }
.sep-footer__title::before { content: ""; position: absolute; left: 0; top: 65px; width: 50px; height: 2px; background: #f1d2a9; }
.sep-footer__list { list-style: none; margin: 33px 0 0; padding: 0; }
.sep-footer__list li { margin: 0 0 10px; line-height: 24px; }
.sep-footer__list li:last-child { margin-bottom: 0; }
.sep-footer__list a { font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 500; line-height: 20px; color: #fff; text-decoration: underline; text-decoration-color: transparent; }
.sep-footer__list a:hover { color: #fff; text-decoration-color: #fff; }
.sep-footer__pill { width: 218px; padding: 35px 50px; border-top: 5px solid #f1d2a9; border-radius: 0 0 97.5px 97.5px; background: #fff; text-align: center; }
.sep-footer__number { display: flex; align-items: center; justify-content: center; height: 59px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 600; line-height: 19.2px; color: var(--sep-green-dark); }
.sep-footer__number .sep-counter { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.sep-footer__plus { font-size: 45px; line-height: 58.5px; }
.sep-footer__label { margin: 20px 0; font-size: 18px; font-weight: 600; line-height: 19.2px; color: #000; }
.sep-footer__arrow { display: flex; justify-content: center; }
.sep-footer__arrow a { display: block; width: 55px; height: 55px; border-radius: 50%; background: #2a7d2e; line-height: 55px; text-align: center; transition: 0.3s; }
.sep-footer__arrow i { display: inline-block; font-size: 16px; line-height: 55px; color: #fff; transform: rotate(-35.91deg); transition: 0.3s; }
.sep-footer__arrow a:hover i { transform: rotate(0deg); }
.sep-footer__bar { background: #344625; }
.sep-footer__bar-inner { position: relative; display: flex; align-items: center; min-height: 87px; padding-top: 30px; padding-bottom: 30px; }
.sep-footer__bar-inner::before { content: ""; position: absolute; left: 15px; right: 15px; top: 0; height: 1px; background: rgba(255, 255, 255, 0.16); }
.sep-footer__copyright { margin: 0; font-size: 16px; line-height: 20.8px; color: #fff; }
.sep-footer__top { position: absolute; left: calc(50% + 1px); top: -31px; display: block; width: 56px; height: 55px; border: 5px solid #fff; border-radius: 50%; background: #f1d2a9; color: #fff; text-align: center; line-height: 45px; font-size: 14px; transition: 0.35s; }
.sep-footer__top i { font-size: 14px; line-height: 45px; }
.sep-footer__legal { display: flex; list-style: none; margin: 0 0 0 auto; padding: 0; }
.sep-footer__legal li { padding-left: 20px; margin-right: 15px; line-height: 25px; }
.sep-footer__legal li:last-child { margin-right: 0; }
.sep-footer__legal a { font-family: var(--sep-font-body); font-size: 20px; font-weight: 500; line-height: 20px; color: #fff; text-decoration: underline; text-decoration-color: transparent; }
.sep-footer__legal a:hover { color: #fff; text-decoration-color: #fff; }
@media (max-width: 1279px) {
	.sep-footer__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 30px; }
	.sep-footer__col--particulier, .sep-footer__col--zakelijk, .sep-footer__col--teller { padding-left: 0; }
}
@media (max-width: 767px) {
	.sep-footer__main { grid-template-columns: minmax(0, 1fr); }
	.sep-footer__logo, .sep-footer__logo img { width: min(330px, 100%); }
	.sep-footer__bar-inner { flex-wrap: wrap; gap: 15px; padding-top: 45px; }
	.sep-footer__legal { margin-left: 0; }
	.sep-footer__legal li { padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   Werken bij: pagina-hero, intro met inhoudsopgave, vacatures, formulierblok, beeld en tekst,
   accordeon, carrousel, stappen in kaarten, FAQ, knoppenrij. Opgemeten op bron /werkenbij/ bij 1512px.
   --------------------------------------------------------------------------- */

/* Pagina-hero: 920px hoog, padding-top 120, vak van 800px gecentreerd. */
.sep-page-hero { height: 920px; padding: 120px 40px 0; background-size: cover; background-position: 50% 0; background-repeat: no-repeat; color: #fff; text-align: center; }
.sep-page-hero__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 800px; padding: 10px; }
.sep-page-hero__title { margin: 0 0 25px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-85); font-weight: 700; line-height: 102px; letter-spacing: -1.7px; color: #fff; }
.sep-page-hero__text { max-width: 1432px; margin: 0 0 20px; font-size: 28px; font-weight: 600; line-height: 36.4px; color: #f2f2f2; }
.sep-page-hero__btn { padding: 12px 41px; }

/* Intro met inhoudsopgave (Werken bij, oktober 2026): tekst links, inhoudsopgave rechts in een kaart van 340px,
   60px ertussen; 80px boven, standaard sectieafstand onder. Eerste alinea 20/32 groen, de rest 17/28. */
.sep-intro-toc { padding: 80px 0 var(--sep-gap); }
.sep-intro-toc__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 60px; align-items: start; }
.sep-intro-toc__text p { margin: 0 0 20px; font-size: 17px; line-height: 28px; color: var(--sep-text); }
.sep-intro-toc__text p:first-child { font-size: 20px; line-height: 32px; color: var(--sep-green-dark); }
.sep-intro-toc__text p:last-child { margin-bottom: 0; }
.sep-intro-toc__box { padding: 28px 30px; border: 1px solid var(--sep-border); border-radius: var(--sep-radius); background: var(--sep-bg-warm); }
.sep-intro-toc__title { margin: 0 0 12px; font-family: var(--sep-font-heading); font-size: 17px; line-height: 1.3; color: var(--sep-green-dark); }
.sep-intro-toc__box ol { margin: 0; padding: 0 0 0 20px; font-size: 17px; line-height: 28px; color: var(--sep-text); }
.sep-intro-toc__box a { color: var(--sep-green); text-decoration: none; } /* niet onderstreept, op verzoek van Tonny */
.sep-intro-toc__box a:hover { text-decoration: underline; }
.sep-intro-toc__box li + li { margin-top: 6px; }

/* Vacatures: kop met streep, kaarten 377 in kolommen van 397, 40px tussen de rijen. */
.sep-vacatures { margin-top: 24px; }
.sep-vacatures.is-style-grijs { margin-top: 0; padding-block: var(--sep-gap); background: var(--sep-bg-soft); } /* blokstijl Grijze achtergrond, volle breedte */
.sep-vacatures__head { padding-top: 33px; }
.sep-vacatures__title { margin: 0 0 30px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; text-align: center; color: var(--sep-green-dark); }
.sep-vacatures__title .sep-slide-in { vertical-align: top; }
.sep-vacatures__divider { width: 456px; height: 0; margin: 45px auto 15px; border-top: 2.5px solid var(--sep-green-dark); }
.sep-vacatures__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 397px)); row-gap: 42px; justify-content: start; padding: 15px 5px 40px; }
.sep-vacatures__card { position: relative; display: flex; flex-direction: column; align-items: center; width: 377px; padding: 36px 20px; border-radius: 10px; background: #354526; box-shadow: 0 0 10px rgba(10, 9, 9, 0.63); text-align: center; }
.sep-vacatures__card:nth-child(3n+1):last-child, .sep-vacatures__card:nth-child(3n+2):last-child { grid-column: 2; }
.sep-vacatures__card-title { margin: 0 0 20px; padding-bottom: 3px; font-family: var(--sep-font-heading); font-size: max(18px, min(var(--sep-fs-30), 9cqi)); font-weight: 700; line-height: 36px; letter-spacing: -0.6px; color: #fff; }
.sep-vacatures__card-title .sep-slide-in { vertical-align: top; }
.sep-vacatures__card-link { color: inherit; text-decoration: none; }
.sep-vacatures__card-link::after { content: ""; position: absolute; inset: 0; border-radius: 10px; } /* hele kaart klikbaar, titel blijft de ankertekst */
.sep-vacatures__btn { position: relative; z-index: 1; }
.sep-vacatures__card-text { flex: 1; margin: 0 0 40px; font-size: 17px; line-height: 28px; color: #f2f2f2; }
.sep-vacatures__btn { width: 235px; padding: 12px 0; }

/* Vacature-alert (Werken bij, oktober 2026): donkergroene band, kop en tekst links, formulier rechts (480px). */
.sep-newsletter { padding: 70px 0; background: var(--sep-green-dark); }
.sep-newsletter__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 60px; align-items: center; }
.sep-newsletter__title { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-34); font-weight: 700; line-height: 42px; letter-spacing: -0.5px; color: #fff; }
.sep-newsletter__text { margin: 0; font-size: 17px; line-height: 28px; color: #fff; }
.sep-newsletter .sep-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 28px; border-radius: var(--sep-radius-lg); box-shadow: none; }
.sep-newsletter .sep-form input[type="email"] { margin: 0; }
.sep-newsletter .sep-form .sep-form__button { margin: 0; }
.sep-form { padding: 50px 70px; border-radius: 20px; background: #fff; box-shadow: 0 7px 60px rgba(0, 0, 0, 0.07); }
.sep-form p { margin: 0; }
.sep-form__field { position: relative; flex: 1 1 100%; }
.sep-form__field--half { flex-basis: calc(50% - 10px); }
.sep-form__label { display: block; margin: 0; font-family: var(--sep-font-body); font-size: 16px; line-height: 20.8px; font-weight: 400; color: var(--sep-text); }
.sep-form__field--icon::before { content: attr(data-icon); position: absolute; left: 15px; top: 10px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 16px; line-height: 19.2px; color: var(--sep-green-dark); }
.sep-form__field--icon .sep-form__label:not(.screen-reader-text) + input { margin-top: 0; }
/* Velden met een icoon houden de ruimte links, velden zonder icoon staan strak links. */
.sep-form .sep-form__field.sep-form__field--icon input, .sep-form .sep-form__field.sep-form__field--icon textarea, .sep-form .sep-form__field.sep-form__field--icon select { padding-left: 45px; } /* specifieker dan de algemene veldregel, anders wint padding 10px */
.sep-form__field--file input { display: block; width: 100%; margin: 0 0 30px; padding: 9px 14px; border: 1px dashed rgba(11, 61, 44, 0.25); border-radius: 12px; background: #fff; font-family: var(--sep-font-body); font-size: 16px; line-height: 24px; color: #6d7468; cursor: pointer; transition: border-color 0.2s ease; }
.sep-form__field--file input:hover { border-color: var(--sep-green); }
.sep-form__field--file input:focus-visible { outline: 2px solid var(--sep-green-dark); outline-offset: 2px; }
.sep-form__field--file input::file-selector-button { margin-right: 14px; padding: 8px 20px; border: 0; border-radius: 8px; background: var(--sep-sand); font-family: var(--sep-font-heading); font-size: 15px; font-weight: 600; line-height: 22px; color: #0b3d2c; cursor: pointer; transition: background-color 0.2s ease; }
.sep-form__field--file input:hover::file-selector-button { background: var(--sep-sand-dark); }
.sep-form input[type="email"], .sep-form input[type="text"], .sep-form input[type="tel"], .sep-form textarea, .sep-form select { width: 100%; height: 51px; margin: 0 0 30px; padding: 0 0 0 10px; border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 12px; background: #fff; font-family: var(--sep-font-heading); font-size: 16px; font-weight: 600; color: var(--sep-green-dark); }
.sep-form input::placeholder { color: var(--sep-green-dark); opacity: 1; }
.sep-form textarea { display: block; height: 105px; margin-bottom: 5px; padding: 10px 20px 10px 10px; line-height: 26px; resize: vertical; }
.sep-form select { padding-right: 20px; }
.sep-form input[type="submit"], .sep-form .sep-form__button { margin: 25px 0 10px; padding: 14px 40px; border: 0; border-radius: 20px; background: var(--sep-green-dark); font-family: var(--sep-font-heading); font-size: 16px; font-weight: 600; line-height: 25px; letter-spacing: -0.32px; color: #fff; cursor: pointer; }

/* Beeld en tekst: kolommen 575 met 20px ertussen, marge 72 boven en 52 onder. */
.sep-image-text { margin: 72px 0 52px; padding: 10px 0; }
.sep-image-text--geen-marge { margin-bottom: 0; }
.sep-image-text__inner { display: grid; grid-template-columns: minmax(0, 575px) minmax(0, 575px); column-gap: 20px; align-items: start; }
.sep-image-text--beeld-links .sep-image-text__text { order: 2; }
.sep-image-text--beeld-links .sep-image-text__media { order: 1; }
.sep-image-text__title { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: var(--sep-green-dark); }
.sep-image-text__title .sep-slide-in { vertical-align: top; }
.sep-image-text__body { font-size: 17px; line-height: 28px; color: #000; }
.sep-image-text__body p { margin: 0 0 20px; }
.sep-image-text__body:last-child { margin-bottom: 32px; }
.sep-image-text__body:has(+ .sep-accordion) { margin-bottom: 30px; }
.sep-image-text__body ul { margin: 0 0 15px; padding: 0; list-style: disc; }
.sep-image-text__body li { line-height: 28px; list-style-position: inside; }
.sep-image-text__body strong { font-weight: 700; }
.sep-image-text__btn { padding: 12px 41px; }
.sep-image-text__figure { margin: 0; }
.sep-image-text__figure img { display: block; width: 100%; height: auto; border-radius: 15px; }

/* Accordeon (bron: ct-accordion layout1 style1). */
.sep-accordion__item { margin-top: 20px; padding: 20px 30px 20px 35px; border-radius: 20px; background: #fcfaf7; }
.sep-image-text__body + .sep-accordion .sep-accordion__item:first-child { margin-top: 0; }
.sep-accordion__title { position: relative; margin: 0; }
.sep-accordion__button { display: block; width: 100%; padding: 0 30px 0 0; border: 0; background: none; font-family: var(--sep-font-heading); font-size: 18px; font-weight: 600; line-height: 1.2; text-align: left; color: var(--sep-green-dark); cursor: pointer; transition: 300ms linear; }
.sep-accordion__button::after { content: "\f102"; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; font-family: "Bravisicon"; font-size: 14px; font-weight: normal; line-height: 20px; text-align: center; color: var(--sep-green-dark); transform: translateY(-50%); transition: transform 250ms ease; } /* chevron van het thema (zoals in het menu) in plaats van de pijl naar rechts van de bron; draait bij openen */
.sep-accordion__button[aria-expanded="true"]::after { transform: translateY(-50%) rotate(180deg); }
.sep-accordion__content { margin-top: 14px; padding-top: 17px; border-top: 1px solid rgba(11, 61, 44, 0.1); font-size: 17px; line-height: 28px; color: var(--sep-text); }
.sep-accordion__content p { margin: 0 0 20px; }
.sep-accordion__content p:last-child { margin-bottom: 0; }

/* Carrousel (bron: Elementor image-carousel): 575 breed, foto's radius 10, pijlen 25px, stipjes 6px. */
.sep-carousel { position: relative; overflow: hidden; padding-bottom: 30px; }
.sep-carousel__track { display: flex; transition: transform 500ms ease; }
.sep-carousel__slide { flex: 0 0 100%; margin: 0; }
.sep-carousel__slide img { display: block; width: 100%; height: auto; border-radius: 10px; }
.sep-carousel__nav { position: absolute; top: calc(50% - 15px); z-index: 2; width: 25px; height: 25px; padding: 0; border: 0; background: none; color: rgba(238, 238, 238, 0.9); font-size: 25px; line-height: 25px; cursor: pointer; transform: translateY(-50%); }
.sep-carousel__nav--prev { left: 10px; }
.sep-carousel__nav--next { right: 10px; }
.sep-carousel__nav::before { content: ""; display: block; width: 11px; height: 11px; margin: 7px auto; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); }
.sep-carousel__nav--next::before { transform: rotate(-135deg); }
.sep-carousel__dots { position: absolute; left: 0; right: 0; bottom: 9px; display: flex; justify-content: center; gap: 12px; }
.sep-carousel__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: 0.2; cursor: pointer; }
.sep-carousel__dot.is-active { opacity: 1; }

/* Stappen in kaarten (Werken bij, oktober 2026): crème sectie, label en kop gecentreerd, vier donkergroene kaarten
   in de container met 30px ertussen. */
.sep-steps-cards { padding: var(--sep-gap) 0; background: var(--sep-bg-warm); }
.sep-steps-cards__head { max-width: 900px; margin: 0 auto 50px; text-align: center; }
.sep-steps-cards__head .sep-eyebrow { justify-content: center; }
.sep-steps-cards__title { margin: 0; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; text-align: center; color: var(--sep-green-dark); }
.sep-steps-cards__title .sep-slide-in { vertical-align: top; }
.sep-steps-cards__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.sep-steps-cards__card { padding: 30px 26px; border-radius: var(--sep-radius-lg); background: var(--sep-green-dark); }
.sep-steps-cards__card-title { margin: 0 0 10px; font-family: var(--sep-font-heading); font-size: 20px; font-weight: 600; line-height: 1.3; color: #fff; }
.sep-steps-cards__card-text { margin: 0; font-size: 17px; line-height: 28px; color: #fff; }

/* FAQ: kolom 686 gecentreerd, marge 23 boven en 33 onder. */
.sep-faq { margin: 0 0 33px; }
.sep-faq:has(+ .sep-vacancy) { margin-bottom: var(--sep-gap); } /* op verzoek: meer lucht onder de FAQ als er een blok met achtergrond op volgt (homepage) */
.sep-section + .sep-faq { margin-top: var(--sep-gap); } /* na een gewone sectie (homepage) de standaard sectieafstand; op Werken bij regelt het stappenblok de 52px */
.sep-faq__inner { width: 820px; max-width: 100%; margin: 0 auto; padding: 10px 0; }
.sep-faq__title { margin: 0; padding-bottom: 30px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; text-align: center; color: var(--sep-green-dark); }
.sep-faq__title .sep-slide-in { vertical-align: top; }
.sep-faq .sep-accordion__item:first-child { margin-top: 0; }

/* Knoppenrij: gecentreerd, 20px ertussen, 40px onder. */
.sep-buttons { display: flex; justify-content: center; align-items: flex-start; gap: 20px; padding: 10px 0 49px; }
.sep-buttons__btn.sep-btn--sand { padding: 12px 41px; }
/* FAQ met de kop links (Werken bij, oktober 2026). */
.sep-faq--kop-links, .sep-section + .sep-faq--kop-links { margin: 0; padding: var(--sep-gap) 0; } /* eigen padding, dus geen extra marge na een sectie */
.sep-faq--kop-links .sep-faq__inner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 60px; align-items: start; width: auto; max-width: var(--sep-container); margin: 0 auto; padding: 0 15px; }
.sep-faq--kop-links .sep-faq__head { position: sticky; top: 140px; }
.sep-faq--kop-links .sep-faq__title { padding: 0; font-size: var(--sep-fs-34); line-height: 42px; letter-spacing: -0.5px; text-align: left; }
.sep-faq--kop-links .sep-accordion { margin: 0; }
/* Knoppen met slottekst (Werken bij, oktober 2026): crème band, tekst links, knoppen rechts. */
.sep-buttons--slot { padding: 60px 0; background: var(--sep-bg-warm); }
.sep-buttons__slot { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.sep-buttons__tekst { max-width: 760px; margin: 0; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 1.4; color: var(--sep-green-dark); }
.sep-buttons--slot .sep-buttons { flex-shrink: 0; padding: 0; }
.sep-btn--omlijnd { display: inline-block; padding: 12px 41px; border: 2px solid #114a2f; border-radius: 10px; background: #fff; font-family: var(--sep-font-heading); font-size: 16px; font-weight: 600; line-height: 25px; color: var(--sep-green-dark); }

@media (max-width: 1279px) {
	.sep-intro-toc__inner, .sep-image-text__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.sep-image-text--beeld-links .sep-image-text__text { order: 1; }
	.sep-image-text--beeld-links .sep-image-text__media { order: 2; }
	.sep-vacatures__grid { grid-template-columns: repeat(auto-fit, 377px); justify-content: center; column-gap: 20px; }
	.sep-vacatures__card:nth-child(3n+1):last-child, .sep-vacatures__card:nth-child(3n+2):last-child { grid-column: auto; }
	.sep-steps-cards__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sep-faq__inner { margin: 0 auto; }
	.sep-intro-toc__inner { gap: 30px; }
	.sep-faq--kop-links .sep-faq__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.sep-faq--kop-links .sep-faq__head { position: static; }
	.sep-page-hero { height: auto; min-height: 640px; padding-top: 140px; }
	.sep-page-hero__inner { min-height: 0; padding-bottom: 60px; }
	.sep-page-hero__title {  line-height: 56px; letter-spacing: -1px; }
	.sep-page-hero__text { font-size: 20px; line-height: 28px; }
	.sep-form { padding: 30px 20px; }
}
@media (max-width: 767px) {
	.sep-steps-cards__row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.sep-newsletter__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.sep-buttons__slot { flex-direction: column; align-items: flex-start; gap: 24px; }
	.sep-vacatures__grid { grid-template-columns: minmax(0, 1fr); }
	.sep-vacatures__card { width: 100%; }
	.sep-vacatures__divider { width: 60%; }
	.sep-buttons { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Contact (bron /contact-informatie/ bij 1512px): kaarten en kop, kaart en formulier.
   --------------------------------------------------------------------------- */
.sep-glyph { font-style: normal; line-height: 1; }
.sep-glyph--fa { font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.sep-glyph--icomoon { font-family: 'Icomoon'; font-weight: 400; }
.sep-glyph--flaticon { font-family: 'flaticon_gadden'; font-weight: 400; }

.sep-contact-cards { padding: 50px 0; }
.sep-contact-cards__grid { display: grid; grid-template-columns: minmax(0, 350px) minmax(0, 350px) minmax(0, 380px); column-gap: 20px; justify-content: center; padding: 10px 0; }
.sep-contact-card { height: 350px; padding: 60px; border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 10px; background: #fcfaf7; text-align: center; }
.sep-contact-card__icon { display: grid; place-items: center; width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 7px 60px rgba(0, 0, 0, 0.07); font-size: 45px; color: #3e552b; }
.sep-contact-card__label { margin: 10px 0 5px; font-family: var(--sep-font-heading); font-size: 20px; font-weight: 500; line-height: 24px; color: var(--sep-text); }
.sep-contact-card__title { margin: 0 0 18px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-24); font-weight: 600; line-height: 28.8px; color: #0b3d2c; }
.sep-contact-card__title a { color: inherit; }

.sep-contact { padding: 35px 0; }
.sep-contact__inner { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 600px); padding-inline: 0; }
.sep-contact__col { padding: 15px; }
.sep-contact__col--form { position: relative; z-index: 1; } /* formulier boven de kaart (op de bron ligt de kaart erover, op verzoek omgedraaid) */
.sep-contact__heading { width: 388px; margin: 0 0 70px 40px; }
.sep-contact__eyebrow { position: relative; margin: 0 0 18px; padding-left: 60px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 19.2px; color: #2a7d2e; }
.sep-contact__eyebrow .flaticon-plant { position: absolute; left: 0; top: 0; width: 40px; height: 40px; font-size: 40px; line-height: 1; color: #2a7d2e; }
.sep-contact__title { margin: 0; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 58px; letter-spacing: -0.9px; color: var(--sep-green-dark); } /* bron: regels van 58px met de woorden 4px lager */
.sep-contact__title .sep-slide-in { position: relative; top: 4px; vertical-align: top; line-height: 54px; }
.sep-contact__map { width: 495px; height: 545px; } /* tot aan het formulier (x666); op de bron 650px breed en deels onder het formulier, mag niet van Google */
.sep-contact__map iframe { display: block; width: 495px; height: 545px; border: 0; }
.sep-contact__form { width: 675px; margin-left: -105px; }

@media (max-width: 1279px) {
	.sep-contact-cards__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 350px)); padding: 10px 15px; }
	.sep-contact-card { height: auto; padding: 40px 30px; }
	.sep-contact__inner { grid-template-columns: minmax(0, 1fr); }
	.sep-contact__col--form { z-index: auto; }
	.sep-contact__heading { width: auto; margin: 0 0 40px; }
	.sep-contact__map, .sep-contact__map iframe { width: 100%; height: 400px; margin: 0; }
	.sep-contact__form { width: auto; margin: 0; }
}

/* Kop met tekst (homepage): tekstkolom 773px, eyebrow uit het tuindesignblok, kop 45/54, tekst 20/26. */
.sep-text-intro__text { max-width: 773px; }
.sep-text-intro--met-beeld .sep-text-intro__inner { display: grid; grid-template-columns: minmax(0, 575px) minmax(0, 510px); justify-content: space-between; align-items: start; } /* foto 510px, 85px lucht tussen de kolommen */
.sep-text-intro--met-beeld .sep-text-intro__text { max-width: none; }
.sep-text-intro__figure { margin: 0; }
.sep-text-intro__figure img { display: block; width: 100%; height: auto; border-radius: 15px; }
@media (max-width: 1279px) { .sep-text-intro--met-beeld .sep-text-intro__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.sep-text-intro__heading, .sep-uitgelicht__heading, .sep-services__heading, .sep-vacatures__heading, .sep-foto-kaarten__heading, .sep-tekst-paneel__heading { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: var(--sep-green-dark); }
.sep-text-intro__heading .sep-slide-in { vertical-align: top; }
.sep-text-intro__body { font-size: 17px; line-height: 28px; color: var(--sep-text); }
.sep-text-intro__body p { margin: 0 0 20px; }
.sep-text-intro__body p:last-child { margin-bottom: 0; }
.sep-text-intro__btn { margin-top: 30px; padding: 12px 41px; }
@media (max-width: 767px) {
	.sep-text-intro__heading, .sep-uitgelicht__heading, .sep-services__heading, .sep-vacatures__heading, .sep-foto-kaarten__heading, .sep-tekst-paneel__heading, .sep-steps-cards__title, .sep-image-text--kaarten .sep-image-text__title {  line-height: 42px; letter-spacing: -0.5px; }
	.sep-text-intro__body { font-size: 18px; line-height: 26px; }
}

/* Intro met beeld en tekst (Over ons): twee kolommen van 570px, eyebrow met plant-icoon, kop 45/54, beeld 470px op 50px inspringing. */
.sep-intro-columns { margin-top: 60px; padding-bottom: 15px; }
.sep-intro-columns__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; align-items: start; padding-block: 15px; }
.sep-intro-columns__eyebrow { position: relative; margin: 0 0 18px; padding-left: 60px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 19.2px; color: #114a2f; }
.sep-intro-columns__eyebrow .flaticon-plant { position: absolute; left: 0; top: 0; width: 40px; height: 40px; font-size: 40px; line-height: 1; color: #114a2f; }
.sep-intro-columns__heading { max-width: 530px; margin: 0; padding-bottom: 8px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: #0b3d2c; }
.sep-intro-columns__heading .sep-slide-in { vertical-align: top; }
.sep-intro-columns__figure { width: 100%; max-width: 100%; margin: 50px 0; } /* even breed als de kolom en links gelijk met de kop (bron: 470px en 50px ingesprongen), op verzoek van Tonny */
.sep-intro-columns__figure img { width: 100%; height: auto; border-radius: 15px; }
.sep-intro-columns__body { font-size: 17px; line-height: 28px; color: var(--sep-text); }
.sep-intro-columns__body p { margin: 0 0 20px; }
.sep-intro-columns__body p:last-child { margin-bottom: 0; }
.sep-intro-columns__btn { margin-top: 30px; }

/* Kaarten met icoon (Over ons): creme vak van 1000px, drie kaarten van 303px die bij hover donkergroen worden. Kaarttekst op verzoek in Montserrat 500 17/28, hetzelfde als de tekst in de icoonvakken van het paneel (bron: Source Sans 22/22). */
.sep-icon-cards { margin-top: 50px; }
.sep-icon-cards__box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; max-width: 1000px; margin: 0 auto; padding: 15px; border-radius: 10px; background: var(--sep-bg-warm); }
.sep-icon-cards__card { position: relative; z-index: 0; overflow: hidden; margin: 10px; padding: 30px 40px 25px; border-radius: 10px; background: var(--sep-bg-warm); text-align: center; }
.sep-icon-cards__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 61, 44, 0.9); opacity: 0; transition: opacity 0.3s ease; }
.sep-icon-cards__card:hover::before { opacity: 1; }
.sep-icon-cards__icon { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 7px 60px rgba(0, 0, 0, 0.07); }
.sep-icon-cards__icon i { font-size: 60px; color: #0b3d2c; }
.sep-icon-cards__title { margin: 33px 0 0; font-family: var(--sep-font-heading); font-size: max(18px, min(var(--sep-fs-24), 10.5cqi)); font-weight: 600; line-height: 28.8px; letter-spacing: -0.48px; color: #0b3d2c; transition: color 0.3s ease; }
.sep-icon-cards__text { margin: 20px 0 0; font-family: var(--sep-font-heading); font-size: 17px; font-weight: 500; line-height: 28px; color: var(--sep-text); transition: color 0.3s ease; }
.sep-icon-cards__more { margin: 18px 0 0; line-height: 19px; }
.sep-icon-cards__more a, .sep-uitgelicht__more a { display: inline-flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 19.2px; color: #000; text-decoration: none; transition: color 0.3s ease; }
.sep-icon-cards__more a span, .sep-uitgelicht__more a span { text-decoration: underline; }
.sep-icon-cards__more a i, .sep-uitgelicht__more a i { margin-left: 7px; font-size: 16px; line-height: 16px; }
.sep-icon-cards__card:hover .sep-icon-cards__title, .sep-icon-cards__card:hover .sep-icon-cards__text { color: #f2f2f2; }
.sep-icon-cards__card:hover .sep-icon-cards__more a { color: #fff; }

/* Beeld met groen paneel (Over ons): beeld 640px op x46, paneel 751px vanaf x671, beeld 15px over het paneel. */
.sep-image-panel { margin-top: 85px; padding-bottom: 50px; }
.sep-image-panel__inner { display: grid; grid-template-columns: minmax(0, 625px) minmax(0, 1fr); align-items: start; padding-left: max(46px, calc(50% - 710px)); } /* op verzoek: het groene paneel loopt rechts door tot de rand van het scherm (bron stopt op 90px) */
.sep-image-panel__figure { position: relative; z-index: 1; width: 102.4%; margin: 15px 0 0; }
.sep-image-panel__figure img { width: 100%; height: auto; border-radius: 15px; }
.sep-image-panel__panel { margin: 100px 0 0 -305px; padding: 100px 90px 100px 405px; border-radius: 10px 0 0 10px; background: #344625; color: #f2f2f2; } /* op verzoek: het paneel begint halverwege de foto (x366) en loopt erachter door; inhoud blijft op x771 */
.sep-image-panel__eyebrow { position: relative; margin: 0 0 18px; padding-left: 60px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 19.2px; color: #f1d2a9; }
.sep-image-panel__eyebrow .flaticon-plant { position: absolute; left: 0; top: 0; width: 40px; height: 40px; font-size: 40px; line-height: 1; color: #f1d2a9; }
.sep-image-panel__heading { max-width: 530px; margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: #fff; }
.sep-image-panel__heading .sep-slide-in { vertical-align: top; }
.sep-image-panel__body { margin: 0 0 40px; font-size: 17px; line-height: 28px; color: #f2f2f2; }
.sep-image-panel__body p { margin: 0 0 20px; }
.sep-image-panel__body p:last-child { margin-bottom: 0; }
.sep-image-panel__boxes { list-style: none; margin: 0; padding: 0; }
.sep-image-panel__box { display: flex; align-items: center; margin: 0 0 15px; padding: 25px 30px; border-radius: 10px; background: #fff; color: var(--sep-text); }
.sep-image-panel__box:last-child { margin-bottom: 0; }
.sep-image-panel__box-icon { position: relative; flex: 0 0 65px; height: 82px; font-size: 65px; line-height: 82px; color: #2a7d2e; }
.sep-image-panel__box-icon i { position: relative; z-index: 1; display: block; line-height: 82px; }
.sep-image-panel__box-icon::after { content: ""; position: absolute; left: 10px; top: 31.5px; width: 55px; height: 55px; border-radius: 50%; background: rgba(42, 125, 46, 0.07); }
.sep-image-panel__box-meta { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.sep-image-panel__box-title { flex: 1 1 auto; margin: 0 20px 18px 25px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-24); font-weight: 600; line-height: 28.8px; letter-spacing: -0.48px; color: #0b3d2c; }
.sep-image-panel__box-text { flex: 1 1 auto; margin: 10px 0 18px; font-family: var(--sep-font-heading); font-size: 17px; font-weight: 500; line-height: 28px; color: var(--sep-text); }

/* Teamleden (Over ons): kolommen van 393px (container met 10px padding), kaart 363px op 15px, foto 360x365, LinkedIn-knop 45px rond. */
.sep-team { padding: 45px 0 53px; }
.sep-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 10px; }
.sep-team__member { width: 363px; max-width: calc(100% - 15px); margin-left: 15px; padding-bottom: 40px; text-align: center; }
.sep-team__photo { width: 360px; max-width: 100%; height: 365px; margin: 0 0 0 1px; }
.sep-team__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.sep-team__name { margin: 25px 0 0; /* 25px onder de foto, gelijk aan de afstand toen het plusje van de bron er nog stond */ font-family: var(--sep-font-heading); font-size: var(--sep-fs-24); font-weight: 600; line-height: 28.8px; letter-spacing: -0.48px; color: #0b3d2c; }
.sep-team__role { margin: 18px 0 0; font-size: 20px; font-weight: 500; line-height: 24px; color: var(--sep-text); }
.sep-team__social { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; margin-top: 20px; border-radius: 50%; background: #3e552b; color: #fff; font-size: 16px; text-decoration: none; transition: background-color 0.2s ease; }
.sep-team__social:hover { background: #0b3d2c; }
/* Vacatures onder het teamblok (Over ons): kop 50px lager en 20px meer tussen streep en kaarten dan op Werken bij, zoals op de bron. */
.sep-team + .sep-vacatures { padding-top: 50px; }
.sep-team + .sep-vacatures .sep-vacatures__grid { padding-top: 35px; }

@media (max-width: 1023px) {
	.sep-intro-columns__inner { grid-template-columns: minmax(0, 1fr); }
	.sep-intro-columns__figure { margin-left: 0; }
	.sep-icon-cards__box { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
	.sep-icon-cards__card { margin: 0; }
	.sep-image-panel__inner { grid-template-columns: minmax(0, 1fr); padding: 0 15px; }
	.sep-image-panel__figure { width: 100%; margin: 0; }
	.sep-image-panel__panel { margin: 30px 0 0; padding: 40px 30px; border-radius: 10px; }
	.sep-image-panel__box { flex-wrap: wrap; }
	.sep-image-panel__box-meta { display: block; }
	.sep-image-panel__box-title { margin: 0 0 8px 20px; }
	.sep-image-panel__box-text { margin: 0 0 0 20px; }
	.sep-team__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-inline: 15px; }
	.sep-team__member { margin-left: 0; }
}
@media (max-width: 767px) {
	.sep-intro-columns__heading {  line-height: 42px; letter-spacing: -0.5px; }
	.sep-intro-columns__figure { width: 100%; }
	.sep-image-panel__heading {  line-height: 42px; letter-spacing: -0.5px; }
}

/* Lichtbak voor projectbeelden (bron: Elementor-lightbox): laag rgba(0,0,0,.8), teller 15px linksboven op 20/19, beeld gecentreerd
   met 70px marge. Op verzoek van Tonny afwijkend van de bron: witte ronde knoppen van 50px met donkergroene pijl op 20px naast de
   foto, en de sluitknop in dezelfde stijl rechtsboven (de bron heeft dunne lichtgrijze pijltjes aan de schermranden). */
.sep-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.8); color: rgba(238, 238, 238, 0.9); }
.sep-lightbox[hidden] { display: none; }
.sep-lightbox-open { overflow: hidden; }
.sep-lightbox__header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 15px 0 20px; }
.sep-lightbox__counter { font-family: var(--sep-font-body); font-size: 15px; line-height: 23px; color: #fff; }
.sep-lightbox__close, .sep-lightbox__nav { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0b3d2c; cursor: pointer; box-shadow: 0 7px 30px rgba(0, 0, 0, 0.25); transition: background-color 0.2s ease, color 0.2s ease; }
.sep-lightbox__close:hover, .sep-lightbox__nav:hover { background: #0b3d2c; color: #fff; }
.sep-lightbox__close:focus-visible, .sep-lightbox__nav:focus-visible { outline: 2px solid #f1d2a9; outline-offset: 2px; }
.sep-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.sep-lightbox__nav--prev { left: -70px; }
.sep-lightbox__nav--next { right: -70px; }
.sep-lightbox__nav--prev svg { transform: scaleX(-1); }
.sep-lightbox > .sep-lightbox__nav--prev { left: 20px; } /* vangnet voor een browser die nog de oude main.js heeft (knoppen buiten het kader) */
.sep-lightbox > .sep-lightbox__nav--next { right: 20px; }
.sep-lightbox__nav[hidden] { display: none; }
.sep-lightbox__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 70px; }
.sep-lightbox__frame { position: relative; display: inline-block; max-width: 100%; }
.sep-lightbox__img { display: block; max-width: min(100%, calc(100vw - 300px)); max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 2px; }
.sep-project__wide a, .sep-project__gallery a { display: block; }
@media (max-width: 767px) {
	.sep-lightbox__nav { position: fixed; top: 50%; width: 40px; height: 40px; }
	.sep-lightbox__nav--prev { left: 10px; }
	.sep-lightbox__nav--next { right: 10px; }
	.sep-lightbox__close { width: 40px; height: 40px; }
	.sep-lightbox__item { padding: 80px 15px 30px; }
	.sep-lightbox__img { max-width: 100%; max-height: calc(100vh - 110px); }
}

/* Knoppen op Voor tuinontwerpers: op verzoek van Tonny de zandknop van het thema (sep-btn--sand), niet de Elementor-knop van de bron. */
/* Pagina-hero, landingsstijl (Voor tuinontwerpers): 880px, inhoud verticaal gecentreerd, bovenregel en subregel 16/20.8. */
.sep-page-hero--landing { height: 880px; padding: 200px 40px 80px; background-position: 50% 50%; }
.sep-page-hero--landing .sep-page-hero__inner { min-height: 0; height: 100%; padding: 0; }
.sep-page-hero__top { margin: 0 0 20px; font-size: 17px; line-height: 28px; color: #f2f2f2; } /* bron 16/20.8, op verzoek van Tonny de standaard 17/28 */
.sep-page-hero--landing .sep-page-hero__title { margin: 0 0 25px; }
.sep-page-hero--landing .sep-page-hero__text { margin: 0 0 20px; font-size: 17px; font-weight: 400; line-height: 28px; } /* bron 16/20.8, op verzoek van Tonny de standaard 17/28 */

/* USP-kaarten: creme band, kaarten 266px die 100px over de hero steken. */
.sep-usp-cards { position: relative; z-index: 2; display: flow-root; padding: 0 0 36px; background: #f8f0e5; } /* flow-root: de negatieve marge van het raster mag niet door de sectie heen vallen, anders schuift de creme band 100px over de hero */
.sep-usp-cards__grid { display: flex; justify-content: center; align-items: stretch; gap: 41px; margin-top: -100px; padding: 0 15px; }
.sep-usp-cards__card { display: flex; flex-direction: column; align-items: center; width: 266px; min-height: 287px; padding: 20px; border-radius: 10px; background: #fff; text-align: center; }
.sep-usp-cards__icon { display: block; font-size: 88px; line-height: 88px; color: #0b3d2c; }
.sep-usp-cards__line { display: block; width: 91px; height: 1px; margin: 19px 0 15px; background: #000; }
.sep-usp-cards__text { margin: 0 0 20px; font-size: 17px; line-height: 28px; color: #0b3d2c; }

/* Tekstkolom: 741px gecentreerd, 40px boven en onder. */
.sep-landing-text { padding: 40px 0; }
.sep-landing-text__inner { max-width: 771px; margin: 0 auto; padding: 10px 15px 0; }
.sep-landing-text__body h2 { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: #0b3d2c; }
.sep-landing-text--kop-40 .sep-landing-text__body h2 { font-size: var(--sep-fs-40); line-height: 48px; letter-spacing: -0.8px; }
.sep-landing-text__body h2 + p, .sep-landing-text__body h2 + ul { margin-top: 0; }
.sep-landing-text__body p { margin: 0 0 20px; font-size: 17px; line-height: 28px; color: #0b3d2c; }
.sep-landing-text__body ul { margin: 0 0 15px; padding: 0 0 0 15px; list-style: disc outside; }
.sep-landing-text__body li { font-size: 17px; line-height: 28px; color: #0b3d2c; }
.sep-landing-text__body strong { font-weight: 700; }
.sep-landing-text__body .has-text-align-center { text-align: center; }
.sep-landing-text__body p:last-child { margin-bottom: 20px; }
.sep-landing-text__body p + h2 { margin-top: 40px; } /* bron: 20px alinea-marge plus 20px widget-marge, zonder samenvallen */
.sep-landing-text__btn { margin: 0 0 10px; }

/* Beeldband: achtergrond over de volle breedte, met parallax. De beeldlaag is 120% hoog en wordt door initParallax() in main.js verschoven, zodat het beeld trager meeloopt dan de pagina. */
.sep-image-band { position: relative; width: 100%; overflow: hidden; }
.sep-image-band__media { position: absolute; left: 0; right: 0; top: -20%; height: 140%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; will-change: transform; }

/* Beeld en tekst, landingsvariant: tekstkolom 613px (padding 10) naast beeld 460x689, gecentreerd, zonder ruimte ertussen. */
.sep-image-text--landing { margin: 40px 0; padding: 0; }
.sep-image-text--landing.sep-image-text--beeld-rechts { padding: 8px 0 7px; } /* bron: beeldkolom rechts staat 8px lager, sectie 704px */
.sep-image-text--landing.sep-image-text--marge-60 { margin: 60px 0; }
.sep-image-text--landing .sep-image-text__inner { grid-template-columns: minmax(0, 613px) minmax(0, 460px); column-gap: 60px; /* op verzoek van Tonny 70px zichtbare lucht tussen tekst en beeld (60 plus 10 tekstpadding); bron had 0 */ justify-content: center; align-items: center; max-width: none; padding-inline: 0; }
.sep-image-text--landing.sep-image-text--beeld-links .sep-image-text__inner { grid-template-columns: minmax(0, 460px) minmax(0, 613px); }
.sep-image-text--landing .sep-image-text__text { padding: 10px; }
.sep-image-text--landing .sep-image-text__title { color: #0b3d2c; }
.sep-image-text--landing .sep-image-text__body { color: #0b3d2c; }
.sep-image-text--landing .sep-image-text__body p:last-child { margin-bottom: 20px; }
.sep-image-text--landing .sep-image-text__figure img { width: 460px; height: 689px; object-fit: cover; border-radius: 15px; }

/* Genummerde kaarten. */
.sep-number-cards { margin: 60px 0; } /* onder 60px, gelijk aan boven (was 40px van de bron), op verzoek van Tonny */
.sep-number-cards__heading { margin: 0 0 30px; padding-top: 10px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-40); font-weight: 700; line-height: 48px; letter-spacing: -0.8px; text-align: center; color: #0b3d2c; }
.sep-number-cards__heading .sep-slide-in { vertical-align: top; }
.sep-number-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 317px)); gap: 40px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.sep-number-cards__card { min-height: 352px; padding: 20px 20px 20px 12px; border-radius: 10px; background: #f8f0e5; }
.sep-number-cards__head { display: flex; align-items: flex-start; gap: 22px; padding-top: 10px; }
.sep-number-cards__number { display: flex; align-items: center; justify-content: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%; background: #0b3d2c; font-family: var(--sep-font-heading); font-size: var(--sep-fs-30); font-weight: 700; line-height: 1; color: #fff; }
.sep-number-cards__title { margin: 0; font-family: var(--sep-font-heading); font-size: var(--sep-fs-24); font-weight: 700; line-height: 28.8px; letter-spacing: -0.48px; color: #0b3d2c; }
.sep-number-cards__line { display: block; width: 263px; height: 0; margin: 24px 0 15px 15px; border-top: 2.5px solid #000; }
.sep-number-cards__text { margin: 0 0 20px 8px; font-size: 17px; line-height: 28px; color: #0b3d2c; }

/* Formulier met contactkaart. */
/* Formulier met contactkaart (acf/form-card), ontwerp "voorstel A" van 6 september: kop en introtekst gecentreerd, daaronder een witte kaart met het formulier links en een creme zijpaneel van 370px met de contactpersoon rechts. */
.sep-form-card { padding: 40px 0 80px; }
.sep-form-card__inner { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.sep-form-card__heading { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-40); font-weight: 700; line-height: 48px; letter-spacing: -0.8px; text-align: center; color: #0b3d2c; }
.sep-form-card__heading .sep-slide-in { vertical-align: top; }
.sep-form-card__text { max-width: 740px; margin: 0 auto; font-size: 17px; line-height: 28px; text-align: center; color: var(--sep-text); }
.sep-form-card__text p { margin: 0 0 20px; }
.sep-form-card__text p:last-child { margin-bottom: 0; }
.sep-form-card__text em { color: #0b3d2c; }
.sep-form-card__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 370px); margin-top: 40px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 7px 60px rgba(0, 0, 0, 0.07); }
.sep-form-card__main { padding: 50px 60px; }
.sep-form-card__main .sep-form { padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sep-form-card__side { padding: 50px 40px; border-left: 1px solid rgba(11, 61, 44, 0.06); background: var(--sep-bg-warm); text-align: center; }
.sep-form-card__label { margin: 0 0 18px; font-family: var(--sep-font-heading); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7466; }
.sep-form-card__photo { width: 150px; height: 150px; margin: 0 auto 24px; border-radius: 50%; overflow: hidden; }
.sep-form-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sep-form-card__name { margin: 0; font-family: var(--sep-font-heading); font-size: var(--sep-fs-24); font-weight: 600; line-height: 28.8px; color: #0b3d2c; }
.sep-form-card__role { margin: 4px 0 0; font-family: var(--sep-font-heading); font-size: 16px; font-weight: 500; line-height: 24px; color: #0b3d2c; }
.sep-form-card__contact { margin: 16px 0 0; font-size: 20px; line-height: 30px; }
.sep-form-card__contact a { display: block; color: #0b3d2c; text-decoration: none; }
.sep-form-card__contact a:hover { text-decoration: underline; }
@media (max-width: 1023px) {
	.sep-form-card__card { grid-template-columns: minmax(0, 1fr); }
	.sep-form-card__main { padding: 30px 20px; }
	.sep-form-card__side { border-left: 0; border-top: 1px solid rgba(11, 61, 44, 0.06); padding: 30px 20px; }
}
@media (max-width: 1099px) {
	.sep-usp-cards__grid { flex-wrap: wrap; }
	.sep-image-text--landing .sep-image-text__inner, .sep-image-text--landing.sep-image-text--beeld-links .sep-image-text__inner { grid-template-columns: minmax(0, 1fr); padding-inline: 15px; }
	.sep-image-text--landing .sep-image-text__figure img { width: 100%; height: auto; }
	.sep-number-cards__grid { grid-template-columns: repeat(auto-fit, 317px); }
}
@media (max-width: 767px) {
	.sep-page-hero--landing { height: auto; min-height: 640px; padding: 140px 20px 140px; }
	.sep-usp-cards__grid { gap: 20px; }
	.sep-usp-cards__card { width: 100%; max-width: 320px; }
	.sep-landing-text__body h2, .sep-landing-text--kop-40 .sep-landing-text__body h2 {  line-height: 40px; letter-spacing: -0.5px; }
	.sep-number-cards__heading {  line-height: 38px; }
	.sep-number-cards__grid { grid-template-columns: minmax(0, 1fr); }
	.sep-number-cards__line { width: auto; margin-right: 8px; }
}

/* Footer: social-knoppen (Facebook, Instagram, LinkedIn uit Bedrijfsgegevens) onder de Contact-knop, zelfde omlijnde stijl als die knop. */
.sep-footer__social { display: flex; gap: 12px; margin: 25px 0 0; padding: 0; list-style: none; }
.sep-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border: 1px solid #fff; border-radius: 50%; color: #fff; font-size: 18px; line-height: 1; transition: background-color .25s, color .25s; }
.sep-footer__social-link:hover, .sep-footer__social-link:focus-visible { background: #fff; color: var(--sep-green-dark); }

/* Sitebrede regel (6 september, op verzoek van Tonny): 20px tussen een H2/H3 en de lopende tekst eronder, 25px onder een H1. Uitzonderingen: koppen boven een kaart, raster, lijst of knoppen houden de bronmaat. */
/* Zakelijk (pagina 74 met kinderen, diensten en projecten met het vinkje Zakelijk): grijs #4a4a4a in plaats van groen, gemeten op spijkerenprins.nl/zakelijk/. */
.sep-zakelijk .sep-sticky, .sep-zakelijk .sep-header.is-stuck { background: #4a4a4a; }
.sep-zakelijk .sep-footer { background: #4a4a4a; }
.sep-zakelijk .sep-topbar__icon { background: #4a4a4a; }
.sep-zakelijk .sep-topbar__item--offerte .sep-topbar__icon { background: #fff; color: #0b3d2c; }
.sep-zakelijk .sep-hero { background: #4a4a4a; }
.sep-zakelijk .sep-hero__shape { background: rgba(74, 74, 74, 0.53); } /* bron: cirkel 835px rgba(74,74,74,.53) */
.sep-zakelijk .sep-vision, .sep-zakelijk .sep-stats { background: #4a4a4a; }
.sep-zakelijk .sep-eyebrow--green { color: #4a4a4a; }
.sep-zakelijk .sep-vision__eyebrow { color: #fff; }
.sep-zakelijk .sep-usps__icon { background: #4a4a4a; }
.sep-zakelijk .sep-design__counter .sep-counter { color: #4a4a4a; }
.sep-zakelijk .sep-hero .sep-btn--sand { background: #fff; border-color: #fff; color: #000; }
.sep-zakelijk .sep-hero .sep-btn--sand:hover { background: #f2f2f2; border-color: #f2f2f2; }
.sep-zakelijk .sep-text-intro .sep-btn--sand, .sep-zakelijk .sep-design .sep-btn--sand { background: transparent; border: 2px solid #000; color: #0b3d2c; }
.sep-zakelijk .sep-text-intro .sep-btn--sand:hover, .sep-zakelijk .sep-design .sep-btn--sand:hover { background: #0b3d2c; border-color: #0b3d2c; color: #fff; }
/* Knop "Voor particulieren" in header en vaste balk: bron 233x59, witte rand 2px, radius 20, padding 15/40. */
.sep-header__cta.sep-btn--outline, .sep-sticky__cta.sep-btn--outline { width: auto; padding: 15px 40px; border: 2px solid #fff; border-radius: 20px; background: transparent; color: #fff; } /* omlijnde headerknop: zakelijk "Voor particulieren", particulier "Zakelijk" */
.sep-header__cta.sep-btn--outline:hover, .sep-sticky__cta.sep-btn--outline:hover { background: #fff; color: var(--sep-green-dark); }
.sep-zakelijk .sep-header__cta:hover, .sep-zakelijk .sep-sticky__cta:hover { background: #fff; color: #4a4a4a; }
/* Grijs logo: bron 227x156 (het grijze vlak zit in het beeld), hier net als het groene logo tegen de bovenrand. */
.sep-zakelijk .sep-header__logo-img--staand { width: 227px; }

/* Zakelijk home: kop met tekst als twee kolommen (bron: kop 550px links, tekst 440px op x901, padding 50/50, tekst en knop bovenaan uitgelijnd). */
.sep-zakelijk .sep-text-intro { padding: 65px 0; } /* 50 sectie plus 15 kolom-padding */
.sep-zakelijk .sep-text-intro__text { display: grid; grid-template-columns: minmax(0, 550px) minmax(0, 440px); column-gap: 180px; align-items: start; max-width: none; }
.sep-zakelijk .sep-text-intro .sep-eyebrow { margin-bottom: 0; }
.sep-zakelijk .sep-text-intro__heading { margin-bottom: 0; }
.sep-zakelijk .sep-text-intro__body p:last-child { margin-bottom: 0; }
.sep-zakelijk .sep-text-intro__btn { margin-top: 28px; }
/* Zakelijk home: dienstenkaarten in twee rijen (bron: 15px boven, 140px tussen de rijen, 48px onder). */
.sep-zakelijk .sep-services { padding: 15px 0 48px; }
.sep-zakelijk .sep-services__grid { row-gap: 140px; }
/* Zakelijk home: tuindesignblok padding 50/100, visieblok 50/85 met 31px onder de kop, statistieken drie kolommen van 370px (eerste twee 45px lager, derde 15px). */
.sep-zakelijk .sep-design { padding: 50px 0 100px; }
.sep-zakelijk .sep-vision { padding: 50px 0 85px; }
.sep-zakelijk .sep-vision__heading { margin-bottom: 31px; }
.sep-zakelijk .sep-stats { padding: 0 0 90px; } /* 15 kolom-padding plus 75 sectie */
.sep-zakelijk .sep-stats__grid { grid-template-columns: repeat(3, minmax(0, 370px)); column-gap: 30px; justify-content: start; }
.sep-zakelijk .sep-stats__item { margin-top: 45px; }
.sep-zakelijk .sep-stats__item:nth-child(3) { margin-top: 15px; }
@media (max-width: 1279px) {
	.sep-zakelijk .sep-text-intro__text { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
	.sep-zakelijk .sep-services__grid { row-gap: 40px; }
	.sep-zakelijk .sep-stats__grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
	.sep-zakelijk .sep-stats__item, .sep-zakelijk .sep-stats__item:nth-child(3) { margin-top: 30px; }
}

/* Logo's onder de foto in het beeldpaneel (zakelijke Over ons: VCA, ISO 9001, Groenkeur; bron: eigen grootte, gecentreerd, in de fotokolom). */
.sep-image-panel__logos { grid-column: 1; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 40px; width: 320px; margin: 40px 0 0; padding: 0; list-style: none; } /* 320px: de strook links van het paneel, dat halverwege de foto begint */
.sep-image-panel__logos img { display: block; max-width: min(300px, 100%); height: auto; }
/* Zakelijk: grijs in plaats van groen in het beeldpaneel, de projecttegels, de teamknoppen en de eyebrows. */
.sep-zakelijk .sep-image-panel__panel { background: #4a4a4a; }
.sep-zakelijk .sep-project-tile__holder { background: #4a4a4a; }
.sep-zakelijk .sep-team__social { background: #4a4a4a; }
.sep-zakelijk .sep-page-intro__eyebrow { color: #4a4a4a; }
.sep-zakelijk .sep-icon-cards__card::before { background: rgba(74, 74, 74, 0.9); }


/* ---------------------------------------------------------------------------
   Nieuws: overzicht (/nieuws/, de berichtenpagina) en het bericht zelf.
   Opgemeten op bron /nieuws/ en /tegenwoordig-ook-digituinen-bij-spijker-en-prins/ bij 1512px.
--------------------------------------------------------------------------- */

/* Overzicht: dezelfde kaarten als het blok Nieuws & blog, drie per rij van 370px met 30px ertussen. */
.sep-news-archive { padding-top: 0; padding-bottom: 65px; }
.sep-news-archive .sep-news__grid { grid-template-columns: repeat(3, minmax(0, 370px)); }
.sep-news-archive__empty { margin: 0; font-size: 17px; line-height: 28px; color: var(--sep-text); }
.sep-news-archive .navigation.pagination { margin-top: 45px; }
.sep-news-archive .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sep-news-archive .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 45px; height: 45px; padding: 0 15px; border: 1px solid rgba(11, 61, 44, 0.1); border-radius: 10px; background: #fff; font-family: var(--sep-font-heading); font-size: 16px; font-weight: 600; color: var(--sep-green-dark); text-decoration: none; transition: background-color 0.3s; }
.sep-news-archive .page-numbers:hover, .sep-news-archive .page-numbers.current { background: rgba(11, 61, 44, 0.07); }

/* Bericht: tekstkolom van 770px zoals de bron, op verzoek zonder de zijbalk en daarom gecentreerd.
   Titel Montserrat 700 30/36 (bron: h2 met 35px erboven, 15px eronder en 10px binnenruimte). */
.sep-detail.sep-post { padding-block: 35px 75px; }
.sep-post__article { width: 100%; max-width: 770px; margin-inline: auto; }
.sep-post .sep-post__title { margin: 0 0 15px; padding-bottom: 10px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-30); font-weight: 700; line-height: 36px; color: var(--sep-green-dark); }

/* Deelknoppen (bron: entry-footer met label "Shares" en vier iconen van 16px, 20px ertussen). */
.sep-share { display: flex; align-items: center; margin: 0; padding: 18px 0 0; }
.sep-content .sep-share__label { margin: 0 20px 0 0; font-family: var(--sep-font-heading); font-size: 16px; font-weight: 600; line-height: 22px; color: var(--sep-green-dark); }
.sep-share__list { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.sep-content .sep-share .sep-share__link { font-weight: 400; color: var(--sep-text); text-decoration: none; }
.sep-content .sep-share .sep-share__link:hover { color: #2a7d2e; }
.sep-share__link { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 22px; font-size: 16px; line-height: 22px; color: var(--sep-text); transition: color 0.3s; }
.sep-share__link:hover, .sep-share__link:focus-visible { color: #2a7d2e; }

@media (max-width: 1279px) {
	.sep-news-archive .sep-news__grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
}


/* ==========================================================================
   Vacaturepagina: hero met beeld, feitenkaarten, de twee lijsten, het verhaal,
   de dagindeling, het tabbladenblok en het groene waaromblok.
   ========================================================================== */

.sep-vac-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.sep-vac-hero__text { background: var(--sep-green-dark); display: flex; justify-content: flex-end; }
/* 740 breed met 140 links laat de tekst exact op de containerrand van 1200px beginnen. */
.sep-vac-hero__inner { display: flex; flex-direction: column; width: 740px; max-width: 100%; padding: calc(var(--sep-header-h) + 40px) 40px 110px 140px; }
.sep-vac-hero__eyebrow { position: relative; margin: 0 0 18px; padding-left: 60px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 19.2px; color: var(--sep-sand); }
.sep-vac-hero__eyebrow .flaticon-plant { position: absolute; left: 0; top: -10px; width: 40px; height: 40px; font-size: 40px; line-height: 1; color: var(--sep-sand); }
.sep-vac-hero__title { margin: 0 0 20px; font-size: var(--sep-fs-45); line-height: 54px; letter-spacing: -0.9px; color: var(--sep-white); }
.sep-vac-hero__intro { margin: 0 0 34px; font-size: 19px; line-height: 30px; color: rgba(255, 255, 255, 0.88); }
.sep-vac-hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sep-vac-hero__media { position: relative; min-height: 540px; background: var(--sep-bg-soft); }
.sep-vac-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sep-vac-hero__media::after { content: ""; position: absolute; inset: 0 0 auto; height: 220px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); pointer-events: none; } /* foto bovenin iets donkerder, zodat de witte navigatie leesbaar is */

.sep-btn--wa { padding: 11px 26px; border: 2px solid rgba(241, 210, 169, 0.75); background: transparent; color: var(--sep-sand); }
.sep-btn--wa:hover, .sep-btn--wa:focus-visible { background: var(--sep-sand); border-color: var(--sep-sand); color: #0b3d2c; }
.sep-btn--wa .sep-glyph { font-size: 20px; }
.sep-btn--wa-groen { border-color: var(--sep-green-dark); color: #0b3d2c; }
.sep-btn--wa-groen:hover, .sep-btn--wa-groen:focus-visible { background: var(--sep-green-dark); border-color: var(--sep-green-dark); color: var(--sep-white); }

.sep-vac-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: -46px; }
.sep-vac-facts__card { display: grid; grid-template-columns: minmax(0, 26px) minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 22px 24px; border: 1px solid var(--sep-border); border-radius: var(--sep-radius); background: var(--sep-white); box-shadow: 0 6px 22px rgba(10, 9, 9, 0.1); }
.sep-vac-facts__icon { grid-row: span 2; font-size: 22px; color: var(--sep-green); }
.sep-vac-facts__label { font-size: 14px; line-height: 20px; color: #6d7468; }
.sep-vac-facts__value { font-family: var(--sep-font-heading); font-size: 17px; font-weight: 600; line-height: 24px; color: #0b3d2c; }

.sep-vac-lists__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px; }
.sep-vac-lists__title { margin: 0 0 22px; font-size: var(--sep-fs-34); line-height: 41px; letter-spacing: -0.6px; }
.sep-vac-lists__subtitle { margin: 0 0 20px; font-size: var(--sep-fs-27); line-height: 33px; }
.sep-vac-lists__list { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.sep-vac-lists__list li { display: grid; grid-template-columns: minmax(0, 22px) minmax(0, 1fr); gap: 14px; align-items: start; }
.sep-vac-lists__list .sep-glyph { margin-top: 4px; font-size: 18px; color: var(--sep-green); }
.sep-vac-lists__list strong { color: #0b3d2c; }
.sep-vac-lists__list--plain { gap: 13px; }
.sep-vac-lists__side { display: flex; flex-direction: column; gap: 30px; }
.sep-vac-lists__card { padding: 36px 38px; border: 1px solid var(--sep-border); border-radius: var(--sep-radius-lg); background: var(--sep-bg-warm); }
.sep-vac-lists__figure { margin: 0; }
.sep-vac-lists__figure img { width: 100%; border-radius: var(--sep-radius-lg); }

.sep-section.sep-vac-story { background: var(--sep-bg-warm); }
.sep-services__head { max-width: calc(var(--sep-container) - 30px); margin: 0 auto 40px; } /* kop op de gewone 1200px-lijn, de kaarten eronder zijn breder */
.sep-services__head .sep-services__heading { margin-bottom: 0; }
.sep-design.is-style-beige { background: var(--sep-bg-warm); } /* blokstijl Beige achtergrond (homepage) */
.sep-vac-facts-band { display: flow-root; background: #fff; } /* wit achter de feitenkaarten (oktober 2026); flow-root zodat de negatieve marge van de kaarten niet doorlekt */
.sep-vac-facts-band:has(+ .sep-vac-story:not(.sep-vac-story--beeld)) { background: var(--sep-bg-warm); } /* crème als er een klassiek verhaalblok op crème onder staat */
.sep-vac-story__inner { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: 15px; }
.sep-vac-story__body h2 { margin: 38px 0 18px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-34); line-height: 41px; font-weight: 700; letter-spacing: -0.6px; color: #0b3d2c; }
.sep-vac-story__body h2:first-child { margin-top: 0; }
.sep-vac-story__body h3 { margin: 28px 0 12px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-22); line-height: 30px; font-weight: 600; color: #0b3d2c; }
.sep-vac-story__body ul { margin: 0 0 20px; padding-left: 22px; list-style: disc; }
.sep-vac-story__body li { margin-bottom: 8px; }
.sep-vac-story__body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.sep-vac-story__body th, .sep-vac-story__body td { padding: 11px 14px; border-bottom: 1px solid #e2e4e0; text-align: left; vertical-align: top; }
.sep-vac-story__body thead th { font-family: var(--sep-font-heading); font-weight: 600; color: #0b3d2c; }
@media (max-width: 680px) { .sep-vac-story__body h2 {  line-height: 34px; } .sep-vac-story__body table { display: block; overflow-x: auto; } }
.sep-vac-story__lead { margin: 0 0 22px; font-family: var(--sep-font-heading); font-size: 27px; line-height: 36px; font-weight: 700; color: #0b3d2c; }
.sep-vac-story__body p { margin: 0 0 20px; }
.sep-vac-story__btn { margin-top: 16px; }

.sep-vac-day__inner { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 60px; align-items: start; }
.sep-vac-day__inner--solo { grid-template-columns: minmax(0, 1fr); }
.sep-vac-day__figure { height: 640px; margin: 0; }
.sep-vac-day__figure img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--sep-radius-lg); }
.sep-vac-day__title { margin: 0 0 26px; font-size: var(--sep-fs-34); line-height: 41px; letter-spacing: -0.6px; }
.sep-vac-day__list { margin: 0; padding: 0; list-style: none; }
.sep-vac-day__row { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 22px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--sep-border); }
.sep-vac-day__row:last-child { border-bottom: 0; }
.sep-vac-day__time { display: inline-flex; align-items: center; justify-content: center; padding: 4px 0; border-radius: var(--sep-radius); background: var(--sep-sand); font-family: var(--sep-font-heading); font-size: 15px; font-weight: 600; color: #0b3d2c; }

.sep-section.sep-vac-tabs { background: var(--sep-bg-warm); }
.sep-vac-tabs__title { margin: 0 0 34px; font-size: var(--sep-fs-34); line-height: 41px; letter-spacing: -0.6px; }
/* Hergebruikt het tabbladencomponent van het visieblok, maar met knoppen in plaats van onderstreping. */
.sep-vac-tabs .sep-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; border-bottom: 0; }
.sep-vac-tabs .sep-tabs__title { padding: 11px 26px; border: 2px solid var(--sep-border); border-radius: var(--sep-radius); background: var(--sep-white); font-family: var(--sep-font-heading); font-size: 16px; font-weight: 600; line-height: 25px; color: #0b3d2c; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.sep-vac-tabs .sep-tabs__title::before { display: none; }
.sep-vac-tabs .sep-tabs__title:hover, .sep-vac-tabs .sep-tabs__title:focus-visible { border-color: var(--sep-green-dark); }
.sep-vac-tabs .sep-tabs__title.is-active { background: var(--sep-green-dark); border-color: var(--sep-green-dark); color: var(--sep-white); }
.sep-vac-tabs .sep-tabs__panels { display: block; }
.sep-vac-tabs .sep-tabs__panel { display: none; visibility: visible; opacity: 1; padding: 38px 42px; border: 1px solid var(--sep-border); border-radius: var(--sep-radius-lg); background: var(--sep-white); }
.sep-vac-tabs .sep-tabs__panel.is-active { display: block; }
.sep-vac-tabs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 48px; margin: 0; padding: 0; list-style: none; }
.sep-vac-tabs__list li { display: grid; grid-template-columns: minmax(0, 20px) minmax(0, 1fr); gap: 13px; align-items: start; }
.sep-vac-tabs__list .sep-glyph { margin-top: 5px; font-size: 15px; color: var(--sep-green); }

.sep-section.sep-vac-why { background: var(--sep-green-dark); }
.sep-vac-why__title { max-width: 760px; margin: 0 0 24px; font-size: var(--sep-fs-34); line-height: 41px; letter-spacing: -0.6px; color: var(--sep-white); }
.sep-vac-why__text { max-width: 940px; color: rgba(255, 255, 255, 0.92); }
.sep-vac-why__text p { margin: 0 0 20px; }
.sep-vac-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 18px; }
.sep-vac-why__figure { margin: 0; }
.sep-vac-why__figure img { width: 100%; aspect-ratio: 270 / 210; object-fit: cover; border-radius: var(--sep-radius-lg); }

.sep-sollicitatie__wa-tekst { margin: 20px 0 12px; color: #fff; }
.sep-vac-vervallen { margin-block: 30px 0; padding: 18px 24px; border: 1px solid var(--sep-border); border-left: 4px solid var(--sep-green-dark); border-radius: var(--sep-radius); background: var(--sep-bg-warm); }
.sep-vac-vervallen p { margin: 0; }

@media (max-width: 1199px) {
	.sep-vac-hero__inner { width: 100%; padding: 60px 40px 90px; }
	.sep-vac-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sep-vac-day__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.sep-vac-day__figure { height: 300px; }
	.sep-vac-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	
}

@media (max-width: 991px) {
	.sep-vac-hero { grid-template-columns: minmax(0, 1fr); }
	.sep-vac-hero__media { min-height: 260px; order: -1; }
	.sep-vac-lists__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.sep-vac-tabs__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
	.sep-vac-hero__inner { padding: 40px 20px 70px; }
	.sep-vac-hero__title {  line-height: 37px; }
	.sep-vac-facts { grid-template-columns: minmax(0, 1fr); margin-top: -30px; }
	.sep-vac-why__grid { grid-template-columns: minmax(0, 1fr); }
	.sep-vac-day__row { grid-template-columns: minmax(0, 74px) minmax(0, 1fr); gap: 16px; }
	.sep-vac-tabs .sep-tabs__panel { padding: 26px 22px; }
	.sep-vac-lists__card { padding: 26px 22px; }
}

/* Uitgelichte projecten (homepage). Kop en link delen hun regels met text-intro en icon-cards. */
.sep-uitgelicht .sep-container { max-width: 1422px; } /* kaarten even breed als het dienstenblok erboven */
.sep-uitgelicht__head { max-width: calc(var(--sep-container) - 30px); margin-inline: auto; } /* kop op de gewone 1200px-lijn */
.sep-uitgelicht__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 40px; align-items: stretch; }
.sep-uitgelicht__item { display: flex; flex-direction: column; background: var(--sep-bg-warm); border-radius: var(--sep-radius); overflow: hidden; }
.sep-uitgelicht__item .sep-project-tile { border-radius: var(--sep-radius) var(--sep-radius) 0 0; }
.sep-uitgelicht__title { margin: 25px 25px 8px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-24); font-weight: 600; line-height: 28.8px; }
.sep-uitgelicht__title a { color: #0b3d2c; text-decoration: none; }
.sep-uitgelicht__title a:hover { color: var(--sep-green); }
.sep-uitgelicht__text { margin: 0 25px 16px; }
.sep-uitgelicht__more { margin: auto 25px 25px; line-height: 19px; } /* margin-top auto: link onderaan, op alle kaarten op gelijke hoogte */
.sep-uitgelicht__actions { margin-top: 45px; text-align: center; }
@media (max-width: 767px) {
	.sep-uitgelicht__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* Uitgelichte projecten: animatie bij in beeld komen */
.sep-uitgelicht__heading .sep-slide-in { vertical-align: top; }
.sep-reveal--rise { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.24, 0.74, 0.58, 1); transition-delay: var(--sep-delay, 0ms); }
.sep-reveal--rise.is-hidden { opacity: 0; transform: translateY(30px); visibility: visible; transition: none; }
.sep-uitgelicht__item .sep-project-tile__media img { transition: transform 220ms linear 0s, scale 1.4s cubic-bezier(0.24, 0.74, 0.58, 1) var(--sep-delay, 0ms); }
.sep-uitgelicht__item.is-hidden .sep-project-tile__media img { scale: 1.08; transition: none; }
@media (prefers-reduced-motion: reduce) {
	.sep-uitgelicht .sep-reveal, .sep-uitgelicht .sep-slide-in__word, .sep-uitgelicht__item .sep-project-tile__media img { opacity: 1 !important; visibility: visible !important; transform: none !important; scale: none !important; transition: none !important; }
}

/* ==========================================================================
   Werken bij, oktober 2026: vacaturekaarten met foto, kaarten met foto, beeld en tekst met open kaarten, tekst met groen paneel
   ========================================================================== */
.sep-vacatures--foto { margin: 0; padding: var(--sep-gap) 0; background: var(--sep-bg-warm); }
.sep-vacatures__kop { max-width: 900px; margin: 0 auto 50px; text-align: center; }
.sep-vacatures__kop .sep-eyebrow { justify-content: center; }
.sep-vacatures__heading .sep-slide-in { vertical-align: top; }
.sep-vacatures__intro { margin: 0; font-size: 17px; line-height: 28px; }
.sep-vacatures__fotogrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; max-width: 1422px; } /* even breed als het dienstenblok op de homepage */
.sep-vacatures__fotokaart { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--sep-border); border-radius: var(--sep-radius-lg); background: #fff; transition: box-shadow 0.3s, transform 0.3s; }
.sep-vacatures__fotokaart:hover { box-shadow: 0 14px 34px rgba(52, 71, 37, 0.12); transform: translateY(-3px); }
.sep-vacatures__foto { aspect-ratio: 4 / 3; overflow: hidden; }
.sep-vacatures__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.sep-vacatures__fotokaart:hover .sep-vacatures__foto img { transform: scale(1.05); }
.sep-vacatures__fotobody { display: flex; flex: 1; flex-direction: column; padding: 24px 24px 28px; }
.sep-vacatures__fototitel { margin: 0 0 10px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--sep-green-dark); }
.sep-vacatures__fototitel .sep-vacatures__card-link::after { border-radius: var(--sep-radius-lg); }
.sep-vacatures__fototekst { margin: 0 0 16px; font-size: 17px; line-height: 28px; }
.sep-vacatures__salaris { margin: auto 0 16px; padding-top: 14px; border-top: 1px solid var(--sep-border); font-size: 17px; font-weight: 600; line-height: 28px; color: var(--sep-green-dark); }
.sep-vacatures__fotoknop { position: relative; z-index: 1; margin-top: auto; }
.sep-vacatures__salaris + .sep-vacatures__fotoknop { margin-top: 0; }
.sep-vacatures__balk { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 30px; padding: 34px 40px; border-radius: var(--sep-radius-lg); background: var(--sep-green-dark); color: #fff; }
.sep-vacatures__balk p { max-width: 700px; margin: 0; font-size: 17px; line-height: 28px; color: #fff; }
.sep-vacatures__balk .sep-btn { flex-shrink: 0; }
.sep-vacatures__balktitel { margin: 0 0 10px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 1.3; }
.sep-vacatures__balktitel a { color: #fff; text-decoration: none; }

.sep-foto-kaarten__kop { max-width: 760px; margin-bottom: 50px; }
.sep-foto-kaarten__heading .sep-slide-in, .sep-tekst-paneel__heading .sep-slide-in { vertical-align: top; }
.sep-foto-kaarten__tekst p { margin: 0; font-size: 17px; line-height: 28px; }
.sep-foto-kaarten__tekst a, .sep-foto-kaarten__body a { color: var(--sep-green); }
.sep-foto-kaarten__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.sep-foto-kaarten__kaart { overflow: hidden; border-radius: var(--sep-radius-lg); background: var(--sep-bg-warm); }
.sep-foto-kaarten__beeld { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sep-foto-kaarten__body { padding: 26px 28px 30px; }
.sep-foto-kaarten__body p { margin: 0 0 12px; font-size: 17px; line-height: 28px; }
.sep-foto-kaarten__body p:last-child { margin-bottom: 0; }
.sep-foto-kaarten__titel { margin: 0 0 10px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--sep-green-dark); }

.sep-image-text--kaarten { margin: 0; padding: var(--sep-gap) 0; background: var(--sep-bg-soft); }
.sep-image-text--kaarten .sep-image-text__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.sep-image-text--kaarten .sep-image-text__figure img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sep-radius-lg); }
.sep-image-text--kaarten .sep-image-text__body { color: var(--sep-text); }
.sep-image-text--kaarten .sep-image-text__body:last-child, .sep-image-text--kaarten .sep-image-text__body p:last-child { margin-bottom: 0; }
.sep-image-text__kaarten { order: 3; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
.sep-image-text__kaart { padding: 34px 36px; border-radius: var(--sep-radius-lg); background: #fff; font-size: 17px; line-height: 28px; }
.sep-image-text__kaart p { margin: 0 0 20px; }
.sep-image-text__kaart p:last-child { margin-bottom: 0; }
.sep-image-text__kaart a { color: var(--sep-green); }
.sep-image-text__kaarttitel { margin: 0 0 10px; font-family: var(--sep-font-heading); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--sep-green-dark); }

.sep-tekst-paneel__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.sep-tekst-paneel__body p { margin: 0 0 20px; font-size: 17px; line-height: 28px; }
.sep-tekst-paneel__body ul { margin: 0 0 20px; padding: 0; list-style: none; }
.sep-tekst-paneel__body li { position: relative; margin-bottom: 10px; padding-left: 38px; font-size: 17px; line-height: 28px; }
.sep-tekst-paneel__body li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--sep-sand); }
.sep-tekst-paneel__body li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 7px; height: 11px; border: solid var(--sep-green-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sep-tekst-paneel__knop { margin-top: 10px; }
.sep-tekst-paneel__paneel { padding: 44px 44px 40px; border-radius: var(--sep-radius-lg); background: var(--sep-green-dark); color: #fff; }
.sep-tekst-paneel__pkop { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: 28px; font-weight: 700; line-height: 36px; letter-spacing: -0.5px; color: #fff; }
.sep-tekst-paneel__feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.sep-tekst-paneel__feiten li { padding: 14px 12px; border-radius: var(--sep-radius); background: rgba(255, 255, 255, 0.08); text-align: center; line-height: 1.3; }
.sep-tekst-paneel__feiten strong { display: block; font-family: var(--sep-font-heading); font-size: 17px; color: var(--sep-sand); }
.sep-tekst-paneel__feiten span { font-size: 14px; }
.sep-tekst-paneel__ptekst p { margin: 0 0 20px; font-size: 17px; line-height: 28px; color: #fff; }
.sep-tekst-paneel__ptekst p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
	.sep-vacatures__fotogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.sep-vacatures__fotogrid, .sep-foto-kaarten__grid, .sep-image-text--kaarten .sep-image-text__inner, .sep-image-text__kaarten, .sep-tekst-paneel__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.sep-vacatures__balk { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; }
	.sep-tekst-paneel__paneel { padding: 30px 24px; }
	.sep-tekst-paneel__feiten { grid-template-columns: minmax(0, 1fr); }
	.sep-tekst-paneel__pkop, .sep-newsletter__title {  line-height: 36px; }
}

/* ==========================================================================
   Vacature hovenier, oktober 2026: verhaal met foto, dagindeling als kaart, projecten met tekst, lijsten met paneel,
   tekstkaarten, stappen met nummer
   ========================================================================== */
.sep-section.sep-vac-story--beeld { background: #fff; }
.sep-vac-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.sep-vac-story__heading { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: var(--sep-green-dark); }
.sep-vac-story__heading .sep-slide-in { vertical-align: top; }
.sep-vac-story--beeld .sep-vac-story__lead { font-family: var(--sep-font-body); font-size: 20px; font-weight: 400; line-height: 32px; color: var(--sep-green-dark); }
.sep-vac-story--beeld .sep-vac-story__body p { font-size: 17px; line-height: 28px; }
.sep-vac-story--beeld .sep-vac-story__body a { color: var(--sep-green); }
.sep-vac-story .sep-vac-story__body ul, .sep-tekst-paneel__ptekst ul { margin: 0 0 20px; padding: 0; list-style: none; }
.sep-vac-story .sep-vac-story__body li, .sep-tekst-paneel__ptekst li { position: relative; margin-bottom: 10px; padding-left: 38px; font-size: 17px; line-height: 28px; }
.sep-vac-story .sep-vac-story__body li::before, .sep-tekst-paneel__ptekst li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--sep-sand); }
.sep-vac-story .sep-vac-story__body li::after, .sep-tekst-paneel__ptekst li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 7px; height: 11px; border: solid var(--sep-green-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sep-vac-story .sep-vac-story__body ul:last-child, .sep-tekst-paneel__ptekst ul:last-child { margin-bottom: 0; }
.sep-tekst-paneel__ptekst li { color: #fff; }
.sep-vac-story__grid:not(:has(.sep-vac-story__figure)) { grid-template-columns: minmax(0, 820px); justify-content: center; } /* zonder foto één gecentreerde kolom */
.sep-tekst-kaarten__tekst ul { margin: 0 0 20px; padding: 0; list-style: none; }
.sep-tekst-kaarten__tekst li { position: relative; margin-bottom: 10px; padding-left: 38px; font-size: 17px; line-height: 28px; }
.sep-tekst-kaarten__tekst li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--sep-sand); }
.sep-tekst-kaarten__tekst li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 7px; height: 11px; border: solid var(--sep-green-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sep-tekst-kaarten__tekst ul:last-child { margin-bottom: 0; }
.sep-vac-fallback ul { margin: 0 0 20px; padding: 0; list-style: none; } /* Open sollicitatie: zelfde vinkjes op een zandkleurig bolletje */
.sep-vac-fallback li { position: relative; margin-bottom: 10px; padding-left: 38px; font-size: 17px; line-height: 28px; }
.sep-vac-fallback li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--sep-sand); }
.sep-vac-fallback li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 7px; height: 11px; border: solid var(--sep-green-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sep-tekst-kaarten__tekst table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.sep-tekst-kaarten__tekst th, .sep-tekst-kaarten__tekst td { padding: 10px 12px; border-bottom: 1px solid var(--sep-border); text-align: left; vertical-align: top; }
.sep-tekst-kaarten__tekst thead th { font-family: var(--sep-font-heading); font-weight: 600; color: #0b3d2c; }
.sep-tekst-kaarten__tekst table:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .sep-tekst-kaarten__tekst table { display: block; overflow-x: auto; } }
.sep-vac-story__figure { margin: 0; }
@media (min-width: 768px) { .sep-vac-story--beeld-links .sep-vac-story__figure { order: -1; } }
.sep-vac-story__figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sep-radius-lg); }

.sep-vac-day--solo { background: var(--sep-bg-warm); }
.sep-vac-day--solo .sep-vac-day__head { max-width: 900px; margin: 0 auto 50px; text-align: center; }
.sep-vac-day--solo .sep-vac-day__head .sep-eyebrow { justify-content: center; }
.sep-vac-day--solo .sep-vac-day__title { margin: 0; font-family: var(--sep-font-heading); font-size: var(--sep-fs-45); font-weight: 700; line-height: 54px; letter-spacing: -0.9px; color: var(--sep-green-dark); }
.sep-vac-day--solo .sep-vac-day__title .sep-slide-in { vertical-align: top; }
.sep-vac-day--solo .sep-vac-day__list { max-width: 900px; margin: 0 auto; border: 1px solid var(--sep-border); border-radius: var(--sep-radius-lg); background: #fff; }
.sep-vac-day--solo .sep-vac-day__row { padding: 16px 30px; border-bottom: 1px solid var(--sep-border); font-size: 17px; line-height: 28px; }
.sep-vac-day--solo .sep-vac-day__row:last-child { border-bottom: 0; }

.sep-uitgelicht__tekst p { margin: 0; font-size: 17px; line-height: 28px; }
.sep-uitgelicht__tekst a { color: var(--sep-green); }
.sep-uitgelicht--midden .sep-uitgelicht__head { max-width: 900px; margin: 0 auto; text-align: center; }
.sep-uitgelicht--midden .sep-uitgelicht__head .sep-eyebrow { justify-content: center; }

.sep-vac-lists--paneel, .sep-tekst-paneel--grijs { background: var(--sep-bg-soft); }
.sep-tekst-paneel__body table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.sep-tekst-paneel__body th, .sep-tekst-paneel__body td { padding: 10px 12px; border-bottom: 1px solid var(--sep-border); text-align: left; vertical-align: top; }
.sep-tekst-paneel__body thead th { font-family: var(--sep-font-heading); font-weight: 600; color: #0b3d2c; }
.sep-tekst-paneel__body a { color: var(--sep-green); }
@media (max-width: 767px) { .sep-tekst-paneel__body table { display: block; overflow-x: auto; } }
.sep-tekst-paneel__lead { margin: 0 0 20px; font-size: 20px; line-height: 32px; color: var(--sep-green-dark); }
.sep-tekst-paneel__lead a { color: var(--sep-green); }
.sep-vac-lists--zonder-paneel .sep-tekst-paneel__inner { grid-template-columns: minmax(0, 1fr); }
.sep-vac-lists--zonder-paneel .sep-tekst-paneel__body ul { columns: 2; column-gap: 60px; }
.sep-vac-lists--zonder-paneel .sep-tekst-paneel__body li { break-inside: avoid; }
@media (max-width: 767px) { .sep-vac-lists--zonder-paneel .sep-tekst-paneel__body ul { columns: 1; } }

.sep-tekst-kaarten__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.sep-tekst-kaarten__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sep-tekst-kaarten__grid--1 { grid-template-columns: minmax(0, 1fr); }
.sep-tekst-kaarten__kaart { padding: 40px 44px; border-radius: var(--sep-radius-lg); background: var(--sep-bg-warm); }
.sep-tekst-kaarten__kop { margin: 0 0 20px; font-family: var(--sep-font-heading); font-size: var(--sep-fs-28); font-weight: 700; line-height: 36px; letter-spacing: -0.5px; color: var(--sep-green-dark); }
.sep-tekst-kaarten__tekst p { margin: 0 0 20px; font-size: 17px; line-height: 28px; }
.sep-tekst-kaarten__tekst p:last-child { margin-bottom: 0; }
.sep-tekst-kaarten__tekst a, .sep-tekst-kaarten__noot a { color: var(--sep-green); }
.sep-tekst-kaarten__noot { margin: 20px 0 0; font-size: 17px; font-weight: 600; line-height: 28px; color: var(--sep-green-dark); }

.sep-steps-cards__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sep-steps-cards__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 830px; }
.sep-steps-cards__nr { display: block; margin-bottom: 12px; font-family: var(--sep-font-heading); font-size: 34px; font-weight: 700; line-height: 1; color: var(--sep-sand); }
.sep-steps-cards__noot { margin-top: 40px; text-align: center; }
.sep-steps-cards__noot p { margin: 0; font-size: 17px; line-height: 28px; }
.sep-steps-cards__noot a { color: var(--sep-green); }

.sep-vacatures__fotogrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--sep-container); }
.sep-vacatures__fotogrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 830px; }
.sep-vacatures__fotogrid--1 { grid-template-columns: minmax(0, 1fr); max-width: 400px; }

@media (max-width: 1024px) {
	.sep-vacatures__fotogrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sep-vac-story__grid { gap: 30px; }
}
@media (max-width: 767px) {
	.sep-vac-story__grid, .sep-tekst-kaarten__grid, .sep-vacatures__fotogrid--3, .sep-vacatures__fotogrid--2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.sep-vac-story__heading, .sep-vac-day--solo .sep-vac-day__title, .sep-sollicitatie__title {  line-height: 42px; letter-spacing: -0.5px; }
	.sep-vac-day--solo .sep-vac-day__row { padding: 14px 20px; }
	.sep-tekst-kaarten__kaart { padding: 28px 24px; }
}

/* Links in lopende tekst (oktober 2026, op verzoek van Tonny): groen en semibold, onderstreept bij hover. Geldt voor
   links zonder eigen klasse in alinea's, lijsten en tabellen; knoppen en "Bekijk project"-links houden hun eigen stijl.
   Op donkergroene vlakken zandkleurig. */
main :where(p, li, td):not([class*="__more"]) > a:not([class]) { color: var(--sep-green); font-weight: 600; text-decoration: none; }
main :where(p, li, td):not([class*="__more"]) > a:not([class]):hover { text-decoration: underline; }
main :where(.sep-tekst-paneel__paneel, .sep-steps-cards__card, .sep-vacatures__balk, .sep-vac-why, .sep-vac-hero, .sep-newsletter, .sep-sollicitatie) :where(p, li, td):not([class*="__more"]) > a:not([class]) { color: var(--sep-sand); }

/* Twee witte secties direct na elkaar (vacatures, Werken bij): geen dubbele sectieafstand, de tweede begint zonder bovenruimte. */
:is(.sep-vac-story--beeld, .sep-tekst-kaarten, .sep-tekst-paneel:not(.sep-tekst-paneel--grijs), .sep-foto-kaarten) + :is(.sep-vac-story--beeld, .sep-tekst-kaarten, .sep-tekst-paneel:not(.sep-tekst-paneel--grijs), .sep-foto-kaarten) { padding-top: 0; }

/* Pagina-intro: plantje voor de eyebrow, zoals op de bron (span met padding-left 60px, icoon 40px absoluut links bovenaan, kleur van de tekst). */
.sep-page-intro__eyebrow { position: relative; padding-left: 60px; }
.sep-page-intro__eyebrow .flaticon-plant { position: absolute; left: 0; top: 0; width: 40px; height: 40px; font-size: 40px; line-height: 1; color: inherit; }

/* Eyebrows 5px dichter bij de kop (oktober 2026, op verzoek van Tonny), voor alle eyebrowvarianten op de site.
   Met translate zodat de afstand tot de kop kleiner wordt zonder de opbouw of de intro-animaties (transform) te raken. */
:is(.sep-eyebrow, [class*="__eyebrow"]):not(i) { translate: 0 5px; }


/* Alleen in de blokeditor: de titel van een pagina, project, dienst of vacature kleiner (was de H1 van 85px), zodat er meer werkruimte is voor de blokken. Raakt de site niet. */
.editor-styles-wrapper .editor-post-title, .editor-styles-wrapper .editor-post-title.wp-block-post-title { font-size: var(--sep-fs-32); line-height: 40px; letter-spacing: 0; margin-bottom: 0; }
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper { margin-top: 24px !important; } /* WordPress zet hier inline 4rem; !important is de enige manier om die te overschrijven */

/* Voor tuinontwerpers: bij een uitklaplijst naast de foto staat de foto bovenaan vast, zodat hij niet verspringt als een item opengaat (de landing-layout centreert verticaal). */
.sep-image-text--landing .sep-image-text__inner:has(.sep-accordion) > .sep-image-text__media { align-self: start; }

/* Plantje in de eyebrows verticaal gecentreerd op de tekstregel (stond op top 0, met een icoon van 40px op een regel van 19px zakte het 10px te laag). */
.sep-vacancy__eyebrow i,
.sep-vacature__eyebrow .flaticon-plant,
.sep-sollicitatie__eyebrow .flaticon-plant,
.sep-contact__eyebrow .flaticon-plant,
.sep-intro-columns__eyebrow .flaticon-plant,
.sep-image-panel__eyebrow .flaticon-plant,
.sep-page-intro__eyebrow .flaticon-plant { top: 50%; transform: translateY(-50%); }


/* Responsive vangnet (november 2026). Alle fr-kolommen staan op minmax(0, …) zodat lange woorden of vaste
   inhoud een kolom niet breder dan het scherm kunnen duwen; vaste minimumbreedtes in auto-fit zijn begrensd
   op 100%. Beelden schalen nooit breder dan hun vak. */
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
.sep-sidebar { grid-template-columns: minmax(0, 1fr); }
.sep-image-panel__logos { max-width: 100%; }
/* Koppen met een inschuivend woord: zolang het woord nog buiten beeld staat mag het de pagina niet breder maken. */
:where(h1, h2, h3):has(> .sep-slide-in) { overflow-x: clip; overflow-clip-margin: 0; }
/* Kaarttitels schalen mee met de breedte van de kaart (cqi), met de kopmaat als bovengrens. Past een lang woord
   dan nog niet, dan breekt de browser het af met een koppelteken, met minimaal 5 letters per deel. */
.sep-service__panel, .sep-dienst-card__meta, .sep-icon-cards__card, .sep-vacatures__card, .sep-project-tile__holder, .sep-contact-card { container-type: inline-size; }
.sep-service__title, .sep-dienst-card__title, .sep-icon-cards__title, .sep-vacatures__card-title, .sep-project-tile__title {
	overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
	hyphenate-limit-chars: 10 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
}
/* Beeldpaneel: titel minimaal zo breed als het langste woord, zodat woorden nooit afbreken; de tekst ernaast krijgt de rest. */
.sep-image-panel__box-title { flex: 0 1 40%; min-width: min-content; }
.sep-service__title { font-size: max(18px, min(clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem), 10.5cqi)); }
/* Contactkaart met een lang woord zonder spaties (e-mailadres): kleiner zodat het op een regel past. */
.sep-contact-card__title--lang { font-size: max(16px, min(var(--sep-fs-24), 7.6cqi)); overflow-wrap: anywhere; }
/* Beeldpaneel op smalle telefoons en tussen 1024 en 1280px (smalle kolom): icoon boven de tekst, zodat lange woorden als hoveniersbedrijf passen. */
@media (max-width: 480px), (min-width: 1024px) and (max-width: 1279px) {
	.sep-image-panel__box { flex-direction: column; align-items: flex-start; padding: 20px; }
	.sep-image-panel__box-title, .sep-image-panel__box-text { margin-left: 0; }
}
/* Vangnet woorden (november 2026). Tekst breekt een woord dat echt niet in het vak past af in plaats van eruit te
   lopen. Op telefoons (tot 480px) breken koppen zo'n woord af met een koppelteken (alleen woorden van 10 letters of
   meer, minimaal 5 letters per deel), bijvoorbeeld Aanplant-werkzaamheden. Op grotere schermen niet, daar past alles. */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, blockquote, figcaption, label { overflow-wrap: break-word; }
@media (max-width: 480px) {
	h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
	p, li, dd { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; } /* alleen hele lange woorden zoals regenwateropvangsystemen */
}
/* Inschuif-animaties (sep-reveal) starten 30px rechts van hun plek. Tijdens de animatie maakte dat de pagina even
   breder dan het scherm, waardoor je op een telefoon de site opzij kon schuiven. overflow-x: clip knipt dat af
   zonder een scrollcontainer te maken, dus sticky elementen (header, zijbalk) blijven werken. */
.site-main, .site-footer { overflow-x: clip; }
/* FAQ en accordeons: nooit afbreken met een koppelteken, een te lang woord gaat als geheel naar de volgende regel. */
.sep-faq, .sep-faq *, .sep-accordion, .sep-accordion * { -webkit-hyphens: manual; hyphens: manual; }
/* Stappen in een smalle kolom (dienstpagina met zijbalk): hele lange woorden zoals onderhoudswerkzaamheden met koppelteken. */
.sep-step__text { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; }
/* Flexrijen met tekst (projectinformatie, checklists): de tekst mag smaller worden dan het langste woord. */
:where(li) > :where(span, p) { min-width: 0; }
.sep-project__info dl div, .sep-project__info div:has(> dd) { flex-wrap: wrap; }
/* Stappenkaarten met 3 kaarten: op mobiel ook onder elkaar (de modifier overschreef de mobiele regel). */
@media (max-width: 767px) { .sep-steps-cards__row.sep-steps-cards__row--3 { grid-template-columns: minmax(0, 1fr); } }
/* Feitenblokjes (Werken bij): zoveel naast elkaar als er passen, minimaal 150px, zodat Nieuwersluis heel blijft. */
.sep-tekst-paneel__feiten { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
/* Landingsbeeld 460px breed, maar nooit breder dan de kolom. */
.sep-image-text--landing .sep-image-text__figure img { width: min(460px, 100%); }
.sep-image-text--landing .sep-image-text__figure { min-width: 0; }
/* Koppen (hero, Over ons-blok): een Enter in de titel is alleen op telefoons een regelafbreking. */
.sep-kop-br { display: none; }
@media (max-width: 767px) { .sep-kop-br { display: inline; } }
/* Projectpagina op telefoon: brede beelden en galerij met dezelfde ruimte ertussen (10px), zodat het een reeks foto's is. */
@media (max-width: 780px) {
	.sep-project__wide { gap: 10px; }
	.sep-project__wide:has(+ .sep-container .sep-project__gallery), .sep-project__wide:has(+ .sep-project__gallery) { padding-bottom: 0; }
	.sep-project__gallery { padding-top: 10px; }
}
/* Volgend project: zwevend venster onderin, alleen op telefoons (template-parts/project-volgende.php). */
.sep-volgende { display: none; }
@media (max-width: 767px) {
	.sep-volgende { display: block; position: fixed; left: 15px; right: 15px; bottom: calc(15px + env(safe-area-inset-bottom)); z-index: 90; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
	.sep-volgende[hidden] { display: none; }
	.sep-volgende.is-zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
	.sep-volgende__link { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 12px; border-radius: var(--sep-radius-lg); background: var(--sep-white); box-shadow: 0 10px 30px rgba(11, 61, 44, 0.18); color: var(--sep-green-dark); text-decoration: none; }
	.sep-volgende__beeld { flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--sep-radius); object-fit: cover; }
	.sep-volgende__tekst { flex: 1 1 auto; min-width: 0; }
	.sep-volgende__label { display: block; margin-bottom: 3px; font-family: var(--sep-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sep-green); }
	.sep-volgende__titel { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--sep-font-heading); font-size: 17px; font-weight: 700; line-height: 1.25; }
	.sep-volgende__pijl { display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sep-sand); color: var(--sep-green-dark); font-size: 18px; }
	.sep-volgende__sluit { position: absolute; top: -10px; right: -6px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 2px solid var(--sep-white); border-radius: 50%; background: var(--sep-green-dark); color: var(--sep-white); font-size: 18px; line-height: 1; cursor: pointer; }
	body:has(.sep-volgende:not([hidden])) .sep-footer { padding-bottom: 110px; } /* ruimte zodat het venster de onderkant van de footer niet afdekt */
}
@media (prefers-reduced-motion: reduce) { .sep-volgende { transition: none; } }
/* Formulierkaart met twee contactpersonen (Tuinontwerpers): onder elkaar, foto 84px links. */
.sep-form-card__side--duo { text-align: left; }
.sep-form-card__side--duo .sep-form-card__label { text-align: center; }
.sep-form-card__people { display: grid; gap: 26px; margin-top: 24px; }
.sep-form-card__person { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; }
.sep-form-card__person-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.sep-form-card__side--duo .sep-form-card__name { margin: 0; font-size: 20px; line-height: 24px; }
.sep-form-card__side--duo .sep-form-card__role { margin: 2px 0 6px; font-size: 14px; line-height: 20px; }
.sep-form-card__side--duo .sep-form-card__contact { margin: 0; font-size: 15px; line-height: 22px; }
.sep-form-card__side--duo .sep-form-card__contact a { display: block; overflow-wrap: anywhere; }
/* Zoekresultaten en 404 (search.php, 404.php): lijst met resultaten, knoppen en zoekveld in de huisstijl. */
.sep-zoek__lijst { margin: 30px 0; padding: 0; list-style: none; }
.sep-zoek__item { padding: 18px 0; border-bottom: 1px solid rgba(11, 61, 44, 0.12); }
.sep-zoek__item:first-child { padding-top: 0; }
.sep-zoek__titel { margin: 0 0 6px; font-size: var(--sep-fs-22, 22px); }
.sep-content .sep-zoek__titel a { color: inherit; text-decoration: none; }
.sep-content .sep-zoek__titel a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sep-zoek__item p { margin: 0; }
.sep-zoek__knoppen { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0; }
.sep-post .search-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin-top: 10px; }
.sep-post .search-form label { flex: 1 1 240px; }
.sep-post .search-form .search-field { width: 100%; height: 52px; padding: 0 18px; border: 1px solid rgba(11, 61, 44, 0.15); border-radius: var(--sep-radius); font: inherit; color: var(--sep-text); background: #fff; }
.sep-post .search-form .search-submit { height: 52px; padding: 0 26px; border: 0; border-radius: var(--sep-radius); background: var(--sep-green-dark); color: #fff; font-family: var(--sep-font-heading); font-weight: 600; cursor: pointer; }
.sep-post .search-form .search-submit:hover { background: var(--sep-green); }
/* Stats (homepage): onder 540px onder elkaar, label 20px. */
@media (max-width: 539px) {
	.sep-stats__grid { grid-template-columns: minmax(0, 1fr); }
	.sep-stats__label { font-size: 20px; }
}
/* Teller in het designblok: tot 400px kleiner, zodat getal en label op een regel passen. */
@media (max-width: 400px) {
	.sep-design__counter .sep-counter { font-size: 28px; }
	.sep-design__counter .sep-counter__plus, .sep-design__counter-label { font-size: 14px; }
	.sep-design__counter-label { margin-inline-start: 0.5em; }
	.sep-design__counter-label { white-space: normal; } /* op 320px valt het label terug op twee regels in plaats van uit beeld */
}
/* Beeldpaneel (Over ons): tot 1280px titel en tekst onder elkaar, anders duwt de tekst de vakken uit beeld. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.sep-image-panel__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Tot 1440px titel en tekst in het vak onder elkaar; naast elkaar is het vak te smal voor woorden als Gecertificeerde. */
@media (min-width: 1024px) and (max-width: 1439px) {
	.sep-image-panel__box-meta { display: block; }
	.sep-image-panel__box-title { margin: 0 0 8px 20px; }
	.sep-image-panel__box-text { margin: 0 0 0 20px; }
}

/* ==========================================================================
   Gravity Forms (november 2026)
   De formulieren draaien op Gravity Forms met de eigen CSS van de plugin uit (inc/gravityforms.php).
   Velden, labels, iconen en de knop gebruiken de bestaande .sep-form-regels hierboven via de
   CSS-klassen per veld; hieronder alleen wat Gravity Forms anders opbouwt.
   ========================================================================== */
.sep-form .gform-body,
.sep-form .gform_body { display: block; }
.sep-form .gform_fields { display: flex; flex-wrap: wrap; gap: 0 20px; }
.sep-form .gfield { min-width: 0; }
.sep-form .ginput_container { margin: 0; }
.sep-form__field--icon .sep-form__label:not(.screen-reader-text) + .ginput_container input { margin-top: 0; }
.sep-form .gform_footer { margin: 0; }
.sep-form .gform_validation_container,
.sep-form .gform_hidden,
.sep-form .gfield--type-hidden,
.sep-form .gfield_required,
.sep-form .gform_fileupload_rules,
iframe[name^="gform_ajax_frame"] { display: none !important; }
.sep-form .gform-loader,
.sep-form .gform_ajax_spinner { margin-left: 15px; vertical-align: middle; }

/* Foutmeldingen: zelfde rood en maat als de oude meldingen. */
.sep-form .gfield_error input,
.sep-form .gfield_error textarea,
.sep-form .gfield_error select { border-color: #b3261e; }
.sep-form .gfield_validation_message { display: block; margin: -22px 0 20px; font-size: 14px; line-height: 18px; color: #b3261e; }
.sep-form .gfield_validation_message:empty,
.sep-form .validation_message--hidden-on-empty:empty { display: none; }
/* Samenvatting boven het formulier (Gravity Forms zet die buiten de formuliertag). */
.gform_wrapper .gform_validation_errors { margin: 0 0 15px; padding: 12px 20px; border-radius: 12px; background: #fff; outline: none; }
.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_submission_error { margin: 0; font-family: var(--sep-font-body); font-size: 16px; font-weight: 400; line-height: 20.8px; letter-spacing: 0; color: #b3261e; }
.gform_wrapper .gform_validation_errors .gform-icon { display: none; }

/* Bevestiging na verzenden: dezelfde kaart als het formulier, met de tekst van de oude statusmelding. */
.gform_confirmation_message { padding: 50px 70px; border-radius: 20px; background: #fff; box-shadow: 0 7px 60px rgba(0, 0, 0, 0.07); margin: 15px 0 0; font-size: 16px; line-height: 20.8px; color: var(--sep-green-dark); margin: 0; }
.sep-newsletter .gform_confirmation_message { padding: 28px; border-radius: var(--sep-radius-lg); box-shadow: none; }

/* Vacature-alert in de groene band: veld en knop naast elkaar. */
.sep-newsletter .sep-form .gform-body { flex: 1 1 220px; }
.sep-newsletter .sep-form .gform_footer { flex: 0 0 auto; }
.sep-newsletter .sep-form .gform_validation_errors { flex-basis: 100%; }
.sep-newsletter .sep-form .gfield_validation_message { margin: 6px 0 0; }

/* Contactkaarten (november 2026): de drie kolommen van 350/350/380px vallen terug op de tabletopmaak zodra de
   beschikbare breedte kleiner is dan 1120px, ook als het venster zelf breder is (smalle kolom, blokeditor met
   zijbalken). Zo breken adres, telefoonnummer en e-mailadres nooit midden in een woord af. */
.sep-contact-cards { container-type: inline-size; }
@container (max-width: 1119px) {
	.sep-contact-cards__grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 350px)); padding: 10px 15px; }
	.sep-contact-card { height: auto; padding: 40px 30px; }
}



/* Cookiemelding (mockup variant A): witte kaart links onder, op mobiel over de volle breedte onderaan. */
.sep-cookie[hidden] { display: none; }
.sep-cookie { position: fixed; left: 32px; bottom: 32px; z-index: 1000; box-sizing: border-box; width: 560px; max-width: calc(100vw - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; padding: 32px; border-radius: var(--sep-radius); background: var(--sep-white); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); color: var(--sep-text); }
.sep-cookie__titel { margin: 0; font-family: var(--sep-font-heading); font-size: 24px; line-height: 30px; font-weight: 700; color: var(--sep-green-dark); }
.sep-cookie__titel--groot { font-size: 28px; line-height: 36px; }
.sep-cookie__tekst { margin: 20px 0 0; font-family: var(--sep-font-body); font-size: 17px; line-height: 28px; }
.sep-cookie__tekst a, .sep-cookie-venster__privacy a { color: var(--sep-green-dark); font-weight: 600; text-decoration: underline; hyphens: none; }
.sep-cookie__knoppen { display: flex; gap: 12px; margin-top: 24px; }
.sep-cookie__knoppen .sep-btn { flex: 1 1 0; padding-left: 16px; padding-right: 16px; cursor: pointer; }
.sep-cookie .sep-btn--ghost, .sep-cookie-venster .sep-btn--ghost { background: var(--sep-white); }
.sep-cookie .sep-btn--ghost:hover, .sep-cookie-venster .sep-btn--ghost:hover { background: var(--sep-green-dark); }
.sep-cookie__link { display: block; margin: 12px auto 0; padding: 8px 12px; border: 0; background: none; font-family: var(--sep-font-heading); font-size: 15px; font-weight: 600; line-height: 25px; color: var(--sep-green-dark); text-decoration: underline; cursor: pointer; }
.sep-cookie-venster { box-sizing: border-box; width: 640px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 40px; border: 0; border-radius: var(--sep-radius); background: var(--sep-white); color: var(--sep-text); }
.sep-cookie-venster::backdrop { background: rgba(0, 0, 0, 0.55); }
.sep-cookie-venster .sep-cookie__tekst { margin-bottom: 8px; }
.sep-cookie-rij { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--sep-border); }
.sep-cookie-rij__titel { font-family: var(--sep-font-heading); font-size: 16px; font-weight: 600; color: var(--sep-green-dark); }
.sep-cookie-rij__tekst { margin-top: 4px; font-family: var(--sep-font-body); font-size: 17px; line-height: 28px; }
.sep-cookie-rij__vast { flex-shrink: 0; font-family: var(--sep-font-heading); font-size: 14px; font-weight: 600; color: var(--sep-green-dark); }
.sep-cookie-schakelaar { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 52px; height: 30px; margin: 0; border-radius: 15px; background: #6f716a; cursor: pointer; transition: background-color 0.2s ease; }
.sep-cookie-schakelaar::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--sep-white); transition: left 0.2s ease; }
.sep-cookie-schakelaar:checked { background: var(--sep-green-dark); }
.sep-cookie-schakelaar:checked::before { left: 25px; }
.sep-cookie-schakelaar:focus-visible, .sep-cookie__link:focus-visible { outline: 2px solid var(--sep-green-dark); outline-offset: 2px; }
.sep-cookie-venster__knoppen { display: flex; gap: 12px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--sep-border); }
.sep-cookie-venster__knoppen .sep-btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; font-size: 15px; white-space: nowrap; cursor: pointer; }
.sep-cookie-venster__privacy { margin: 16px 0 0; font-family: var(--sep-font-body); font-size: 17px; line-height: 28px; text-align: center; }
.sep-footer__legal button { padding: 0; border: 0; background: none; font-family: var(--sep-font-body); font-size: 20px; font-weight: 500; line-height: 20px; color: #fff; text-decoration: underline; text-decoration-color: transparent; cursor: pointer; }
.sep-footer__legal button:hover { text-decoration-color: #fff; }
@media (max-width: 640px) {
.sep-cookie { left: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 100dvh; padding: 24px 20px 20px; border-radius: var(--sep-radius) var(--sep-radius) 0 0; }
.sep-cookie__titel { font-size: 22px; line-height: 28px; }
.sep-cookie__tekst { margin-top: 14px; }
.sep-cookie__knoppen { flex-direction: column; gap: 10px; margin-top: 18px; }
.sep-cookie__knoppen .sep-btn { flex: none; min-height: 48px; }
.sep-cookie-venster { padding: 24px 20px; }
.sep-cookie-venster__knoppen { flex-direction: column; }
.sep-cookie-venster__knoppen .sep-btn { flex: none; min-height: 48px; }
}


/* Kaart op Contact: melding op de plek van de kaart tot de bezoeker toestemming geeft. */
.sep-contact__map.sep-contact__map--melding { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; height: auto; min-height: 545px; padding: 40px; border: 1px solid var(--sep-border); border-radius: var(--sep-radius); background: var(--sep-bg-warm); }
.sep-kaart__titel { margin: 0; font-family: var(--sep-font-heading); font-size: 24px; line-height: 30px; font-weight: 700; color: var(--sep-green-dark); }
.sep-kaart__tekst { margin: 16px 0 0; font-family: var(--sep-font-body); font-size: 17px; line-height: 28px; color: var(--sep-text); }
.sep-kaart__tekst:first-of-type { margin-top: 20px; }
.sep-contact__map--melding .sep-btn { margin-top: 24px; cursor: pointer; }
@media (max-width: 767px) {
.sep-contact__map.sep-contact__map--melding { min-height: 400px; padding: 24px 20px; }
}


/* Vacature-alert: kleine regel over de geldigheid onder het e-mailveld. */
#gform_fields_3 .gfield_description { margin-top: 12px; font-size: 13px; line-height: 18px; }
.sep-form--vacature-alert .gform_footer { align-self: flex-start; margin-top: 0; padding-top: 0; }
.sep-form--vacature-alert .gform_button { height: 51px; padding-top: 0; padding-bottom: 0; }