/*
 * Daams design system 1.0.2
 *
 * 1. Tokens           kleuren, letters, maten (één plek, overal hetzelfde)
 * 2. Basis            .ds = buitenste div van een pagina in de nieuwe opmaak
 * 3. Layout           container 1360 px, secties, banden, stapels
 * 4. Typografie       koppen, eyebrow, hgroup (kop vóór eyebrow in de code)
 * 5. Componenten      knoppen, links, hero, kaarten, tegels, FAQ, CTA ...
 * 6. Hulpclasses      u-* (marges, verbergen, tekstbreedte)
 * 7. dz-pagina's      hgroup en hulpclasses voor de bestaande paginabouwstenen
 * 8. Gelijktrekken    alleen met bodyclass .daams-ds (voorbeeld/live via Instellingen)
 * 9. Responsief       767 / 1023 / 1199 px
 */

/* ============ 1. Tokens ============ */
:root {
	--ds-ink: #12201A;
	--ds-ink-2: #3B4542;
	--ds-ink-3: #2C3532;
	--ds-muted: #4A5552;
	--ds-line: #E3DED3;
	--ds-line-2: #D6D0C4;
	--ds-sand: #F3F0E8;
	--ds-white: #FFFFFF;
	--ds-green: #00713B;
	--ds-green-dark: #00532B;
	--ds-green-deep: #0E4A2C;
	--ds-green-tint: #A8D8B9;
	--ds-orange: #E87000;
	--ds-wood: #3B2A1C;
	--ds-placeholder: #D9D3C6;
	--ds-focus: #F3B26B;

	--ds-font-head: 'Dosis', sans-serif;
	--ds-font-body: 'PT Sans', Arial, sans-serif;

	--ds-fs-display: 80px;
	--ds-fs-h2: 56px;
	--ds-fs-h2-s: 40px;
	--ds-fs-t1: 32px;
	--ds-fs-t2: 28px;
	--ds-fs-t3: 26px;
	--ds-fs-t4: 22px;
	--ds-fs-t5: 20px;
	--ds-fs-lead: 20px;
	--ds-fs-l: 18px;
	--ds-fs-base: 17px;
	--ds-fs-s: 16px;
	--ds-fs-xs: 15px;
	--ds-fs-eyebrow: 15px;
	--ds-fs-eyebrow-s: 14px;

	--ds-container: 1360px;
	--ds-gutter: 40px;
	--ds-measure: 70ch;
	--ds-sec: 104px;
	--ds-radius: 6px;
	--ds-radius-s: 4px;
	--ds-shadow: 0 18px 40px rgba(18, 32, 26, 0.16);
	--ds-overlay: linear-gradient(to top, rgba(10, 18, 14, 0.86) 0%, rgba(10, 18, 14, 0.35) 45%, rgba(10, 18, 14, 0) 70%);
	--ds-overlay-tall: linear-gradient(to top, rgba(10, 18, 14, 0.86) 0%, rgba(10, 18, 14, 0.4) 34%, rgba(10, 18, 14, 0) 60%);

	/* Iconen (als masker, kleur volgt de tekst) */
	--ds-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--ds-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--ds-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	--ds-i-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c4 3 6 6.5 6 10a6 6 0 0 1-12 0c0-3.5 2-7 6-10z'/%3E%3Cpath d='M12 21V11'/%3E%3C/svg%3E");
	--ds-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
	--ds-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ============ 2. Basis ============ */
.ds {
	font-family: var(--ds-font-body);
	font-size: var(--ds-fs-base);
	line-height: 1.6;
	color: var(--ds-ink);
	text-align: left;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.l-main .ds :is(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, address) { margin: 0; padding: 0; }
body .l-main .ds :is(h1, h2, h3, h4) { color: inherit; text-transform: none; font-family: var(--ds-font-head); }
.l-main .ds :is(ul, ol), .l-main .ds li { list-style: none; }
.l-main .ds li { margin: 0; padding: 0; }
.l-main .ds li::before { content: none; }
.l-main .ds blockquote { border: 0; background: none; font-style: normal; }
.l-main .ds blockquote::before, .l-main .ds blockquote::after { content: none; }
.ds :where(img) { display: block; max-width: 100%; height: auto; object-position: var(--ds-ox, 50%) var(--ds-oy, 50%); }
.l-main .ds a { text-decoration: none; }
.ds a:focus-visible, .ds summary:focus-visible, .ds [tabindex]:focus-visible { outline: 3px solid var(--ds-focus); outline-offset: 2px; }

/* ============ 3. Layout ============ */
.ds-wrap { max-width: var(--ds-container); margin-left: auto; margin-right: auto; padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
.ds > section, .ds-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.ds-sec { padding-top: var(--ds-sec); padding-bottom: var(--ds-sec); }
.ds-sec--cont { padding-top: 24px; }   /* sectie die doorloopt op dezelfde achtergrond */
.ds-bg-white { background: var(--ds-white); }
.ds-bg-sand { background: var(--ds-sand); }
.ds-bg-green { background: var(--ds-green); color: var(--ds-white); }
.ds-bg-deep { background: var(--ds-green-deep); color: var(--ds-white); }
.ds-line-b { border-bottom: 1px solid var(--ds-line); }
.ds-stack { display: flex; flex-direction: column; gap: 40px; }
.ds-stack--m { gap: 28px; }
.ds-stack--s { gap: 24px; }
.ds-stack--xs { gap: 16px; }
.ds-stack > .ds-more, .ds-stack > .ds-btn { align-self: flex-start; }
.ds-stack > .ds-hgroup { max-width: 760px; }   /* losse sectietitel: niet over de hele breedte */

/* Kop van een sectie: titel links, toelichting of link rechts */
.ds-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; }
.ds-head__main { flex: 1 1 420px; min-width: 0; }
.ds-head__aside { flex: 1 1 380px; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.ds-head--compact .ds-head__main { flex: 0 1 auto; }
.ds-head--compact .ds-head__aside { flex: 0 1 auto; max-width: none; }

/* Twee kolommen (foto + tekst) */
.ds-split { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center; }
.ds-split__media { flex: 1 1 440px; min-width: 0; }
.ds-split__body { flex: 1 1 480px; min-width: 0; }
.ds .ds-split__img { width: 100%; height: 640px; object-fit: cover; border-radius: var(--ds-radius); }

/* ============ 4. Typografie ============ */
.ds-display, .ds-h2, .ds-t1, .ds-t2, .ds-t3, .ds-t4, .ds-t5 { font-family: var(--ds-font-head); font-weight: 700; }
/* Maten met !important: het thema en de mobiele kopregels van "Daams uitbreidingen" zetten h1/h2 hard */
.l-main .ds .ds-display { font-size: var(--ds-fs-display) !important; line-height: 0.98 !important; }
.l-main .ds .ds-h2 { font-size: var(--ds-fs-h2) !important; line-height: 1.02 !important; }
.l-main .ds .ds-h2.ds-h2--s { font-size: var(--ds-fs-h2-s) !important; line-height: 1.05 !important; }
.l-main .ds .ds-t1 { font-size: var(--ds-fs-t1) !important; line-height: 1.15 !important; }
.l-main .ds .ds-t2 { font-size: var(--ds-fs-t2) !important; line-height: 1.15 !important; }
.l-main .ds .ds-t3 { font-size: var(--ds-fs-t3) !important; line-height: 1.2 !important; }
.l-main .ds .ds-t4 { font-size: var(--ds-fs-t4) !important; line-height: 1.25 !important; }
.l-main .ds .ds-t5 { font-size: var(--ds-fs-t5) !important; line-height: 1.25 !important; }
.ds-lead { font-size: var(--ds-fs-lead); line-height: 1.55; color: var(--ds-ink-2); max-width: 33em; }
.ds-text-l { font-size: var(--ds-fs-l); color: var(--ds-ink-2); }
.ds-text-s { font-size: var(--ds-fs-s); color: var(--ds-muted); }
.ds-text-xs { font-size: var(--ds-fs-xs); color: var(--ds-muted); }
.ds-strong { font-weight: 700; }

/* Eyebrow (bovenregel). Staat in de code ná de kop, zie .ds-hgroup */
.ds-eyebrow { font-family: var(--ds-font-head); font-weight: 700; font-size: var(--ds-fs-eyebrow); line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-green); }
.ds-eyebrow--s { font-size: var(--ds-fs-eyebrow-s); }
.ds-eyebrow--rule { display: flex; align-items: center; gap: 12px; }
.ds-eyebrow--rule::before { content: ""; flex: none; width: 36px; height: 2px; background: currentColor; }
.ds-on-dark .ds-eyebrow, .ds-bg-deep .ds-eyebrow, .ds-card--deep .ds-eyebrow { color: var(--ds-green-tint); }

/* hgroup: kop eerst in de HTML (schermlezers, SEO), eyebrow visueel erboven */
.ds-hgroup { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ds-hgroup > .ds-eyebrow { order: -1; }
.ds-hgroup--s { gap: 4px; }
.ds-hgroup--m { gap: 8px; }

.ds-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============ 5. Componenten ============ */

/* Knoppen */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 26px; border: 2px solid transparent; border-radius: var(--ds-radius-s); font-family: var(--ds-font-head); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter 0.15s; }
.ds-btn:hover { filter: brightness(0.92); }
.ds-btn--m { height: 52px; padding: 0 24px; font-size: 17px; letter-spacing: 0; }
.ds-btn--s { height: 48px; padding: 0 20px; font-size: 16px; letter-spacing: 0; }
.l-main .ds a.ds-btn--primary, .l-main .ds a.ds-btn--primary:hover { background: var(--ds-green); border-color: var(--ds-green); color: var(--ds-white) !important; }
.l-main .ds a.ds-btn--ghost, .l-main .ds a.ds-btn--ghost:hover { background: transparent; border-color: var(--ds-ink); color: var(--ds-ink) !important; }
.l-main .ds a.ds-btn--dark, .l-main .ds a.ds-btn--dark:hover { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-white) !important; }
.l-main .ds a.ds-btn--light, .l-main .ds a.ds-btn--light:hover { background: var(--ds-white); border-color: var(--ds-white); color: var(--ds-green-dark) !important; }
.l-main .ds .ds-card--deep a.ds-btn--light { color: var(--ds-green-deep) !important; }
.l-main .ds a.ds-btn--outline-light, .l-main .ds a.ds-btn--outline-light:hover { background: transparent; border-color: var(--ds-white); color: var(--ds-white) !important; }
.ds-btn--arrow::after, .ds-more::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ds-i-arrow) center / contain no-repeat; mask: var(--ds-i-arrow) center / contain no-repeat; }
.ds-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* Tekstlink met pijl */
.ds-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--ds-fs-s); color: var(--ds-green); }
.ds-more::after { width: 16px; height: 16px; }
.l-main .ds a.ds-more, .l-main .ds a.ds-more:hover { color: var(--ds-green) !important; }
.l-main .ds a.ds-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.l-main .ds a.ds-more--ink, .l-main .ds a.ds-more--ink:hover { color: var(--ds-ink) !important; text-decoration: underline; text-underline-offset: 4px; }
.ds-more--s { font-size: var(--ds-fs-xs); }

/* Telefoonlink met icoon */
.ds-tel { display: inline-flex; align-items: center; gap: 8px; padding: 12px 4px; font-weight: 700; }
.ds-tel::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ds-i-phone) center / contain no-repeat; mask: var(--ds-i-phone) center / contain no-repeat; }
.l-main .ds a.ds-tel, .l-main .ds a.ds-tel:hover { color: var(--ds-ink) !important; }

/* Gewone links in lopende tekst */
.l-main .ds a.ds-link, .l-main .ds .ds-linklist a { color: var(--ds-green) !important; font-weight: 700; }
.l-main .ds a.ds-link:hover, .l-main .ds .ds-linklist a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Afbeelding die zijn vak vult; focuspunt met u-ox-* / u-oy-* */
.ds .ds-cover { width: 100%; height: 100%; object-fit: cover; }

/* --- Hero --- */
.ds-hero { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: stretch; padding-top: 56px; padding-bottom: 72px; }
.ds-hero__text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 24px 0; }
.ds-hero__text > .ds-hgroup { gap: 28px; }
.ds-hero__meta { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.ds-hero__media { flex: 1 1 480px; min-width: 0; position: relative; }
.ds-hero__photo { position: relative; height: 700px; border-radius: var(--ds-radius); overflow: hidden; background: var(--ds-placeholder); }
.ds .ds-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Liniaal (decoratief) */
.ds-ruler { height: 12px; border-top: 1px solid var(--ds-ink); background-image: repeating-linear-gradient(90deg, var(--ds-ink) 0 1px, transparent 1px 50px), repeating-linear-gradient(90deg, rgba(18, 32, 26, 0.45) 0 1px, transparent 1px 10px); background-size: 100% 12px, 100% 6px; background-repeat: no-repeat; background-position: left top, left top; }

/* Kerncijfers */
.ds-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.ds-fact { display: flex; flex-direction: column; gap: 2px; }
.ds-fact__t { font-family: var(--ds-font-head); font-weight: 700; font-size: var(--ds-fs-t4); line-height: 1.2; color: var(--ds-ink); }
.ds-fact__d { font-size: var(--ds-fs-xs); color: var(--ds-muted); }

/* Statuskaart winkel (open/gesloten via daams-ds.js) */
.ds-status-card { position: absolute; left: -32px; bottom: 36px; width: 330px; max-width: calc(100% - 32px); background: var(--ds-white); border-radius: var(--ds-radius); padding: 20px 22px; box-shadow: var(--ds-shadow); display: flex; flex-direction: column; gap: 10px; }
.ds-status { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: var(--ds-fs-xs); color: var(--ds-ink); }
.ds-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #9AA3A4; box-shadow: 0 0 0 4px rgba(154, 163, 164, 0.2); }
.ds-dot.is-open { background: #1E9E57; box-shadow: 0 0 0 4px rgba(30, 158, 87, 0.18); }
.ds-dot.is-closed { background: var(--ds-orange); box-shadow: 0 0 0 4px rgba(232, 112, 0, 0.18); }
.ds-status-card__addr { font-size: var(--ds-fs-xs); line-height: 1.5; color: var(--ds-ink-2); }

/* --- Keuzeroutes (drie grote links) --- */
.ds-intents { display: flex; flex-wrap: wrap; }
.ds-intent { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 36px 32px; transition: background 0.15s; }
.ds-intent:first-child { padding-left: 0; }
.ds-intent:last-child { padding-right: 0; }
.ds-intent + .ds-intent { border-left: 1px solid var(--ds-line); }
.l-main .ds a.ds-intent, .l-main .ds a.ds-intent:hover { color: var(--ds-ink) !important; }
.ds-intent:hover { background: var(--ds-sand); }
.ds-intent .ds-hgroup { gap: 8px; }
.ds-intent .ds-more { margin-top: auto; padding-top: 10px; font-size: var(--ds-fs-xs); }

/* --- Bento met fototegels --- */
.ds-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 16px; }
.ds-tile { position: relative; display: block; overflow: hidden; border-radius: var(--ds-radius); background: var(--ds-wood); }
.l-main .ds a.ds-tile, .l-main .ds a.ds-tile:hover { color: var(--ds-white) !important; }
.ds-tile--tall { grid-row: span 2; }
.ds-tile--wide { grid-column: span 2; }
.ds .ds-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ds-tile:hover .ds-tile__img { transform: scale(1.035); }
.ds-tile::after { content: ""; position: absolute; inset: 0; background: var(--ds-overlay); }
.ds-tile--tall::after { background: var(--ds-overlay-tall); }
.ds-tile__body { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.ds-tile--tall .ds-tile__body, .ds-tile--wide .ds-tile__body { left: 28px; right: 28px; bottom: 26px; gap: 6px; }
.ds-tile__d { font-size: var(--ds-fs-xs); line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.ds-tile--tall .ds-tile__d { font-size: var(--ds-fs-s); }

/* Zandvlak met linkjes (bijv. tuinaccessoires) */
.ds-panel { border-radius: var(--ds-radius); background: var(--ds-sand); padding: 30px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.ds-panel--wide { grid-column: span 2; }
.ds-linklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; font-size: var(--ds-fs-s); }
.ds-panel > .ds-more { align-self: flex-start; }

/* --- Kaarten (foto boven, tekst onder) --- */
.ds-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.ds-card { flex: 1 1 460px; min-width: 0; background: var(--ds-white); border-radius: var(--ds-radius); overflow: hidden; display: flex; flex-direction: column; }
.ds-card--deep { background: var(--ds-green-deep); color: var(--ds-white); }
.ds .ds-card__img { width: 100%; height: 320px; object-fit: cover; }
.ds-card__body { padding: 32px 36px 36px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.ds-card__body > .ds-btn { align-self: flex-start; margin-top: auto; }
.ds-card__note { font-size: var(--ds-fs-s); font-weight: 700; color: var(--ds-green); }
.ds-card__meta { display: flex; flex-wrap: wrap; gap: 20px 48px; }

/* Lijst met vinkjes */
.ds-checks { display: flex; flex-direction: column; gap: 10px; font-size: var(--ds-fs-base); color: var(--ds-ink-3); }
.l-main .ds .ds-checks > li { position: relative; padding-left: 32px; }
.l-main .ds .ds-checks > li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; background: var(--ds-green); -webkit-mask: var(--ds-i-check) center / contain no-repeat; mask: var(--ds-i-check) center / contain no-repeat; }

/* Genummerde stappen (op donkere kaart) */
.ds-steps { border-top: 1px solid rgba(255, 255, 255, 0.18); counter-reset: ds-step; }
.l-main .ds .ds-steps > li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); counter-increment: ds-step; font-size: var(--ds-fs-base); }
.l-main .ds .ds-steps > li::before { content: counter(ds-step); flex: none; width: 22px; font-family: var(--ds-font-head); font-weight: 700; font-size: var(--ds-fs-xs); color: var(--ds-green-tint); }

/* Adres en openingstijden */
.ds-address { font-style: normal; font-size: var(--ds-fs-base); line-height: 1.55; color: var(--ds-ink-3); display: flex; gap: 10px; }
.ds-address::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; background: var(--ds-green); -webkit-mask: var(--ds-i-pin) center / contain no-repeat; mask: var(--ds-i-pin) center / contain no-repeat; }
.ds-hours { display: grid; grid-template-columns: auto auto; gap: 2px 20px; font-size: var(--ds-fs-s); color: var(--ds-ink-3); }
.ds-hours dt { color: var(--ds-muted); font-weight: 400; }

/* --- Projecten (horizontaal scrollen) --- */
.ds-scroller { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.ds-proj { flex: 1 1 0; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.ds .ds-proj__img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--ds-radius); }
.ds-proj__cap { display: flex; flex-direction: column; gap: 2px; }
.ds-proj__cap .ds-t5 { color: var(--ds-ink); }

/* Google-reviews */
.ds-rating { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 12px 18px; border: 1px solid var(--ds-line-2); border-radius: var(--ds-radius); font-size: var(--ds-fs-xs); }
.l-main .ds a.ds-rating, .l-main .ds a.ds-rating:hover { color: var(--ds-muted) !important; }
.ds-rating:hover { border-color: var(--ds-ink); }
.ds-rating__score { font-family: var(--ds-font-head); font-weight: 700; font-size: 26px; line-height: 1; color: var(--ds-ink); }
.ds-stars { display: inline-flex; font-size: 18px; letter-spacing: 2px; line-height: 1; color: var(--ds-orange); }
.ds-stars__half { position: relative; display: inline-block; color: var(--ds-line-2); }
.ds-stars__half::before { content: "\2605"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--ds-orange); }
.ds-rating__meta { display: flex; flex-direction: column; line-height: 1.3; }
.ds-rating__count { font-weight: 700; color: var(--ds-ink); }
.ds-rating__src { font-size: 13px; }

/* Citaat */
.l-main .ds .ds-quote { margin: 8px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--ds-orange); }
.ds-quote blockquote p { font-family: var(--ds-font-head); font-weight: 600; font-size: var(--ds-fs-t2); line-height: 1.3; color: var(--ds-ink); }
.ds-quote figcaption { margin-top: 12px; font-size: var(--ds-fs-xs); color: var(--ds-muted); }

/* Notitie met icoon (keurmerk) */
.ds-note { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ds-fs-xs); font-weight: 700; color: var(--ds-ink-3); }
.ds-note--leaf::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--ds-green); -webkit-mask: var(--ds-i-leaf) center / contain no-repeat; mask: var(--ds-i-leaf) center / contain no-repeat; }

/* Logo's van merken */
.ds-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ds-line); border-left: 1px solid var(--ds-line); }
.l-main .ds .ds-logos > li { display: flex; align-items: center; justify-content: center; height: 128px; padding: 20px 28px; border-right: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
.ds-logos img, .ds-wordmark { filter: grayscale(1); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.ds-logos > li:hover img, .ds-logos > li:hover .ds-wordmark { filter: none; opacity: 1; }
.ds .ds-logos img { width: auto; max-width: 100%; object-fit: contain; height: 38px; }
.ds .ds-logo--h48 img { height: 48px; }
.ds .ds-logo--h58 img { height: 58px; }
.ds-logo-crop { position: relative; display: block; width: 150px; height: 50px; max-width: 100%; overflow: hidden; }
.ds .ds-logo-crop img { position: absolute; left: -43px; top: -37px; width: 243px; height: 122px; max-width: none; }
.ds-wordmark { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 0.01em; color: #000000; opacity: 0.7; }

/* Veelgestelde vragen (gewone details/summary/p: de SEO-module maakt hier zelf FAQ-gegevens van) */
.ds-faq { display: flex; flex-wrap: wrap; gap: 40px 80px; align-items: flex-start; }
.ds-faq__intro { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ds-faq__list { flex: 2 1 560px; min-width: 0; border-top: 1px solid var(--ds-line-2); }
.ds .ds-faq__list details, .ds .ds-faq__list details:last-of-type { padding: 0; border-top: 0; border-bottom: 1px solid var(--ds-line-2); }
.ds .ds-faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 28px 0; list-style: none; cursor: pointer; font-weight: 400; font-size: inherit; }
.ds .ds-faq__list summary::-webkit-details-marker { display: none; }
.ds .ds-faq__list summary::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--ds-green); -webkit-mask: var(--ds-i-plus) center / contain no-repeat; mask: var(--ds-i-plus) center / contain no-repeat; transition: transform 0.2s; }
.ds .ds-faq__list details[open] > summary::after { transform: rotate(45deg); }
.l-main .ds .ds-faq__list summary h3 { font-family: var(--ds-font-head); font-weight: 700; font-size: var(--ds-fs-t4) !important; line-height: 1.3 !important; }
.ds .ds-faq__list details > p { margin: 0 0 24px; max-width: 46em; font-size: var(--ds-fs-base); color: var(--ds-ink-2); }

/* Afsluitende band met foto */
.ds-cta { display: flex; flex-wrap: wrap; }
.ds-cta__body { flex: 1 1 560px; min-width: 0; padding: 88px 64px 88px max(var(--ds-gutter), calc((100vw - var(--ds-container)) / 2 + var(--ds-gutter))); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.ds-cta__text { max-width: 30em; font-size: 19px; color: rgba(255, 255, 255, 0.92); }
.ds-cta__media { flex: 1 1 520px; min-width: 0; min-height: 420px; position: relative; }
.ds .ds-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Kaart (Google Maps iframe) */
.ds-map, .dz-page .dz-map { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--ds-radius); background: var(--ds-sand); }

/* ============ 6. Hulpclasses ============ */
/* Focuspunt van een foto */
.u-ox-30 { --ds-ox: 30%; }
.u-ox-60 { --ds-ox: 60%; }
.u-oy-40 { --ds-oy: 40%; }
.u-oy-45 { --ds-oy: 45%; }
.u-oy-55 { --ds-oy: 55%; }
.u-oy-60 { --ds-oy: 60%; }
/* Marges en ruimte (schaal: 0 4 8 12 16 24 32 40 48 64 72) */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: 4px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mt-32 { margin-top: 32px !important; }
.u-mt-40 { margin-top: 40px !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-8 { margin-bottom: 8px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-mb-24 { margin-bottom: 24px !important; }
.u-pt-0 { padding-top: 0 !important; }
.u-pt-8 { padding-top: 8px !important; }
.u-pt-24 { padding-top: 24px !important; }
.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-24 { padding-bottom: 24px !important; }
.u-pb-48 { padding-bottom: 48px !important; }
.u-pb-64 { padding-bottom: 64px !important; }
.u-pb-72 { padding-bottom: 72px !important; }
/* Overig */
.u-measure { max-width: var(--ds-measure) !important; }
.u-center { text-align: center !important; }
.u-nowrap { white-space: nowrap !important; }

/* ============ 7. dz-pagina's (bestaande bouwstenen) ============ */
/* Kop vóór kicker in de code, kicker visueel erboven */
.dz-page .dz-hgroup { display: flex; flex-direction: column; margin: 0; }
.dz-page .dz-hgroup > .dz-kicker { order: -1; }
.dz-page .ds-hgroup > .dz-kicker { order: -1; }

/* Vacatures (HTML-volgorde aangepast door daams_ds_vacature_hgroups) */
.dvac-hgroup { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.dvac-hgroup--hero { gap: 18px; }
.dvac-openband__text .dvac-hgroup { gap: 4px; }
.dvac-hgroup > .dvac-eyebrow, .dvac-hgroup > .dvac-tag { order: -1; margin: 0; line-height: inherit; }
.dvac-hgroup > .dvac-tag { align-self: flex-start; }

/* ============ 8. Gelijktrekken (alleen met bodyclass daams-ds) ============ */
/* Dezelfde kleuren als de homepage */
body.daams-ds .dz-page {
	--dz-ink: #12201A;
	--dz-ink-2: #3B4542;
	--dz-muted: #4A5552;
	--dz-line: #E3DED3;
	--dz-line-2: #D6D0C4;
	--dz-sand: #F3F0E8;
	--dz-green-dark: #00532B;
}
body.daams-ds {
	--dsand: #F3F0E8;
	--dline: #E3DED3;
	--dtext: #12201A;
	--dmuted: #4A5552;
	--dg-dark: #00532B;
}
/* Eén paginabreedte: 1360 px met 40 px marge (20 px op telefoon) */
body.daams-ds .dz-page .dz-wrap,
body.daams-ds .dvac-wrap,
body.daams-ds #daams-footer .dft-main,
body.daams-ds #daams-footer .dft-bottom-h { max-width: var(--ds-container); padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
/* Lopende tekst niet breder dan een prettige regellengte */
body.daams-ds .dz-page .dz-wrap > p,
body.daams-ds .dz-page .dz-note,
body.daams-ds .dz-page details p { max-width: var(--ds-measure); }
/* Koppen in hetzelfde gewicht als de homepage */
body.daams-ds .l-main .dz-page .dz-h1,
body.daams-ds .l-main .dz-page .dz-h2,
body.daams-ds .l-main .dz-page .dz-h3 { font-weight: 700 !important; }
body.daams-ds .dz-page .dz-tile__t { font-weight: 700; }
/* Secundaire knop in donkergroen-zwart, zoals op de homepage */
body.daams-ds .l-main .dz-page a.dz-btn--ghost { border-color: var(--ds-ink); color: var(--ds-ink) !important; }
body.daams-ds .l-main .dz-page a.dz-btn--ghost:hover { background: var(--ds-sand); }
body.daams-ds .l-main .dz-page .dz-band--green a.dz-btn--ghost { border-color: #FFFFFF; color: #FFFFFF !important; }
body.daams-ds .l-main .dz-page .dz-band--green a.dz-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* ============ 9. Responsief ============ */
@media (max-width: 1199px) {
	.ds-hero__text, .ds-hero__media { flex: 1 1 100%; }
	.ds-hero__media { order: -1; }
	.ds-hero__photo { height: 560px; }
	.ds-status-card { left: 24px; bottom: 24px; }
}
@media (max-width: 1023px) {
	.ds-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 280px; }
	.ds-bento > * { grid-column: auto; grid-row: auto; }
	.ds-bento > .ds-panel--wide { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	:root { --ds-gutter: 20px; --ds-sec: 64px; --ds-fs-display: 42px; --ds-fs-h2: 34px; --ds-fs-h2-s: 34px; }
	.l-main .ds .ds-display { line-height: 1.02 !important; }
	.u-hide-m { display: none !important; }

	.ds-hero { padding-top: 0; padding-bottom: 40px; row-gap: 28px; }
	.ds-hero__media { margin: 0 calc(var(--ds-gutter) * -1); }
	.ds-hero__photo { height: 400px; border-radius: 0; }
	.ds-hero__text { padding: 0; gap: 20px; }
	.ds-hero__text > .ds-hgroup { gap: 20px; }
	.ds-hero .ds-actions > a { flex: 1 1 100%; justify-content: center; }
	.ds-facts { grid-template-columns: minmax(0, 1fr); }
	.ds-status-card { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
	.ds-status { display: block; flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.4; }
	.ds-status > .ds-dot { display: inline-block; vertical-align: 1px; margin-right: 8px; }
	.ds-status-card__addr { display: none; }
	.ds-status-card > .ds-more { flex: none; padding: 10px 0 10px 4px; }

	.ds-intent, .ds-intent:first-child, .ds-intent:last-child { padding-left: 0; padding-right: 0; }
	.ds-intent + .ds-intent { border-left: 0; border-top: 1px solid var(--ds-line); }

	.ds-bento { grid-template-columns: minmax(0, 1fr); }
	.ds-bento > .ds-panel--wide { grid-row: span 2; }
	.ds-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ds-card__body { padding: 28px 24px 28px; }
	.ds-proj { flex: 0 0 78%; }
	.ds .ds-split__img { height: 440px; }
	.ds-sec--cont { padding-top: 24px; }
	.ds-cta__body { padding: 64px var(--ds-gutter); }
	.ds-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ds-logos > li:last-child { grid-column: 1 / -1; }
	.l-main .ds .ds-logos > li { height: 104px; padding: 16px 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.ds-tile__img, .ds-btn, .ds-intent, .ds .ds-faq__list summary::after { transition: none; }
	.ds-tile:hover .ds-tile__img { transform: none; }
}