/**
 * Duistermaat Energy Solutions — component styles.
 *
 * Design tokens come from theme.json as --wp--preset--* custom properties.
 * This file only styles components that blocks cannot express on their own.
 * No build step: this is the file that ships.
 */

:root {
	--dm-accent: var( --wp--preset--color--accent, #8dc63f );
	--dm-base: var( --wp--preset--color--base, #0b0d0c );
	--dm-surface: var( --wp--preset--color--surface, #121513 );
	--dm-surface-raised: var( --wp--preset--color--surface-raised, #181c1a );
	--dm-contrast: var( --wp--preset--color--contrast, #f4f6f4 );
	--dm-muted: var( --wp--preset--color--muted, #a8b0aa );
	--dm-border: var( --wp--preset--color--border, #262a27 );
	--dm-radius-card: 12px;
	--dm-radius-button: 10px;
	--dm-header-height: 72px;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	/* Sticky header must not cover anchor targets. */
	scroll-padding-top: calc( var( --dm-header-height ) + 1rem );
}

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

/* Visible, high-contrast focus on every interactive element. */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --dm-accent );
	outline-offset: 2px;
	border-radius: 4px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var( --dm-accent );
	color: var( --dm-base );
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var( --dm-radius-button ) 0;
}

.skip-link:focus {
	left: 0;
}

/* Images never push the layout around. */
img,
video {
	max-width: 100%;
	height: auto;
}

.wp-block-image img {
	border-radius: var( --dm-radius-card );
}

/* Photos rendered by [dm_photo]. */
.dm-photo {
	display: block;
	width: 100%;
	border-radius: var( --dm-radius-card );
	border: 1px solid var( --dm-border );
	object-fit: cover;
}

/* Shown when the image has not been uploaded yet. */
.dm-photo-missing {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var( --dm-surface );
	border: 1px dashed var( --dm-border );
	border-radius: var( --dm-radius-card );
	color: #6f776f;
	font-size: 0.875rem;
	text-align: center;
	padding: 1rem;
}

/* -------------------------------------------------------------------------
 * Typography helpers
 * ---------------------------------------------------------------------- */

.is-style-eyebrow {
	font-size: 0.8125rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dm-accent );
	margin-bottom: 0.75rem;
}

/* One highlighted word per headline — the only decorative use of green. */
.dm-accent {
	color: var( --dm-accent );
}

.dm-lead {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var( --dm-muted );
	max-width: 62ch;
}

.dm-section-intro {
	color: var( --dm-muted );
	max-width: 60ch;
}

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */

.wp-block-group.is-style-card,
.wp-block-group.is-style-card-hover {
	background: var( --dm-surface );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-card );
	padding: clamp( 1.5rem, 3vw, 2rem );
	height: 100%;
}

.wp-block-group.is-style-card-hover {
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.wp-block-group.is-style-card-hover:hover,
.wp-block-group.is-style-card-hover:focus-within {
	border-color: var( --dm-accent );
	background: var( --dm-surface-raised );
	transform: translateY( -2px );
}

/* Columns need equal-height children for the card border to line up. */
.dm-cards .wp-block-column {
	display: flex;
}

.dm-cards .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/* A constrained group gives its children "margin-left: auto; margin-right:
   auto". In a column flex container those auto margins centre each child and
   shrink it to its content width, which left the icon, the heading and the
   link centred while the longer paragraph filled the card and stayed left.
   Line them all up on the left instead.
   
   The !important is not laziness: WordPress sets those margins with
   !important of its own, so there is no other way to win. */
.dm-cards .wp-block-column > .wp-block-group > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100%;
}

.dm-cards .wp-block-group > .dm-card-link {
	margin-top: auto;
	padding-top: 1rem;
}

.dm-card-link a {
	text-decoration: none;
	font-weight: 600;
}

.dm-card-link a:hover,
.dm-card-link a:focus-visible {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Icons
 * ---------------------------------------------------------------------- */

.dm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	border-radius: var( --dm-radius-button );
	background: rgba( 141, 198, 63, 0.12 );
	border: 1px solid rgba( 141, 198, 63, 0.28 );
	color: var( --dm-accent );
	flex: 0 0 auto;
}

.dm-icon svg {
	width: 22px;
	height: 22px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
 * Tick lists
 * ---------------------------------------------------------------------- */

.wp-block-list.is-style-ticks,
ul.dm-ticks {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
}

.wp-block-list.is-style-ticks li,
ul.dm-ticks li {
	position: relative;
	padding-left: 1.75rem;
	color: var( --dm-muted );
	font-size: 0.9375rem;
}

.wp-block-list.is-style-ticks li::before,
ul.dm-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.34em;
	width: 1.125rem;
	height: 1.125rem;
	background-color: var( --dm-accent );
	-webkit-mask: var( --dm-tick ) center / contain no-repeat;
	mask: var( --dm-tick ) center / contain no-repeat;
}

:root {
	--dm-tick: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E" );
}

/* Stacked variant for in-page lists. */
ul.dm-ticks--stacked {
	flex-direction: column;
	gap: 0.625rem;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var( --dm-contrast );
	border: 1px solid var( --dm-border );
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible {
	background: var( --dm-surface-raised );
	border-color: var( --dm-accent );
	color: var( --dm-contrast );
}

.wp-block-button.is-style-whatsapp .wp-block-button__link,
.dm-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	color: var( --dm-contrast );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-button );
	padding: 0.9rem 1.5rem;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.2;
	text-decoration: none;
}

.wp-block-button.is-style-whatsapp .wp-block-button__link:hover,
.dm-whatsapp:hover,
.dm-whatsapp:focus-visible {
	border-color: var( --dm-accent );
	background: var( --dm-surface-raised );
	color: var( --dm-contrast );
}

.dm-whatsapp svg {
	width: 20px;
	height: 20px;
	fill: #25d366;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.dm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba( 11, 13, 12, 0.88 );
	-webkit-backdrop-filter: saturate( 180% ) blur( 12px );
	backdrop-filter: saturate( 180% ) blur( 12px );
	border-bottom: 1px solid var( --dm-border );
}

.dm-header .wp-block-group {
	min-height: var( --dm-header-height );
}

.dm-logo img,
.dm-logo .custom-logo {
	height: 40px;
	width: auto;
	display: block;
}

/* The wordmark is a lockup next to the mark, not a headline: keep it on one
   line and let the navigation have the rest of the width. */
.dm-header .wp-block-site-title,
.dm-footer .wp-block-site-title {
	font-size: 1.0625rem !important;
	line-height: 1.2;
	white-space: nowrap;
}

.dm-header .wp-block-navigation {
	gap: 0.125rem;
}

.dm-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.625rem;
	border-radius: var( --dm-radius-button );
	white-space: nowrap;
}

/* Below the desktop breakpoint the wordmark would crowd the menu button. */
@media ( max-width: 860px ) {
	.dm-header .wp-block-site-title {
		display: none;
	}
}

.dm-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.dm-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	color: var( --dm-accent );
}

/* Core's navigation overlay, restyled to match the theme. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --dm-base );
	padding: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.375rem;
	font-weight: 600;
	padding: 0.5rem 0;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var( --dm-contrast );
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

.dm-hero {
	padding-top: clamp( 2.5rem, 6vw, 4.5rem );
	padding-bottom: clamp( 3rem, 7vw, 5.5rem );
	border-bottom: 1px solid var( --dm-border );
}

.dm-hero__media img {
	border-radius: var( --dm-radius-card );
	border: 1px solid var( --dm-border );
	width: 100%;
	/* Fixed ratio stops any layout shift while the image decodes. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.dm-hero .wp-block-buttons {
	margin-top: 1.75rem;
	gap: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Section rhythm
 * ---------------------------------------------------------------------- */

.dm-section {
	padding-top: clamp( 3.5rem, 8vw, 6rem );
	padding-bottom: clamp( 3.5rem, 8vw, 6rem );
}

.dm-section--bordered {
	border-top: 1px solid var( --dm-border );
}

.dm-section__head {
	margin-bottom: clamp( 2rem, 4vw, 3rem );
}

/* A constrained group narrows its children to the prose width and centres
   them. For a section heading we want the full wide column instead, so the
   heading lines up with the grid underneath it. */
.dm-section__head > * {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* -------------------------------------------------------------------------
 * Partner logo strip
 * ---------------------------------------------------------------------- */

.dm-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp( 1.5rem, 4vw, 3.5rem );
}

/* The strip is meant to read as quiet, but dimming it with opacity dropped
   the text to 3.4:1 against the page background. Colour it directly instead:
   #8B938D is 6.2:1, which passes AA and still sits back from the headings.
   The grayscale filter stays for the real logo files, where it belongs. */
.dm-logos__item {
	display: flex;
	align-items: center;
	color: #8b938d;
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	transition: color 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.dm-logos__item:hover {
	color: var( --dm-contrast );
}

.dm-logos__item img {
	height: 32px;
	width: auto;
	filter: grayscale( 1 );
	opacity: 0.7;
}

.dm-logos__item:hover img {
	filter: grayscale( 0 );
	opacity: 1;
}

.dm-logos__more {
	color: #8b938d;
	font-size: 0.9375rem;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
 * Reviews
 * ---------------------------------------------------------------------- */

.dm-review {
	background: var( --dm-surface );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-card );
	padding: clamp( 1.5rem, 3vw, 1.875rem );
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	height: 100%;
}

.dm-stars {
	display: inline-flex;
	gap: 2px;
	color: var( --dm-accent );
}

.dm-stars svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.dm-stars .dm-star--empty {
	color: var( --dm-border );
}

.dm-review__text {
	margin: 0;
	color: var( --dm-contrast );
	font-size: 1.0625rem;
	line-height: 1.6;
}

.dm-review__meta {
	margin: 0;
	margin-top: auto;
	padding-top: 0.5rem;
	color: var( --dm-muted );
	font-size: 0.9375rem;
}

.dm-review__name {
	color: var( --dm-contrast );
	font-weight: 600;
}

.dm-reviews-grid + .dm-card-link {
	margin-top: 1.75rem;
}

.dm-reviews-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 1.25rem;
}

/* -------------------------------------------------------------------------
 * Projects
 * ---------------------------------------------------------------------- */

.dm-projects-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
	gap: 1.5rem;
}

.dm-project {
	background: var( --dm-surface );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-card );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 160ms ease, transform 160ms ease;
}

.dm-project:hover,
.dm-project:focus-within {
	border-color: var( --dm-accent );
	transform: translateY( -2px );
}

.dm-project__media {
	display: block;
	aspect-ratio: 3 / 2;
	background: var( --dm-surface-raised );
}

.dm-project__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.dm-project__body {
	padding: 1.25rem 1.375rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.dm-project__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var( --dm-muted );
}

.dm-project__tag {
	border: 1px solid var( --dm-border );
	border-radius: 999px;
	padding: 0.125rem 0.625rem;
}

.dm-project__title {
	margin: 0;
	font-size: 1.1875rem;
	line-height: 1.3;
}

.dm-project__excerpt {
	margin: 0;
	color: var( --dm-muted );
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * FAQ accordion
 *
 * Built on the core/details block, so every question stays editable in the
 * normal editor and the whole thing keeps working with JavaScript switched
 * off. We only restyle what core renders.
 * ---------------------------------------------------------------------- */

.dm-faq {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dm-faq .wp-block-details,
.dm-faq__item {
	background: var( --dm-surface );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-card );
	padding: 0;
	margin: 0;
}

.dm-faq .wp-block-details[open],
.dm-faq__item[open] {
	border-color: rgba( 141, 198, 63, 0.4 );
}

.dm-faq summary {
	position: relative;
	display: block;
	padding: 1.125rem 3.25rem 1.125rem 1.25rem;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var( --dm-contrast );
	cursor: pointer;
	list-style: none;
}

.dm-faq summary::-webkit-details-marker,
.dm-faq summary::marker {
	display: none;
	content: "";
}

.dm-faq summary:hover {
	color: var( --dm-accent );
}

/* Plus sign that becomes a minus when open. */
.dm-faq summary::before,
.dm-faq summary::after {
	content: "";
	position: absolute;
	right: 1.25rem;
	background: var( --dm-accent );
	border-radius: 2px;
	transition: transform 180ms ease, opacity 180ms ease;
}

.dm-faq summary::before {
	top: calc( 1.125rem + 0.68em );
	width: 16px;
	height: 2px;
	margin-top: -1px;
}

.dm-faq summary::after {
	top: calc( 1.125rem + 0.68em - 8px );
	right: calc( 1.25rem + 7px );
	width: 2px;
	height: 16px;
}

.dm-faq [open] > summary::after {
	transform: rotate( 90deg );
	opacity: 0;
}

/* Everything that is not the summary is the answer. */
.dm-faq .wp-block-details > :not( summary ),
.dm-faq__item > :not( summary ) {
	color: var( --dm-muted );
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
	padding: 0 1.25rem;
}

.dm-faq .wp-block-details > :not( summary ):first-of-type,
.dm-faq__item > :not( summary ):first-of-type {
	padding-top: 0;
}

.dm-faq .wp-block-details > :last-child,
.dm-faq__item > :last-child {
	padding-bottom: 1.25rem;
}

.dm-faq__group-title {
	margin: 2.5rem 0 1rem;
	font-size: 1.25rem;
}

.dm-faq__group-title:first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Form
 * ---------------------------------------------------------------------- */

.dm-form-wrap {
	background: var( --dm-surface );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-card );
	padding: clamp( 1.5rem, 3.5vw, 2.25rem );
}

.dm-form-wrap__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

.dm-form-wrap__intro {
	margin: 0 0 1.5rem;
	color: var( --dm-muted );
	font-size: 1rem;
}

/* Validation messages are taken out of the flow and live in this margin.
 *
 * This is load-bearing, not cosmetic. Contact Form 7 validates a field on its
 * `change` event, which fires the moment the visitor clicks from the last
 * field onto the submit button. If the message it inserts is in the flow, it
 * pushes the button down between mousedown and mouseup, no click event is
 * produced, and the form silently does nothing. Keeping messages out of the
 * flow means the button never moves. */
.dm-field {
	position: relative;
	margin-bottom: 2rem;
}

.dm-field__label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --dm-contrast );
}

.dm-field__label .dm-req {
	color: var( --dm-accent );
	margin-left: 2px;
}

.dm-field__hint {
	display: block;
	font-weight: 400;
	color: var( --dm-muted );
	font-size: 0.875rem;
	margin-top: 2px;
}

.dm-form input[type="text"],
.dm-form input[type="email"],
.dm-form input[type="tel"],
.dm-form select,
.dm-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: var( --dm-base );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-button );
	color: var( --dm-contrast );
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.75rem 0.875rem;
	transition: border-color 140ms ease, box-shadow 140ms ease;
	/* 16px minimum stops iOS Safari zooming on focus. */
	-webkit-appearance: none;
	appearance: none;
}

.dm-form textarea {
	min-height: 120px;
	resize: vertical;
}

.dm-form select {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8B0AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 18px;
	padding-right: 2.5rem;
}

.dm-form input:focus,
.dm-form select:focus,
.dm-form textarea:focus {
	border-color: var( --dm-accent );
	box-shadow: 0 0 0 3px rgba( 141, 198, 63, 0.22 );
	outline: none;
}

.dm-form input::placeholder,
.dm-form textarea::placeholder {
	color: #6f776f;
}

/* Consent checkbox */
/* Room for a two-line message, which is what this one wraps to on a phone. */
.dm-consent {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 1.25rem 0 3rem;
	font-size: 0.9375rem;
	color: var( --dm-muted );
	line-height: 1.55;
}

.dm-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var( --dm-accent );
}

.dm-consent a {
	color: var( --dm-accent );
}

/* Inline validation messages, rendered by Contact Form 7. The top margin
   clears the 3px focus ring and its 2px offset. */
.wpcf7-not-valid-tip {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.4375rem;
	color: #ff8a80;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
}

input.wpcf7-not-valid,
select.wpcf7-not-valid,
textarea.wpcf7-not-valid {
	border-color: #ff8a80;
}

.dm-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.25rem;
}

.dm-form__privacy {
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var( --dm-muted );
	line-height: 1.55;
}

/* The honeypot must be unreachable for humans but present for bots. */
.dm-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Contact Form 7 chrome, restyled. */
.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
	border-radius: var( --dm-radius-button );
	border: 1px solid var( --dm-border );
	background: var( --dm-base );
	font-size: 0.9375rem;
	color: var( --dm-contrast );
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #ff8a80;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var( --dm-accent );
}

.wpcf7-spinner {
	background-color: var( --dm-accent );
}

.wpcf7 .wpcf7-submit {
	background: var( --dm-accent );
	color: var( --dm-base );
	border: 1px solid var( --dm-accent );
	border-radius: var( --dm-radius-button );
	padding: 0.9rem 1.5rem;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus-visible {
	background: #a2d95b;
	border-color: #a2d95b;
}

.wpcf7 .wpcf7-submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
 * Two-column FAQ + form block
 * ---------------------------------------------------------------------- */

.dm-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 2rem, 4vw, 3rem );
	align-items: start;
}

@media ( min-width: 900px ) {
	.dm-split {
		grid-template-columns: 1fr 1fr;
	}

	.dm-split--sticky > :last-child {
		position: sticky;
		top: calc( var( --dm-header-height ) + 1.5rem );
	}
}

/* -------------------------------------------------------------------------
 * Steps ("hoe werkt het")
 * ---------------------------------------------------------------------- */

.dm-steps {
	counter-reset: dm-step;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.dm-steps li {
	counter-increment: dm-step;
	background: var( --dm-surface );
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-card );
	padding: 1.5rem 1.375rem;
}

.dm-steps li::before {
	content: counter( dm-step );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: 0.875rem;
	border-radius: 8px;
	background: rgba( 141, 198, 63, 0.12 );
	border: 1px solid rgba( 141, 198, 63, 0.28 );
	color: var( --dm-accent );
	font-weight: 700;
	font-size: 0.9375rem;
}

.dm-steps h3 {
	margin: 0 0 0.375rem;
	font-size: 1.0625rem;
}

.dm-steps p {
	margin: 0;
	color: var( --dm-muted );
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
 * Contact details list
 * ---------------------------------------------------------------------- */

.dm-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.dm-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
}

.dm-contact-list .dm-icon {
	width: 38px;
	height: 38px;
	margin-bottom: 0;
}

.dm-contact-list__label {
	display: block;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --dm-muted );
	margin-bottom: 2px;
}

.dm-contact-list a {
	color: var( --dm-contrast );
	text-decoration: none;
	font-weight: 600;
}

.dm-contact-list a:hover,
.dm-contact-list a:focus-visible {
	color: var( --dm-accent );
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.dm-footer {
	border-top: 1px solid var( --dm-border );
	background: var( --dm-base );
	padding-top: clamp( 3rem, 6vw, 4.5rem );
	padding-bottom: 2rem;
	/* Room for the mobile sticky bar. */
	padding-bottom: calc( 2rem + var( --dm-sticky-bar-height, 0px ) );
}

.dm-footer h2,
.dm-footer h3 {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var( --dm-muted );
	font-weight: 600;
	margin: 0 0 1rem;
}

.dm-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.dm-footer a {
	color: var( --dm-contrast );
	text-decoration: none;
	font-size: 0.9375rem;
}

.dm-footer a:hover,
.dm-footer a:focus-visible {
	color: var( --dm-accent );
	text-decoration: underline;
}

.dm-footer__bottom {
	margin-top: clamp( 2.5rem, 5vw, 3.5rem );
	padding-top: 1.5rem;
	border-top: 1px solid var( --dm-border );
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	align-items: center;
	color: var( --dm-muted );
	font-size: 0.8125rem;
}

.dm-footer .dm-footer__legal,
.dm-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	flex-direction: row;
}

.dm-footer .dm-social,
.dm-social {
	display: flex;
	gap: 0.625rem;
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	flex-direction: row;
}

.dm-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var( --dm-border );
	border-radius: var( --dm-radius-button );
	color: var( --dm-contrast );
}

.dm-social a:hover,
.dm-social a:focus-visible {
	border-color: var( --dm-accent );
	color: var( --dm-accent );
}

.dm-social svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
 * Sticky mobile call bar
 * ---------------------------------------------------------------------- */

.dm-callbar {
	display: none;
}

@media ( max-width: 781px ) {
	:root {
		--dm-sticky-bar-height: 64px;
	}

	.dm-callbar {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		padding: 0.5rem 0.75rem calc( 0.5rem + env( safe-area-inset-bottom ) );
		background: rgba( 11, 13, 12, 0.94 );
		-webkit-backdrop-filter: blur( 12px );
		backdrop-filter: blur( 12px );
		border-top: 1px solid var( --dm-border );
	}

	.dm-callbar a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding: 0.75rem;
		border-radius: var( --dm-radius-button );
		font-weight: 600;
		font-size: 1rem;
		text-decoration: none;
		min-height: 48px;
	}

	/* The bar is rendered inside the footer, where ".dm-footer a" would
	   otherwise win on specificity and repaint these labels. */
	.dm-callbar a.dm-callbar__call {
		background: var( --dm-accent );
		color: var( --dm-base );
	}

	.dm-callbar a.dm-callbar__wa {
		background: transparent;
		color: var( --dm-contrast );
		border: 1px solid var( --dm-border );
	}

	.dm-callbar svg {
		width: 18px;
		height: 18px;
		flex: 0 0 auto;
	}

	.dm-callbar__call svg {
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
	}

	.dm-callbar__wa svg {
		fill: #25d366;
	}
}

/* -------------------------------------------------------------------------
 * 404
 * ---------------------------------------------------------------------- */

.dm-404 {
	text-align: center;
	padding: clamp( 4rem, 12vw, 8rem ) 0;
}

.dm-404__code {
	font-size: clamp( 4rem, 14vw, 7rem );
	font-weight: 700;
	line-height: 1;
	color: var( --dm-accent );
	margin: 0 0 1rem;
	letter-spacing: -0.04em;
}

/* -------------------------------------------------------------------------
 * Legal notice box (privacy / terms placeholders)
 * ---------------------------------------------------------------------- */

.dm-notice {
	border: 1px solid var( --dm-accent );
	background: rgba( 141, 198, 63, 0.08 );
	border-radius: var( --dm-radius-card );
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
}

.dm-notice strong {
	color: var( --dm-accent );
}

.dm-notice p {
	margin: 0.5rem 0 0;
	color: var( --dm-muted );
	font-size: 0.9375rem;
}

.dm-notice p:first-of-type {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * Print
 * ---------------------------------------------------------------------- */

@media print {
	.dm-header,
	.dm-callbar,
	.dm-form-wrap {
		display: none !important;
	}
}