/* ==========================================================================
   De Smet Sanitair — site styles (front-end + editor)
   ========================================================================== */

:root {
	--ds-radius-s: 8px;
	--ds-radius-m: 14px;
	--ds-radius-l: 22px;
	--ds-navy: var(--wp--preset--color--primary, #0D4C80);
	--ds-navy-dark: var(--wp--preset--color--primary-dark, #093A63);
	--ds-blue: #168CD6;
	--ds-red: #E1251B;
	--ds-green: #5DB447;
	--ds-ease: cubic-bezier(.2, .7, .2, 1);
	--ds-header-h: 84px;
}

html {
	scroll-padding-top: calc(var(--ds-header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection { background: #BFD9EE; color: #093A63; }

/* ---------- Focus & skip link (WCAG 2.4.7 / 2.4.11) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ds-blue);
	outline-offset: 3px;
	border-radius: 4px;
}
.has-primary-background-color :where(a, button, summary):focus-visible,
.has-primary-dark-background-color :where(a, button, summary):focus-visible,
.ds-header :where(a, button):focus-visible,
.ds-footer :where(a, button):focus-visible {
	outline-color: #FFFFFF;
}

.skip-link.screen-reader-text:focus {
	background: #FFFFFF;
	color: var(--ds-navy-dark);
	font-weight: 700;
	padding: 14px 22px;
	border-radius: var(--ds-radius-s);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
	z-index: 100000;
}

.screen-reader-text:not(:focus) {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

/* ---------- Typography helpers ---------- */
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
@media (max-width: 600px) {
	/* Only break genuinely long words (e.g. "Badkamerrenovatie"), never short ones like "badkamer". */
	h1, h2 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 13 6 6; }
}

.is-style-ds-eyebrow {
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--link);
	margin-bottom: .25rem !important;
}
.has-primary-background-color .is-style-ds-eyebrow,
.has-primary-dark-background-color .is-style-ds-eyebrow,
.wp-block-cover .is-style-ds-eyebrow {
	color: var(--wp--preset--color--on-dark);
}

.ds-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.has-primary-background-color .ds-lead,
.has-primary-dark-background-color .ds-lead,
.wp-block-cover .ds-lead { color: #E6F0F9; }

/* ---------- Dark sections (navy backgrounds, image covers) ---------- */
:is(.has-primary-background-color, .has-primary-dark-background-color, .has-navy-fade-gradient-background, .wp-block-cover:not(.is-light)) :is(h1, h2, h3, h4) { color: #FFFFFF; }
:is(.has-primary-background-color, .has-primary-dark-background-color, .has-navy-fade-gradient-background, .wp-block-cover:not(.is-light)) a:where(:not(.wp-element-button)) { color: #FFFFFF; }
:is(.has-primary-background-color, .has-primary-dark-background-color, .has-navy-fade-gradient-background, .wp-block-cover:not(.is-light)) a:where(:not(.wp-element-button)):hover { color: #BFD9EE; }

/* ---------- Logo stripes motif (blue / red / green "pipes") ---------- */
.ds-stripes,
.is-style-ds-stripes::after {
	content: "";
	display: block;
	width: 84px;
	height: 15px;
	background:
		linear-gradient(var(--ds-blue), var(--ds-blue)) 0 0 / 100% 3px no-repeat,
		linear-gradient(var(--ds-red), var(--ds-red)) 10px 6px / calc(100% - 10px) 3px no-repeat,
		linear-gradient(var(--ds-green), var(--ds-green)) 20px 12px / calc(100% - 20px) 3px no-repeat;
	border-radius: 2px;
}
.is-style-ds-stripes::after { margin-top: .9rem; }
.is-style-ds-stripes.has-text-align-center::after,
.has-text-align-center > .ds-stripes { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.wp-block-button__link,
.wp-element-button {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	text-decoration: none !important;
	transition: background-color .2s var(--ds-ease), color .2s var(--ds-ease), border-color .2s var(--ds-ease), transform .2s var(--ds-ease), box-shadow .2s var(--ds-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(9, 58, 99, .22); }
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--ds-navy);
	border: 2px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--ds-navy);
	color: #FFFFFF;
	border-color: var(--ds-navy);
}
.has-primary-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-primary-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, .85);
}
.has-primary-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-primary-dark-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #FFFFFF;
	color: var(--ds-navy-dark);
	border-color: #FFFFFF;
}

.wp-block-button.is-style-ds-light > .wp-block-button__link {
	background: #FFFFFF;
	color: var(--ds-navy-dark);
	border-color: #FFFFFF;
}
.wp-block-button.is-style-ds-light > .wp-block-button__link:hover {
	background: #E6F0F9;
	border-color: #E6F0F9;
	color: var(--ds-navy-dark);
}

.ds-icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Header ---------- */
.ds-topbar {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
.ds-topbar a { color: #FFFFFF; font-weight: 700; }
.ds-topbar p { margin: 0; }
.ds-topbar .ds-contact { white-space: nowrap; }
@media (max-width: 1023px) {
	.ds-topbar .ds-topbar__hours { display: none; }
}
@media (max-width: 639px) {
	.ds-topbar .ds-topbar__loc { display: none; }
	/* The meta group is empty here; drop it so it can't force the phone/language group to wrap. */
	.ds-topbar .alignwide > .wp-block-group:has(> .ds-topbar__loc) { display: none; }
	.ds-topbar .wp-block-group.alignwide { justify-content: flex-end; }
}

/* "Home" is reached via the logo on desktop; it is listed in the mobile menu only. */
.ds-header .wp-block-navigation__responsive-container:not(.is-menu-open) .ds-nav-home { display: none; }

/* Language switcher */
.ds-lang-switch ul {
	display: flex;
	align-items: center;
	gap: .15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ds-lang-switch li + li::before {
	content: "|";
	color: rgba(255, 255, 255, .45);
	margin-right: .15rem;
}
.ds-lang-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 36px;
	padding: 0 .4rem;
	border-radius: 6px;
	color: #E6F0F9;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: .04em;
}
.ds-lang-switch a:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.ds-lang-switch a[aria-current="true"] {
	color: #FFFFFF;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* Sticky header: the top bar scrolls away, the main bar stays (top = -topbar height, set by JS). */
.wp-site-blocks > header.wp-block-template-part,
.ds-header-wrap {
	position: sticky;
	top: calc(-1 * var(--ds-topbar-h, 0px));
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part,
.admin-bar .ds-header-wrap { top: calc(32px - var(--ds-topbar-h, 0px)); }
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part,
	.admin-bar .ds-header-wrap { top: calc(-1 * var(--ds-topbar-h, 0px)); }
}
.wp-site-blocks > header.wp-block-template-part + * { margin-block-start: 0; }
.wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0; }

.ds-header {
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(9, 58, 99, .18);
}
.ds-header .wp-block-site-logo img,
.ds-header .ds-logo img {
	display: block;
	height: auto;
	max-height: 46px;
	width: auto;
	border-radius: 6px;
}
.ds-header .ds-logo a { display: inline-block; border-radius: 6px; }
/* The wordmark sits high in its image; nudge it to look optically centred without changing the header height. */
.ds-header .ds-logo { transform: translateY(4px); }
@media (max-width: 600px) {
	.ds-header .ds-logo img { max-height: 36px; }
}

.ds-header .wp-block-navigation a,
.ds-header .wp-block-navigation .wp-block-navigation-item__content {
	color: #FFFFFF;
	text-decoration: none;
	padding: .55rem .25rem;
	border-bottom: 2px solid transparent;
}
.ds-header .wp-block-navigation a:hover,
.ds-header .wp-block-navigation .current-menu-item > a,
.ds-header .wp-block-navigation [aria-current="page"] {
	border-bottom-color: var(--ds-blue);
	color: #FFFFFF;
}
.ds-header .wp-block-navigation__submenu-container {
	background: #FFFFFF !important;
	border: 0 !important;
	border-radius: var(--ds-radius-m);
	box-shadow: 0 18px 40px rgba(9, 58, 99, .2);
	padding: .5rem !important;
	min-width: 260px !important;
}
.ds-header .wp-block-navigation__submenu-container a {
	color: var(--ds-navy-dark) !important;
	padding: .65rem .85rem !important;
	border-radius: var(--ds-radius-s);
	border-bottom: 0 !important;
}
.ds-header .wp-block-navigation__submenu-container a:hover,
.ds-header .wp-block-navigation__submenu-container [aria-current="page"] {
	background: var(--wp--preset--color--sky);
}
.ds-header .wp-block-navigation-item__content { white-space: nowrap; }
.ds-header .wp-block-navigation__responsive-container-open,
.ds-header .wp-block-navigation__responsive-container-close {
	color: #FFFFFF;
	min-width: 48px;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: var(--ds-radius-s);
}
.ds-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }

/*
 * The close button takes the exact place of the menu button: site.js measures that on click and sets the
 * --ds-close-* variables. The overlay only fades in (core also slides it up, which would move the button).
 */
.ds-header .wp-block-navigation__responsive-container-close { display: inline-flex; }
.ds-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
.ds-header .wp-block-navigation__responsive-container[data-ds-close-placed] .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: var(--ds-close-top);
	right: auto;
	left: var(--ds-close-left);
	width: var(--ds-close-w);
	height: var(--ds-close-h);
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open[data-ds-close-placed] .wp-block-navigation__responsive-container-content {
	padding-top: max(4.5rem, calc(var(--ds-close-top) + var(--ds-close-h) + .75rem - 1.25rem));
}
@keyframes ds-overlay-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
	.ds-header .wp-block-navigation__responsive-container.is-menu-open { animation-name: ds-overlay-in; }
}

/* Core collapses the menu below 600px only; this header needs the hamburger below 1200px. */
@media (max-width: 1199.98px) {
	.ds-header .wp-block-navigation { order: 2; }
	.ds-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
	.ds-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Mobile navigation overlay */
.ds-header .wp-block-navigation__responsive-container.is-menu-open {
	/* The desktop nav is right-justified; in the overlay a left-aligned list is easier to scan. */
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	background: var(--ds-navy-dark) !important;
	color: #FFFFFF !important;
	padding: 1.25rem 1.5rem calc(6rem + env(safe-area-inset-bottom));
	text-align: left;
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	gap: .25rem;
	align-items: flex-start;
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	width: 100%;
	gap: 0;
	align-items: stretch;
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start; }
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.375rem;
	width: 100%;
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #FFFFFF !important;
	padding: .6rem 0 !important;
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	box-shadow: none;
	padding: 0 0 .5rem 1rem !important;
}
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	color: #E6F0F9 !important;
	font-size: 1.125rem;
}
/* The light desktop dropdown hover would put near-white text on sky blue in the navy overlay. */
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a:hover,
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container [aria-current="page"] {
	background: rgba(255, 255, 255, .12);
	color: #FFFFFF !important;
}

.ds-header .ds-header-cta .wp-block-button__link,
.ds-header .ds-header-cta .ds-button { white-space: nowrap; flex-shrink: 0; }
@media (min-width: 1200px) and (max-width: 1359.98px) {
	.ds-header .ds-header-cta .ds-hide-tablet { display: none; }
}
/* Below 782px the sticky bottom bar (.ds-mobile-cta) holds both calls to action. */
@media (max-width: 781.98px) {
	.ds-header .ds-header-cta { display: none; }
}

/* ---------- Hero ---------- */
.ds-hero.wp-block-cover {
	min-height: min(88vh, 760px);
}
.ds-hero .wp-block-cover__inner-container { max-width: 1240px; }
.ds-hero h1 {
	color: #FFFFFF;
	max-width: 16ch;
}
.ds-hero .ds-lead { max-width: 46ch; }
.ds-hero .wp-block-cover__image-background { object-position: 70% 50%; }
@media (max-width: 781px) {
	.ds-hero.wp-block-cover { min-height: 640px; }
	.ds-hero .wp-block-cover__image-background { object-position: 62% 50%; }
}
@media (max-width: 600px) {
	/* "Badkamerrenovatie" must fit on one line down to 320px wide screens. */
	.ds-hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.5rem) !important; }
}
.ds-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	padding: 0;
	margin: 1.5rem 0 0;
	list-style: none;
	color: #E6F0F9;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}
.ds-hero-badges li {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}
.ds-hero-badges li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CCBEF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- Trust bar ---------- */
.ds-trust {
	position: relative;
	z-index: 2;
}
/* Card overlaps the bottom edge of the hero. */
.ds-hero + .ds-trust-wrap {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--wp--preset--spacing--60)) !important;
}
.ds-trust strong { display: block; color: var(--ds-navy-dark); line-height: 1.3; }
.ds-trust p { margin: 0; }

/* ---------- Cards ---------- */
.is-style-ds-card {
	background: #FFFFFF;
	border-radius: var(--ds-radius-l);
	box-shadow: var(--wp--preset--shadow--soft);
	border: 1px solid rgba(13, 76, 128, .06);
	overflow: hidden;
}

.ds-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	transition: box-shadow .3s var(--ds-ease), transform .3s var(--ds-ease);
}
.ds-service-card > .wp-block-image,
.ds-service-card > figure {
	margin: 0 !important;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.ds-service-card > .wp-block-image img,
.ds-service-card > figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ds-ease);
}
.ds-service-card .ds-service-card__body {
	padding: 1.5rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	flex: 1;
}
.ds-service-card h3 { font-size: var(--wp--preset--font-size--large); margin: 0; }
.ds-service-card h3 a { color: inherit; text-decoration: none; }
/* Whole card clickable via the heading link (keeps a single, descriptive link per card). */
.ds-service-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ds-service-card p { margin: 0; color: var(--wp--preset--color--muted); }
.ds-service-card .ds-more {
	margin-top: auto;
	padding-top: .5rem;
	font-weight: 700;
	color: var(--wp--preset--color--link);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.ds-service-card .ds-more::after {
	content: "→";
	transition: transform .25s var(--ds-ease);
}
.ds-service-card:focus-within { outline: 3px solid var(--ds-blue); outline-offset: 3px; }
.ds-service-card:focus-within a:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
	.ds-service-card:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lifted); }
	.ds-service-card:hover img { transform: scale(1.05); }
	.ds-service-card:hover .ds-more::after { transform: translateX(4px); }
}
.ds-service-card .ds-tag {
	font-size: .8125rem;
	font-weight: 700;
	color: var(--ds-navy);
	background: var(--wp--preset--color--sky);
	border-radius: 999px;
	padding: .2rem .7rem;
	align-self: flex-start;
}

/* ---------- Lists with checks ---------- */
ul.is-style-ds-checks {
	list-style: none;
	padding-left: 0 !important;
}
ul.is-style-ds-checks > li {
	position: relative;
	padding-left: 2.1rem;
	margin-bottom: .6rem;
}
ul.is-style-ds-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sky) no-repeat center / 70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D4C80' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.has-primary-background-color ul.is-style-ds-checks > li::before,
.has-primary-dark-background-color ul.is-style-ds-checks > li::before {
	background-color: rgba(255, 255, 255, .14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- USP / feature tiles ---------- */
.ds-usp h3 { font-size: var(--wp--preset--font-size--large); margin: 0 0 .35rem; }
.ds-usp p { margin: 0; }
.has-primary-background-color .ds-usp h3,
.has-primary-dark-background-color .ds-usp h3 { color: #FFFFFF; }
.has-primary-background-color .ds-usp p,
.has-primary-dark-background-color .ds-usp p { color: #E6F0F9; }

/* ---------- Icon tiles ----------
   Decorative icons drawn with CSS masks (no SVG markup in content, nothing for screen readers to announce).
   Usage: className "ds-ico ds-ico-shield" on any group/paragraph; "ds-ico--top" stacks the icon above the text. */
.ds-ico {
	--ds-ico-tile: 48px;
	position: relative;
	box-sizing: border-box;
	padding-left: calc(var(--ds-ico-tile) + 1rem) !important;
	min-height: var(--ds-ico-tile);
}
.ds-ico::before,
.ds-ico::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}
.ds-ico::before {
	width: var(--ds-ico-tile);
	height: var(--ds-ico-tile);
	border-radius: 12px;
	background: var(--wp--preset--color--sky);
}
.ds-ico::after {
	width: var(--ds-ico-tile);
	height: var(--ds-ico-tile);
	background: var(--ds-navy);
	-webkit-mask: var(--ds-ico) center / 54% no-repeat;
	mask: var(--ds-ico) center / 54% no-repeat;
}
.ds-ico.ds-ico--top {
	--ds-ico-tile: 52px;
	padding-left: 0 !important;
	padding-top: calc(var(--ds-ico-tile) + 1.1rem) !important;
}
.ds-ico.ds-ico--top::before { border-radius: 14px; }
.has-primary-background-color .ds-ico::before,
.has-primary-dark-background-color .ds-ico::before { background: rgba(255, 255, 255, .12); }
.has-primary-background-color .ds-ico::after,
.has-primary-dark-background-color .ds-ico::after { background: #FFFFFF; }
.has-sky-background-color .ds-ico::before { background: #FFFFFF; }
@media (forced-colors: active) {
	.ds-ico::before { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
	.ds-ico::after { forced-color-adjust: none; background: CanvasText; }
}

.ds-ico-shield { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.ds-ico-flame { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E"); }
.ds-ico-attest { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
.ds-ico-award { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 13.5 17 22l-5-3-5 3 1.5-8.5'/%3E%3C/svg%3E"); }
.ds-ico-user { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.ds-ico-layers { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 10 5-10 5L2 7z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E"); }
.ds-ico-quote { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); }
.ds-ico-sparkle { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.8L20 10l-6.1 1.2L12 17l-1.9-5.8L4 10l6.1-1.2z'/%3E%3Cpath d='M19 17v4M17 19h4'/%3E%3C/svg%3E"); }
.ds-ico-wrench { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.ds-ico-thermo { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z'/%3E%3C/svg%3E"); }
.ds-ico-wind { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2'/%3E%3Cpath d='M9.6 4.6A2 2 0 1 1 11 8H2'/%3E%3Cpath d='M12.6 19.4A2 2 0 1 0 14 16H2'/%3E%3C/svg%3E"); }
.ds-ico-droplet { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E"); }
.ds-ico-clock { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.ds-ico-pin { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ds-ico-home { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
.ds-ico-leaf { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E"); }
.ds-ico-chat { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ds-ico-pencil { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.ds-ico-radiator { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='13' rx='2'/%3E%3Cpath d='M7 5v13M11 5v13M15 5v13M19 5v13M5 21v-3M19 21v-3'/%3E%3C/svg%3E"); }
.ds-ico-calendar { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.ds-ico-euro { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M4 14h9'/%3E%3Cpath d='M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2'/%3E%3C/svg%3E"); }
.ds-ico-heart { --ds-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7z'/%3E%3C/svg%3E"); }

/* ---------- Process steps ---------- */
ol.ds-steps {
	list-style: none;
	padding: 0 !important;
	margin: 0;
	counter-reset: ds-step;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
ol.ds-steps > li {
	counter-increment: ds-step;
	background: #FFFFFF;
	border-radius: var(--ds-radius-m);
	padding: 1.5rem 1.4rem 1.4rem;
	box-shadow: var(--wp--preset--shadow--soft);
	position: relative;
}
ol.ds-steps > li::before {
	content: counter(ds-step);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ds-navy);
	color: #FFFFFF;
	font-weight: 800;
	margin-bottom: .85rem;
}
ol.ds-steps strong { display: block; color: var(--ds-navy-dark); font-size: var(--wp--preset--font-size--large); margin-bottom: .25rem; }

/* ---------- Werkgebied ---------- */
ul.ds-pills {
	list-style: none;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
ul.ds-pills > li {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: .35rem .95rem;
	font-weight: 600;
	color: var(--ds-navy-dark);
}
ul.ds-pills > li.is-home {
	background: var(--ds-navy);
	border-color: var(--ds-navy);
	color: #FFFFFF;
}
.ds-center ul.ds-pills { justify-content: center; }

/* ---------- Media ---------- */
.ds-rounded img,
.wp-block-image.ds-rounded img { border-radius: var(--ds-radius-l); }
.ds-shadow img { box-shadow: var(--wp--preset--shadow--lifted); }
.wp-block-image figcaption { text-align: left; }

/* Media & text rows (Diensten overview): align the text with the page grid, consistent photo crop. */
.ds-split.wp-block-media-text { column-gap: var(--wp--preset--spacing--60); }
.ds-split .wp-block-media-text__content { padding: 0; }
.ds-split .wp-block-media-text__content > * { margin-block: 0; }
.ds-split .wp-block-media-text__content > * + * { margin-block-start: 1.1rem; }
.ds-split .wp-block-media-text__content > .is-style-ds-eyebrow + * { margin-block-start: .5rem; }
.ds-split .wp-block-media-text__content > .wp-block-buttons { margin-block-start: 1.75rem; }
.ds-split .wp-block-media-text__media img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 599.98px) {
	.ds-split.is-stacked-on-mobile .wp-block-media-text__content { padding-top: var(--wp--preset--spacing--40); }
}

.ds-photo-stack {
	position: relative;
}
.ds-photo-stack .ds-photo-badge {
	position: absolute;
	left: -12px;
	bottom: 24px;
	background: #FFFFFF;
	border-radius: var(--ds-radius-m);
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: 1rem 1.25rem;
	max-width: 240px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}
.ds-photo-stack .ds-photo-badge strong { display: block; color: var(--ds-navy-dark); font-size: 1.125rem; }
@media (max-width: 781px) {
	.ds-photo-stack .ds-photo-badge { position: static; margin-top: -2rem; margin-left: 1rem; max-width: none; display: inline-block; }
}

/* ---------- FAQ (details) ---------- */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--ds-navy-dark);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 48px;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	flex: none;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--sky);
	color: var(--ds-navy);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
}
.wp-block-details[open] summary::after { content: "−"; }
.wp-block-details > :not(summary) { margin-top: .75rem; color: var(--wp--preset--color--contrast); }

/* ---------- CTA band ---------- */
.ds-cta-band {
	position: relative;
	overflow: hidden;
	border-radius: var(--ds-radius-l);
}
.ds-cta-band::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: 26px;
	width: 320px;
	height: 40px;
	background:
		linear-gradient(var(--ds-blue), var(--ds-blue)) 0 0 / 100% 5px no-repeat,
		linear-gradient(var(--ds-red), var(--ds-red)) 24px 17px / 100% 5px no-repeat,
		linear-gradient(var(--ds-green), var(--ds-green)) 48px 34px / 100% 5px no-repeat;
	opacity: .9;
	pointer-events: none;
}
@media (max-width: 781px) {
	.ds-cta-band {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
		padding-bottom: calc(var(--wp--preset--spacing--60) + 12px) !important;
	}
	.ds-cta-band::after {
		width: 150px;
		height: 19px;
		bottom: 10px;
		background:
			linear-gradient(var(--ds-blue), var(--ds-blue)) 0 0 / 100% 3px no-repeat,
			linear-gradient(var(--ds-red), var(--ds-red)) 14px 8px / 100% 3px no-repeat,
			linear-gradient(var(--ds-green), var(--ds-green)) 28px 16px / 100% 3px no-repeat;
	}
}

/* ---------- Page hero (inner pages) ---------- */
.ds-page-hero {
	position: relative;
	overflow: hidden;
}
.ds-page-hero::after {
	content: "";
	position: absolute;
	right: -30px;
	bottom: 30px;
	width: 380px;
	height: 44px;
	background:
		linear-gradient(var(--ds-blue), var(--ds-blue)) 0 0 / 100% 5px no-repeat,
		linear-gradient(var(--ds-red), var(--ds-red)) 26px 19px / 100% 5px no-repeat,
		linear-gradient(var(--ds-green), var(--ds-green)) 52px 38px / 100% 5px no-repeat;
	opacity: .85;
	pointer-events: none;
}
.ds-page-hero h1 { color: #FFFFFF; }
@media (max-width: 781px) {
	.ds-page-hero::after { width: 200px; bottom: 16px; }
}

.ds-breadcrumbs { font-size: var(--wp--preset--font-size--small); color: #E6F0F9; margin: 0; }
.ds-breadcrumbs a { color: #FFFFFF; }

/* ---------- Footer ---------- */
.ds-footer { font-size: 1rem; }
.ds-footer a { color: #FFFFFF; }
.ds-footer a:hover { color: #BFD9EE; }
.ds-footer h2 {
	color: #FFFFFF;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 800;
}
.ds-footer ul { list-style: none; padding: 0 !important; margin: 0; }
.ds-footer ul li { margin: .35rem 0; }
.ds-footer .ds-footer__legal { font-size: var(--wp--preset--font-size--small); color: #BFD9EE; }
.ds-footer .ds-footer__legal a { color: #E6F0F9; }
.ds-footer .ds-footer__logo { margin: 0; }
.ds-footer .ds-footer__logo img { max-width: 220px; height: auto; border-radius: 10px; background: #FFFFFF; padding: .5rem .75rem; }
.ds-footer h2 { margin-top: 0; }
.ds-footer .ds-business--hours-short { color: #BFD9EE; font-size: var(--wp--preset--font-size--small); }
.ds-footer__bottom { border-top-style: solid; }
.ds-footer address { font-style: normal; }
@media (min-width: 782px) {
	/* Give the contact column room for the e-mail address on one line. */
	.ds-footer .wp-block-columns > .wp-block-column:last-child { flex-grow: 1.4; }
}

/* ---------- Mobile CTA bar ---------- */
.ds-mobile-cta { display: none; }
@media (max-width: 781px) and (min-height: 520px) {
	.ds-mobile-cta {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		gap: .5rem;
		padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .97);
		box-shadow: 0 -6px 24px rgba(9, 58, 99, .18);
	}
	.ds-mobile-cta a {
		flex: 1;
		min-height: 50px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		border-radius: 10px;
		font-weight: 800;
		line-height: 1.2rem;
		text-align: center;
		text-decoration: none;
		border: 2px solid var(--ds-navy);
	}
	.ds-mobile-cta > p { flex: 1; display: flex; margin: 0; }
	.ds-mobile-cta .ds-mobile-cta__call { background: var(--ds-navy); color: #FFFFFF; }
	.ds-mobile-cta .ds-mobile-cta__quote { background: #FFFFFF; color: var(--ds-navy); }
	/* Keep the end of the page clear of the fixed bar. A spacer inside the footer stays navy;
	   a margin on the last child would be reset by core's constrained-layout rules. */
	.ds-footer::after { content: ""; display: block; height: calc(74px + env(safe-area-inset-bottom)); }
	html { scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.ds-js .ds-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .7s var(--ds-ease), transform .7s var(--ds-ease);
	}
	.ds-js .ds-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Misc ---------- */
.ds-muted { color: var(--wp--preset--color--muted); }
.ds-nowrap { white-space: nowrap; }
.ds-section-intro { max-width: 680px; }
.ds-stat strong { display: block; font-size: var(--wp--preset--font-size--xx-large); color: var(--ds-navy); line-height: 1; font-weight: 800; }

@media print {
	.wp-site-blocks > header.wp-block-template-part, .ds-mobile-cta, .ds-footer nav { display: none !important; }
}