@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/newsreader-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(fonts/source-serif-4-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


@font-face {
  font-family: 'Source Serif 4 Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(fonts/source-serif-4-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Klantwebsite — wordt alleen binnen het iframe geladen. Geen BANANAS-stijl hier. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #fff; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.site {
  --r: 12px; --h1: 3.2rem; --h2: 2.3rem; --pad: 96px; --gap: 56px;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100%;
}
.site h1, .site h2, .site h3 {
  font-family: var(--font-heading);
  font-weight: var(--hw);
  text-transform: var(--htt);
  letter-spacing: var(--hls);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.site h1 { font-size: var(--h1); }
.site h2 { font-size: var(--h2); }
.site h3 { font-size: 1.25rem; line-height: 1.25; }
:where(.site) p { margin: 0; }
:where(.site) a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; }

/* Varianten: dezelfde branding, eigen karakter */
.v-direct { --r: 10px; --h1: clamp(2.1rem, 4vw, 3.3rem); --h2: clamp(1.7rem, 2.8vw, 2.3rem); --pad: 84px; }
.v-bold { --r: 3px; --h1: clamp(2.6rem, 7.4vw, 6.4rem); --h2: clamp(2rem, 4.6vw, 3.8rem); --pad: 120px; --gap: 64px; }
.v-bold h1, .v-bold h2 { line-height: 0.98; }
.v-personal { --r: 26px; --h1: clamp(2.2rem, 4.6vw, 3.7rem); --h2: clamp(1.8rem, 3.2vw, 2.6rem); --pad: 108px; font-size: 18px; }

/* Tonen per sectie */
.sec { padding: calc(var(--pad) * var(--space, 1)) 0; overflow-x: clip; position: relative; --fg: var(--text); --fg-muted: var(--muted); --kick: var(--primary-ink); --btn-bg: var(--primary); --btn-fg: var(--on-primary); --card: var(--surface); --ln: var(--line); color: var(--fg); }
.tone-plain { background: var(--bg); }
.tone-surface { background: var(--surface); --card: var(--bg); }
.tone-accent { background: var(--primary); --fg: var(--on-primary); --fg-muted: color-mix(in srgb, var(--on-primary) 82%, transparent); --kick: var(--on-primary); --btn-bg: var(--on-primary); --btn-fg: var(--primary); --card: color-mix(in srgb, var(--on-primary) 10%, transparent); --ln: color-mix(in srgb, var(--on-primary) 25%, transparent); }
.tone-dark { background: var(--dark); --fg: var(--on-dark); --fg-muted: color-mix(in srgb, var(--on-dark) 78%, transparent); --kick: var(--dark-kicker); --card: color-mix(in srgb, var(--on-dark) 7%, transparent); --ln: color-mix(in srgb, var(--on-dark) 18%, transparent); }
.tone-secondary { background: var(--secondary); --fg: var(--on-secondary); --fg-muted: color-mix(in srgb, var(--on-secondary) 78%, transparent); --kick: var(--on-secondary); --card: color-mix(in srgb, var(--bg) 55%, transparent); --ln: color-mix(in srgb, var(--on-secondary) 18%, transparent); }
.tone-highlight { background: var(--accent); --fg: var(--on-accent); --fg-muted: color-mix(in srgb, var(--on-accent) 82%, transparent); --kick: var(--on-accent); --btn-bg: var(--on-accent); --btn-fg: var(--accent-ink-on); --card: color-mix(in srgb, var(--on-accent) 10%, transparent); --ln: color-mix(in srgb, var(--on-accent) 25%, transparent); }

.kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kick); margin-bottom: 14px !important; }
.lead, .sec-intro, .about-text p, .contact-text p { color: var(--fg-muted); }
.lead { font-size: 1.15em; margin-top: 20px !important; max-width: 38em; }
.sec-head { max-width: 680px; margin-bottom: 44px; }
.sec-intro { margin-top: 14px !important; }

/* Knoppen */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: max(var(--r), 6px); font-weight: 650; font-size: 0.95rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.2; }
.btn-primary { background: var(--btn-bg, var(--primary)); color: var(--btn-fg, var(--on-primary)); }
.btn-primary:hover { filter: brightness(0.94); }
.btn-ghost { border-color: currentColor; color: var(--fg, var(--text)); background: transparent; }
.v-personal .btn { border-radius: 999px; }
.v-bold .btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; padding: 16px 26px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .site textarea:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

/* Header */

/* Woordmerk / logo */
.wm { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-heading); font-weight: var(--hw); text-transform: var(--htt); letter-spacing: var(--hls); color: var(--primary-ink); line-height: 1; white-space: nowrap; }
.wm-mark { width: 1.35em; height: 1.35em; flex: none; }
/* Logo-opstellingen en naamtreatments (zie Logo.tsx) */
.wm { --lg-main: var(--primary); --lg-acc: var(--accent); --lg-acc-text: var(--accent-ink); --lg-on: var(--on-primary); }
.wm-text { display: inline-block; }
.wm-stacked { flex-direction: column; gap: 0.4em; text-align: center; }
.wm-stacked .wm-mark { width: 2em; height: 2em; }
.wm-stacked .wm-text { text-align: center; }
.wm-stacked .wm-duo { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.wm-badge { border: 0.09em solid var(--lg-main); padding: 0.4em 0.75em; border-radius: 0.3em; gap: 0.5em; }
.wm-badge .wm-mark { width: 1.1em; height: 1.1em; }
.wm-badge.is-tile { background: var(--lg-main); border-color: var(--lg-main); color: var(--lg-on) !important; }
.wm-badge.is-tile .wm-mark { --lg-main: var(--on-primary); --lg-on: var(--primary); --lg-acc: var(--accent-on-primary); }
.wm-rule { flex-direction: column; gap: 0.5em; padding: 0.55em 0.4em; border-top: 0.06em solid currentColor; border-bottom: 0.06em solid currentColor; text-align: center; }
.wm-rule .wm-mark { width: 1.3em; height: 1.3em; }
.wm-monogram .wm-mark { width: 1.7em; height: 1.7em; }
.wm-icon { display: inline-flex; }
.wm-icon .wm-mark { width: 100%; height: 100%; }
.wm-duo .wm-a { font-weight: 300; }
.wm-dot { color: var(--lg-acc-text); }
.wm-init { color: var(--lg-acc-text); font-size: 1.28em; line-height: 0.9; margin-right: 0.02em; }
.wm-ul { border-bottom: 0.14em solid var(--lg-acc); padding-bottom: 0.12em; }
.wm-tracked { padding-left: 0.1em; }
.wm-sm { font-size: calc(1.05rem * var(--lg-scale, 1)); } .wm-md { font-size: calc(1.3rem * var(--lg-scale, 1)); } .wm-lg { font-size: calc(clamp(1.4rem, 7vw, 2.6rem) * var(--lg-scale, 1)); white-space: normal; text-align: left; max-width: 100%; }
.wm-lg .wm-text { overflow-wrap: anywhere; }
.logo-img { display: block; width: auto; object-fit: contain; }
.logo-sm { height: 30px; max-width: 160px; } .logo-md { height: 42px; max-width: 200px; } .logo-lg { height: 84px; max-width: 280px; }

/* Media */
.media { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); background: var(--secondary); }
.media img, .media .art { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-note { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,0.92); color: #333; font: 600 11px/1 system-ui, sans-serif; letter-spacing: 0.02em; padding: 6px 9px; border-radius: 999px; }

/* ---------- Hero ---------- */
.hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--gap); align-items: center; }
.hero-split .hero-media { aspect-ratio: 4 / 3.2; }
.hero-split.media-first .hero-media { order: -1; }

.hero-fullbleed { position: relative; }
.hero-fullbleed .hero-media { aspect-ratio: 16 / 8; order: -1; }
.hero-fullbleed { display: flex; flex-direction: column; }
.hero-fullbleed .hero-text { position: relative; z-index: 1; width: min(820px, 88%); margin-top: -150px; padding: 44px 48px 0 0; background: inherit; }
.sec.tone-plain .hero-fullbleed .hero-text { background: var(--bg); }
.sec.tone-surface .hero-fullbleed .hero-text { background: var(--surface); }
.sec.tone-accent .hero-fullbleed .hero-text { background: var(--primary); padding-left: 40px; }
.sec.tone-dark .hero-fullbleed .hero-text { background: var(--dark); padding-left: 40px; }
.hero-fullbleed.media-first .hero-text { margin-left: auto; padding: 44px 0 0 48px; }
.v-bold .sec-hero { padding-top: 48px; }

.hero-centered { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 56px; }
.hero-centered .hero-text { max-width: 780px; display: flex; flex-direction: column; align-items: center; }
.hero-centered .lead { margin-left: auto; margin-right: auto; }
.hero-centered .actions { justify-content: center; }
.hero-centered .hero-media { width: 100%; aspect-ratio: 21 / 9; }
.hero-centered.media-first .hero-media { order: -1; }

/* ---------- Diensten ---------- */
.svc h3 { margin-bottom: 10px; }
.svc p { color: var(--fg-muted); }
.svc-num { display: block; font-family: var(--font-heading); font-weight: var(--hw); color: var(--kick); font-size: 0.9rem; letter-spacing: 0.08em; margin-bottom: 18px; }

.services-cards .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.services-cards.n-1 .svc-grid { grid-template-columns: minmax(0, 520px); }
.services-cards.n-2 .svc-grid { grid-template-columns: repeat(2, 1fr); }
.services-cards .svc { background: var(--card); border-radius: var(--r); padding: 32px 28px; border: 1px solid var(--ln); }
.services-cards .svc-num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: calc(var(--r) * 0.8); background: var(--primary); color: var(--on-primary); letter-spacing: 0; }
.tone-accent .services-cards .svc-num { background: var(--on-primary); color: var(--primary); }

.services-list .sec-head { margin-bottom: 24px; }
.services-list .svc { display: grid; grid-template-columns: 120px 1fr 1.1fr; gap: 32px; align-items: baseline; padding: 36px 0; border-top: 1px solid var(--ln); }
.services-list .svc:last-child { border-bottom: 1px solid var(--ln); }
.services-list .svc-num { font-size: clamp(2.2rem, 4vw, 3.4rem); margin: 0; line-height: 1; letter-spacing: -0.02em; }
.services-list .svc h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; }

.services-feature .svc-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-auto-rows: 1fr; gap: 20px; }
.services-feature .svc { background: var(--card); border-radius: var(--r); padding: 32px; border: 1px solid var(--ln); }
.services-feature .svc:first-child { grid-row: span 2; background: var(--primary); color: var(--on-primary); border-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
.services-feature .svc:first-child p { color: color-mix(in srgb, var(--on-primary) 85%, transparent); }
.services-feature .svc:first-child .svc-num { color: var(--on-primary); margin-bottom: auto; padding-bottom: 40px; }
.services-feature .svc:first-child h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.services-feature.n-1 .svc-grid { grid-template-columns: 1fr; }
.services-feature.n-2 .svc:first-child { grid-row: span 1; }

/* ---------- Over ons ---------- */
.about-text p { margin-top: 18px !important; font-size: 1.05em; }
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.about-split .about-media { aspect-ratio: 1 / 1; }
.about-split.media-first .about-media { order: -1; }

.about-statement { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 28px 64px; align-items: end; }
.about-statement .about-text { display: contents; }
.about-statement .kicker { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
.about-statement h2 { grid-column: 1 / -1; grid-row: 2; max-width: 18ch; }
.about-statement p { grid-column: 2; grid-row: 3; align-self: start; }
.about-statement .about-media { grid-column: 1; grid-row: 3; aspect-ratio: 3 / 4; margin-top: 24px; }
.about-statement.media-first p { grid-column: 1; }
.about-statement.media-first .about-media { grid-column: 2; aspect-ratio: 16 / 10; }

.about-story { display: flex; flex-direction: column; gap: 48px; }
.about-story .about-text { max-width: 720px; margin: 0 auto; }
.about-story .about-text p { font-size: 1.12em; line-height: 1.75; }
.about-story .about-media { aspect-ratio: 16 / 7; }
.about-story.media-first .about-media { order: -1; }

/* ---------- Werkwijze ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--fg-muted); }
.step-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--secondary); color: var(--on-secondary); font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.2rem; flex: none; }
.tone-dark .step-num, .tone-accent .step-num { background: var(--card); color: var(--fg); }
.process-steps .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.process-steps .steps li { display: flex; flex-direction: column; gap: 20px; padding-top: 28px; border-top: 2px solid var(--ln); }
.process-timeline { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap); }
.process-timeline .steps li { display: flex; gap: 24px; padding-bottom: 36px; position: relative; }
.process-timeline .steps li:not(:last-child)::before { content: ''; position: absolute; left: 25px; top: 60px; bottom: 6px; width: 2px; background: var(--ln); }
.v-bold .step-num { border-radius: var(--r); background: var(--primary); color: var(--on-primary); }

/* ---------- Contact ---------- */
.contact-text p { margin-top: 16px !important; }
.contact-banner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; }
.contact-banner h2 { font-size: calc(var(--h2) * 1.15); }
.contact-form { display: flex; flex-direction: column; gap: 40px; }
.contact-form .contact-text { max-width: 720px; }
.contact-form .contact-text h2 { font-size: var(--h1); }
.contact-card { max-width: 680px; text-align: center; }
.contact-card .contact-text { margin-bottom: 36px; }
.contact-card .form { text-align: left; background: var(--card); border-radius: var(--r); padding: 36px; border: 1px solid var(--ln); }
.contact-card fieldset { grid-template-columns: 1fr; }

.form fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.form .full, .form .form-demo, .form .btn, .form .form-sent { grid-column: 1 / -1; }
.form-demo { font: 600 11.5px/1 system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); justify-self: start; margin: 0 0 4px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--fg); }
.form input, .form textarea { font: inherit; font-weight: 400; font-size: 1rem; padding: 13px 14px; border-radius: min(var(--r), 12px); border: 1px solid var(--ln); background: var(--bg); color: var(--text); width: 100%; }
.form textarea { resize: vertical; }
.form .btn { justify-self: start; }
.form-sent { font-size: 0.95rem; font-weight: 600; }
.tone-accent .form, .tone-dark .form { background: var(--card); padding: 28px; border-radius: var(--r); }
.contact-banner .form, .contact-form .form { background: var(--card); padding: 28px; border-radius: var(--r); }

/* Footer */

/* ---------- Mobiel (reageert op de breedte van het frame) ---------- */
@media (max-width: 760px) {
  .site { font-size: 16px; --pad: 64px; --gap: 32px; }
  .v-bold { --pad: 72px; }
  .wrap { padding: 0 20px; }
  .hero-split, .about-split, .contact-banner, .process-timeline { grid-template-columns: 1fr; }
  .hero-split .hero-media { order: -1; aspect-ratio: 4 / 3; }
  .hero-fullbleed .hero-media { aspect-ratio: 4 / 3; }
  .hero-fullbleed .hero-text, .hero-fullbleed.media-first .hero-text { width: auto; margin: -48px 12px 0; padding: 28px 20px 0; }
  .hero-centered .hero-media { aspect-ratio: 4 / 3; }
  .services-cards .svc-grid, .services-cards.n-2 .svc-grid, .services-feature .svc-grid, .process-steps .steps { grid-template-columns: 1fr; }
  .services-feature .svc:first-child { grid-row: auto; min-height: 240px; }
  .services-list .svc { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .about-statement { grid-template-columns: 1fr; }
  .about-statement p, .about-statement.media-first p { grid-column: 1; grid-row: auto; }
  .about-statement .about-media, .about-statement.media-first .about-media { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; margin-top: 0; }
  .about-story .about-media { aspect-ratio: 4 / 3; }
  .form fieldset { grid-template-columns: 1fr; }
  .contact-card .form { padding: 22px; }
}

/* ---------- Bewerkmodus (editor-aanwijzing, bewust neutraal) ---------- */
.mode-edit .editable { cursor: pointer; outline: 0; }
.mode-edit .editable::after { content: ''; position: absolute; inset: 4px; border: 2px solid transparent; border-radius: 6px; pointer-events: none; transition: border-color 0.12s; z-index: 5; }
.mode-edit .editable:hover::after { border-color: rgba(17, 17, 17, 0.35); border-style: dashed; }
.mode-edit .editable:focus-visible::after { border-color: #111; border-style: solid; box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.6); }
.mode-edit .editable.is-selected::after { border: 3px solid #111; box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.75); }
.mode-edit .editable.is-proposal::after { border: 3px dashed #111; box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.75); }
.edit-chip { position: absolute; top: 12px; left: 12px; z-index: 6; display: none; gap: 6px; align-items: center; background: #111; color: #fff; font: 600 12px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0; text-transform: none; padding: 7px 10px; border-radius: 6px; pointer-events: none; }
.edit-chip span { background: #FFCC00; color: #111; padding: 3px 6px; border-radius: 4px; }
.mode-edit .editable:hover .edit-chip, .mode-edit .editable:focus-visible .edit-chip, .mode-edit .editable.is-selected .edit-chip, .mode-edit .editable.is-proposal .edit-chip { display: inline-flex; }
.mode-edit .editable[aria-label*='vergrendeld'] .edit-chip { display: inline-flex; }

/* ---------- Huisstijlbord ---------- */
.bb { font-family: var(--font-body); color: var(--text); background: var(--bg); padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.bb-tiles { display: grid; grid-template-columns: 1.7fr 1fr; gap: 10px; }
.bb-tile { border-radius: 12px; min-height: 104px; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
.bb-tile-brand { background: var(--primary); color: var(--on-primary); }
.bb-tile-icon { background: var(--surface); flex-direction: column; gap: 8px; font-size: 11px; font-weight: 600; color: var(--muted); }
.bb-icon { width: 56px; height: 56px; display: block; }
.bb-icon .wm-icon { width: 100%; height: 100%; }
.bb-logo { overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 130px; background: var(--surface); border-radius: 14px; padding: 24px; }
.bb-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bb-sw { display: flex; flex-direction: column; gap: 4px; font-size: 11px; min-width: 0; }
.bb-chip { height: 46px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); }
.bb-sw-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-sw code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--muted); }
.bb-type { display: flex; gap: 16px; align-items: center; border-top: 1px solid var(--line); padding-top: 18px; }
.bb-aa { font-family: var(--font-heading); font-weight: var(--hw); font-size: 54px; line-height: 1; color: var(--primary-ink); }
.bb-type-h { font-family: var(--font-heading); font-weight: var(--hw); text-transform: var(--htt); letter-spacing: var(--hls); font-size: 19px; line-height: 1.2; margin: 0 0 4px; }
.bb-type-b { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
.bb-app { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bb-app-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.bb-app-nav { display: flex; gap: 8px; margin-left: auto; }
.bb-app-nav i { width: 26px; height: 6px; border-radius: 3px; background: var(--line); }
.bb-app-btn { background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 6px; }
.bb-app-hero { background: var(--surface); padding: 20px 14px; display: flex; flex-direction: column; gap: 8px; }
.bb-app-h { height: 12px; width: 70%; border-radius: 3px; background: var(--text); opacity: 0.85; }
.bb-app-h.short { width: 45%; }
.bb-app-l { height: 8px; width: 80%; border-radius: 3px; background: var(--line); margin-top: 6px; }

/* Lange woorden in grote koppen mogen op smalle schermen nooit buiten beeld lopen. */
.hero-text, .about-text, .feature-text, .contact-text, .cta-text, .text-head, .sec-head { min-width: 0; }
@media (max-width: 760px) {
  .site h1, .site h2 { overflow-wrap: anywhere; }
}

/* ---------- Bewerkmodus: duidelijk wat je kunt aanpassen ---------- */
.edit-pen { position: absolute; top: 10px; right: 10px; z-index: 9; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(17, 17, 17, 0.55); background: rgba(255, 255, 255, 0.92); color: #111; display: grid; place-items: center; padding: 0; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; font: inherit; }
.edit-pen svg { width: 14px; height: 14px; }
.editable:hover > .edit-pen, .editable:focus-within > .edit-pen, .editable.is-selected > .edit-pen { opacity: 1; }
.edit-pen:hover { background: #FFCC00; }
.edit-pen:focus-visible { opacity: 1; outline: 3px solid #FFCC00; outline-offset: 2px; }
@media (hover: none) { .edit-pen { opacity: 0.7; } }
/* Bij de navigatiebalk en footer staat het potloodje links, zodat het niet naast de knoppen rechts komt */
.sec-header > .edit-pen, .sec-footer > .edit-pen { top: 6px; left: 6px; right: auto; width: 24px; height: 24px; }
.mode-edit .editable :is(.media, .gal-item, .et-card)::before { content: 'Foto aanpassen'; position: absolute; top: 10px; left: 10px; z-index: 8; background: #111; color: #fff; font: 600 12px/1 system-ui, sans-serif; letter-spacing: 0; text-transform: none; padding: 7px 11px; border-radius: 999px; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.mode-edit .editable :is(.media, .gal-item, .et-card):hover::before { opacity: 1; }
.mode-edit .editable :is(.media, .gal-item, .et-card) { cursor: pointer; }
.mode-edit .et-burger, .mode-edit .et-bottomdock, .mode-edit .et-float { position: relative; }
.mode-edit .et-burger:hover, .mode-edit .et-bottomdock:hover { outline: 2px dashed rgba(17, 17, 17, 0.5); outline-offset: 4px; }

/* Extra indelingen en onderdelen voor de klantwebsite (alleen binnen het iframe). */
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* =====================================================================
   Extra indelingen voor bestaande onderdelen
   ===================================================================== */

/* Introductie: tekst over beeld */
.wrap.hero-overlay { position: relative; display: flex; align-items: flex-end; min-height: 600px; max-width: 1080px; padding: 64px; border-radius: var(--r); overflow: hidden; color: #fff; }
.hero-overlay .hero-media { position: absolute; inset: 0; border-radius: 0; }
.hero-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.68) 100%); pointer-events: none; }
.hero-overlay .hero-text { position: relative; z-index: 1; max-width: 680px; --fg: #fff; --fg-muted: rgba(255, 255, 255, 0.88); --kick: #fff; }
.hero-overlay .hero-text .lead { color: rgba(255, 255, 255, 0.9); }
.hero-overlay .btn-ghost { color: #fff; }
.hero-overlay.media-first { justify-content: flex-end; text-align: right; }
.hero-overlay.media-first .actions { justify-content: flex-end; }
.hero-overlay .media-note { top: 12px; bottom: auto; }

/* Introductie: beeld boven, tekst in kolommen */
.hero-stacked { display: flex; flex-direction: column; gap: 48px; }
.hero-stacked .hero-media { order: -1; aspect-ratio: 21 / 8; }
.hero-stacked.media-first .hero-media { order: 1; }
.hero-stacked .hero-text { display: grid; grid-template-columns: 1.15fr 0.85fr; column-gap: 64px; align-items: end; }
.hero-stacked .kicker { grid-column: 1; grid-row: 1; }
.hero-stacked h1 { grid-column: 1; grid-row: 2; }
.hero-stacked .lead { grid-column: 2; grid-row: 2; margin-top: 0 !important; }
.hero-stacked .actions { grid-column: 2; grid-row: 3; margin-top: 24px; }

/* Diensten: rustige kolommen */
.services-columns .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.services-columns.n-2 .svc-grid { grid-template-columns: repeat(2, 1fr); }
.services-columns.n-1 .svc-grid { grid-template-columns: minmax(0, 560px); }
.services-columns .svc { border-top: 3px solid var(--primary); padding-top: 24px; }
.tone-accent .services-columns .svc, .tone-dark .services-columns .svc { border-top-color: var(--fg); }

/* Diensten: titel naast lijst */
.services-side { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--gap); align-items: start; }
.services-side .sec-head { margin-bottom: 0; }
.services-side .svc { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--ln); }
.services-side .svc:first-child { border-top: 1px solid var(--ln); }
.services-side .svc-num { grid-row: span 2; margin: 0; font-size: 1.4rem; }

/* Over ons: beeldband met tekstkaart */
.about-banner { display: flex; flex-direction: column; }
.about-banner .about-media { order: -1; aspect-ratio: 21 / 8; }
.about-banner .about-text { position: relative; width: min(640px, 90%); margin-top: -120px; margin-left: 48px; padding: 40px; background: var(--card); border-radius: var(--r); }
.tone-plain .about-banner .about-text { background: var(--surface); }
.tone-surface .about-banner .about-text { background: var(--bg); }
.about-banner.media-first .about-text { margin-left: auto; margin-right: 48px; }

/* Over ons: rond portret */
.about-portrait { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--gap); align-items: center; }
.about-portrait .about-media { aspect-ratio: 1 / 1; border-radius: 50%; max-width: 380px; width: 100%; justify-self: center; order: -1; }
.about-portrait.media-first .about-media { order: 1; }
.about-portrait .media-note { left: 50%; transform: translateX(-50%); }

/* Werkwijze: stapkaarten */
.process-cards .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.process-cards .steps li { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.process-cards .step-num { background: var(--primary); color: var(--on-primary); }

/* Werkwijze: verbonden lijn */
.process-line .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
.process-line .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; text-align: center; }
.process-line .steps::before { content: ""; position: absolute; top: 26px; left: 16%; right: 16%; height: 2px; background: var(--ln); }
.process-line .steps li { display: flex; flex-direction: column; align-items: center; gap: 18px; position: relative; }
.process-line .step-num { background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 8px var(--bg); }
.tone-surface .process-line .step-num { box-shadow: 0 0 0 8px var(--surface); }
.tone-accent .process-line .step-num, .tone-dark .process-line .step-num { box-shadow: none; }

/* Contact: smalle tekst, breed formulier */
.contact-side { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: var(--gap); align-items: start; }
.contact-side .form { background: var(--card); padding: 32px; border-radius: var(--r); border: 1px solid var(--ln); }

/* =====================================================================
   Nieuwe onderdelen
   ===================================================================== */

/* Waarom wij */
.usp-list { list-style: none; margin: 0; padding: 0; }
.usp-list h3 { margin-bottom: 6px; }
.usp-list p { color: var(--fg-muted); }
.usp-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--secondary); color: var(--on-secondary); font-weight: 800; flex: none; }
.tone-accent .usp-icon, .tone-dark .usp-icon { background: var(--card); color: var(--fg); }
.usp-grid .usp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.usp-grid .usp-list li { display: flex; flex-direction: column; gap: 18px; }
.usp-checklist { max-width: 860px; }
.usp-checklist .usp-list li { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--ln); }
.usp-checklist .usp-list li:last-child { border-bottom: 1px solid var(--ln); }
.usp-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--gap); align-items: start; }
.usp-split .sec-head { margin-bottom: 0; }
.usp-split .usp-list { display: flex; flex-direction: column; gap: 28px; }
.usp-split .usp-list li { display: flex; gap: 20px; }
.usp-band .usp-list { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.usp-band .usp-list li { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 28px; }
.usp-band .usp-list li + li { border-left: 1px solid var(--ln); }

/* Uitgelicht */
.feature-text p { margin-top: 16px !important; color: var(--fg-muted); font-size: 1.05em; }
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.feature-split .feature-media { aspect-ratio: 4 / 3; }
.feature-split.media-first .feature-media { order: -1; }
.feature-overlap { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
.feature-overlap .feature-media { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 16 / 10; }
.feature-overlap .feature-text { grid-column: 7 / 13; grid-row: 1; position: relative; z-index: 1; background: var(--card); padding: 44px; border-radius: var(--r); border: 1px solid var(--ln); }
.tone-plain .feature-overlap .feature-text { background: var(--bg); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08); }
.feature-overlap.media-first .feature-media { grid-column: 5 / 13; }
.feature-overlap.media-first .feature-text { grid-column: 1 / 7; }
.feature-centered { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 48px; }
.feature-centered .feature-text { max-width: 720px; }
.feature-centered .actions { justify-content: center; }
.feature-centered .feature-media { width: 100%; aspect-ratio: 21 / 9; }
.feature-centered.media-first .feature-media { order: -1; }

/* Fotogalerij */
.gal-grid { display: grid; gap: 16px; }
.gal-item { aspect-ratio: 1 / 1; }
.gallery-grid .gal-grid { grid-template-columns: repeat(2, 1fr); }
.gallery-grid .gal-item { aspect-ratio: 4 / 3; }
.gallery-mosaic .gal-grid { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(200px, 1fr)); }
.gallery-mosaic .gal-item { aspect-ratio: auto; }
.gallery-mosaic .gal-item:first-child { grid-row: span 2; }
.gallery-mosaic .gal-item:nth-child(4) { grid-column: span 2; }
.gallery-strip .gal-grid { grid-template-columns: repeat(4, 1fr); }
.gallery-strip .gal-item { aspect-ratio: 3 / 4; }

/* Veelgestelde vragen */
.faq-list { margin: 0; display: flex; flex-direction: column; max-width: 860px; }
.faq-item { padding: 24px 0; border-top: 1px solid var(--ln); }
.faq-item:last-child { border-bottom: 1px solid var(--ln); }
.faq-item dt { font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.15rem; line-height: 1.3; margin-bottom: 8px; }
.faq-item dd { margin: 0; color: var(--fg-muted); }
.faq-columns .faq-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; max-width: none; }
.faq-columns .faq-item:nth-last-child(2) { border-bottom: 1px solid var(--ln); }
.faq-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--gap); align-items: start; }
.faq-split .sec-head { margin-bottom: 0; }

/* Oproep */
.cta-text p { margin-top: 14px !important; color: var(--fg-muted); max-width: 40em; }
.cta-band { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-band h2 { font-size: calc(var(--h2) * 1.1); max-width: 20ch; margin: 0 auto; }
.cta-band .cta-text p { margin-left: auto; margin-right: auto; }
.cta-band .actions { justify-content: center; }
.cta-split { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); }
.cta-split .actions { margin-top: 0; flex: none; }
.cta-card { max-width: 820px; text-align: center; background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 56px 48px; display: flex; flex-direction: column; align-items: center; }
.tone-plain .cta-card { background: var(--surface); }
.cta-card .cta-text p { margin-left: auto; margin-right: auto; }
.cta-card .actions { justify-content: center; }

/* Tekstblok */
.text-body { color: var(--fg-muted); font-size: 1.12em; line-height: 1.75; }
.text-centered { max-width: 760px; text-align: center; }
.text-centered .text-body, .text-left .text-body { margin-top: 20px !important; }
.text-left .text-head, .text-left .text-body { max-width: 860px; }
.text-columns { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap); align-items: start; }

/* ---------- Mobiel ---------- */
@media (max-width: 760px) {
  .wrap.hero-overlay { min-height: 480px; padding: 28px 22px; margin: 0 20px; }
  .hero-stacked .hero-text { grid-template-columns: 1fr; }
  .hero-stacked .kicker, .hero-stacked h1, .hero-stacked .lead, .hero-stacked .actions { grid-column: 1; grid-row: auto; }
  .hero-stacked .lead { margin-top: 18px !important; }
  .hero-stacked .hero-media { aspect-ratio: 4 / 3; }
  .services-columns .svc-grid, .services-columns.n-2 .svc-grid, .services-side, .about-portrait, .contact-side,
  .process-cards .steps, .process-line .steps, .usp-grid .usp-list, .usp-split, .usp-band .usp-list,
  .feature-split, .faq-columns .faq-list, .faq-split, .text-columns { grid-template-columns: 1fr; }
  .process-line .steps::before { display: none; }
  .about-banner .about-media { aspect-ratio: 4 / 3; }
  .about-banner .about-text, .about-banner.media-first .about-text { width: auto; margin: -40px 12px 0; padding: 24px; }
  .about-portrait .about-media { max-width: 240px; }
  .usp-band .usp-list li + li { border-left: 0; border-top: 1px solid var(--ln); padding-top: 20px; }
  .feature-overlap { display: flex; flex-direction: column; }
  .feature-overlap .feature-media { aspect-ratio: 4 / 3; width: 100%; }
  .feature-overlap .feature-text { margin: -40px 12px 0; padding: 24px; }
  .feature-centered .feature-media { aspect-ratio: 4 / 3; }
  .gallery-mosaic .gal-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .gallery-mosaic .gal-item { aspect-ratio: 1 / 1; }
  .gallery-mosaic .gal-item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .gallery-mosaic .gal-item:nth-child(4) { grid-column: auto; }
  .gallery-strip .gal-grid { grid-template-columns: 1fr 1fr; }
  .cta-split { flex-direction: column; align-items: flex-start; }
  .cta-card { padding: 32px 22px; }
  .faq-columns .faq-item:nth-last-child(2) { border-bottom: 0; }
}

/* Navigatiebalk en footer van de klantwebsite: gewone onderdelen met eigen indelingen. */

.sec.sec-header, .sec.sec-footer { padding: 0; }

/* ---------- Navigatiebalk ---------- */
.sec-header { border-bottom: 1px solid var(--ln); }
.hdr { display: flex; align-items: center; gap: 32px; min-height: 80px; }
.hdr .nav { display: flex; gap: 28px; font-size: 0.95rem; }
.hdr .nav a, .ftr .nav a { text-decoration: none; color: var(--fg); opacity: 0.82; white-space: nowrap; }
.hdr .nav a:hover, .ftr .nav a:hover { opacity: 1; }
.hdr .btn { padding: 11px 18px; white-space: nowrap; }
.hdr .wm { color: var(--fg); }
.tone-plain .hdr .wm, .tone-surface .hdr .wm { color: var(--primary-ink); }
.v-bold .hdr .nav { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; }

/* Logo links, menu rechts */
.hdr-classic .nav { margin-left: auto; }

/* Logo in het midden, menu eronder */
.hdr-centered { flex-direction: column; justify-content: center; gap: 14px; padding-top: 22px; padding-bottom: 18px; position: relative; }
.hdr-centered .hdr-cta { position: absolute; right: 40px; top: 24px; }

/* Menu links, logo midden, knop rechts */
.hdr-split { display: grid; grid-template-columns: 1fr auto 1fr; }
.hdr-split .nav { order: -1; }
.hdr-split .hdr-cta { justify-self: end; }

/* Alleen logo en knop */
.hdr-minimal { justify-content: space-between; min-height: 92px; }

/* Menu in een eigen balk (onder logo en knop) */
.hdr-bar { flex-wrap: wrap; justify-content: space-between; row-gap: 0; padding-top: 18px; }
.hdr-bar .nav { order: 3; width: 100%; padding: 14px 0; margin-top: 16px; border-top: 1px solid var(--ln); gap: 34px; }

/* ---------- Footer ---------- */
.sec-footer { border-top: 1px solid var(--ln); }
.ftr { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; padding-bottom: 36px; font-size: 0.9rem; color: var(--fg-muted); }
.ftr .wm { color: var(--fg); }
.tone-plain .ftr .wm, .tone-surface .ftr .wm { color: var(--primary-ink); }
.ftr-text { max-width: 38em; margin-top: 10px !important; }
.ftr .nav { display: flex; gap: 22px; flex-wrap: wrap; }

.ftr-simple .ftr-text { display: none; }

.ftr-columns { display: grid; grid-template-columns: 1.4fr 1fr; align-items: start; padding-top: 56px; padding-bottom: 28px; row-gap: 40px; }
.ftr-columns .nav { flex-direction: column; gap: 10px; justify-self: end; }
.ftr-columns .ftr-copy { grid-column: 1 / -1; border-top: 1px solid var(--ln); padding-top: 20px; }

.ftr-centered { flex-direction: column; text-align: center; padding-top: 56px; }
.ftr-centered .ftr-brand { display: flex; flex-direction: column; align-items: center; }
.ftr-centered .nav { justify-content: center; }

.ftr-big { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-top: 64px; }
.ftr-big .ftr-brand { grid-column: 1 / -1; }
.ftr-big .ftr-big { font-family: var(--font-heading); font-weight: var(--hw); text-transform: var(--htt); letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(2.6rem, 9vw, 7.5rem); color: var(--fg); margin: 0; overflow-wrap: anywhere; }
.ftr-big .nav { order: 3; justify-self: end; }

/* ---------- Mobiel ---------- */
@media (max-width: 980px) { .hdr .nav { gap: 18px; font-size: 0.88rem; } }
@media (max-width: 900px) {
  .hdr .nav { display: none; }
  .hdr-classic, .hdr-split, .hdr-bar { display: flex; justify-content: space-between; }
  .hdr-bar { padding-top: 0; }
}
@media (max-width: 760px) {
  .hdr { min-height: 64px; gap: 12px; }
  .hdr .wm { white-space: normal; font-size: 1.05rem; min-width: 0; }
  .hdr .logo-img { height: 32px; }
  .hdr .btn { padding: 10px 14px; font-size: 0.85rem; }
  .hdr .btn-arrow { display: none; }
  .hdr-centered { flex-direction: row; justify-content: space-between; padding: 0 20px; }
  .hdr-centered .hdr-cta { position: static; }
  .ftr, .ftr-columns, .ftr-big { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  .ftr-columns .nav, .ftr-big .nav { justify-self: auto; }
  .ftr-centered { align-items: center; text-align: center; }
}

/* ---------- Bewerkmodus: knopje onder het geselecteerde onderdeel ---------- */
.edit-add-below { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); z-index: 8; background: #111; color: #fff; border: 2px solid #FFCC00; border-radius: 999px; padding: 7px 14px; font: 600 12.5px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; cursor: pointer; white-space: nowrap; }
.edit-add-below:hover { background: #FFCC00; color: #111; }
.edit-add-below:focus-visible { outline: 3px solid #FFCC00; outline-offset: 2px; }

/* Label van navigatiebalk en footer niet over het logo */
.sec-header .edit-chip { top: auto; bottom: -12px; }
.sec-footer .edit-chip { top: -12px; }

/* =====================================================================
   Klassiek: extra indelingen, nieuwe onderdelen, beeldvorm, ruimte en logo-accenten.
   (Alleen binnen het iframe.)
   ===================================================================== */

/* ---------- Kleur van het vlak waar een onderdeel op staat (voor randen en uitsparingen) ---------- */
.tone-plain { --now: var(--bg); }
.tone-surface { --now: var(--surface); }
.tone-accent { --now: var(--primary); }
.tone-dark { --now: var(--dark); }
.tone-secondary { --now: var(--secondary); }
.tone-highlight { --now: var(--accent); }

/* ---------- Ruimte ---------- */
.space-compact { --space: 0.6; }
.space-airy { --space: 1.4; }

/* ---------- Beeldvorm (staat later dan de indelingen, dus wint van hun eigen afronding) ---------- */
.shape-sharp .media { border-radius: 0; }
.shape-soft .media { border-radius: 22px; }
.shape-round .media { border-radius: 48px; }
.shape-arch .media { border-radius: 50% 50% var(--r) var(--r) / 34% 34% var(--r) var(--r); }

/* ---------- Logo-accenten: het beeldmerk van de klant als subtiel ontwerpelement ---------- */
.sec { --glyph-main: var(--primary); --glyph-acc: var(--accent); --glyph-on: var(--on-primary); }
.tone-accent { --glyph-main: var(--on-primary); --glyph-acc: var(--accent-on-primary); --glyph-on: var(--primary); }
.tone-dark { --glyph-main: var(--on-dark); --glyph-acc: var(--dark-kicker); --glyph-on: var(--dark); }
.tone-highlight { --glyph-main: var(--on-accent); --glyph-acc: var(--on-accent); --glyph-on: var(--accent); }
.glyph { --lg-main: var(--glyph-main); --lg-acc: var(--glyph-acc); --lg-on: var(--glyph-on); display: inline-flex; flex: none; width: 1em; height: 1em; line-height: 1; }
.glyph .wm-mark { width: 100%; height: 100%; }
.glyph-in { font-size: 1em; }
.watermark { position: absolute; z-index: 0; right: 24px; top: -8px; font-size: 340px; opacity: 0.055; pointer-events: none; }
.hero, .contact, .textblock { position: relative; }
.hero > .hero-text, .hero > .hero-form, .hero > .hero-tiles { position: relative; z-index: 1; }
.contact > .contact-text:not(.contact-dark .contact-text), .contact > .form { position: relative; z-index: 1; }

/* Accordeonknop (plus/min) voor alle uitklapbare onderdelen */
.acc-plus::before { content: '+'; font-size: 1.7rem; font-weight: 400; line-height: 1; }
details[open] > summary .acc-plus::before { content: '−'; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* =====================================================================
   Navigatiebalk
   ===================================================================== */
.sec-header:has(.hdr-floating) { border-bottom: 0; }
.hdr-floating { margin-top: 14px; margin-bottom: 14px; padding: 0 10px 0 28px; min-height: 66px; max-width: 1100px; border: 1px solid var(--ln); border-radius: 999px; background: var(--card); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07); }
.tone-plain .hdr-floating { background: var(--surface); }
.hdr-floating .nav { margin-left: auto; }
.hdr-floating .btn { border-radius: 999px; }
.hdr-underline .nav { margin-left: auto; gap: 34px; }
.hdr-underline .nav a { opacity: 1; padding: 6px 0; border-bottom: 2px solid transparent; }
.hdr-underline .nav a:hover { border-bottom-color: var(--primary-ink); }
.hdr-underline .hdr-cta .btn { border-color: currentColor; }

/* =====================================================================
   Footer
   ===================================================================== */
.ftr-newsletter { display: grid; grid-template-columns: 1.2fr 0.8fr 1.2fr; gap: 40px; align-items: start; padding-top: 56px; padding-bottom: 28px; }
.ftr-newsletter .nav { flex-direction: column; gap: 10px; }
.ftr-newsletter .ftr-copy { grid-column: 1 / -1; border-top: 1px solid var(--ln); padding-top: 20px; }
.ftr-news-title { font-weight: 700; color: var(--fg); margin-bottom: 12px !important; }
.mini-form fieldset { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; min-width: 0; }
.mini-form input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px; border-radius: min(var(--r), 12px); border: 1px solid var(--ln); background: var(--bg); color: var(--text); }
.mini-form .btn { padding: 11px 16px; }
.ftr-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px 32px; align-items: start; padding-top: 64px; padding-bottom: 28px; }
.ftr-callout { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid var(--ln); }
.ftr-callout p { font-family: var(--font-heading); font-weight: var(--hw); text-transform: var(--htt); letter-spacing: var(--hls); font-size: clamp(1.8rem, 4.2vw, 3.2rem); line-height: 1.05; color: var(--fg); }
.ftr-cta .nav { flex-direction: column; gap: 10px; justify-self: end; }
.ftr-cta .ftr-copy { grid-column: 1 / -1; }
.ftr-mark { position: relative; overflow: hidden; padding-top: 72px; padding-bottom: 36px; }
.ftr-mark > *:not(.ftr-glyph) { position: relative; z-index: 1; }
.ftr-glyph { position: absolute; right: 16px; bottom: -70px; font-size: 300px; opacity: 0.08; pointer-events: none; }

/* =====================================================================
   Introductie
   ===================================================================== */
.hero-editorial { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 36px; align-items: end; }
.hero-editorial .hero-text { display: contents; }
.hero-editorial .kicker { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
.hero-editorial h1 { grid-column: 1 / 11; grid-row: 2; font-size: calc(var(--h1) * 1.2); line-height: 0.96; }
.hero-editorial .lead { grid-column: 8 / 13; grid-row: 3; margin-top: 0 !important; align-self: start; }
.hero-editorial .actions { grid-column: 8 / 13; grid-row: 4; margin-top: 0; align-self: start; }
.hero-editorial .hero-media { grid-column: 1 / 8; grid-row: 3 / span 2; aspect-ratio: 16 / 10; }
.hero-editorial.media-first .hero-media { grid-column: 6 / 13; }
.hero-editorial.media-first .lead, .hero-editorial.media-first .actions { grid-column: 1 / 6; }

.hero-mosaic { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap); align-items: center; }
.hero-tiles { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 6 / 5; }
.hero-tiles .hero-media { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; }
.hero-tiles .media { height: 100%; }
.hero-mosaic.media-first .hero-tiles { order: -1; }

.hero-arch { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; }
.hero-arch .hero-media { aspect-ratio: 4 / 5; max-width: 440px; width: 100%; justify-self: center; border-radius: 50% 50% var(--r) var(--r) / 38% 38% var(--r) var(--r); }
.hero-arch.media-first .hero-media { order: -1; }
.hero-arch .watermark { right: auto; left: -40px; }

.hero-minimal { display: flex; flex-direction: column; gap: 56px; }
.hero-minimal h1 { font-size: calc(var(--h1) * 1.15); max-width: 16ch; }
.hero-minimal .hero-media { aspect-ratio: 24 / 6; order: 2; }
.hero-minimal.media-first .hero-media { order: -1; }

.hero-formhero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); align-items: center; }
.hero-form { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 28px; }
.tone-plain .hero-form { background: var(--surface); }
.form-compact fieldset { grid-template-columns: 1fr; gap: 12px; }
.form-compact .form-demo { margin-bottom: 0; }
.hero-formhero.media-first .hero-form { order: -1; }

/* =====================================================================
   Diensten
   ===================================================================== */
.services-bento .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; }
.services-bento .svc { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.services-bento .svc:first-child { grid-column: 1 / span 2; grid-row: span 2; padding: 0; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.services-bento .svc:first-child .svc-num { position: absolute; z-index: 2; margin: 18px; background: var(--bg); color: var(--text); padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; }
.services-bento .svc:first-child { position: relative; }
.services-bento .svc-media { border-radius: 0; min-height: 220px; height: 100%; }
.services-bento .svc:first-child .svc-body { padding: 26px 28px 30px; }
.svc-tile { --glyph-main: var(--on-primary); --glyph-acc: var(--accent-on-primary); --glyph-on: var(--primary); background: var(--primary); border-radius: var(--r); display: grid; place-items: center; font-size: 84px; min-height: 180px; }
.svc-tile .glyph-in { font-size: 84px; }

.services-zigzag .svc-grid { display: flex; flex-direction: column; gap: 64px; }
.services-zigzag .svc { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: center; }
.services-zigzag .svc-media { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.services-zigzag .svc-num { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 14px; }
.services-zigzag .svc-body { grid-column: 2; grid-row: 2; align-self: start; }
.services-zigzag .svc:nth-child(even) .svc-media { grid-column: 2; }
.services-zigzag .svc:nth-child(even) .svc-num, .services-zigzag .svc:nth-child(even) .svc-body { grid-column: 1; }

.services-accordion .svc-grid { max-width: 860px; border-top: 1px solid var(--ln); }
.services-accordion details.svc { border-bottom: 1px solid var(--ln); }
.services-accordion summary { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 24px 0; }
.services-accordion summary .svc-num, .services-accordion summary h3 { margin: 0; }
.services-accordion details p { padding: 0 0 26px 72px; max-width: 46em; }

.services-icons .sec-head { margin-left: auto; margin-right: auto; text-align: center; }
.services-icons .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.services-icons .svc { display: flex; flex-direction: column; align-items: center; }
.svc-icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--card); border: 1px solid var(--ln); margin-bottom: 20px; font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.1rem; color: var(--kick); }
.svc-icon .glyph-in { font-size: 34px; }
.services-icons.n-1 .svc-grid { grid-template-columns: minmax(0, 420px); justify-content: center; }

/* =====================================================================
   Over ons
   ===================================================================== */
.about-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.about-duo .about-text { grid-column: 1; grid-row: 1; }
.about-duo .about-media { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 5; width: 78%; justify-self: end; }
.about-duo .about-media-2 { grid-column: 2; grid-row: 1; aspect-ratio: 1 / 1; width: 46%; justify-self: start; align-self: end; margin-bottom: -30px; border: 8px solid var(--now); z-index: 1; }
.about-duo.media-first .about-text { grid-column: 2; }
.about-duo.media-first .about-media { grid-column: 1; justify-self: start; }
.about-duo.media-first .about-media-2 { grid-column: 1; justify-self: end; }

.about-quote { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gap); align-items: center; }
.about-quote .about-text h2 { font-size: calc(var(--h2) * 1.2); line-height: 1.14; max-width: 20ch; }
.about-quote .about-media { aspect-ratio: 3 / 4; }
.about-quote.media-first .about-media { order: -1; }
.quote-glyph { display: block; font-size: 52px; margin-bottom: 20px; }
.about-text .quote-glyph { margin-bottom: 22px; }

.about-columns { display: grid; grid-template-columns: 1fr 1fr 0.8fr; column-gap: var(--gap); row-gap: 20px; align-items: start; }
.about-columns .about-text { display: contents; }
.about-columns .kicker { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
.about-columns h2 { grid-column: 1 / 3; grid-row: 2; max-width: 16ch; }
.about-columns .about-text > p:not(.kicker) { grid-column: 1 / 3; grid-row: 3; columns: 2; column-gap: 40px; margin-top: 8px !important; }
.about-columns .about-media { grid-column: 3; grid-row: 2 / span 2; aspect-ratio: 3 / 4; }
.about-columns.media-first .about-media { grid-column: 1; }
.about-columns.media-first h2, .about-columns.media-first .about-text > p:not(.kicker) { grid-column: 2 / 4; }

/* =====================================================================
   Werkwijze
   ===================================================================== */
.process-big .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.process-big .steps li { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--ln); padding-top: 22px; }
.process-big .step-num { width: auto; height: auto; background: none; border-radius: 0; color: var(--primary-ink); font-size: clamp(3.4rem, 7vw, 6rem); line-height: 0.95; display: block; }
.tone-accent .process-big .step-num, .tone-dark .process-big .step-num { color: var(--fg); background: none; }

.process-chevrons .steps { display: flex; gap: 6px; }
.process-chevrons .steps li { flex: 1; display: flex; gap: 16px; align-items: flex-start; background: var(--card); padding: 30px 36px 30px 46px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); }
.tone-plain .process-chevrons .steps li { background: var(--surface); }
.process-chevrons .steps li:first-child { padding-left: 30px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
.process-chevrons .steps li:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26px 50%); }
.process-chevrons .step-num { width: 40px; height: 40px; font-size: 1rem; background: var(--primary); color: var(--on-primary); }

.process-accordion .steps { max-width: 860px; border-top: 1px solid var(--ln); }
.process-accordion .steps li { border-bottom: 1px solid var(--ln); }
.process-accordion summary { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; padding: 20px 0; }
.process-accordion summary h3 { margin: 0; }
.process-accordion details p { padding: 0 0 24px 68px; }

/* =====================================================================
   Contact
   ===================================================================== */
.contact-dark { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; max-width: 1080px; }
.contact-dark .contact-text { position: relative; overflow: hidden; background: var(--dark); --fg: var(--on-dark); --fg-muted: color-mix(in srgb, var(--on-dark) 78%, transparent); --kick: var(--dark-kicker); color: var(--on-dark); padding: 56px; border-radius: var(--r) 0 0 var(--r); display: flex; flex-direction: column; justify-content: center; --glyph-main: var(--on-dark); --glyph-acc: var(--dark-kicker); --glyph-on: var(--dark); }
.contact-dark .contact-text h2 { color: var(--on-dark); }
.contact-dark .form { background: var(--card); border: 1px solid var(--ln); border-left: 0; border-radius: 0 var(--r) var(--r) 0; padding: 48px; }
.contact-dark .watermark { right: -50px; bottom: -70px; top: auto; font-size: 300px; opacity: 0.07; }

.contact-minimal { max-width: 820px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.contact-minimal .form { width: 100%; text-align: left; }
.contact-minimal .form fieldset { grid-template-columns: 1fr 1fr; }

.contact-info { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap); align-items: start; }
.contact-info .form { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 32px; }
.contact-facts { margin: 30px 0 0; display: grid; gap: 14px; }
.contact-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; border-top: 1px solid var(--ln); padding-top: 14px; }
.contact-facts dt { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); padding-top: 3px; }
.contact-facts dd { margin: 0; color: var(--fg); }

/* =====================================================================
   Waarom wij
   ===================================================================== */
.usp-icon .glyph-in { font-size: 22px; }
.usp-cards .usp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.usp-cards .usp-list li { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 30px 26px; display: flex; flex-direction: column; gap: 18px; }
.usp-numbered .usp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.usp-numbered .usp-list li { border-top: 2px solid var(--fg); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.usp-num { font-family: var(--font-heading); font-weight: var(--hw); font-size: 2.6rem; line-height: 1; color: var(--primary-ink); }
.tone-accent .usp-num, .tone-dark .usp-num, .tone-highlight .usp-num { color: var(--fg); }
.usp-icons .usp-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.usp-icons .usp-list li { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.usp-icons .usp-icon { width: 68px; height: 68px; }
.usp-icons .usp-icon .glyph-in { font-size: 34px; }

/* =====================================================================
   Uitgelicht
   ===================================================================== */
.sec-feature:has(.feature-bleed) { padding: 0; }
.feature-bleed { position: relative; min-height: 540px; display: flex; align-items: flex-end; max-width: none; padding: 0; }
.feature-bleed .feature-media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.feature-bleed .feature-text { position: relative; z-index: 1; margin: 0 0 48px max(40px, calc((100% - 1080px) / 2)); max-width: 520px; padding: 40px; background: var(--now); border-radius: var(--r); }
.feature-bleed.media-first .feature-text { margin: 0 max(40px, calc((100% - 1080px) / 2)) 48px auto; }

.feature-card { display: grid; grid-template-columns: 1.1fr 0.9fr; padding: 0; max-width: 1080px; background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
.tone-plain .feature-card { background: var(--surface); }
.feature-card .feature-text { padding: 52px; align-self: center; }
.feature-card .feature-media { border-radius: 0; aspect-ratio: auto; min-height: 380px; order: 2; }
.feature-card.media-first .feature-media { order: -1; }

.feature-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.feature-duo .feature-text { grid-column: 1; grid-row: 1; }
.feature-duo .feature-media { grid-column: 2; grid-row: 1; width: 78%; aspect-ratio: 4 / 5; justify-self: end; }
.feature-duo .feature-media-2 { grid-column: 2; grid-row: 1; width: 44%; aspect-ratio: 1; justify-self: start; align-self: end; margin-bottom: -30px; border: 8px solid var(--now); z-index: 1; }
.feature-duo.media-first .feature-text { grid-column: 2; }
.feature-duo.media-first .feature-media { grid-column: 1; justify-self: start; }
.feature-duo.media-first .feature-media-2 { grid-column: 1; justify-self: end; }

/* =====================================================================
   Fotogalerij
   ===================================================================== */
.gallery-masonry .gal-grid { display: block; column-count: 2; column-gap: 16px; }
.gallery-masonry .gal-item { break-inside: avoid; margin-bottom: 16px; }
.gallery-masonry .gal-item:nth-child(1) { aspect-ratio: 3 / 4; }
.gallery-masonry .gal-item:nth-child(2) { aspect-ratio: 1 / 1; }
.gallery-masonry .gal-item:nth-child(3) { aspect-ratio: 4 / 5; }
.gallery-masonry .gal-item:nth-child(4) { aspect-ratio: 4 / 3; }
.gallery-featured .gal-grid { grid-template-columns: repeat(3, 1fr); }
.gallery-featured .gal-item { aspect-ratio: 4 / 3; }
.gallery-featured .gal-item:first-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.gallery-carousel .gal-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 14px; scrollbar-width: thin; }
.gallery-carousel .gal-item { flex: 0 0 min(440px, 78%); aspect-ratio: 4 / 3; scroll-snap-align: start; }
.gallery-collage .gal-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 110px; gap: 14px; }
.gallery-collage .gal-item { aspect-ratio: auto; }
.gallery-collage .gal-item:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 5; }
.gallery-collage .gal-item:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 3; }
.gallery-collage .gal-item:nth-child(3) { grid-column: 4 / 6; grid-row: 3 / 5; transform: rotate(-1.5deg); }
.gallery-collage .gal-item:nth-child(4) { grid-column: 6 / 7; grid-row: 3 / 6; }

/* =====================================================================
   Veelgestelde vragen
   ===================================================================== */
.faq-accordion .faq-list { max-width: 860px; border-top: 1px solid var(--ln); }
.faq-accordion details.faq-item { padding: 0; }
.faq-accordion summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.15rem; line-height: 1.3; }
.faq-accordion details p { margin: 0; padding: 0 56px 24px 0; color: var(--fg-muted); max-width: 46em; }
.faq-cards .faq-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: none; }
.faq-cards .faq-item { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 26px; }
.faq-cards .faq-item:last-child { border-bottom: 1px solid var(--ln); }
.faq-numbered .faq-list { counter-reset: q; }
.faq-numbered .faq-item { counter-increment: q; display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; }
.faq-numbered .faq-item::before { content: counter(q, decimal-leading-zero); grid-row: span 2; font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.5rem; color: var(--primary-ink); line-height: 1.2; }
.tone-accent .faq-numbered .faq-item::before, .tone-dark .faq-numbered .faq-item::before { color: var(--fg); }

/* =====================================================================
   Oproep
   ===================================================================== */
.cta-big { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta-big h2 { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.98; max-width: 14ch; margin: 0 auto; }
.cta-big .cta-text p { margin-left: auto; margin-right: auto; }
.cta-big .actions { justify-content: center; }
.cta-image { position: relative; min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end; padding: 56px; border-radius: var(--r); overflow: hidden; --fg: #fff; --fg-muted: rgba(255, 255, 255, 0.88); --kick: #fff; --btn-bg: #fff; --btn-fg: #111; color: #fff; max-width: 1160px; }
.cta-image .cta-bg { position: absolute; inset: 0; border-radius: 0; }
.cta-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; }
.cta-image .cta-text, .cta-image .actions { position: relative; z-index: 1; }
.cta-image .cta-text p { color: rgba(255, 255, 255, 0.9); }
.cta-pattern { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: var(--r); padding-top: 64px; padding-bottom: 64px; background: var(--card); max-width: 1160px; }
.cta-pattern > *:not(.glyph-pattern) { position: relative; z-index: 1; }
.cta-pattern h2 { font-size: calc(var(--h2) * 1.15); max-width: 20ch; margin: 0 auto; }
.cta-pattern .cta-text p { margin-left: auto; margin-right: auto; }
.cta-pattern .actions { justify-content: center; }
.glyph-pattern { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; place-items: center; opacity: 0.07; font-size: 44px; pointer-events: none; }
.glyph-pattern .dot { width: 0.3em; height: 0.3em; border-radius: 50%; background: currentColor; }

/* =====================================================================
   Tekstblok
   ===================================================================== */
.text-highlight { max-width: 920px; }
.text-highlight .text-body { margin-top: 28px !important; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.5; color: var(--fg); border-left: 4px solid var(--primary); padding-left: 28px; }
.text-sidebar { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--gap); align-items: start; }
.text-sidebar .text-body::first-letter { font-family: var(--font-heading); font-weight: var(--hw); font-size: 3.6em; float: left; line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--primary-ink); }
.text-boxed { position: relative; max-width: 860px; overflow: hidden; background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 56px; }
.tone-plain .text-boxed { background: var(--surface); }
.text-boxed .text-body { margin-top: 20px !important; position: relative; z-index: 1; }
.text-boxed .text-head { position: relative; z-index: 1; }
.text-boxed .watermark { top: auto; bottom: -60px; right: -40px; font-size: 240px; }

/* =====================================================================
   Citaat
   ===================================================================== */
.quote-fig { margin: 0; }
.quote-fig blockquote { margin: 0; font-family: var(--font-heading); font-weight: var(--hw); letter-spacing: var(--hls); font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.2; text-wrap: balance; }
.quote-fig figcaption { margin-top: 24px; color: var(--fg-muted); font-weight: 600; }
.quote-mark { display: block; font-family: var(--font-heading); font-size: 6rem; line-height: 0.6; color: var(--primary-ink); margin-bottom: 18px; }
.tone-accent .quote-mark, .tone-dark .quote-mark, .tone-highlight .quote-mark { color: var(--fg); }
.quote-big { max-width: 960px; text-align: center; }
.quote-big .quote-glyph { margin-left: auto; margin-right: auto; }
.quote-side { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--gap); align-items: center; }
.quote-side .quote-media { aspect-ratio: 4 / 5; }
.quote-side.media-first .quote-media { order: -1; }
.quote-card { max-width: 860px; background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 56px; }
.tone-plain .quote-card { background: var(--surface); }
.quote-band { text-align: center; max-width: 1000px; }
.quote-band .quote-fig blockquote { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.quote-band .quote-glyph { margin-left: auto; margin-right: auto; }

/* =====================================================================
   Banner
   ===================================================================== */
.sec-banner { padding: 26px 0; }
.banner-row { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 40px; flex: none; font-family: var(--font-heading); font-weight: var(--hw); text-transform: var(--htt); letter-spacing: var(--hls); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; white-space: nowrap; }
.banner-row li { display: flex; align-items: center; gap: 40px; }
.banner-row .glyph-in { font-size: 0.9em; }
.banner-row .dot { width: 0.28em; height: 0.28em; border-radius: 50%; background: var(--accent); display: inline-block; }
.banner-marquee { overflow: hidden; }
.banner-track { display: flex; width: max-content; animation: bn-marquee 36s linear infinite; }
.banner-track .banner-row { padding-right: 40px; }
@keyframes bn-marquee { to { transform: translateX(-50%); } }
.banner-pattern .banner-row { justify-content: center; flex-wrap: wrap; gap: 18px 36px; white-space: normal; }
.banner-rule .banner-row { justify-content: space-between; flex-wrap: wrap; white-space: normal; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); padding: 22px 0; font-size: clamp(0.95rem, 1.8vw, 1.3rem); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.banner-rule .banner-row li { gap: 24px; }
.banner-statement { position: relative; text-align: center; padding-top: 24px; padding-bottom: 24px; }
.banner-statement p { position: relative; z-index: 1; font-family: var(--font-heading); font-weight: var(--hw); text-transform: var(--htt); letter-spacing: var(--hls); font-size: clamp(2rem, 6vw, 5rem); line-height: 1; max-width: 18ch; margin: 0 auto; }
.banner-statement .watermark { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); font-size: 280px; }

/* =====================================================================
   Projecten
   ===================================================================== */
.proj-grid { display: grid; gap: 20px; }
.proj { display: flex; flex-direction: column; gap: 16px; }
.proj-media { aspect-ratio: 4 / 3; }
.proj-body { display: flex; flex-direction: column; gap: 4px; }
.proj-body .svc-num { margin-bottom: 4px; }
.proj-body h3 { margin: 0; }
.proj-body p { color: var(--fg-muted); }
.projects-grid .proj-grid { grid-template-columns: repeat(3, 1fr); }
.projects-grid.n-4 .proj-grid, .projects-grid.n-2 .proj-grid { grid-template-columns: repeat(2, 1fr); }
.projects-featured .proj-grid { grid-template-columns: 1.4fr 1fr; grid-auto-rows: auto; }
.projects-featured .proj:first-child { grid-row: span 2; }
.projects-featured .proj:first-child .proj-media { aspect-ratio: 4 / 3.4; }
.projects-featured.n-1 .proj-grid { grid-template-columns: 1fr; }
.projects-list .proj-grid { gap: 0; }
.projects-list .proj { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: center; padding: 22px 0; border-top: 1px solid var(--ln); }
.projects-list .proj:last-child { border-bottom: 1px solid var(--ln); }
.projects-carousel .proj-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.projects-carousel .proj { flex: 0 0 min(380px, 80%); scroll-snap-align: start; }
.projects-masonry .proj-grid { display: block; column-count: 3; column-gap: 20px; }
.projects-masonry.n-2 .proj-grid, .projects-masonry.n-4 .proj-grid { column-count: 2; }
.projects-masonry .proj { break-inside: avoid; margin-bottom: 24px; }
.projects-masonry .proj:nth-child(odd) .proj-media { aspect-ratio: 4 / 5; }
.projects-masonry .proj:nth-child(even) .proj-media { aspect-ratio: 1 / 1; }

/* =====================================================================
   Pakketten
   ===================================================================== */
.pkg-grid { display: grid; gap: 20px; }
.pkg { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.tone-plain .pkg { background: var(--surface); }
.pkg-body { flex: 1; }
.pkg-body h3 { margin-bottom: 8px; }
.pkg-body p { color: var(--fg-muted); }
.pkg .btn { align-self: flex-start; }
.packages-cards .pkg-grid, .packages-highlight .pkg-grid { grid-template-columns: repeat(3, 1fr); }
.packages-cards.n-2 .pkg-grid, .packages-highlight.n-2 .pkg-grid { grid-template-columns: repeat(2, 1fr); }
.packages-cards.n-1 .pkg-grid, .packages-highlight.n-1 .pkg-grid { grid-template-columns: minmax(0, 480px); justify-content: center; }
.pkg.is-main { background: var(--primary); color: var(--on-primary); border-color: transparent; --fg: var(--on-primary); --fg-muted: color-mix(in srgb, var(--on-primary) 82%, transparent); --kick: var(--on-primary); padding: 42px 28px; margin: -14px 0; }
.pkg.is-main .svc-num { color: var(--on-primary); }
.pkg.is-main .btn-primary { background: var(--on-primary); color: var(--primary); }
.packages-compare .pkg-grid { gap: 0; border-top: 1px solid var(--ln); }
.packages-compare .pkg { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 24px; background: none; border: 0; border-bottom: 1px solid var(--ln); border-radius: 0; padding: 26px 0; }
.packages-compare .pkg .btn { align-self: center; }
.packages-compare .svc-num { margin: 0; }
.packages-list .pkg-grid { max-width: 860px; gap: 12px; }
.packages-list .pkg { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 20px; padding: 22px 26px; }
.packages-list .svc-num { margin: 0; }
.packages-list .pkg .btn { align-self: center; }

/* =====================================================================
   Praktisch
   ===================================================================== */
.info-dl { margin: 0; display: grid; }
.info-item dt { font-weight: 700; margin-bottom: 4px; }
.info-item dd { margin: 0; color: var(--fg-muted); }
.info-cards .info-dl { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.info-cards .info-item { background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); padding: 26px; }
.tone-plain .info-cards .info-item { background: var(--surface); }
.info-list .info-dl { max-width: 860px; border-top: 1px solid var(--ln); }
.info-list .info-item { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--ln); }
.info-list .info-item dt { margin: 0; }
.info-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.info-split .info-dl { gap: 0; border-top: 1px solid var(--ln); }
.info-split .info-item { padding: 20px 0; border-bottom: 1px solid var(--ln); }
.info-map { aspect-ratio: 4 / 3; }
.info-strip .info-dl { grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.info-strip .info-item { padding: 28px 24px; }
.info-strip .info-item + .info-item { border-left: 1px solid var(--ln); }
.info-strip .info-item:first-child { padding-left: 0; }

/* =====================================================================
   Mobiel
   ===================================================================== */
@media (max-width: 900px) {
  .hdr-floating { border-radius: 24px; margin-left: 12px; margin-right: 12px; padding: 0 14px 0 20px; }
}
@media (max-width: 760px) {
  .watermark { font-size: 220px; right: -30px; }
  .ftr-newsletter, .ftr-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
  .ftr-cta .nav { justify-self: auto; }
  .ftr-callout { flex-direction: column; align-items: flex-start; }
  .mini-form fieldset { flex-direction: column; }
  .ftr-glyph { font-size: 200px; bottom: -40px; }

  .hero-editorial, .hero-mosaic, .hero-arch, .hero-formhero { display: flex; flex-direction: column; gap: 32px; align-items: stretch; }
  .hero-editorial .hero-text { display: block; }
  .hero-editorial h1 { font-size: calc(var(--h1) * 1.05); }
  .hero-editorial .hero-media { aspect-ratio: 4 / 3; order: 2; }
  .hero-editorial .lead { margin-top: 18px !important; }
  .hero-tiles { aspect-ratio: 5 / 4; }
  .hero-arch .hero-media { max-width: 320px; }
  .hero-minimal .hero-media { aspect-ratio: 16 / 7; }
  .hero-minimal { gap: 32px; }

  .services-bento .svc-grid, .services-icons .svc-grid { grid-template-columns: 1fr; }
  .services-bento .svc:first-child { grid-column: auto; grid-row: auto; }
  .services-zigzag .svc-grid { gap: 44px; }
  .services-zigzag .svc { grid-template-columns: 1fr; }
  .services-zigzag .svc-media, .services-zigzag .svc:nth-child(even) .svc-media { grid-column: 1; grid-row: auto; }
  .services-zigzag .svc-num, .services-zigzag .svc-body, .services-zigzag .svc:nth-child(even) .svc-num, .services-zigzag .svc:nth-child(even) .svc-body { grid-column: 1; grid-row: auto; margin-top: 12px; }
  .services-accordion details p { padding-left: 0; }
  .services-accordion summary { grid-template-columns: 40px 1fr auto; }

  .about-duo, .about-quote, .about-columns, .contact-info, .contact-dark, .feature-duo, .text-sidebar, .quote-side, .info-cols { grid-template-columns: 1fr; }
  .about-duo .about-text, .about-duo.media-first .about-text, .feature-duo .feature-text, .feature-duo.media-first .feature-text { grid-column: 1; grid-row: auto; }
  .about-duo .about-media, .about-duo.media-first .about-media, .feature-duo .feature-media, .feature-duo.media-first .feature-media { grid-column: 1; grid-row: auto; width: 82%; justify-self: end; }
  .about-duo .about-media-2, .about-duo.media-first .about-media-2, .feature-duo .feature-media-2, .feature-duo.media-first .feature-media-2 { grid-column: 1; grid-row: auto; margin-top: -90px; justify-self: start; }
  .about-columns .about-text { display: block; }
  .about-columns .about-text > p:not(.kicker) { columns: 1; }
  .about-columns .about-media, .about-columns.media-first .about-media { aspect-ratio: 4 / 3; }

  .process-big .steps, .usp-cards .usp-list, .usp-numbered .usp-list, .usp-icons .usp-list { grid-template-columns: 1fr; }
  .process-chevrons .steps { flex-direction: column; }
  .process-chevrons .steps li, .process-chevrons .steps li:first-child, .process-chevrons .steps li:last-child { clip-path: none; padding: 24px; border-radius: var(--r); }
  .process-accordion details p { padding-left: 0; }

  .contact-dark .contact-text { border-radius: var(--r) var(--r) 0 0; padding: 36px 24px; }
  .contact-dark .form { border-radius: 0 0 var(--r) var(--r); border-left: 1px solid var(--ln); border-top: 0; padding: 28px 22px; }
  .contact-minimal .form fieldset { grid-template-columns: 1fr; }
  .contact-facts > div { grid-template-columns: 1fr; gap: 2px; }

  .feature-bleed .feature-text, .feature-bleed.media-first .feature-text { margin: 0 16px 24px; padding: 26px; }
  .feature-bleed { min-height: 460px; }
  .feature-card { grid-template-columns: 1fr; }
  .feature-card .feature-media, .feature-card.media-first .feature-media { order: -1; min-height: 240px; }
  .feature-card .feature-text { padding: 28px 22px; }

  .gallery-masonry .gal-grid { column-count: 1; }
  .gallery-featured .gal-grid { grid-template-columns: 1fr 1fr; }
  .gallery-featured .gal-item:first-child { aspect-ratio: 4 / 3; }
  .gallery-collage .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .gallery-collage .gal-item, .gallery-collage .gal-item:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; transform: none; }
  .gallery-collage .gal-item:nth-child(1) { grid-column: span 2; aspect-ratio: 4 / 3; }

  .faq-cards .faq-list { grid-template-columns: 1fr; }
  .faq-numbered .faq-item { grid-template-columns: 48px 1fr; }
  .faq-accordion details p { padding-right: 0; }

  .cta-image { padding: 28px 22px; min-height: 380px; }
  .cta-pattern { padding: 44px 22px; }
  .glyph-pattern { grid-template-columns: repeat(5, 1fr); font-size: 34px; }
  .text-boxed { padding: 32px 22px; }
  .text-highlight .text-body { padding-left: 18px; }
  .quote-card { padding: 32px 22px; }
  .banner-row, .banner-row li { gap: 24px; }

  .projects-grid .proj-grid, .projects-grid.n-4 .proj-grid, .projects-featured .proj-grid { grid-template-columns: 1fr; }
  .projects-featured .proj:first-child { grid-row: auto; }
  .projects-list .proj { grid-template-columns: 110px 1fr; gap: 16px; }
  .projects-masonry .proj-grid, .projects-masonry.n-2 .proj-grid, .projects-masonry.n-4 .proj-grid { column-count: 1; }
  .packages-cards .pkg-grid, .packages-highlight .pkg-grid, .packages-cards.n-2 .pkg-grid, .packages-highlight.n-2 .pkg-grid { grid-template-columns: 1fr; }
  .pkg.is-main { margin: 0; padding: 32px 28px; }
  .packages-compare .pkg { grid-template-columns: 1fr; gap: 10px; }
  .packages-list .pkg { grid-template-columns: 1fr; gap: 10px; }
  .info-list .info-item { grid-template-columns: 1fr; gap: 4px; }
  .info-strip .info-dl { grid-auto-flow: row; grid-auto-columns: auto; }
  .info-strip .info-item, .info-strip .info-item:first-child { padding: 20px 0; }
  .info-strip .info-item + .info-item { border-left: 0; border-top: 1px solid var(--ln); }
}

/* =====================================================================
   Vormscheidingen
   ===================================================================== */
.has-divider { --dv-h: clamp(40px, 6.5vw, 100px); padding-bottom: calc(var(--pad) * var(--space, 1) + var(--dv-h) * 0.55); }
.divider { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--dv-h); line-height: 0; pointer-events: none; z-index: 2; }
.divider svg { display: block; width: 100%; height: 100%; }
.divider.is-flip svg { transform: scaleX(-1); }
.dv-plain { color: var(--bg); }
.dv-surface { color: var(--surface); }
.dv-secondary { color: var(--secondary); }
.dv-accent { color: var(--primary); }
.dv-highlight { color: var(--accent); }
.dv-dark { color: var(--dark); }

/* =====================================================================
   Slider
   ===================================================================== */
.slider { position: relative; }
.sl-viewport { overflow: hidden; border-radius: var(--r); }
.sl-track { display: flex; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sl-slide { flex: 0 0 100%; min-width: 0; }
.sl-text h3 { margin-bottom: 8px; }
.sl-text p { color: var(--fg-muted); }
.sl-text .svc-num { margin-bottom: 14px; }

.slider-full .sl-slide { position: relative; min-height: 480px; display: flex; align-items: flex-end; color: #fff; }
.slider-full .sl-media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.slider-full .sl-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.72)); pointer-events: none; }
.slider-full .sl-text { position: relative; z-index: 1; padding: 48px 56px; max-width: 680px; --fg: #fff; --fg-muted: rgba(255, 255, 255, 0.88); --kick: #fff; --btn-bg: #fff; --btn-fg: #111; }
.slider-full .sl-text p { color: rgba(255, 255, 255, 0.9); }
.slider-full .sl-text .svc-num { color: #fff; }
.slider-full .sl-text h3 { font-size: calc(var(--h2) * 0.95); line-height: 1.1; }

.slider-split .sl-slide { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap); align-items: center; }
.slider-split .sl-media { order: 2; aspect-ratio: 4 / 3; }
.slider-split .sl-text { padding: 12px 8px 12px 24px; }
.slider-split .sl-text h3 { font-size: var(--h2); line-height: 1.1; }

.sl-scroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: none; }
.sl-scroll::-webkit-scrollbar { display: none; }
.slider-cards .sl-slide { flex: 0 0 min(380px, 82%); scroll-snap-align: start; background: var(--card); border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
.tone-plain .slider-cards .sl-slide { background: var(--surface); }
.slider-cards .sl-media { border-radius: 0; aspect-ratio: 4 / 3; }
.slider-cards .sl-text { padding: 26px; }

.slider-text .sl-viewport { border-radius: 0; }
.slider-text .sl-slide { padding: 56px 24px; text-align: center; }
.slider-text .sl-text { max-width: 820px; margin: 0 auto; }
.slider-text .sl-text h3 { font-size: clamp(1.8rem, 3.8vw, 3.1rem); line-height: 1.1; margin: 0 0 16px; }
.slider-text .actions { justify-content: center; }

.sl-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.sl-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; font-family: inherit; }
.sl-btn:hover { background: var(--fg); color: var(--now); }
.sl-dots { display: flex; gap: 8px; align-items: center; }
.sl-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--fg) 25%, transparent); transition: width 0.25s; }
.sl-dot.is-on { width: 28px; border-radius: 99px; background: var(--fg); }

@media (max-width: 760px) {
  .slider-full .sl-slide { min-height: 400px; }
  .slider-full .sl-text { padding: 28px 22px; }
  .slider-split .sl-slide { grid-template-columns: 1fr; gap: 20px; }
  .slider-split .sl-media { order: -1; }
  .slider-split .sl-text { padding: 0; }
  .slider-text .sl-slide { padding: 36px 8px; }
}

/* Ontwerprichting "Etalage": het werk staat voorop. Stil, licht, veel lucht en grote staande foto's. */
.s-etalage { --r: 6px; --h1: clamp(2.1rem, 4.6vw, 3.7rem); --h2: clamp(1.6rem, 3vw, 2.3rem); --pad: 88px; --gap: 48px; --rail-w: clamp(230px, 24vw, 330px); font-size: 17px; }
.s-etalage h1, .s-etalage h2 { line-height: 1.04; }
.s-etalage .kicker { letter-spacing: 0.08em; font-weight: 600; font-size: 0.74rem; }
.s-etalage .btn { border-radius: 999px; padding: 12px 22px; font-weight: 600; }
.s-etalage .btn-ghost { border-color: var(--ln); color: var(--fg); background: transparent; }
.s-etalage .btn-link { padding-left: 0; padding-right: 0; border: 0; background: none; color: var(--fg); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.s-etalage .media, .s-etalage .et-card { border-radius: var(--r); }

/* Navigatie: alleen logo, een rustige contactknop en een uitklapmenu */
.s-etalage .sec-header { padding: 0; position: relative; z-index: 5; }
.et-hdr { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 22px; position: relative; }
.et-hdr-end { display: flex; align-items: center; gap: 12px; }
.et-hdr .btn { padding: 9px 18px; font-size: 0.88rem; }
.et-menu-btn { font: inherit; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; background: var(--text); color: var(--bg); border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.et-menu { position: absolute; right: 40px; top: 100%; z-index: 6; background: var(--text); color: var(--bg); border-radius: var(--r); padding: 12px 8px; display: grid; min-width: 240px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); }
.et-menu a { text-decoration: none; padding: 12px 18px; font-size: 1.15rem; font-family: var(--font-heading); font-weight: var(--hw); letter-spacing: var(--hls); border-radius: 4px; }
.et-menu a:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); }

/* Eerste sectie: korte kop, daarna direct een rij staande foto's */
.s-etalage .sec-hero { padding: 24px 0 0; }
.et-hero-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--gap); align-items: end; padding-top: 40px; padding-bottom: 44px; }
.et-hero-title h1 { max-width: 13em; }
.et-hero-aside .lead { margin: 0 0 20px !important; font-size: 1.02rem; max-width: 26em; }
.et-hero-aside .actions { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }

/* Rij met staande foto's: horizontaal schuiven met snap, kaarten steken uit de rand */
.et-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0 max(40px, calc((100% - 1160px) / 2)) 56px; align-items: start; }
.et-photos .et-card, .et-photos .media { aspect-ratio: var(--et-tall, 4 / 5); width: 100%; overflow: hidden; position: relative; margin: 0; }
.et-photos .media .art, .et-photos .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.et-photos > :nth-child(even) { margin-top: 44px; }

/* Diensten: grote tekstregels die verspringen, zonder kaarten */
.et-lines { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.et-lines-head .sec-intro { font-size: 0.95rem; max-width: 18em; }
.et-lines-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: l; }
.et-lines-list li { display: grid; grid-template-columns: minmax(0, 1fr); padding: 18px 0 18px calc(var(--i, 0) * clamp(0px, 5vw, 72px)); border-top: 1px solid var(--ln); position: relative; }
.et-lines-list li:last-child { border-bottom: 1px solid var(--ln); }
.et-lines-list h2 { font-size: clamp(1.7rem, 3.4vw, 2.8rem); display: flex; align-items: baseline; gap: 14px; }
.et-lines-list h2::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--primary-ink); transform: translateY(-0.18em); }
.et-lines-list p { color: var(--fg-muted); max-width: 34em; margin: 8px 0 0 23px; font-size: 0.98rem; }

/* Projecten: kop links, daaronder de rij met titels onder elke foto */
.s-etalage .sec-projects { padding-left: 0; padding-right: 0; }
.et-projects-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.et-projects-head .kicker { margin: 0 !important; }
.et-project { display: flex; flex-direction: column; gap: 14px; }
.et-project .gal-item { aspect-ratio: var(--et-tall, 4 / 5); }
.et-project:nth-child(even) .gal-item { margin-top: 0; }
.et-project-cap { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline; }
.et-project-num { font-size: 0.78rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; grid-row: span 2; }
.et-project-cap h3 { font-size: 1.1rem; }
.et-project-cap p { color: var(--fg-muted); font-size: 0.88rem; grid-column: 2; }

/* Over ons: één smalle kolom, de eerste zin groot */
.et-note { max-width: 780px; margin-inline: auto; }
.et-note h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: 20px; }
.et-note p { color: var(--fg-muted); max-width: 36em; }

/* Contact: slotzin links, compact formulier rechts */
.et-closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: calc(var(--gap) * 1.2); align-items: start; }
.et-closing-text h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.et-closing-text p { color: var(--fg-muted); margin-top: 16px; max-width: 28em; }

@media (max-width: 860px) {
  .s-etalage { --pad: 64px; --gap: 28px; --rail-w: 72vw; }
  .et-hdr, .et-hero-top { padding-left: 20px; padding-right: 20px; }
  .et-hero-top { grid-template-columns: 1fr; padding-top: 24px; padding-bottom: 28px; }
  .et-lines { grid-template-columns: 1fr; }
  .et-lines-list li { padding-left: 0; }
  .et-closing { grid-template-columns: 1fr; }
  .et-menu { right: 20px; }
  .et-hdr-cta { display: none; }
}


/* Etalage: variatie per site (zie provider/dna.ts). Alleen kleine, onafhankelijke keuzes die samen een eigen uiterlijk geven. */
.s-etalage.dna-p-tall { --et-tall: 4 / 5; }
.s-etalage.dna-p-classic { --et-tall: 3 / 4; }
.s-etalage.dna-p-square { --et-tall: 1 / 1; }

.s-etalage.dna-d-tight { --pad: 64px; }
.s-etalage.dna-d-normal { --pad: 88px; }
.s-etalage.dna-d-airy { --pad: 116px; }

.dna-l-bold .et-steps li { border-top-width: 4px; }
.dna-l-bold :is(.et-lines-list li, .et-index-list li, .et-stack-row, .et-faq-list details) { border-top: 2px solid var(--fg); }
.dna-l-faint .sec { --ln: color-mix(in srgb, var(--fg) 7%, transparent); }

@media (max-width: 860px) {
  .s-etalage.dna-d-tight { --pad: 48px; }
  .s-etalage.dna-d-normal { --pad: 64px; }
  .s-etalage.dna-d-airy { --pad: 84px; }
}

/* Etalage: drie ontwerpconcepten (helder = redactioneel, bold = expressief, personal = rustig).
   Ze verschillen in typografie, schaal, knoppen, navigatie, beeldbewerking, ritme en footer, niet alleen in kleur. */

/* Logo: een geüpload logo blijft zichtbaar op donkere vlakken */
.s-etalage :is(.tone-dark, .tone-accent) .logo-img { background: #fff; border-radius: 6px; padding: 8px 12px; }
.et-ftr-glyph { display: none; }

/* =========================================================================
   REDACTIONEEL (helder): papier, inkt, schreefletters met grote schaalverschillen, haarlijnen en nummering
   ========================================================================= */
.s-etalage.v-direct { --r: 0px; --h1: clamp(2.6rem, 5.6vw, 5rem); --h2: clamp(1.9rem, 3.4vw, 2.9rem); --pad: 104px; font-size: 17px; }
.v-direct main { counter-reset: sec; }
.v-direct main > .sec { counter-increment: sec; }
.v-direct h1 { line-height: 0.96; letter-spacing: -0.028em; }
.v-direct h2 { line-height: 1.04; }
.v-direct h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; }
.v-direct .kicker { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); display: flex; gap: 10px; }
.v-direct .kicker::before { content: counter(sec, decimal-leading-zero) ' /'; color: var(--fg); }
.v-direct main > .sec:not(.sec-hero):not(.sec-banner):not(.sec-quote) { border-top: 1px solid var(--fg); }
.v-direct .tone-plain, .v-direct .tone-surface { --btn-bg: var(--fg); --btn-fg: var(--bg); }
.v-direct .tone-dark { --btn-bg: var(--on-dark); --btn-fg: var(--dark); }
.v-direct .btn { border-radius: 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 15px 22px; gap: 14px; transition: gap 0.25s, background 0.25s, color 0.25s; }
.v-direct .btn:hover { gap: 22px; }
.v-direct .btn-ghost { border: 1px solid currentColor; }
.v-direct .btn-link { text-transform: none; letter-spacing: 0; font-size: 0.95rem; font-weight: 500; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding: 2px 0; transition: background-size 0.3s; }
.v-direct .btn-link:hover { background-size: 0 1px; }
.v-direct .sec-header { border-bottom: 1px solid var(--fg); }
.v-direct .et-hdr, .v-direct .et-hdr-splitbar { padding-top: 18px; padding-bottom: 18px; }
.v-direct .nav a { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; font-size: 0.72rem !important; letter-spacing: 0.12em !important; text-transform: uppercase; opacity: 1 !important; }
.v-direct .media :is(img, .art) { filter: grayscale(0.3) contrast(1.04); transition: filter 0.6s, transform 0.8s cubic-bezier(0.22, 0.8, 0.2, 1); }
.v-direct .media:hover :is(img, .art), .v-direct .et-project:hover img { filter: none; }
.v-direct .media-note { background: transparent; color: #fff; padding: 0; left: 10px; bottom: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; mix-blend-mode: difference; }
.v-direct .sec-hero { padding-top: 40px; }
.v-direct .sec-hero h1 { max-width: 12em; }
.v-direct .lead { font-size: 1.12rem; }
.v-direct .sec-footer { border-top: 1px solid var(--fg); }
.v-direct .sec-footer .wm { font-size: 1.7rem; }
.v-direct .et-ftr-cols { padding-top: 72px; }
.v-direct .sec-footer .logo-img { height: 64px; max-width: 260px; }
.v-direct .et-quote blockquote { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.12; text-align: left; }
.v-direct .et-quote { text-align: left; border-block: 0; max-width: 1000px; margin-inline: auto; }
.v-direct .et-lines-list h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }

/* =========================================================================
   EXPRESSIEF (bold): volle kleurvlakken, vette grotesk, maskers, pilknoppen en een vaste contactknop
   ========================================================================= */
.s-etalage.v-bold { --r: 28px; --h1: clamp(2.6rem, 6vw, 5.2rem); --h2: clamp(1.9rem, 3.6vw, 3rem); --pad: 112px; font-size: 17.5px; }
.v-bold h1, .v-bold h2 { line-height: 0.94; letter-spacing: -0.04em; }
.v-bold h3 { letter-spacing: -0.02em; }
.v-bold .kicker { display: inline-flex; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; }
.v-bold .tone-accent .kicker, .v-bold .tone-dark .kicker { background: var(--on-primary); color: var(--primary); }
.v-bold .tone-dark .kicker { background: var(--accent); color: var(--on-accent); }
.s-etalage .btn { justify-content: center; text-align: center; }
.v-bold .btn:not(:has(.btn-arrow)) { padding: 14px 28px; }
.v-bold .btn { border-radius: 999px; padding: 8px 8px 8px 24px; gap: 16px; font-weight: 700; font-size: 0.92rem; transition: background 0.25s, color 0.25s, transform 0.25s; }
.v-bold .btn-primary { background: var(--accent); color: var(--on-accent); }
.v-bold .tone-accent .btn-primary { background: var(--on-primary); color: var(--primary); }
.v-bold .btn-arrow { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 1rem; transition: transform 0.3s; }
.v-bold .tone-dark .btn-arrow { background: var(--bg); color: var(--text); }
.v-bold .btn:hover .btn-arrow { transform: rotate(-45deg); }
.v-bold .btn-ghost { padding: 12px 22px; border: 2px solid currentColor; }
.v-bold .btn-link { padding: 4px 0; border: 0; background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.v-bold .btn-link .btn-arrow { width: auto; height: auto; background: none; color: inherit; }
.v-bold .nav a { font-weight: 600; opacity: 1 !important; }
.v-bold .et-hdr-dock { background: var(--bg); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); border: 0; }
.v-bold .et-hdr-dock .nav a { padding: 8px 14px; border-radius: 999px; text-decoration: none !important; }
.v-bold .et-hdr-dock .nav a:hover { background: var(--primary); color: var(--on-primary); }
.v-bold .media { border-radius: var(--m-rad, var(--r)); }
.v-bold :is(.et-collage-a, .et-pm-0, .et-ao-photo, .et-ap-a, .et-cd-a, .et-photos > :nth-child(odd)) { border-radius: 999px 999px var(--r) var(--r); }
.v-bold :is(.et-collage-c, .et-small-photo, .et-cd-b, .et-ap-b, .et-as-b) { border-radius: 50%; }
.v-bold .et-duo-item:nth-child(odd) .et-duo-photo { border-radius: 999px 999px var(--r) var(--r); }
.v-bold .et-duo-item:nth-child(even) .et-duo-photo { border-radius: var(--r) 999px 999px var(--r); }
.v-bold .media :is(img, .art), .v-bold .et-card :is(img, .art) { transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.2, 1); }
.v-bold .et-project:hover .et-card, .v-bold .et-duo-item:hover .et-duo-photo, .v-bold .et-photos .media:hover { border-radius: var(--r); transition: border-radius 0.6s; }
.v-bold .et-bn-row li, .v-bold .et-banner-marquee { font-size: clamp(2rem, 5vw, 3.8rem); }
.v-bold .et-banner-marquee { border: 0; padding-block: 28px; background: var(--primary); color: var(--on-primary); }
.v-bold .et-bn-row i { background: var(--accent); width: 14px; height: 14px; }
.v-bold .sec-banner { padding: 0; }
.v-bold .et-banner-rule { border-color: var(--fg); font-size: 0.9rem; }
.v-bold :is(.tone-accent, .tone-dark) .et-index-num, .v-bold :is(.tone-accent, .tone-dark) p { opacity: 0.9; }
.v-bold .et-sv-bento article, .v-bold .et-sv-cards article { border-radius: var(--r); border: 0; background: color-mix(in srgb, var(--fg) 8%, transparent); }
.v-bold .tone-accent .et-sv-bento article, .v-bold .tone-accent .et-sv-cards article { background: color-mix(in srgb, var(--on-primary) 14%, transparent); }
.v-bold .et-sv-cards article:hover { background: var(--accent); color: var(--on-accent); }
.v-bold .et-sv-bento .is-lead { background: var(--dark); color: var(--on-dark); }
.v-bold .sec-footer .et-ftr-name { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.1; letter-spacing: -0.02em; }
.v-bold .et-ftr-glyph { display: inline-flex; font-size: 64px; }
.v-bold .sec-footer .logo-img { height: 72px; max-width: 280px; }
.v-bold .et-fab { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); transition: transform 0.3s; }
.v-bold .et-fab:hover { transform: translateY(-3px); }
.v-bold .et-fab span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: #fff; }
.et-fab { display: none; }
.v-bold .et-fab { display: inline-flex; }

/* =========================================================================
   RUSTIG (personal): crème, lichte schreefletters, veel lucht, bogen en fijne lijnen
   ========================================================================= */
.s-etalage.v-personal { --r: 3px; --h1: clamp(2.3rem, 4.4vw, 3.8rem); --h2: clamp(1.8rem, 3vw, 2.6rem); --pad: 132px; font-size: 17px; }
.v-personal h1, .v-personal h2 { line-height: 1.1; letter-spacing: -0.012em; }
.v-personal h3 { font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.35rem; }
.v-personal .kicker { display: flex; align-items: center; gap: 14px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--fg-muted); }
.v-personal .kicker::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.v-personal .btn { border-radius: 999px; padding: 16px 34px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; background: transparent; color: var(--fg); border: 1px solid currentColor; transition: background 0.4s, color 0.4s; }
.v-personal .btn:hover { background: var(--fg); color: var(--bg); }
.v-personal .tone-dark .btn:hover, .v-personal .tone-accent .btn:hover { background: var(--bg); color: var(--text); }
.v-personal .btn-arrow { display: none; }
.v-personal .btn-link { border: 0; padding: 4px 0; letter-spacing: 0.14em; border-bottom: 1px solid currentColor; border-radius: 0; background: none !important; color: var(--fg) !important; }
.v-personal .btn-link:hover { background: none !important; opacity: 0.6; }
.v-personal .et-hdr-stack { padding-top: 34px; padding-bottom: 22px; gap: 20px; border-bottom: 1px solid var(--ln); max-width: none; }
.v-personal .nav a { font-size: 0.7rem !important; font-weight: 500; letter-spacing: 0.22em !important; text-transform: uppercase; opacity: 1 !important; }
.v-personal .media { border-radius: var(--m-rad, var(--r)); }
.v-personal :is(.et-centered-hero-photo, .et-portrait-photo, .et-ao-photo) { border-radius: 999px 999px var(--r) var(--r); }
.v-personal .media :is(img, .art) { filter: saturate(0.88) brightness(1.02); }
.v-personal .media-note { display: none; }
.v-personal .sec-hero { padding-top: 56px; }
.v-personal .et-centered-hero-text h1 { max-width: 14em; font-weight: var(--hw); }
.v-personal .lead { font-size: 1.1rem; color: var(--fg-muted); }
.v-personal .et-note, .v-personal .et-about-statement { max-width: 640px; }
.v-personal .et-note h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); text-align: center; }
.v-personal .et-note .kicker { justify-content: center; }
.v-personal .et-note p { text-align: center; margin-inline: auto; }
.v-personal .sec-contact .et-centered h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.v-personal .form input, .v-personal .form textarea { border-radius: 0; border: 0; border-bottom: 1px solid var(--ln); background: transparent; padding-inline: 0; }
.v-personal .sec-footer { border-top: 1px solid var(--ln); padding: 56px 0 36px; }
.v-personal .et-ftr { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.v-personal .et-ftr .nav { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.v-personal .et-ftr-glyph { display: inline-flex; font-size: 38px; opacity: 0.7; order: -1; }
.v-personal .sec-footer .wm { font-size: 1.5rem; }
.v-personal .sec-footer .logo-img { height: 56px; max-width: 240px; }
.v-personal .et-ftr-cols { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.v-personal .et-ftr-cols .nav { justify-self: center; display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.v-personal .et-steps li, .v-personal .et-timeline { border-color: var(--ln); }

/* =========================================================================
   Mobiel: dezelfde concepten, maar rustiger gedimensioneerd
   ========================================================================= */
@media (max-width: 860px) {
  .s-etalage.v-direct { --pad: 64px; --h1: clamp(2.3rem, 10vw, 3.4rem); }
  .s-etalage.v-bold { --pad: 72px; --h1: clamp(2.4rem, 11vw, 3.6rem); --h2: clamp(1.9rem, 8vw, 2.7rem); }
  .s-etalage.v-personal { --pad: 76px; --h1: clamp(2.1rem, 8.4vw, 3rem); }
  .v-bold .et-fab { right: 14px; bottom: 14px; }
  .v-bold .btn { padding-left: 20px; }
  .v-personal .btn { padding: 15px 26px; }
  .v-bold .et-banner-marquee { font-size: 1.8rem; }
  .v-personal .et-hdr-stack { padding-top: 22px; }
  .v-bold :is(.et-collage-a, .et-ao-photo, .et-ap-a) { border-radius: 40% 40% var(--r) var(--r) / 24% 24% var(--r) var(--r); }
}
@media (prefers-reduced-motion: reduce) {
  .v-direct .btn, .v-direct .btn-link, .v-bold .btn-arrow, .v-bold .et-fab, .v-personal .btn { transition: none; }
}

/* Grote koppen breken nooit midden in een woord, tenzij het echt niet anders kan */
.s-etalage :is(h1, h2) { overflow-wrap: break-word; hyphens: manual; }
.s-etalage.v-bold { --h1: clamp(2.4rem, 4.8vw, 4.6rem); }
.s-etalage.v-direct { --h1: clamp(2.6rem, 5.6vw, 5rem); }

/* Sectieovergangen met karakter */
.v-bold main > :is(.tone-accent, .tone-dark, .tone-highlight):not(.sec-hero) { margin-inline: 14px; border-radius: 40px; }
@media (max-width: 860px) {
  .v-bold main > :is(.tone-accent, .tone-dark, .tone-highlight):not(.sec-hero) { margin-inline: 8px; border-radius: 26px; }
}

.v-bold .kicker { max-width: 100%; white-space: normal; line-height: 1.35; border-radius: 16px; }
@media (max-width: 860px) {
  .v-direct .sec-footer .wm { font-size: 1.2rem; white-space: normal; }
  .v-bold .sec-footer .wm, .v-personal .sec-footer .wm { white-space: normal; }
}

@media (max-width: 860px) {
  .s-etalage.v-bold { --h1: clamp(2rem, 9.4vw, 3.2rem); }
  .s-etalage :is(.et-hero-top, .et-stage-row, .et-collage) { grid-template-columns: minmax(0, 1fr); }
  .s-etalage :is(h1, h2) { overflow-wrap: anywhere; }
}

.v-personal .btn-link { text-decoration: none; padding-bottom: 6px; }
.v-personal :is(.et-centered-hero-text, .et-centered, .et-about-statement, .et-cta-centered, .et-quote-marks) .kicker { justify-content: center; }
.v-personal .et-centered-hero-text .actions { margin-top: 28px; }

/* Koppen binnen secties volgen overal dezelfde, rustige schaal (alleen de openingssectie is groter) */
.s-etalage :is(.et-cstacked-head, .et-facts-head, .et-closing-text, .et-cphoto, .et-ab-card, .et-about-statement, .et-note, .et-centered, .et-cta-split, .et-cta-centered, .et-cta-band, .et-cta-card, .et-cta-duo, .et-text-lead, .et-portrait-text, .et-about-side) h2 { font-size: var(--h2); }
.s-etalage .et-lines-list h2 { font-size: min(var(--h2), 2.5rem); }
.s-etalage .et-tablist button { font-size: min(var(--h2), 1.9rem); }
.s-etalage .et-ftr-name { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
.s-etalage .sec-footer .wm { font-size: 1.35rem; }
@media (max-width: 860px) { .s-etalage.v-bold { --h2: clamp(1.7rem, 7vw, 2.3rem); } .s-etalage.v-bold .sec-footer .et-ftr-name { font-size: 1.2rem; } }

/* Onder de openingssectie altijd ruimte, behalve waar een beeld de sectie afsluit */
.s-etalage .sec-hero { padding-bottom: calc(var(--pad) * 0.7); }
.s-etalage .sec-hero:has(:is(.et-cover, .et-photos, .et-marquee-hero)) { padding-bottom: 0; }

/* In een halve kolom (naast foto's) passen koppen kleiner, zodat ze op hooguit drie regels blijven */
.s-etalage :is(.et-collage, .et-hero-top, .et-stage-row, .et-collage-text) h1 { font-size: clamp(2.1rem, 3.7vw, 3.9rem); }
.s-etalage.v-bold :is(.et-collage, .et-hero-top) h1 { letter-spacing: -0.035em; }

/* Ontwerprichting "Warm ambacht" (generatie 2). Alles staat onder .gen2, zodat bestaande concepten er nooit door veranderen.
   Het ontwerp in het kort:
   - Kop in de huisstijlletter, het laatste woord cursief in een schreefletter (het accent van de richting).
   - Eén fotovorm per ontwerp (afgeknipte hoek, afgeronde kaart of zachte hoek), nooit een kader of rand om een foto.
   - Het hangertje: een klein label aan het werk met iets wat je direct wilt weten.
   - Lijnen alleen waar ze iets scheiden; geen nummers behalve bij een echte volgorde (werkwijze).
   - Kleur: een lichte basis met een vleugje van de hoofdkleur, een diepe tint van diezelfde kleur voor de donkere vlakken. */

.gen2 { --r: 14px; --pad: 112px; --gap: 64px; --wa-w: 1180px; --wa-gut: clamp(20px, 5vw, 40px); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); }
.gen2.wa-direct { --wa-photo-r: 4px; --wa-btn-r: 10px; }
.gen2.wa-bold { --wa-photo-r: 26px; --wa-btn-r: 999px; }
.gen2.wa-personal { --wa-photo-r: 3px; --wa-btn-r: 6px; --pad: 128px; }
.gen2 .sec { padding: var(--pad) 0; --btn-bg: var(--dark); --btn-fg: var(--on-dark); }
.gen2 .tone-dark, .gen2 .sec-footer { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.gen2 .sec-hero { padding: 0; }
/* Twee onderdelen met dezelfde achtergrond onder elkaar zijn één vlak: de ruimte ertussen niet dubbel nemen */
.gen2 .tone-plain + .tone-plain:not(.sec-hero), .gen2 .tone-surface + .tone-surface:not(.sec-hero) { padding-top: calc(var(--pad) * 0.4); }
.gen2 .sec-header { padding: 0; position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.gen2 .sec-footer { padding: 80px 0 44px; background: var(--dark); color: var(--on-dark); }
.wa-wrap { width: min(var(--wa-w), 100% - 2 * var(--wa-gut)); margin-inline: auto; }

/* Gedempte tekst op kleurvlakken: even sterk als de gewone tekst, zodat hij op elke huisstijlkleur leesbaar blijft (de bestaande vormgeving gebruikt 78 tot 82 procent). */
.gen2 .tone-accent { --fg-muted: var(--on-primary); }
.gen2 .tone-highlight { --fg-muted: var(--on-accent); }
.gen2 .tone-secondary { --fg-muted: var(--on-secondary); }

/* ---------- Letters ---------- */
.gen2 :is(h1, h2, h3) { font-family: var(--font-heading); font-weight: var(--hw); letter-spacing: var(--hls); text-transform: none; text-wrap: balance; color: inherit; }
:where(.gen2) :is(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.gen2 h1 { font-size: clamp(2.4rem, 4.7vw, 4.2rem); line-height: 1.03; }
.gen2 h2 { font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.08; }
.gen2 h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.2; }
.gen2 p { text-wrap: pretty; }
.gen2 .wa-em { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.005em; font-size: 1.09em; }
.wa-label { display: flex; align-items: center; gap: 12px; font-size: 0.74rem; font-weight: 650; letter-spacing: 0.15em; text-transform: uppercase; color: var(--kick); margin: 0 0 22px; }
.wa-label::before { content: ''; width: 24px; height: 1.5px; background: currentColor; flex: none; }
.wa-lead { font-size: 1.16rem; line-height: 1.58; color: color-mix(in srgb, var(--fg) 88%, transparent); max-width: 34em; margin-top: 28px; }
.wa-intro { color: var(--fg-muted); max-width: 38em; margin-top: 16px; }
.wa-head { margin-bottom: 56px; max-width: 760px; }

/* ---------- Knoppen en links ---------- */
.wa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.wa-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: var(--wa-btn-r, 10px); font: inherit; font-size: 0.96rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background 0.3s, color 0.3s, transform 0.3s; line-height: 1.2; }
.wa-btn svg { transition: transform 0.3s; flex: none; }
.wa-btn:active { transform: scale(0.97); transition-duration: 0.1s; }
.wa-btn:hover svg { transform: translateX(5px); }
.wa-btn-solid { background: var(--btn-bg); color: var(--btn-fg); }
.wa-btn-solid:hover { background: color-mix(in srgb, var(--btn-bg) 82%, var(--bg)); }
.wa-btn-line { border-color: currentColor; color: inherit; background: transparent; }
.wa-link { color: inherit; font-weight: 600; font-size: 0.96rem; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; transition: background-size 0.35s; }
.wa-link:hover { background-size: 0 1.5px; background-position: 100% 100%; }
.gen2 a:focus-visible, .gen2 button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Foto's: vormen per ontwerp, nooit een rand ---------- */
.wa-photo { position: relative; overflow: hidden; margin: 0; background: var(--surface); border-radius: var(--wa-photo-r); }
.wa-photo :is(img, .art) { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.2, 1); }
.wa-photo .media-note { font-size: 10px; padding: 5px 8px; left: 10px; bottom: 10px; background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--text); }
.gen2.wa-direct .wa-photo-a, .gen2.wa-direct .wa-story .wa-photo, .gen2.wa-direct .wa-t0 .wa-photo { border-top-left-radius: 120px; }
.gen2.wa-personal .wa-photo-a, .gen2.wa-personal .wa-story .wa-photo, .gen2.wa-personal .wa-note-r { border-bottom-right-radius: 96px; }
.gen2.wa-bold .wa-wide .wa-photo { border-radius: 34px; }
@media (hover: hover) { .wa-card:hover .wa-photo :is(img, .art), .wa-t:hover .wa-photo :is(img, .art), .wa-m:hover .wa-photo :is(img, .art), .wa-strip-item:hover .wa-photo :is(img, .art) { transform: scale(1.045); } }

/* ---------- Het hangertje ---------- */
.wa-tag { position: absolute; z-index: 3; display: grid; gap: 3px; max-width: 232px; padding: 14px 18px 14px 38px; background: var(--bg); color: var(--text); border-radius: 12px; box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--dark) 55%, transparent); rotate: -2.5deg; }
.wa-tag::before { content: ''; position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 55%, transparent); transform: translateY(-50%); }
.wa-tag-k { font-size: 0.68rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kick); }
.wa-tag-t { font-family: var(--font-heading); font-weight: var(--hw); font-size: 0.98rem; line-height: 1.25; letter-spacing: -0.01em; }

/* ---------- Navigatie ---------- */
.wa-hdr { display: flex; align-items: center; gap: 32px; min-height: 84px; position: relative; }
.wa-hdr .nav { display: flex; gap: 30px; margin-left: auto; }
.wa-hdr .nav a { color: inherit; text-decoration: none; font-size: 0.95rem; font-weight: 520; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; padding-bottom: 4px; transition: background-size 0.35s; }
.wa-hdr .nav a:hover { background-size: 100% 1.5px; }
.gen2 .hdr-logo { min-width: 0; max-width: 100%; flex: 0 1 auto; }
.gen2 .hdr-logo .wm { min-width: 0; max-width: 100%; }
.gen2 .hdr-logo .wm-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-hdr-end { display: flex; align-items: center; gap: 12px; flex: none; }
.wa-hdr-end .wa-btn { padding: 10px 18px; font-size: 0.9rem; }
.wa-burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent); background: transparent; color: inherit; cursor: pointer; place-items: center; padding: 0; }
.wa-burger-lines, .wa-burger-lines::before { display: block; width: 18px; height: 1.8px; background: currentColor; position: relative; }
.wa-burger-lines::before { content: ''; position: absolute; top: -6px; left: 0; }
.wa-drawer { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; display: grid; padding: 10px; background: var(--bg); border-radius: 18px; box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--dark) 60%, transparent); }
.wa-drawer a { padding: 16px 18px; border-radius: 10px; color: inherit; text-decoration: none; font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.35rem; letter-spacing: var(--hls); }
.wa-drawer a:hover { background: var(--surface); }

/* ---------- Opening ---------- */
.wa-stage { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: var(--gap); align-items: center; padding-block: clamp(40px, 6vw, 84px) clamp(56px, 7vw, 100px); }
.wa-stage h1 { max-width: 12.5em; }
.wa-stage-media { position: relative; padding-bottom: 36px; }
.wa-photo-a { aspect-ratio: 4 / 5; width: 84%; margin-left: auto; }
.wa-photo-b { position: absolute; left: 0; bottom: 0; width: 40%; aspect-ratio: 1; box-shadow: 0 26px 44px -26px color-mix(in srgb, var(--dark) 70%, transparent); }
.wa-stage-media .wa-tag { left: 4%; top: 7%; }

.wa-wide { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 110px); }
.wa-wide-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--gap); align-items: end; }
.wa-wide h1 { max-width: 11em; font-size: clamp(2.8rem, 6.2vw, 5.4rem); line-height: 1; }
.wa-wide-side .wa-lead { margin-top: 0; font-size: 1.05rem; }
.wa-wide-side .wa-actions { margin-top: 24px; }
.wa-wide-media { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.wa-wide-media .wa-photo { aspect-ratio: 21 / 9; width: 100%; }
.wa-wide-media .wa-tag { right: clamp(16px, 4vw, 48px); bottom: -26px; }

.wa-note { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.3fr) minmax(0, 0.78fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding-block: clamp(48px, 6vw, 92px) clamp(64px, 8vw, 112px); }
.wa-note-l { aspect-ratio: 3 / 4; transform: translateY(44px); }
.wa-note-r { aspect-ratio: 4 / 5; transform: translateY(-26px); }
.wa-note-text { text-align: center; display: grid; justify-items: center; }
.wa-note-text .wa-label::after { content: ''; width: 24px; height: 1.5px; background: currentColor; }
.wa-note-text h1 { font-size: clamp(2.2rem, 4.2vw, 3.7rem); max-width: 12em; }
.wa-note-text .wa-lead { text-align: center; }
.wa-note-text .wa-actions { justify-content: center; }
.wa-note-text .wa-tag { position: static; margin-top: 34px; }

/* ---------- Over ons ---------- */
.wa-story { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: calc(var(--gap) + 12px); align-items: center; }
.wa-story.is-flip .wa-story-media { order: 2; }
.wa-story .wa-photo { aspect-ratio: 4 / 5; }
.wa-story-text .wa-lead { font-family: var(--font-heading); font-weight: var(--hw); font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.32; letter-spacing: -0.012em; color: var(--fg); margin: 20px 0 22px; }
.wa-story-text p + p { color: var(--fg-muted); max-width: 36em; }
.wa-letter { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.wa-letter-label { position: sticky; top: 120px; }
.wa-letter-label h2 { max-width: 9em; }
.wa-letter-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.wa-letter-body .wa-lead { grid-column: 1 / -1; margin: 0; font-family: var(--font-heading); font-weight: var(--hw); font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.3; letter-spacing: -0.012em; color: var(--fg); max-width: none; }
.wa-letter-body p:not(.wa-lead) { color: var(--fg-muted); grid-column: 1 / -1; max-width: 40em; }

/* ---------- Diensten ---------- */
.wa-rows { list-style: none; margin: 0; padding: 0; }
.wa-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) 168px; gap: 32px; align-items: center; padding: 34px 0; position: relative; }
.wa-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(var(--wa-line, 1)); transform-origin: left; }
.wa-row:first-child::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform: scaleX(var(--wa-line, 1)); transform-origin: left; }
.wa-row h3 { font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.12; }
.wa-row p { color: var(--fg-muted); }
.wa-row-img .wa-photo { aspect-ratio: 4 / 3; filter: grayscale(0.7); opacity: 0.55; transform: scale(0.94) rotate(1.5deg); transition: filter 0.5s, opacity 0.5s, transform 0.6s cubic-bezier(0.22, 0.8, 0.2, 1); }
.wa-row:hover .wa-row-img .wa-photo, .wa-row:focus-within .wa-row-img .wa-photo, .wa-row:focus .wa-row-img .wa-photo { filter: none; opacity: 1; transform: scale(1) rotate(0deg); }
.wa-row:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }

.wa-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; align-items: start; }
.wa-cards.n-1 { grid-template-columns: minmax(0, 560px); }
.wa-cards.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-cards.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wa-card .wa-photo { aspect-ratio: 4 / 3; margin-bottom: 22px; }
.wa-card h3 { margin-bottom: 10px; }
.wa-card p { color: var(--fg-muted); font-size: 0.97rem; }
.wa-cards.n-3 .wa-card:nth-child(2) { margin-top: 44px; }
.wa-cards.n-3 .wa-card:nth-child(3) { margin-top: 88px; }

.wa-kaart { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 72px; }
.wa-kaart li { break-inside: avoid; padding: 0 0 34px; }
.wa-kaart-head { display: flex; align-items: baseline; gap: 14px; }
.wa-kaart h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.wa-leader { flex: 1; min-width: 24px; border-bottom: 2px dotted color-mix(in srgb, var(--text) 32%, transparent); transform: translateY(-5px); }
.wa-kaart p { color: var(--fg-muted); margin-top: 6px; max-width: 28em; }

/* ---------- Werk ---------- */
.wa-cap { display: grid; gap: 2px; margin-top: 14px; }
.wa-cap b { font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.1rem; letter-spacing: -0.01em; }
.wa-cap span { color: var(--fg-muted); font-size: 0.92rem; }
.wa-trio { display: grid; grid-template-columns: 1fr 1.28fr 1fr; gap: 28px; align-items: start; }
.wa-t { margin: 0; }
.wa-t0 .wa-photo { aspect-ratio: 3 / 4; }
.wa-t1 { margin-top: 72px; }
.wa-t1 .wa-photo { aspect-ratio: 1; }
.wa-t2 { margin-top: 28px; }
.wa-t2 .wa-photo { aspect-ratio: 4 / 5; }
.wa-mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; }
.wa-m { margin: 0; }
.wa-m0 { grid-column: span 7; }
.wa-m1 { grid-column: span 5; }
.wa-m2 { grid-column: span 5; }
.wa-m3 { grid-column: span 7; }
/* Twee rijen met dezelfde hoogte en rechte randen: breed-smal en smal-breed, zonder verspringen */
.wa-m .wa-photo { aspect-ratio: auto; height: clamp(220px, 27vw, 360px); }
.wa-strip { --slide-w: clamp(250px, 32vw, 400px); }
.wa-strip-item { margin: 0; }
.wa-strip-item .wa-photo { aspect-ratio: 4 / 5; width: 100%; }

/* ---------- Werkwijze, redenen, citaat, uitnodiging ---------- */
.wa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.wa-steps li { position: relative; padding-top: 30px; }
.wa-steps li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: var(--text); transform: scaleX(var(--wa-line, 1)); transform-origin: left; }
.wa-step-k { display: block; font-size: 0.74rem; font-weight: 650; letter-spacing: 0.15em; text-transform: uppercase; color: var(--kick); margin-bottom: 16px; }
.wa-steps h3 { margin-bottom: 10px; }
.wa-steps p { color: var(--fg-muted); }
.wa-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wa-points li { padding: 6px 36px 6px 0; }
.wa-points li + li { padding-left: 36px; border-left: 1px solid var(--line); }
.wa-points h3 { margin-bottom: 10px; }
.wa-points p { color: var(--fg-muted); }
.wa-quote { margin-block: 0; }
.wa-quote blockquote { margin: 0; font-family: var(--font-heading); font-weight: var(--hw); font-size: clamp(1.9rem, 3.7vw, 3.2rem); line-height: 1.14; letter-spacing: var(--hls); max-width: 20em; text-wrap: balance; }
.wa-quote figcaption { margin-top: 26px; font-size: 0.95rem; color: var(--fg-muted); }
.wa-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(32px, 5vw, 68px); background: var(--dark); color: var(--on-dark); --fg: var(--on-dark); --fg-muted: color-mix(in srgb, var(--on-dark) 78%, transparent); --btn-bg: var(--accent); --btn-fg: var(--on-accent); border-radius: calc(var(--wa-photo-r) + 10px); }
.wa-cta h2 { max-width: 15em; color: var(--on-dark); }
.wa-cta .wa-em { color: color-mix(in srgb, var(--accent) 78%, var(--on-dark)); }
.wa-cta .ta { color: var(--ta-dark); }
.wa-cta p { margin-top: 14px; color: var(--fg-muted); max-width: 32em; }
.wa-cta .wa-btn { flex: none; }
.wa-contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: calc(var(--gap) + 8px); align-items: start; }
.wa-contact .wa-lead { margin-top: 18px; }
.wa-facts { display: grid; gap: 18px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 40px 0 0; }
.wa-facts div { border-top: 1px solid var(--line); padding-top: 14px; }
.wa-facts dt { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kick); }
.wa-facts dd { margin: 4px 0 0; }
.wa-contact-form { background: var(--surface); border-radius: calc(var(--wa-photo-r) + 8px); padding: clamp(24px, 3.4vw, 46px); --card: var(--bg); }
.wa-contact-form .form { background: transparent; padding: 0; border: 0; }
.wa-contact-form .form input, .wa-contact-form .form textarea { border-radius: 8px; background: var(--bg); border-color: transparent; }
.gen2 .form .btn { border-radius: var(--wa-btn-r, 10px); background: var(--btn-bg); color: var(--btn-fg); }

/* ---------- Footer ---------- */
.wa-ftr { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; align-items: start; }
.wa-ftr-brand p { margin-top: 18px; color: color-mix(in srgb, var(--on-dark) 72%, transparent); max-width: 26em; font-size: 0.95rem; }
.wa-ftr .nav { display: grid; gap: 10px; }
.wa-ftr .nav a { color: inherit; text-decoration: none; font-size: 1rem; opacity: 0.86; }
.wa-ftr .nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.wa-ftr-end { display: grid; gap: 22px; justify-items: start; }
.wa-copy { font-size: 0.86rem; color: color-mix(in srgb, var(--on-dark) 62%, transparent); }

/* ---------- Nieuwe indelingen ---------- */
/* Opening: beeldvullend, met het tekstvlak onderin */
.wa-cover { position: relative; min-height: clamp(560px, 86vh, 780px); display: grid; align-items: end; overflow: hidden; background: var(--dark); }
.wa-cover-img { position: absolute; inset: 0; border-radius: 0 !important; }
.wa-cover-img :is(img, .art) { height: 100%; }
.wa-cover-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--dark) 52%, transparent), transparent 58%); pointer-events: none; }
.wa-cover-inner { position: relative; z-index: 2; padding-block: clamp(28px, 5vw, 64px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.wa-cover-card { background: var(--bg); color: var(--text); --fg: var(--text); border-radius: calc(var(--wa-photo-r) + 6px); padding: clamp(24px, 3.4vw, 44px); max-width: 560px; }
.wa-cover-card h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); max-width: 11em; }
/* Smalle hoofdletterkoppen zijn breder gezet dan gewone koppen: in het tekstvlak iets kleiner, en een lang woord mag afbreken */
.gen2.dp-smal .wa-cover-card h1 { font-size: clamp(2rem, 3.4vw, 3rem); overflow-wrap: anywhere; hyphens: auto; }
.wa-cover-card .wa-lead { margin-top: 18px; font-size: 1.06rem; }
.wa-cover-inner .wa-tag { right: 0; bottom: clamp(28px, 5vw, 64px); }

/* Opening: twee vlakken tegen elkaar, de foto loopt door tot de rand van het scherm */
.wa-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(520px, 78vh, 720px); }
.wa-split-text { background: var(--surface); display: flex; align-items: center; padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px) clamp(40px, 6vw, 88px) max(var(--wa-gut), calc((100vw - var(--wa-w)) / 2)); }
.wa-split h1 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); max-width: 10em; }
.wa-split-media { position: relative; min-height: 360px; }
.wa-split .wa-split-img { position: absolute; inset: 0; border-radius: 0 !important; }
.wa-split-media .wa-tag { left: clamp(16px, 3vw, 40px); bottom: clamp(20px, 3vw, 36px); }

/* Over ons: één grote zin */
.wa-statement { max-width: 960px; display: grid; justify-items: center; text-align: center; }
.wa-statement .wa-label::after { content: ''; width: 24px; height: 1.5px; background: currentColor; }
.wa-statement-lead { font-family: var(--font-heading); font-weight: var(--hw); font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.22; letter-spacing: var(--hls); text-wrap: balance; color: var(--fg); }
.gen2 .wa-statement-sign { margin-top: 30px; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; letter-spacing: 0; line-height: 1.4; color: var(--fg-muted); }

/* Diensten: keuzemenu met beeld */
.wa-tabs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap); align-items: start; }
.wa-tablist { display: grid; border-top: 1px solid var(--line); }
.wa-tab { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 22px 4px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--fg-muted); font-family: var(--font-heading); font-weight: var(--hw); letter-spacing: var(--hls); font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; text-align: left; cursor: pointer; transition: color 0.3s, padding 0.35s cubic-bezier(0.22, 0.8, 0.2, 1); }
.wa-tab svg { flex: none; opacity: 0; transform: translateX(-10px); transition: opacity 0.3s, transform 0.35s; }
.wa-tab:hover { color: var(--fg); }
.wa-tab[aria-selected='true'] { color: var(--fg); padding-left: 14px; }
.wa-tab[aria-selected='true'] svg { opacity: 1; transform: none; }
.wa-tabpanel { display: grid; gap: 24px; animation: wa-swap 0.6s cubic-bezier(0.22, 0.8, 0.2, 1) both; }
.wa-tabpanel .wa-photo { aspect-ratio: 16 / 10; }
.wa-tabpanel-text p { color: var(--fg-muted); max-width: 34em; margin: 10px 0 20px; }
@keyframes wa-swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wa-fade { from { opacity: 0; } to { opacity: 1; } }

/* Diensten: één grote tegel met de rest ernaast */
.wa-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.wa-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 30px; background: var(--bg); color: var(--text); --fg: var(--text); --fg-muted: color-mix(in srgb, var(--text) 68%, transparent); border-radius: calc(var(--wa-photo-r) + 8px); grid-column: span 3; transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.2, 1), box-shadow 0.5s; }
.wa-tile p { color: var(--fg-muted); font-size: 0.97rem; }
.wa-tile:not(.wa-tile0) { justify-content: center; }
.wa-tile:not(.wa-tile0) .wa-tile-text::before { content: ''; display: block; width: 28px; height: 3px; margin-bottom: 18px; background: var(--accent); }
.wa-tile0 { grid-row: span 2; padding: 0; overflow: hidden; justify-content: flex-start; }
.wa-tile0 .wa-photo { flex: none; aspect-ratio: 16 / 10; border-radius: 0; }
.wa-tile0 .wa-tile-text { padding: 26px 30px 32px; }
.wa-tile0 h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 8px; }
.wa-bento.n-1 .wa-tile0 { grid-column: 1 / -1; grid-row: auto; }
.wa-bento.n-2 .wa-tile0 { grid-row: auto; }
.wa-bento.n-2 .wa-tile1 { justify-content: center; padding: clamp(28px, 4vw, 52px); }
.wa-bento.n-2 .wa-tile1 h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.wa-bento.n-4 .wa-tile3 { grid-column: 1 / -1; }
@media (hover: hover) { .wa-tile:hover { transform: translateY(-6px); box-shadow: 0 34px 54px -34px color-mix(in srgb, var(--dark) 55%, transparent); } .wa-tile0:hover .wa-photo :is(img, .art) { transform: scale(1.04); } }

/* Diensten: uitklapbare regels, de kop blijft staan */
.wa-fold-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--gap); align-items: start; }
.wa-fold-wrap .wa-head { position: sticky; top: 120px; margin-bottom: 0; }
.wa-fold { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wa-fold li { border-bottom: 1px solid var(--line); }
.gen2 .wa-fold h3 { font-size: inherit; line-height: inherit; }
.wa-fold button { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 26px 0; background: none; border: 0; color: inherit; font-family: var(--font-heading); font-weight: var(--hw); letter-spacing: var(--hls); font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.15; text-align: left; cursor: pointer; }
.wa-fold-icon { position: relative; flex: none; width: 22px; height: 22px; }
.wa-fold-icon::before, .wa-fold-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 1.8px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.2, 1); }
.wa-fold-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.wa-fold .is-open .wa-fold-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.wa-fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.8, 0.2, 1); }
.wa-fold .is-open .wa-fold-body { grid-template-rows: 1fr; }
.wa-fold-body > p { min-height: 0; overflow: hidden; color: var(--fg-muted); max-width: 38em; transition: padding 0.5s cubic-bezier(0.22, 0.8, 0.2, 1); }
.wa-fold .is-open .wa-fold-body > p { padding-bottom: 28px; }

/* Werk: één groot beeld met keuzes ernaast */
.wa-feature { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.7fr); gap: clamp(24px, 3vw, 44px); align-items: end; }
.wa-feature-main { animation: wa-fade 0.7s ease both; }
.wa-feature-main .wa-photo { aspect-ratio: 16 / 11; }
.wa-feature-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; }
.wa-feature-cap { display: grid; gap: 6px; animation: wa-swap 0.6s cubic-bezier(0.22, 0.8, 0.2, 1) both; }
.wa-feature-cap b { font-family: var(--font-heading); font-weight: var(--hw); font-size: clamp(1.4rem, 2.1vw, 1.8rem); letter-spacing: -0.01em; line-height: 1.15; }
.wa-feature-cap span { color: var(--fg-muted); }
.wa-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wa-thumb { padding: 0; border: 0; background: none; cursor: pointer; color: inherit; opacity: 0.5; transition: opacity 0.35s; }
.wa-thumb .wa-photo { aspect-ratio: 1; border-radius: calc(var(--wa-photo-r) * 0.6); }
.wa-thumb::after { content: ''; display: block; height: 2px; margin-top: 8px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.2, 1); }
.wa-thumb.is-on { opacity: 1; }
.wa-thumb.is-on::after { transform: scaleX(1); }
@media (hover: hover) { .wa-thumb:hover { opacity: 1; } }

/* Werk: vier beelden om en om */
.wa-prows { display: grid; gap: clamp(40px, 6vw, 88px); }
.wa-prow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.wa-prow.is-flip { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); }
.wa-prow.is-flip .media { order: 2; }
.wa-prow .wa-photo { aspect-ratio: 16 / 10; }
.wa-prow .wa-cap { margin-top: 0; padding-bottom: 6px; }
.wa-prow .wa-cap b { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.12; }
@media (hover: hover) { .wa-prow:hover .wa-photo :is(img, .art) { transform: scale(1.04); } }

/* Werkwijze: tijdlijn */
.wa-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 40px; }
.wa-timeline li { position: relative; padding-top: 46px; }
.wa-timeline li::before { content: ''; position: absolute; left: 16px; right: -40px; top: 7px; height: 1.5px; background: color-mix(in srgb, var(--text) 38%, transparent); transform: scaleX(var(--wa-line, 1)); transform-origin: left; }
.wa-timeline li:last-child::before { display: none; }
.wa-dot { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); transform: scale(var(--wa-dot, 1)); }
.wa-timeline h3 { margin-bottom: 10px; }
.wa-timeline p { color: var(--fg-muted); }

/* Redenen: de kop blijft staan naast de punten */
.wa-sticky { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap); align-items: start; }
.wa-sticky-head { position: sticky; top: 120px; }
.wa-sticky-list { list-style: none; margin: 0; padding: 0; }
.wa-sticky-list li { padding: 34px 0; border-top: 1px solid var(--line); }
.wa-sticky-list li:last-child { border-bottom: 1px solid var(--line); }
.wa-sticky-list li:first-child { padding-top: 6px; border-top: 0; }
.wa-sticky-list h3 { font-size: clamp(1.45rem, 2.3vw, 1.95rem); margin-bottom: 10px; }
.wa-sticky-list p { color: var(--fg-muted); max-width: 34em; }

/* Citaat naast een portret */
.wa-qphoto { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: calc(var(--gap) + 12px); align-items: center; }
.wa-qphoto-img { aspect-ratio: 4 / 5; }
.wa-qphoto blockquote { font-family: var(--font-heading); font-weight: var(--hw); font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.18; letter-spacing: var(--hls); max-width: 18em; text-wrap: balance; }
.wa-qphoto figcaption { margin-top: 24px; color: var(--fg-muted); font-size: 0.95rem; }

/* Uitnodiging met foto */
.wa-cta-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0; padding: 0; align-items: stretch; overflow: hidden; }
.wa-cta-split .wa-cta-img { min-height: 280px; height: 100%; border-radius: 0; }
.wa-cta-copy { display: grid; gap: 18px; align-content: center; justify-items: start; padding: clamp(28px, 5vw, 64px); }
.wa-cta-copy p { margin: 0; }

/* Contact: staande foto, of gecentreerd en compact */
.wa-cphoto { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: calc(var(--gap) + 8px); align-items: start; }
.wa-cphoto-img { aspect-ratio: 3 / 4; position: sticky; top: 110px; }
.wa-cphoto-body .wa-lead { margin-top: 18px; }
.wa-cphoto-body .wa-contact-form { margin-top: 30px; }
.wa-cphoto-body .wa-facts { margin-top: 32px; }
.wa-ccenter { max-width: 780px; display: grid; gap: 38px; }
.wa-ccenter-head { display: grid; justify-items: center; text-align: center; }
.wa-ccenter-head .wa-label::after { content: ''; width: 24px; height: 1.5px; background: currentColor; }
.wa-ccenter-head .wa-lead { margin-top: 18px; text-align: center; }
.wa-ccenter .wa-facts { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Woorden die één voor één binnenkomen (zie waMotion); het kader knipt, de binnenkant beweegt */
.wa-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.05em 0.16em; margin: 0 -0.05em -0.16em; }
.wa-wi { display: inline-block; }

/* ---------- Helder modern: strak en geordend ---------- */
/* Scherpe hoeken, geen bogen of kantelende hangertjes, een markering in plaats van een krul, en vlakken die door lijnen gescheiden worden. */
.gen2.dir-helder, .gen2.dir-helder.wa-direct, .gen2.dir-helder.wa-bold, .gen2.dir-helder.wa-personal { --wa-photo-r: 3px; --wa-btn-r: 4px; }
.gen2.dir-helder .wa-photo-a, .gen2.dir-helder .wa-story .wa-photo, .gen2.dir-helder .wa-t0 .wa-photo, .gen2.dir-helder .wa-note-r, .gen2.dir-helder.wa-bold .wa-wide .wa-photo { border-radius: var(--wa-photo-r) !important; }
.gen2.dir-helder .wa-em { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; letter-spacing: inherit; padding: 0 0.06em; margin: 0 -0.06em; background: linear-gradient(transparent 64%, color-mix(in srgb, var(--accent) 40%, transparent) 64%, color-mix(in srgb, var(--accent) 40%, transparent) 92%, transparent 92%); }
.gen2.dir-helder .wa-label { letter-spacing: 0.12em; }
.gen2.dir-helder .wa-label::before { width: 8px; height: 8px; background: var(--accent); }
.gen2.dir-helder .wa-tag { rotate: 0deg; border-radius: 3px; padding: 13px 18px 13px 18px; border-left: 3px solid var(--accent); box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--dark) 50%, transparent); }
.gen2.dir-helder .wa-tag::before { display: none; }
.gen2.dir-helder .tone-surface { border-block: 1px solid var(--line); }
.gen2.dir-helder h1 { line-height: 1.04; }
.gen2.dir-helder .wa-lead { color: var(--fg-muted); }
.gen2.dir-helder .wa-row-img .wa-photo { transform: none; filter: grayscale(0.4); opacity: 0.7; }
.gen2.dir-helder .wa-cta, .gen2.dir-helder .wa-contact-form, .gen2.dir-helder .wa-tile, .gen2.dir-helder .wa-cover-card { border-radius: 6px; }
.gen2.dir-helder .wa-tile { box-shadow: inset 0 0 0 1px var(--line); }
.gen2.dir-helder .wa-tile0 { border-radius: 6px; }
.gen2.dir-helder .wa-thumb .wa-photo { border-radius: 2px; }

/* ---------- Doorlopende tekstband en kolommen ---------- */
.wa-ticker { overflow: hidden; background: var(--accent); color: var(--on-accent); padding-block: clamp(14px, 2vw, 22px); }
.wa-ticker-track { display: flex; width: max-content; animation: wa-tick 38s linear infinite; }
.wa-ticker-item { display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-right: clamp(20px, 3vw, 44px); font-family: var(--font-heading); font-weight: var(--hw); letter-spacing: var(--hls); font-size: clamp(1.8rem, 4.4vw, 3.6rem); line-height: 1.1; white-space: nowrap; }
.wa-ticker-item i { width: 0.34em; height: 0.34em; background: currentColor; transform: rotate(45deg); flex: none; }
@keyframes wa-tick { from { transform: translateX(0); } to { transform: translateX(-25%); } }
.wa-ticker-body { padding-top: var(--pad); }
.wa-ticker-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.wa-ticker-list li { padding-top: 24px; border-top: 1.5px solid var(--line); }
.wa-ticker-list h3 { margin-bottom: 10px; }
.wa-ticker-list p { color: var(--fg-muted); }
.wa-columns { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--gap); align-items: start; }
.wa-columns-head h2 { max-width: 9em; }
.wa-columns-body { column-count: 2; column-gap: 56px; color: var(--fg-muted); }
.wa-columns-body p { break-inside: avoid-column; margin: 0 0 1em; }
.wa-dropcap { color: var(--fg); }
.wa-dropcap::first-letter { float: left; font-family: var(--font-heading); font-weight: var(--hw); font-size: 4.6em; line-height: 0.78; padding: 0.06em 0.1em 0 0; color: var(--primary-ink); }

/* ---------- Podium: donker, scherp en groot ---------- */
.gen2.dir-podium, .gen2.dir-podium.wa-direct, .gen2.dir-podium.wa-bold, .gen2.dir-podium.wa-personal { --wa-photo-r: 0px; --wa-btn-r: 0px; }
.gen2.dir-podium .wa-photo-a, .gen2.dir-podium .wa-story .wa-photo, .gen2.dir-podium .wa-t0 .wa-photo, .gen2.dir-podium .wa-note-r, .gen2.dir-podium.wa-bold .wa-wide .wa-photo { border-radius: 0 !important; }
.gen2.dir-podium :is(h1, h2) { text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.98; }
.gen2.dir-podium :is(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }
.gen2.dir-podium h1 { font-size: clamp(2rem, 3.9vw, 3.5rem); }
.gen2.dir-podium h2 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); }
.gen2.dir-podium .wa-wide h1 { font-size: clamp(2.2rem, 4.8vw, 4.2rem); }
.gen2.dir-podium h3 { text-transform: uppercase; letter-spacing: 0; font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.gen2.dir-podium .wa-em { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; color: var(--accent-ink); }
.gen2.dir-podium .wa-label { color: var(--accent-ink); font-weight: 700; letter-spacing: 0.18em; }
.gen2.dir-podium .wa-label::before { width: 14px; height: 14px; background: var(--accent); }
.gen2.dir-podium .wa-btn { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; font-weight: 700; padding: 16px 24px; }
.gen2.dir-podium .wa-btn-solid { --btn-bg: var(--accent); --btn-fg: var(--on-accent); background: var(--accent); color: var(--on-accent); }
.gen2.dir-podium .tone-surface { border-block: 1px solid var(--line); }
.gen2.dir-podium .wa-tag { rotate: 0deg; border-radius: 0; border-left: 4px solid var(--accent); box-shadow: none; background: var(--surface); }
.gen2.dir-podium .wa-tag::before { display: none; }
.gen2.dir-podium .wa-cta, .gen2.dir-podium .wa-contact-form, .gen2.dir-podium .wa-tile, .gen2.dir-podium .wa-cover-card { border-radius: 0; }
.gen2.dir-podium .wa-cta { background: var(--accent); color: var(--on-accent); --fg: var(--on-accent); --fg-muted: color-mix(in srgb, var(--on-accent) 80%, transparent); --btn-bg: var(--on-accent); --btn-fg: var(--accent); }
.gen2.dir-podium .wa-cta h2, .gen2.dir-podium .wa-cta .wa-em { color: var(--on-accent); }
.gen2.dir-podium .wa-cover-card { background: var(--bg); border-top: 4px solid var(--accent); }
.gen2.dir-podium .wa-tile { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) { .gen2.dir-podium .wa-photo:hover :is(img, .art) { transform: scale(1.06); } .gen2.dir-podium .wa-tile:hover { box-shadow: inset 0 0 0 2px var(--accent); transform: none; } }

/* ---------- Redactioneel: een verzorgd tijdschrift ---------- */
.gen2.dir-redactie, .gen2.dir-redactie.wa-direct, .gen2.dir-redactie.wa-bold, .gen2.dir-redactie.wa-personal { --wa-photo-r: 0px; --wa-btn-r: 0px; --wa-w: 1100px; }
.gen2.dir-redactie .wa-photo-a, .gen2.dir-redactie .wa-story .wa-photo, .gen2.dir-redactie .wa-t0 .wa-photo, .gen2.dir-redactie .wa-note-r, .gen2.dir-redactie.wa-bold .wa-wide .wa-photo { border-radius: 0 !important; }
.gen2.dir-redactie .sec + .sec:not(.sec-footer) { border-top: 1px solid var(--line); }
.gen2.dir-redactie .tone-surface { background: transparent; }
.gen2.dir-redactie h1 { font-weight: 500; line-height: 1.04; }
.gen2.dir-redactie .wa-label { font-family: var(--font-heading); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--fg-muted); }
.gen2.dir-redactie .wa-label::before { display: none; }
.gen2.dir-redactie .wa-lead { font-size: 1.12rem; }
.gen2.dir-redactie .wa-btn { padding: 13px 22px; font-weight: 600; letter-spacing: 0.02em; }
.gen2.dir-redactie .wa-tag { rotate: 0deg; border-radius: 0; box-shadow: none; border: 1px solid var(--line); padding: 14px 18px; }
.gen2.dir-redactie .wa-tag::before { display: none; }
.gen2.dir-redactie .wa-cta, .gen2.dir-redactie .wa-contact-form, .gen2.dir-redactie .wa-cover-card, .gen2.dir-redactie .wa-tile { border-radius: 0; }
.gen2.dir-redactie .wa-contact-form { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.gen2.dir-redactie .wa-quote blockquote, .gen2.dir-redactie .wa-qphoto blockquote { font-style: italic; font-weight: 400; }
.gen2.dir-redactie .wa-photo { filter: saturate(0.82) contrast(1.03); }

/* ---------- Speels: kleurvlakken, ronde vormen, stickers ---------- */
.gen2.dir-speels, .gen2.dir-speels.wa-direct, .gen2.dir-speels.wa-bold, .gen2.dir-speels.wa-personal { --wa-photo-r: 30px; --wa-btn-r: 999px; }
.gen2.dir-speels .wa-photo-a, .gen2.dir-speels .wa-story .wa-photo, .gen2.dir-speels .wa-t0 .wa-photo, .gen2.dir-speels .wa-note-r { border-radius: var(--wa-photo-r) !important; }
.gen2.dir-speels .wa-em { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.1em; text-underline-offset: 0.14em; text-decoration-skip-ink: none; }
.gen2.dir-speels .wa-label { letter-spacing: 0.1em; }
.gen2.dir-speels .wa-label::before { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.gen2.dir-speels .wa-btn { padding: 15px 26px; font-weight: 700; }
.gen2.dir-speels .wa-tag { rotate: -4deg; border-radius: 16px; background: var(--accent); color: var(--on-accent); box-shadow: 0 16px 28px -16px color-mix(in srgb, var(--dark) 55%, transparent); }
.gen2.dir-speels .wa-tag .wa-tag-k { color: var(--on-accent); opacity: 0.85; }
.gen2.dir-speels .wa-tag::before { background: var(--on-accent); box-shadow: none; }
.gen2.dir-speels .wa-tile, .gen2.dir-speels .wa-cta, .gen2.dir-speels .wa-contact-form, .gen2.dir-speels .wa-cover-card { border-radius: 28px; }
.gen2.dir-speels .wa-tile0 { border-radius: 28px; }
@media (hover: hover) { .gen2.dir-speels .wa-tile:hover, .gen2.dir-speels .wa-card:hover { transform: translateY(-8px) rotate(-0.8deg); } }

/* ---------- Navigaties, voeten en openingen om te variëren ---------- */
.wa-hdr-center { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
.wa-hdr-center .nav { margin-left: 0; }
.wa-hdr-center .wa-nav-l { justify-content: flex-start; }
.wa-hdr-center .hdr-logo { justify-self: center; }
.wa-hdr-center .wa-hdr-end { justify-self: end; margin-left: 0; gap: 22px; }
.wa-hdr-center .wa-nav-r { justify-content: flex-end; margin: 0; }
.wa-hdr-stack { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; min-height: 0; padding-top: 20px; }
.wa-hdr-stack .nav { margin: 14px 0 0; justify-content: center; width: 100%; padding: 14px 0 16px; border-top: 1px solid var(--line); }
.wa-hdr-stack .wa-hdr-end { position: absolute; right: 0; top: 14px; }
.wa-hdr-min .nav { display: none; }
.wa-hdr-min .wa-burger { display: grid; }
.wa-hdr-min .wa-hdr-end { margin-left: auto; }
.wa-hdr-min .wa-drawer { left: auto; width: min(420px, 100%); padding: 18px; }
.wa-hdr-min .wa-drawer a { font-size: 1.7rem; padding: 14px 16px; }
.gen2 .sec-header:has(.wa-hdr-float) { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 16px 0 0; }
/* Zwevende balk: zonder eigen strook. Staat de opening direct eronder, dan loopt haar achtergrond door achter de balk (met 80px vaste hoogte van de balk-zone) en krijgt de opening extra ruimte bovenin. */
.gen2 .sec-header:has(.wa-hdr-float):has(+ main > .sec-hero:first-child) { height: 80px; margin-bottom: -80px; box-sizing: border-box; }
.gen2 .sec-header:has(.wa-hdr-float) + main > .sec-hero:first-child { padding-top: 72px; }
.gen2 .sec-header:has(.wa-hdr-float) + main > .sec-hero:first-child:has(.wa-cover) { padding-top: 0; }
.gen2 .sec-header:has(.wa-hdr-float) + main > .sec-hero:first-child:has(.wa-split) { padding-top: 96px; }
/* beeldvullende opening: de foto loopt achter de balk door, de inhoud (tekstvlak, hangertje) begint eronder */
.gen2 .sec-header:has(.wa-hdr-float) + main > .sec-hero:first-child .wa-cover { padding-top: 104px; box-sizing: border-box; }
@media (max-width: 900px) {
  /* op een telefoon is de balk iets hoger en stapelt de opening: ook de beeldvullende opening begint onder de balk */
  .gen2 .sec-header:has(.wa-hdr-float):has(+ main > .sec-hero:first-child) { height: 88px; margin-bottom: -88px; }
  .gen2 .sec-header:has(.wa-hdr-float) + main > .sec-hero:first-child { padding-top: 88px; }
  .gen2 .sec-header:has(.wa-hdr-float) + main > .sec-hero:first-child:has(.wa-split) { padding-top: 100px; }
}
.wa-hdr-float { width: min(var(--wa-w), 100% - 2 * var(--wa-gut)); min-height: 64px; padding: 0 12px 0 30px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 40px -24px color-mix(in srgb, var(--dark) 60%, transparent), inset 0 0 0 1px var(--line); }
.wa-hdr-float .wa-drawer { top: calc(100% + 10px); }

.wa-ftr-center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 26px; }
.wa-ftr-center .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.wa-ftr-line { max-width: 34em; color: color-mix(in srgb, var(--on-dark) 76%, transparent); }
.gen2 .sec-footer:has(.wa-ftr-min) { padding: 38px 0; }
.wa-ftr-min { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; }
.wa-ftr-min .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; }
.wa-ftr-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; }
.wa-ftr-lead { font-family: var(--font-heading); font-weight: var(--hw); letter-spacing: var(--hls); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; margin-top: 22px; max-width: 18em; color: var(--on-dark); }
.wa-ftr-right { display: grid; gap: 24px; justify-items: start; }
.wa-ftr-right .nav { grid-template-columns: repeat(2, auto); gap: 10px 40px; }

.wa-poster { padding-block: clamp(40px, 6vw, 88px) clamp(60px, 7vw, 104px); }
.wa-poster-top { display: grid; justify-items: center; text-align: center; }
.wa-poster-top h1 { max-width: 14em; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.wa-poster-top .wa-label::after { content: ''; width: 24px; height: 1.5px; background: currentColor; }
.wa-poster-top .wa-lead { text-align: center; }
.wa-poster-top .wa-actions { justify-content: center; }
.wa-poster-strip { position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 24px; align-items: end; margin-top: clamp(36px, 5vw, 64px); }
.wa-ps0 { aspect-ratio: 3 / 4; }
.wa-ps1 { aspect-ratio: 4 / 3; }
.wa-ps2 { aspect-ratio: 3 / 4; margin-bottom: 44px; }
.wa-poster-strip .wa-tag { right: 6%; bottom: -26px; }
.wa-hgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; padding-block: clamp(40px, 6vw, 84px) clamp(56px, 7vw, 100px); }
.wa-hgrid h1 { max-width: 12em; }
.wa-hgrid-media { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.wa-hg0 { grid-row: span 2; aspect-ratio: 3 / 4.3; }
.wa-hg1, .wa-hg2 { aspect-ratio: 1; }
.wa-hgrid-media .wa-tag { left: -22px; bottom: 12%; }
.wa-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; padding-block: clamp(32px, 4.5vw, 64px) clamp(44px, 5.5vw, 76px); }
.wa-banner h1 { font-size: clamp(2.1rem, 3.8vw, 3.3rem); max-width: 13em; }
.wa-banner-media { position: relative; }
.wa-banner-media .wa-photo { aspect-ratio: 16 / 10; }
.wa-banner-media .wa-tag { right: 16px; bottom: -22px; }

/* ---------- Recept: hiërarchie, ritme en beeldvorm van één voorstel ---------- */
.gen2.hi-stil h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; }
.gen2.hi-stil h2 { font-size: clamp(1.55rem, 2.5vw, 2.1rem); }
.gen2.hi-stil .wa-lead { font-size: 1.05rem; }
.gen2.hi-groot h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); line-height: 1; }
.gen2.hi-groot h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
.gen2.hi-groot .wa-lead { font-size: 1.22rem; }
.gen2.rh-ruim { --pad: 136px; --gap: 76px; }
.gen2.rh-compact { --pad: 80px; --gap: 48px; }
.gen2.sh-recht, .gen2.sh-recht.wa-direct, .gen2.sh-recht.wa-bold, .gen2.sh-recht.wa-personal { --wa-photo-r: 2px; --wa-btn-r: 3px; }
.gen2.sh-zacht, .gen2.sh-zacht.wa-direct, .gen2.sh-zacht.wa-bold, .gen2.sh-zacht.wa-personal { --wa-photo-r: 14px; --wa-btn-r: 10px; }
.gen2.sh-rond, .gen2.sh-rond.wa-direct, .gen2.sh-rond.wa-bold, .gen2.sh-rond.wa-personal { --wa-photo-r: 30px; --wa-btn-r: 999px; }
.gen2.sh-recht .wa-photo-a, .gen2.sh-recht .wa-story .wa-photo, .gen2.sh-recht .wa-t0 .wa-photo, .gen2.sh-recht .wa-note-r, .gen2.sh-zacht .wa-photo-a, .gen2.sh-zacht .wa-story .wa-photo, .gen2.sh-zacht .wa-t0 .wa-photo, .gen2.sh-zacht .wa-note-r, .gen2.sh-rond .wa-photo-a, .gen2.sh-rond .wa-story .wa-photo, .gen2.sh-rond .wa-t0 .wa-photo, .gen2.sh-rond .wa-note-r { border-radius: var(--wa-photo-r) !important; }

/* Voorbeeldfoto's in de kleur van de huisstijl (duotoon): een grijswaarde-foto met de hoofdkleur eroverheen. Eigen foto's blijven natuurlijk. */
.gen2.pl-duo .wa-photo:has(img.art) img.art { filter: grayscale(1) contrast(1.08) brightness(1.04); }
.gen2.pl-duo .wa-photo:has(img.art)::after { content: ''; position: absolute; inset: 0; background: var(--primary); mix-blend-mode: color; opacity: 0.9; pointer-events: none; }
.gen2.pl-duo .wa-photo:has(img.art)::before { content: ''; position: absolute; inset: 0; background: var(--primary); mix-blend-mode: multiply; opacity: 0.18; pointer-events: none; z-index: 1; }

.gen2.pl-bw .wa-photo:has(img.art) img.art { filter: grayscale(1) contrast(1.1) brightness(0.96); }

/* ---------- Mobiel ---------- */
@media (max-width: 900px) {
  .gen2, .gen2.wa-personal { --pad: 72px; --gap: 36px; font-size: 16.5px; }
  .gen2 .sec-footer { padding: 56px 0 32px; }
  .wa-hdr { min-height: 70px; gap: 16px; }
  .wa-hdr .nav, .wa-hdr-end .wa-btn { display: none; }
  .wa-hdr-end { margin-left: auto; }
  .wa-burger { display: grid; }
  .wa-stage, .wa-wide-top, .wa-story, .wa-letter, .wa-contact, .wa-ftr { grid-template-columns: minmax(0, 1fr); }
  .wa-stage-media { padding-bottom: 28px; }
  .wa-photo-a { width: 88%; }
  .wa-photo-b { width: 38%; }
  .wa-wide-media .wa-photo { aspect-ratio: 4 / 3; }
  .wa-wide-media .wa-tag { right: 12px; }
  .wa-note { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-note-text { grid-column: 1 / -1; order: -1; }
  .wa-note-l { transform: none; }
  .wa-note-r { transform: translateY(24px); }
  .wa-story.is-flip .wa-story-media { order: 0; }
  .wa-letter-label { position: static; }
  .wa-letter-body { grid-template-columns: 1fr; }
  .wa-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 26px 0; }
  .wa-row-img { display: none; }
  .wa-cards, .wa-cards.n-2, .wa-cards.n-3, .wa-cards.n-4 { grid-template-columns: minmax(0, 1fr); }
  .wa-cards.n-3 .wa-card:nth-child(n) { margin-top: 0; }
  .wa-kaart { columns: 1; }
  .wa-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .wa-t0 { grid-column: 1 / -1; }
  .wa-t0 .wa-photo { aspect-ratio: 4 / 3; }
  .wa-t1 { margin-top: 0; }
  .wa-t2 { margin-top: 0; }
  .wa-t1 .wa-photo, .wa-t2 .wa-photo { aspect-ratio: 4 / 5; }
  .wa-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .wa-m0, .wa-m1, .wa-m2, .wa-m3 { grid-column: span 1; }
  .wa-m .wa-photo { height: auto; aspect-ratio: 4 / 5; }
  .wa-steps, .wa-points { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wa-points li, .wa-points li + li { padding: 0; border: 0; }
  .wa-cta { flex-direction: column; align-items: flex-start; }
  .wa-facts { grid-template-columns: minmax(0, 1fr); }
  .gen2 h1 { font-size: clamp(2.2rem, 9vw, 3.1rem); }
  .gen2 h2 { font-size: clamp(1.75rem, 7vw, 2.3rem); }
  .wa-head { margin-bottom: 36px; }
  .wa-hdr-center, .wa-hdr-stack { display: flex; }
  .wa-hdr-stack { padding-top: 0; min-height: 70px; }
  .wa-hdr-stack .wa-hdr-end { position: static; margin-left: auto; }
  .wa-hdr-float { padding: 0 8px 0 20px; }
  /* een lang woordmerk past in de balk: minder letterafstand en iets kleiner, op één regel */
  .wa-hdr .hdr-logo { min-width: 0; flex: 1 1 auto; }
  .wa-hdr .hdr-logo .wm { letter-spacing: 0.06em !important; white-space: nowrap; font-size: 0.84em; max-width: 100%; }
  .wa-ftr-center .nav { gap: 10px 22px; }
  .wa-ftr-min, .wa-ftr-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .wa-ftr-right .nav { grid-template-columns: repeat(2, auto); }
  .wa-hgrid, .wa-banner { grid-template-columns: minmax(0, 1fr); }
  .wa-poster-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .wa-ps2 { margin-bottom: 20px; }
  .wa-hgrid-media .wa-tag { left: 8px; }
  .wa-poster-top h1 { font-size: clamp(2.1rem, 8vw, 3rem); }
  .wa-ticker-list, .wa-columns { grid-template-columns: minmax(0, 1fr); }
  .wa-ticker-list li { margin-bottom: 20px; }
  .wa-columns-body { column-count: 1; }
  .wa-cover { min-height: clamp(560px, 92vh, 720px); }
  .wa-cover-inner { flex-direction: column; align-items: stretch; }
  .wa-cover-inner .wa-tag { position: static; align-self: flex-start; order: -1; }
  .wa-split { grid-template-columns: minmax(0, 1fr); }
  .wa-split-media { order: -1; min-height: 300px; }
  .wa-split-text { padding: 36px var(--wa-gut) 52px; }
  .wa-tabs, .wa-fold-wrap, .wa-sticky, .wa-qphoto, .wa-cphoto, .wa-feature { grid-template-columns: minmax(0, 1fr); }
  .wa-fold-wrap .wa-head, .wa-sticky-head, .wa-cphoto-img { position: static; }
  .wa-fold-wrap .wa-head { margin-bottom: 28px; }
  .wa-bento { grid-template-columns: minmax(0, 1fr); }
  .wa-tile, .wa-tile0, .wa-bento.n-2 .wa-tile1, .wa-bento.n-4 .wa-tile3 { grid-column: auto; grid-row: auto; }
  .wa-tile0 .wa-photo { min-height: 220px; flex: none; aspect-ratio: 16 / 10; }
  .wa-prow, .wa-prow.is-flip { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wa-prow.is-flip .media { order: 0; }
  .wa-timeline { grid-auto-flow: row; grid-auto-columns: auto; gap: 30px; }
  .wa-timeline li { padding: 0 0 0 40px; }
  .wa-timeline li::before { left: 7px; right: auto; top: 24px; bottom: -30px; width: 1.5px; height: auto; transform: scaleY(var(--wa-line, 1)); transform-origin: top; }
  .wa-dot { top: 4px; }
  .wa-cta-split { grid-template-columns: minmax(0, 1fr); }
  .wa-cta-split .wa-cta-img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .wa-ccenter .wa-facts { grid-template-columns: minmax(0, 1fr); }
  .wa-qphoto-img { max-width: 300px; }
  .wa-thumbs { gap: 8px; }
  .wa-tab { padding: 18px 2px; }
}
@media (prefers-reduced-motion: reduce) { .wa-btn, .wa-btn svg, .wa-photo :is(img, .art), .wa-row-img .wa-photo, .wa-tile, .wa-tab, .wa-tab svg, .wa-thumb, .wa-thumb::after, .wa-fold-body, .wa-fold-body > p, .wa-fold-icon::before, .wa-fold-icon::after { transition: none; } .wa-tabpanel, .wa-feature-main, .wa-feature-cap { animation: none; } .wa-ticker-track { animation: none; } }
/* Mozaïek met drie beelden: twee naast elkaar, daaronder één breder beeld */
.wa-mosaic.n-3 .wa-m2 { grid-column: 1 / -1; }
.wa-mosaic.n-3 .wa-m2 .wa-photo { height: clamp(180px, 22vw, 300px); }

/* ---------- Pictogrammen bij diensten en redenen ---------- */
.wa-ico { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, var(--kick) 12%, transparent); color: var(--kick); transition: transform 0.45s cubic-bezier(0.22, 0.8, 0.2, 1), background 0.3s, box-shadow 0.3s; }
.wa-ico svg { width: 21px; height: 21px; }
.wa-ico-lg { width: 56px; height: 56px; }
.wa-ico-lg svg { width: 27px; height: 27px; }
.wa-row:hover .wa-ico, .wa-row:focus-within .wa-ico, .wa-tile:hover .wa-ico, .wa-kaart li:hover .wa-ico, .wa-fold li:hover .wa-ico, .wa-uicons li:hover .wa-ico, .wa-uband li:hover .wa-ico { background: color-mix(in srgb, var(--kick) 22%, transparent); box-shadow: inset 0 0 0 1.5px currentColor; transform: rotate(-8deg) scale(1.1); }
.gen2.dir-podium .wa-ico { border-radius: 0; }
.gen2.dir-redactie .wa-ico { border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--line); }
.gen2.dir-speels .wa-ico { border-radius: 14px; }
.wa-row h3 { display: flex; align-items: center; gap: 16px; }
.wa-kaart-head { align-items: center; }
.wa-fold-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.wa-tile-text .wa-ico { margin-bottom: 14px; }

/* ---------- Waarom wij: kaarten met pictogram, compacte balk, foto met vinkjes ---------- */
.wa-uicons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wa-uicons li { background: var(--card, var(--surface)); border-radius: calc(var(--wa-photo-r) + 6px); padding: 32px 30px 34px; box-shadow: inset 0 0 0 1px var(--line); }
.wa-uicons .wa-ico { margin-bottom: 22px; }
.wa-uicons h3 { margin-bottom: 8px; }
.wa-uicons p { color: var(--fg-muted); }
.wa-uband { display: grid; gap: 34px; }
.wa-uband-head h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.wa-uband-head .wa-label { margin-bottom: 14px; }
.wa-uband-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.wa-uband-list li { display: flex; gap: 18px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 26px; }
.wa-uband-list h3 { font-size: 1.2rem; margin-bottom: 6px; }
.wa-uband-list p { color: var(--fg-muted); font-size: 0.97rem; }
.wa-uchecks { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: calc(var(--gap) + 8px); align-items: center; }
.wa-uchecks-media .wa-photo { aspect-ratio: 4 / 5; }
.wa-uchecks-body ul { list-style: none; margin: 28px 0 0; padding: 0; }
.wa-uchecks-body li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); }
.wa-uchecks-body li:last-child { border-bottom: 1px solid var(--line); }
.wa-check { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 3px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.gen2.dir-podium .wa-check, .gen2.dir-redactie .wa-check { border-radius: 0; }
.wa-uchecks-body h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin-bottom: 4px; }
.wa-uchecks-body p { color: var(--fg-muted); max-width: 32em; }

/* ---------- Contact: donker vlak met gegevens, en formulier met een balk eronder ---------- */
.wa-cdark { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: calc(var(--gap) + 8px); align-items: center; padding: clamp(28px, 5vw, 64px); background: var(--dark); color: var(--on-dark); --fg: var(--on-dark); --fg-muted: color-mix(in srgb, var(--on-dark) 78%, transparent); --kick: var(--dark-kicker); border-radius: calc(var(--wa-photo-r) + 10px); }
.wa-cdark h2 { color: var(--on-dark); }
.wa-cdark .ta { color: var(--ta-dark); }
.wa-cdark .wa-em { color: color-mix(in srgb, var(--accent) 78%, var(--on-dark)); }
.wa-cdark .wa-lead { margin-top: 18px; color: var(--fg-muted); }
.wa-cdark .wa-facts div { border-top-color: color-mix(in srgb, var(--on-dark) 24%, transparent); }
.wa-cdark .wa-contact-form { background: var(--bg); color: var(--text); --fg: var(--text); --fg-muted: var(--muted); --kick: var(--primary-ink); }
.gen2.dir-podium .wa-cdark, .gen2.dir-redactie .wa-cdark { border-radius: 0; }
.wa-cbar { display: grid; gap: 52px; }
.wa-cbar-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: calc(var(--gap) + 8px); align-items: start; }
.wa-cbar-main .wa-contact-form { order: -1; }
.wa-cbar .wa-lead { margin-top: 18px; }
.wa-cbar .wa-facts { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .wa-uicons, .wa-uband-list { grid-template-columns: minmax(0, 1fr); }
  .wa-uband-list { gap: 26px; }
  .wa-uchecks, .wa-cdark, .wa-cbar-main { grid-template-columns: minmax(0, 1fr); }
  .wa-cbar-main .wa-contact-form { order: 0; }
  .wa-uchecks-media .wa-photo { aspect-ratio: 4 / 3; }
  .wa-cbar .wa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-row h3 { gap: 12px; }
}
@media (max-width: 560px) { .wa-cbar .wa-facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Typografisch stempel van een recept: hoe vaak accentwoorden en labels voorkomen ---------- */
.gen2.ti-recht .wa-em, .gen2.ti-recht .wa-em.ta,
.gen2.ti-spaarzaam main > .sec:not(.sec-hero):nth-child(even) .wa-em, .gen2.ti-spaarzaam main > .sec:not(.sec-hero):nth-child(even) .wa-em.ta { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; letter-spacing: inherit; color: inherit; background: none; text-decoration: none; padding: 0; margin: 0; }
.gen2.lb-geen .sec:not(.sec-hero) .wa-label, .gen2.lb-enkele main > .sec:not(.sec-hero):nth-child(even) .wa-label { display: none; }
.gen2.tg-uit .wa-tag { display: none; }
.gen2.af-nr { --font-accent: 'Newsreader Variable', Georgia, serif; }
.gen2.af-nr .wa-em { font-size: 1.05em; }

/* ---------- Navigatie altijd op één regel ---------- */
.wa-hdr .nav a, .wa-hdr-end .wa-btn, .wa-hdr .wa-btn { white-space: nowrap; }
.wa-hdr .nav { flex-wrap: nowrap; flex: none; }
.gen2 .wa-hdr:not(.is-compact):not(.wa-hdr-min) .hdr-logo { flex: none; }
.wa-hdr.is-compact { display: flex; gap: 16px; min-height: 70px; }
.wa-hdr.is-compact .nav, .wa-hdr.is-compact .wa-hdr-end .wa-btn { display: none; }
.wa-hdr.is-compact .wa-burger { display: grid; }
.wa-hdr.is-compact .wa-hdr-end { position: static; margin-left: auto; }
.wa-hdr.is-compact .hdr-logo { flex: 1 1 auto; min-width: 0; }
.wa-hdr-stack.is-compact { padding-top: 0; }

/* ---------- Typografisch karakter per soort bedrijf (gewicht, letterafstand, accentwoord, labels; maten volgen de hiërarchie) ---------- */
.gen2.ty-zakelijk :is(h1, h2, h3) { font-weight: 700; letter-spacing: -0.034em; }
.gen2.ty-zakelijk :is(h1, h2) { line-height: 1.04; }
.gen2.ty-zakelijk:not(.ti-recht) .wa-em { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; letter-spacing: inherit; color: var(--primary-ink); }
.gen2.ty-zakelijk .wa-label { letter-spacing: 0.1em; font-weight: 700; }
.gen2.ty-zakelijk .wa-label::before { width: 8px; height: 8px; }
.gen2.ty-horeca :is(h1, h2) { font-weight: 450; letter-spacing: -0.012em; line-height: 1.06; }
.gen2.ty-horeca .wa-label { text-transform: none; font-family: var(--font-accent); font-style: italic; font-size: 1.08rem; font-weight: 400; letter-spacing: 0; }
.gen2.ty-horeca .wa-label::before { display: none; }
.gen2.ty-horeca .wa-lead { font-size: 1.2rem; }
.gen2.ty-zorg { line-height: 1.78; }
.gen2.ty-zorg :is(h1, h2, h3) { font-weight: 520; letter-spacing: -0.012em; }
.gen2.ty-zorg .wa-lead { font-size: 1.2rem; line-height: 1.66; }
.gen2.ty-zorg .wa-label { text-transform: none; letter-spacing: 0.02em; font-size: 0.88rem; font-weight: 600; }
.gen2.ty-zorg .wa-btn { border-radius: 999px; }
.gen2.ty-creatief :is(h1, h2) { letter-spacing: -0.045em; line-height: 0.98; font-weight: 640; }
.gen2.ty-creatief .wa-em { font-size: 1.12em; }
.gen2.ty-creatief .wa-label { font-weight: 800; letter-spacing: 0.2em; }
.gen2.ty-ambacht :is(h1, h2, h3) { font-weight: 500; letter-spacing: -0.02em; }
.gen2.ty-ambacht .wa-label { letter-spacing: 0.18em; font-size: 0.7rem; }

/* ---------- Kleur als ontwerpkeuze: knoppen op een gekleurd vlak ---------- */
.gen2 .tone-accent { --btn-bg: var(--on-primary); --btn-fg: var(--primary); }
.gen2 .tone-highlight { --btn-bg: var(--on-accent); --btn-fg: var(--accent); }

/* ---------- Het ene opvallende moment ---------- */
.gen2.mo-boog .sec-hero :is(.wa-stage-media .wa-photo-a, .wa-split-media .wa-photo, .wa-hgrid-media .wa-photo-a) { border-radius: 999px 999px var(--wa-photo-r) var(--wa-photo-r) !important; }
.gen2.mo-zin .wa-statement-lead { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.16; }
/* accentwoord op een gekleurd vlak: dezelfde tekstkleur als de rest, zodat het leesbaar blijft */
.gen2 .tone-accent .wa-em, .gen2 .tone-accent .wa-em.ta { color: var(--on-primary); }
.gen2 .tone-highlight .wa-em, .gen2 .tone-highlight .wa-em.ta { color: var(--on-accent); }

/* ---------- Rand onderaan een onderdeel (vormscheiding): ruimte voor de vorm, rustig en laag ---------- */
.gen2 .has-divider { --dv-h: clamp(52px, 7.5vw, 116px); padding-bottom: calc(var(--pad) + var(--dv-h) * 0.55); }

/* Lange woorden in een kop worden netjes afgebroken (Nederlandse woordafbreking) in plaats van midden in het woord */
.gen2 :is(h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

/* ---------- Opening als groot afgerond fotovlak (de tekst staat op de foto) ---------- */
.wa-hpanel-wrap { padding-block: clamp(8px, 1.5vw, 20px) clamp(36px, 5vw, 72px); }
.wa-hpanel { position: relative; isolation: isolate; min-height: clamp(520px, 76vh, 740px); display: flex; align-items: flex-end; border-radius: calc(var(--wa-photo-r) + 16px); overflow: hidden; background: var(--dark); color: #fff; }
.wa-hpanel-img { position: absolute; inset: 0; z-index: -2; border-radius: 0 !important; }
.wa-hpanel-img :is(img, .art) { height: 100%; }
.wa-hpanel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.04)); pointer-events: none; }
.wa-hpanel-body { max-width: 640px; padding: clamp(26px, 4vw, 56px); }
.wa-hpanel-body h1, .wa-hpanel .wa-label { color: #fff; }
.wa-hpanel .wa-lead { margin-top: 18px; color: rgba(255, 255, 255, 0.88); }
.wa-hpanel .wa-actions { margin-top: 26px; }
.wa-hpanel .wa-btn { --btn-bg: #fff; --btn-fg: #141414; }
.wa-hpanel a:not(.wa-btn) { color: #fff; }
.wa-hpanel .wa-tag { right: clamp(18px, 3vw, 36px); bottom: clamp(18px, 3vw, 36px); rotate: 0deg; background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 0; }
.wa-hpanel .wa-tag-k { color: #fff; opacity: 0.85; }
.wa-hpanel .wa-tag::before { display: none; }

/* ---------- Opening met een grote korte kop, een brede foto en een kleurvlak ---------- */
.wa-hhead { display: grid; gap: clamp(20px, 3vw, 36px); padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.gen2 .wa-hhead-top h1 { font-size: clamp(2.8rem, 8.2vw, 6.6rem); line-height: 0.95; letter-spacing: -0.045em; max-width: none; }
.wa-hhead-sub { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px 40px; flex-wrap: wrap; }
.wa-hhead-sub .wa-lead { margin-top: 0; max-width: 34em; }
.wa-hhead-media { display: grid; gap: 14px; }
.wa-hhead-media.has-note { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.wa-hhead-img { aspect-ratio: 16 / 8; }
.wa-hhead-media.has-note .wa-hhead-img { aspect-ratio: auto; height: 100%; min-height: clamp(280px, 34vw, 460px); }
.wa-hhead-note { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: clamp(24px, 3vw, 40px); background: var(--primary); color: var(--on-primary); border-radius: calc(var(--wa-photo-r) + 8px); }
.wa-hhead-k { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.wa-hhead-t { font-family: var(--font-heading); font-weight: var(--hw); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: var(--hls); }
.gen2.dir-podium .wa-hhead-note, .gen2.dir-redactie .wa-hhead-note { border-radius: 0; }
@media (max-width: 900px) {
  .wa-hhead-media.has-note { grid-template-columns: minmax(0, 1fr); }
  .wa-hhead-media.has-note .wa-hhead-img, .wa-hhead-img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .wa-hpanel { min-height: clamp(480px, 88vh, 640px); }
  .wa-hpanel .wa-tag { position: static; align-self: flex-start; margin: 0 clamp(26px, 4vw, 56px) clamp(22px, 4vw, 40px); }
  .wa-hpanel { flex-direction: column; justify-content: flex-end; align-items: stretch; }
}

/* ---------- Panelen: gekleurde en donkere vlakken (en de voet) als afgeronde vlakken binnen de pagina ---------- */
.gen2.fr-paneel main > .sec:is(.tone-dark, .tone-accent):not(.sec-hero),
.gen2.fr-paneel .sec-footer { width: min(calc(var(--wa-w) + 96px), 100% - var(--wa-gut) * 2); margin: clamp(10px, 2vw, 22px) auto; border-radius: 32px; overflow: hidden; }
.gen2.fr-paneel .sec-footer { margin-bottom: clamp(14px, 2.5vw, 28px); }
@media (max-width: 900px) {
  .gen2.fr-paneel main > .sec:is(.tone-dark, .tone-accent):not(.sec-hero), .gen2.fr-paneel .sec-footer { border-radius: 24px; }
}

/* ---------- Smalle koppen in hoofdletters (Archivo met een smallere breedte-as) ---------- */
.gen2.dp-smal :is(h1, h2) { font-family: 'Archivo Variable', var(--font-heading); font-stretch: 66%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.94; }
.gen2.dp-smal h1 { font-size: clamp(3rem, 8vw, 6rem); }
.gen2.dp-smal h2 { font-size: clamp(2.1rem, 4.8vw, 3.9rem); }
.gen2.dp-smal :is(h1, h2) .wa-em, .gen2.dp-smal :is(h1, h2) .wa-em.ta { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; color: var(--primary-ink); letter-spacing: inherit; }
.gen2.dp-smal .wa-hhead-top h1 { font-size: clamp(3.4rem, 10.5vw, 8.2rem); }

/* ---------- Uitgebreide voeten: merk, menu, diensten en contactgegevens in kolommen ---------- */
.wa-ftr-rich { display: grid; gap: 0; }
.wa-ftr-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 44px clamp(28px, 4vw, 64px); align-items: start; }
.wa-ftr-grid.is-contact { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.4fr); }
.wa-ftr-grid .wa-ftr-brand p { margin: 18px 0 24px; }
.wa-ftr-rich .nav { display: grid; gap: 10px; margin: 0; }
.wa-ftr-rich .nav a { color: inherit; text-decoration: none; opacity: 0.86; }
.wa-ftr-rich .nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.wa-ftr-rich .wa-ftr-h { font-family: var(--font-body); font-size: 0.74rem; line-height: 1.3; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-kicker); margin: 4px 0 18px; }
.wa-ftr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wa-ftr-list a { color: inherit; text-decoration: none; opacity: 0.86; }
.wa-ftr-list a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.wa-ftr-facts { margin: 0; display: grid; gap: 14px; }
.wa-ftr-facts dt { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.wa-ftr-facts dd { margin: 3px 0 0; opacity: 0.92; }
.wa-ftr-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wa-ftr-cards li { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--on-dark) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-dark) 12%, transparent); }
.wa-ftr-cards .wa-ico { background: color-mix(in srgb, var(--on-dark) 12%, transparent); color: var(--on-dark); }
.wa-ftr-cards li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.wa-ftr-k { font-size: 0.78rem; opacity: 0.66; }
.wa-ftr-v { font-weight: 560; overflow-wrap: anywhere; }
.wa-ftr-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent); font-size: 0.9rem; }
.wa-ftr-bottom p, .wa-ftr-top { margin: 0; opacity: 0.74; color: inherit; text-decoration: none; }
.wa-ftr-top:hover { opacity: 1; }
.wa-ftr-ask { display: flex; align-items: center; gap: 24px; justify-content: space-between; margin-bottom: 52px; padding-bottom: 48px; border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent); }
.wa-ftr-ask > div { flex: 1; min-width: 0; }
.wa-ftr-ask h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--on-dark); }
.wa-ftr-ask p { margin: 6px 0 0; opacity: 0.78; }
.wa-ftr-ask .wa-ico { background: color-mix(in srgb, var(--on-dark) 12%, transparent); color: var(--on-dark); }
@media (max-width: 900px) {
  .wa-ftr-grid, .wa-ftr-grid.is-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .wa-ftr-grid .wa-ftr-brand, .wa-ftr-grid .wa-ftr-col-cards { grid-column: 1 / -1; }
  .wa-ftr-ask { flex-direction: column; align-items: flex-start; gap: 18px; }
  .wa-ftr-bottom { flex-direction: column; align-items: flex-start; margin-top: 40px; }
}
@media (max-width: 900px) { .wa-ftr-grid .wa-ftr-col:last-child { grid-column: 1 / -1; } }

.wa-ftr-rich .hdr-logo .wm-text { white-space: normal; overflow: visible; text-overflow: clip; }
.wa-ftr-rich .wa-ftr-ask h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; }

/* ======================================================================================================================
   Meer indelingen per onderdeel: koppen, over ons, werk, werkwijze, redenen, citaat, oproep en contact
   ====================================================================================================================== */

/* ---------- Koppen ---------- */
.wa-hdr-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
.wa-hdr-mid .nav { margin-left: 0; justify-content: center; }
.wa-hdr-mid .wa-hdr-end { justify-self: end; margin-left: 0; }
.wa-hdr-pill .nav { margin-left: auto; padding: 5px; gap: 2px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.wa-hdr-pill .nav a { padding: 9px 18px; border-radius: 999px; background-image: none; transition: background 0.25s; }
.wa-hdr-pill .nav a:hover { background: var(--bg); }
.wa-hdr-pill .wa-hdr-end { margin-left: 0; }
.wa-hdr-strip { background: var(--dark); color: var(--on-dark); font-size: 0.84rem; }
.wa-hdr-strip-in { display: flex; align-items: center; gap: 8px 28px; min-height: 38px; overflow: hidden; }
.wa-hdr-fact { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0.92; }
.wa-hdr-fact .wa-ico { width: 22px; height: 22px; background: color-mix(in srgb, var(--on-dark) 14%, transparent); color: var(--on-dark); }
.wa-hdr-fact .wa-ico svg { width: 12px; height: 12px; }
@media (max-width: 900px) { .wa-hdr-strip { display: none; } }

/* ---------- Over ons ---------- */
.wa-aphotos { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: calc(var(--gap) + 8px); align-items: center; }
.wa-aphotos-media { display: grid; }
.wa-ap0 { width: 80%; aspect-ratio: 3 / 4; }
.wa-ap1 { width: 52%; aspect-ratio: 1; justify-self: end; margin-top: -22%; }
.wa-aphotos-text .wa-lead { margin-top: 20px; }
.wa-aphotos-text p:not(.wa-lead):not(.wa-label), .wa-abanner-text p:not(.wa-lead), .wa-aover-card p:not(.wa-lead):not(.wa-label) { margin-top: 16px; color: var(--fg-muted); }
.wa-abanner-img { aspect-ratio: 21 / 9; width: 100%; }
.wa-abanner-text { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--gap); margin-top: 44px; align-items: start; }
.wa-abanner-text .wa-lead { margin-top: 0; }
.wa-aover { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.wa-aover-img { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 4 / 3.2; }
.wa-aover-card { grid-column: 7 / -1; grid-row: 1; position: relative; z-index: 1; padding: clamp(24px, 3.4vw, 48px); background: var(--card, var(--surface)); border-radius: calc(var(--wa-photo-r) + 8px); box-shadow: 0 34px 60px -40px color-mix(in srgb, var(--dark) 50%, transparent); }
.wa-aover.is-flip .wa-aover-img { grid-column: 5 / -1; }
.wa-aover.is-flip .wa-aover-card { grid-column: 1 / 7; }
.wa-aover-card .wa-lead { margin-top: 16px; font-size: 1.1rem; }

/* ---------- Werk ---------- */
.wa-pduo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.wa-pd { margin: 0; }
.wa-pd .wa-photo { aspect-ratio: 4 / 5; }
.wa-pd:nth-child(2) { margin-top: 56px; }
.wa-povl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wa-po { position: relative; margin: 0; }
.wa-po .wa-photo { aspect-ratio: 3 / 4; }
.wa-po::after { content: ''; position: absolute; inset: 0; border-radius: var(--wa-photo-r); background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent 55%); pointer-events: none; }
.wa-po-cap { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: grid; gap: 2px; color: #fff; }
.wa-po-cap b { font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.25rem; }
.wa-po-cap span { opacity: 0.85; font-size: 0.92rem; }

/* ---------- Werkwijze ---------- */
.wa-pnum { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 0.95rem; }
.gen2.dir-podium .wa-pnum, .gen2.dir-redactie .wa-pnum { border-radius: 0; }
.wa-pcards, .wa-pflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wa-pcards li, .wa-pflow li { position: relative; padding: 30px 28px 32px; background: var(--card, var(--surface)); border-radius: calc(var(--wa-photo-r) + 6px); box-shadow: inset 0 0 0 1px var(--line); }
.wa-pcards .wa-pnum, .wa-pflow .wa-pnum { margin-bottom: 20px; }
.wa-pcards h3, .wa-pflow h3 { margin-bottom: 8px; }
.wa-pcards p, .wa-pflow p { color: var(--fg-muted); }
.wa-pflow { gap: 34px; }
.wa-pflow li:not(:last-child)::after { content: '→'; position: absolute; right: -30px; top: 50%; width: 26px; text-align: center; transform: translateY(-50%); color: var(--kick); font-size: 1.3rem; }
.wa-pbig { list-style: none; margin: 0; padding: 0; }
.wa-pbig li { display: grid; grid-template-columns: minmax(80px, 0.35fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 36px; align-items: baseline; padding: 34px 0; border-top: 1px solid var(--line); }
.wa-pbig li:last-child { border-bottom: 1px solid var(--line); }
.wa-pbig-n { font-family: var(--font-heading); font-weight: var(--hw); font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: var(--hls); color: var(--kick); }
.wa-pbig h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.wa-pbig p { color: var(--fg-muted); }
.wa-ptrack { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap); align-items: start; }
.wa-ptrack-head { position: sticky; top: 120px; }
.wa-ptrack-list { list-style: none; margin: 0; padding: 0 0 0 38px; position: relative; display: grid; gap: 38px; }
.wa-ptrack-list::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.5px; background: var(--line); }
.wa-ptrack-list li { position: relative; }
.wa-ptrack-list .wa-dot { position: absolute; left: -38px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.wa-ptrack-list h3 { margin: 4px 0 8px; }
.wa-ptrack-list p { color: var(--fg-muted); max-width: 34em; }

/* ---------- Waarom wij ---------- */
.wa-utiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wa-utiles li { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 240px; padding: 30px 28px; border-radius: calc(var(--wa-photo-r) + 6px); background: var(--card, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.2, 1); }
.wa-utiles li:hover { transform: translateY(-6px); }
.wa-utiles h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.wa-utiles p { color: var(--fg-muted); }
.wa-ubig { list-style: none; margin: 0; padding: 0; }
.wa-ubig li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 24px 40px; align-items: center; padding: 30px 0; border-top: 1px solid var(--line); transition: padding 0.35s; }
.wa-ubig li:last-child { border-bottom: 1px solid var(--line); }
.wa-ubig li:hover { padding-left: 14px; }
.wa-ubig h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.wa-ubig p { color: var(--fg-muted); }
.wa-ubig-arrow { font-size: 1.5rem; color: var(--kick); }

/* ---------- Citaat ---------- */
.wa-qcard { max-width: 860px; margin-inline: auto; text-align: center; padding: clamp(32px, 5vw, 64px); border-radius: calc(var(--wa-photo-r) + 12px); background: var(--card, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.wa-qmark { display: block; font-family: var(--font-accent); font-size: 3.4rem; line-height: 0.8; color: var(--kick); margin-bottom: 8px; }
.wa-qcard blockquote, .wa-qside blockquote, .wa-qbar blockquote, .wa-qwide blockquote, .wa-qava blockquote { margin: 0; font-family: var(--font-heading); font-weight: var(--hw); letter-spacing: var(--hls); text-wrap: balance; }
.wa-qcard blockquote { font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.2; }
.wa-qcard figcaption, .wa-qside figcaption, .wa-qbar figcaption { margin-top: 22px; font-size: 0.95rem; color: var(--fg-muted); }
.wa-qside { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: var(--gap); align-items: start; }
.wa-qside blockquote { font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.15; }
.wa-qside-meta figcaption { margin-top: 10px; }
.wa-qbar { max-width: 900px; margin-inline: auto; padding-left: 28px; border-left: 4px solid var(--accent); }
.wa-qbar blockquote { font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.3; }
.wa-qbar figcaption { margin-top: 14px; }
.wa-qwide { position: relative; isolation: isolate; min-height: clamp(380px, 52vh, 520px); display: flex; align-items: flex-end; border-radius: calc(var(--wa-photo-r) + 16px); overflow: hidden; color: #fff; background: var(--dark); }
.wa-qwide-img { position: absolute; inset: 0; z-index: -2; border-radius: 0 !important; }
.wa-qwide-img :is(img, .art) { height: 100%; }
.wa-qwide::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.1) 70%); pointer-events: none; }
.wa-qwide-text { max-width: 780px; padding: clamp(26px, 4vw, 56px); }
.wa-qwide blockquote { font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.2; color: #fff; }
.wa-qwide figcaption { margin-top: 16px; color: rgba(255, 255, 255, 0.84); }
.wa-qava { max-width: 820px; margin-inline: auto; text-align: center; }
.wa-qava blockquote { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.18; }
.wa-qava-who { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.wa-qava-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.gen2.dir-podium .wa-qava-i, .gen2.dir-redactie .wa-qava-i, .gen2.dir-podium .wa-qcard, .gen2.dir-redactie .wa-qcard { border-radius: 0; }
.wa-qava figcaption { font-weight: 600; }

/* ---------- Oproep ---------- */
.wa-ctac { display: grid; justify-items: center; gap: 18px; max-width: 760px; text-align: center; }
.wa-ctac p { color: var(--fg-muted); max-width: 32em; }
.wa-ctab { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(22px, 3vw, 34px) clamp(24px, 3.4vw, 44px); border-radius: calc(var(--wa-photo-r) + 10px); background: var(--card, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.wa-ctab h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.wa-ctab p { margin-top: 4px; color: var(--fg-muted); }
.wa-ctap { position: relative; isolation: isolate; min-height: clamp(340px, 46vh, 460px); display: flex; align-items: flex-end; border-radius: calc(var(--wa-photo-r) + 16px); overflow: hidden; color: #fff; background: var(--dark); }
.wa-ctap-img { position: absolute; inset: 0; z-index: -2; border-radius: 0 !important; }
.wa-ctap-img :is(img, .art) { height: 100%; }
.wa-ctap::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.12) 70%); pointer-events: none; }
.wa-ctap-copy { display: grid; justify-items: start; gap: 14px; max-width: 640px; padding: clamp(26px, 4vw, 56px); }
.wa-ctap h2 { color: #fff; }
.wa-ctap p { color: rgba(255, 255, 255, 0.86); }
.wa-ctap .wa-btn { --btn-bg: #fff; --btn-fg: #141414; }
.wa-ctak { display: grid; justify-items: start; gap: 18px; padding: clamp(32px, 5vw, 64px); border-radius: calc(var(--wa-photo-r) + 14px); background: var(--primary); color: var(--on-primary); }
.wa-ctak h2 { max-width: 18em; color: var(--on-primary); }
.wa-ctak p { color: var(--on-primary); opacity: 0.9; }
.wa-ctak .wa-btn { --btn-bg: var(--on-primary); --btn-fg: var(--primary); }
.wa-ctak .wa-em, .wa-ctak .wa-em.ta { color: inherit; }
.wa-ctal { display: grid; gap: 28px; }
.wa-ctal h2 { max-width: 14em; font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.02; }
.wa-ctal-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; border-top: 1px solid var(--line); }
.wa-ctal-act p { max-width: 30em; margin: 0; color: var(--fg-muted); }
.wa-ctal-act a { font-size: 1.25rem; }

/* ---------- Contact ---------- */
.wa-ccardw { display: grid; gap: 36px; max-width: 860px; }
.wa-ccardw-form { width: 100%; max-width: 720px; margin-inline: auto; }
.wa-ccardw-facts, .wa-cicons-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wa-ccardw-facts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wa-cicons-list { margin-top: 34px; }
.wa-ccardw-facts li, .wa-cicons-list li { display: flex; align-items: center; gap: 14px; }
.wa-ccardw-facts li > span:last-child, .wa-cicons-list li > span:last-child { display: grid; gap: 2px; min-width: 0; }

/* ---------- Kleine schermen ---------- */
@media (max-width: 900px) {
  .wa-aphotos, .wa-abanner-text, .wa-ptrack, .wa-qside, .wa-pbig li, .wa-ubig li { grid-template-columns: minmax(0, 1fr); }
  .wa-ap0 { width: 70%; }
  .wa-ap1 { width: 46%; }
  .wa-abanner-img { aspect-ratio: 16 / 9; }
  .wa-aover { display: block; }
  .wa-aover-card { margin: -48px 16px 0; }
  .wa-pduo { gap: 16px; }
  .wa-pd:nth-child(2) { margin-top: 28px; }
  .wa-povl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .wa-povl .wa-po:nth-child(3) { grid-column: 1 / -1; }
  .wa-povl .wa-po:nth-child(3) .wa-photo { aspect-ratio: 16 / 10; }
  .wa-pcards, .wa-pflow, .wa-utiles { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wa-pflow li:not(:last-child)::after { content: '↓'; right: auto; left: 28px; top: auto; bottom: -26px; transform: none; }
  .wa-ptrack-head { position: static; }
  .wa-ubig-arrow { display: none; }
  .wa-utiles li { min-height: 0; gap: 20px; }
  .wa-ctab { flex-direction: column; align-items: flex-start; }
}

/* ---------- Horeca: menu-indelingen en de typografische stem per soort zaak ---------- */
/* Menu als lijn: naam links, omschrijving rechts, haarlijnen ertussen. Rustig, zonder beeld. */
.wa-mlines { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.wa-mlines li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 56px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line); transition: padding-left 0.3s ease; }
.wa-mlines h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); }
.wa-mlines p { color: var(--fg-muted); max-width: 34em; margin: 0; }
@media (hover: hover) { .wa-mlines li:hover { padding-left: 14px; } }

/* Menu met kleine ronde beelden, twee kolommen, naam met stippellijn */
.wa-mphoto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.wa-mphoto li { display: flex; gap: 20px; align-items: flex-start; }
.wa-mphoto li > div { flex: 1; min-width: 0; }
.wa-mphoto h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.wa-mphoto p { color: var(--fg-muted); margin: 6px 0 0; font-size: 0.97rem; max-width: 30em; }
.wa-mphoto .wa-mthumb { flex: none; width: 84px; height: 84px; margin: 0; border-radius: 50%; overflow: hidden; }
.wa-mphoto .wa-mthumb :is(img, .art) { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
@media (hover: hover) { .wa-mphoto li:hover .wa-mthumb :is(img, .art) { transform: scale(1.12); } }

/* Menu met licht gedraaide foto en een gekleurd etiket met de naam: het ene opvallende detail van een grill of diner */
.wa-mtags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 36px; }
.wa-mtags.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-mtags.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wa-mtag-fig { position: relative; margin: 0 0 26px; transform: rotate(var(--tilt, -1.6deg)); transition: transform 0.4s ease; }
.wa-mtags li:nth-child(even) { --tilt: 1.3deg; }
.wa-mtags li:nth-child(3n) { --tilt: -0.7deg; }
.wa-mtags .wa-photo { aspect-ratio: 4 / 3; }
.wa-mtag { position: absolute; left: -10px; bottom: -16px; max-width: 86%; padding: 9px 16px; background: var(--accent); color: var(--on-accent, #fff); font-family: var(--font-heading); font-weight: var(--hw); font-size: 1.02rem; line-height: 1.15; }
.wa-mtags p { color: var(--fg-muted); font-size: 0.97rem; margin: 0; }
@media (hover: hover) { .wa-mtags li:hover .wa-mtag-fig { transform: rotate(0deg) translateY(-4px); } }
@media (max-width: 900px) {
  .wa-mlines li { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .wa-mphoto { grid-template-columns: 1fr; gap: 28px; }
  .wa-mtags, .wa-mtags.n-2, .wa-mtags.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px; }
}
@media (max-width: 560px) { .wa-mtags, .wa-mtags.n-2, .wa-mtags.n-4 { grid-template-columns: 1fr; } .wa-mphoto .wa-mthumb { width: 68px; height: 68px; } }
@media (prefers-reduced-motion: reduce) { .wa-mlines li, .wa-mtag-fig, .wa-mthumb :is(img, .art) { transition: none; } }

/* De stem: fijn (licht en ruim), warm (klassiek), smal (smalle hoofdletters, zie dp-smal), stil (één rustige stem) */
.gen2.vo-fijn :is(h1, h2) { font-weight: 400; letter-spacing: 0.002em; line-height: 1.12; }
.gen2.vo-fijn .wa-label { font-size: 0.68rem; letter-spacing: 0.24em; font-weight: 600; }
.gen2.vo-fijn .wa-lead { font-weight: 300; }
.gen2.vo-warm :is(h1, h2) { font-weight: 500; line-height: 1.08; }
.gen2.vo-smal .wa-label { letter-spacing: 0.2em; font-weight: 750; }
.gen2.vo-smal .wa-btn { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.86rem; }
.gen2.vo-stil :is(h1, h2) { font-weight: 400; letter-spacing: -0.015em; }
.gen2.vo-stil .wa-label { text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 0.9rem; color: var(--fg-muted); }
.gen2.vo-stil .wa-label::before { display: none; }

/* Het logo in de donkere voet staat op de donkere kleur, niet op de hoofdkleur: ook bij een felle hoofdkleur (donkere huisstijlen) goed leesbaar */
.gen2 .sec-footer .wm { color: var(--on-dark) !important; --lg-main: var(--on-dark) !important; --lg-on: var(--dark) !important; --lg-acc: var(--on-dark) !important; --lg-acc-text: var(--on-dark) !important; }
@media (max-width: 900px) { .wa-hdr-mid { grid-template-columns: minmax(0, 1fr) auto; } }

/* Bouwtemplate "Houtwerk" (generatie 2, 'wa-h-'), naar het Webflow-voorbeeld https://carpentryy-wbs.webflow.io/ (kennisbank-bouw): warm en ambachtelijk. Een
   diepe, warme donkere kleur met één helder accent (geel, oranje of de kleur van de huisstijl), afgeronde foto's, kleine labels op het beeld, stappen in cirkels
   en een warm uitnodigingsvlak. Alles onder .gen2; klassen 'bh-'. De donkere kleur en het accent komen uit de huisstijl (zie templateColors). */

.gen2.tp-houtwerk.tp-houtwerk.tp-houtwerk.tp-houtwerk { --wa-w: 1240px; --wa-gut: clamp(16px, 3vw, 40px); --pad: clamp(64px, 8vw, 116px); font-size: 17px; line-height: 1.55; }
.gen2.tp-houtwerk main > .sec { position: relative; }
.gen2.tp-houtwerk main > .sec:not(.sec-hero) { padding-block: var(--pad); }
.gen2.tp-houtwerk main > .sec.tone-surface { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.gen2.tp-houtwerk main > .sec.tone-dark { color: var(--on-dark); }
.gen2.tp-houtwerk main > .sec.tone-accent { background: var(--accent); color: var(--on-accent); }
.gen2.tp-houtwerk :is(h1, h2, h3) { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.gen2.tp-houtwerk.tp-houtwerk.tp-houtwerk h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.gen2.tp-houtwerk.tp-houtwerk.tp-houtwerk h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.gen2.tp-houtwerk h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }

.gen2.tp-houtwerk .wa-btn { border-radius: 8px; font-weight: 700; font-size: 0.9375rem; letter-spacing: 0; padding: 13px 24px; background: var(--accent); color: var(--on-accent); box-shadow: none; transition: translate 0.2s, background-color 0.2s; }
.gen2.tp-houtwerk .wa-btn svg { display: none; }
.gen2.tp-houtwerk main > .sec.tone-accent .wa-btn { background: var(--dark); color: var(--on-dark); }
.gen2.tp-houtwerk .sec-header { background: var(--bg); border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.gen2.tp-houtwerk .sec-header .nav a { font-size: 0.875rem; font-weight: 600; }
.gen2.tp-houtwerk .sec-footer { background: var(--dark); color: var(--on-dark); }
.gen2.tp-houtwerk .wa-link { color: inherit; font-weight: 700; }

.bh-tag { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 6px; font-size: 0.8125rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 24%, transparent); }
.gen2.tp-houtwerk main > .sec.tone-accent .bh-tag { background: color-mix(in srgb, var(--on-accent) 16%, transparent); }
.bh-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(24px, 3.4vw, 48px); }
.bh-head h2 { margin: 0; }
.bh-head-center { justify-content: center; text-align: center; }

/* ---------- Opening ---------- */
.bh-hero { background: var(--dark); color: var(--on-dark); }
.bh-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(520px, 80vh, 780px); }
.bh-hero-photo { position: relative; min-height: 320px; }
.bh-hero-text { display: grid; gap: 22px; justify-items: start; align-content: center; padding: clamp(40px, 6vw, 96px) max(var(--wa-gut), calc((100vw - var(--wa-w)) / 2 + var(--wa-gut))) clamp(40px, 6vw, 96px) clamp(28px, 5vw, 80px); }
.bh-hero-text h1 { margin: 0; color: var(--on-dark); }
.bh-hero-text p { margin: 0; max-width: 28em; opacity: 0.88; font-size: 1.0625rem; }
.bh-hero .bh-tag { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent); }
.bh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.gen2.tp-houtwerk .bh-hero .wa-link, .gen2.tp-houtwerk main > .sec.tone-dark .wa-link { color: var(--on-dark); }
.bh-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0 !important; }
.bh-hero-img img, .bh-hero-img .art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Over ons ---------- */
.bh-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.bh-about-text { display: grid; gap: 20px; justify-items: start; }
.bh-about-text h2 { margin: 0; }
.bh-about-text p { margin: 0; max-width: 30em; opacity: 0.86; }
.bh-about-photo { position: relative; }
.bh-about-img { aspect-ratio: 4 / 5; max-height: 440px; width: 100%; border-radius: 20px !important; }
.bh-badge { position: absolute; left: clamp(-24px, -2vw, -8px); bottom: clamp(16px, 3vw, 36px); display: grid; gap: 2px; margin: 0; padding: 14px 20px; border-radius: 12px; background: var(--accent); color: var(--on-accent); box-shadow: 0 16px 32px -18px rgba(0, 0, 0, 0.5); }
.bh-badge b { font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.1; }
.bh-badge span { font-size: 0.8125rem; opacity: 0.85; }

/* ---------- Diensten als fotokaarten ---------- */
.bh-strip { position: relative; }
.bh-strip-row { list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: clamp(14px, 1.8vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bh-strip-row::-webkit-scrollbar { display: none; }
.bh-strip-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.bh-strip-row li { flex: 0 0 min(82%, 340px); scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.bh-card-img { aspect-ratio: 4 / 5; width: 100%; border-radius: 16px !important; }
.bh-strip-row h3 { margin: 6px 0 0; }
.bh-strip-row p { margin: 0; font-size: 0.9375rem; opacity: 0.8; }
.bh-strip-nav { display: flex; gap: 10px; margin-top: 18px; }
.bh-strip-nav button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--dark); color: var(--on-dark); cursor: pointer; transition: opacity 0.2s; }
.bh-strip-nav button:disabled { opacity: 0.3; cursor: default; }

/* ---------- Werk met labels ---------- */
.bh-works ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.bh-works li { display: grid; align-content: start; border-radius: 16px; overflow: hidden; background: var(--accent); color: var(--on-accent); }
.bh-work-panel { display: grid; gap: 14px; justify-items: start; padding: clamp(18px, 2.2vw, 28px); }
.gen2.tp-houtwerk .bh-more { display: inline-block; padding: 9px 20px; border-radius: 8px; background: var(--dark); color: var(--on-dark); font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.bh-work-photo { position: relative; }
.bh-work-img { aspect-ratio: 16 / 9; width: 100%; border-radius: 0 !important; }
.bh-label { position: absolute; left: 12px; top: 12px; padding: 6px 14px; border-radius: 8px; font-size: 0.8125rem; font-weight: 700; background: var(--dark); color: var(--on-dark); }
.bh-works h3 { margin: 0; color: inherit; font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.gen2.tp-houtwerk main > .sec.tone-dark .bh-head .wa-link { color: var(--on-dark); }

/* ---------- Stappen in cirkels ---------- */
.bh-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); position: relative; }
.bh-steps li { display: grid; justify-items: center; gap: 10px; text-align: center; align-content: start; }
.bh-circle { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; margin-bottom: 8px; }
.bh-steps p { margin: 0; font-size: 0.9375rem; opacity: 0.8; max-width: 17em; }

/* ---------- Reviews ---------- */
.bh-reviews { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.bh-reviews blockquote { margin: 0; display: grid; gap: 16px; }
.bh-reviews blockquote p { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.3; letter-spacing: -0.01em; }
.bh-reviews footer { display: flex; align-items: center; gap: 12px; font-size: 0.9375rem; }
.bh-reviews footer span { opacity: 0.8; }
.bh-avatar { width: 52px; height: 52px; flex: none; aspect-ratio: 1; border-radius: 50% !important; }
.bh-reviews ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bh-reviews li { display: grid; gap: 10px; padding: clamp(18px, 2vw, 26px); border-radius: 14px; background: var(--bg); }
.bh-reviews li p { margin: 0; }
.bh-reviews li span { font-size: 0.875rem; opacity: 0.75; }
.bh-stars { display: flex; gap: 3px; color: var(--accent); }
.gen2.tp-houtwerk main > .sec.tone-surface .bh-stars { color: color-mix(in srgb, var(--accent) 78%, var(--text)); }

/* ---------- Uitnodiging ---------- */
.gen2.tp-houtwerk main > .sec:has(.bh-invite) { padding-block: clamp(40px, 5vw, 72px); }
.bh-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(28px, 4vw, 56px); border-radius: 20px; background: var(--accent); color: var(--on-accent); }
.gen2.tp-houtwerk .bh-invite .wa-btn { background: var(--dark); color: var(--on-dark); }
.bh-invite-text { display: grid; gap: 10px; max-width: 34em; }
.bh-invite-text h2 { margin: 0; color: inherit; }
.bh-invite-text p { margin: 0; opacity: 0.88; }

/* ---------- Contact ---------- */
.bh-contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.bh-contact-text { display: grid; gap: 16px; align-content: start; }
.bh-contact-text h2 { margin: 0; color: var(--on-dark); }
.bh-contact-text > p { margin: 0; max-width: 26em; opacity: 0.85; }
.bh-contact-text dl { margin: 8px 0 0; display: grid; gap: 10px; }
.bh-contact-text dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; }
.bh-contact-text dd { margin: 0; }
.bh-contact .bh-tag { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent); justify-self: start; }
.bh-contact-form { padding: clamp(22px, 3vw, 40px); border-radius: 18px; background: color-mix(in srgb, var(--on-dark) 7%, transparent); }
.bh-contact :is(input, select, textarea) { border-radius: 8px; }
.bh-contact label { color: var(--on-dark); }

@media (max-width: 900px) {
  .bh-hero-grid, .bh-about, .bh-reviews, .bh-contact { grid-template-columns: minmax(0, 1fr); }
  .bh-hero-grid { min-height: 0; }
  .bh-hero-photo { min-height: 260px; order: -1; }
  .bh-hero-text { padding: 32px var(--wa-gut); }
  .bh-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .bh-badge { left: 12px; }
}
@media (max-width: 560px) { .bh-works ul { grid-template-columns: minmax(0, 1fr); } }
.bh-services { grid-template-columns: minmax(0, 1fr); }
.bh-strip { min-width: 0; max-width: 100%; }

/* De voeten van de twaalf restauranttemplates (zie FooterSections.tsx, klassen 'wz-'). Elke voet heeft zijn eigen indeling; de kleuren komen van de template. */

.gen2 .sec-footer .wz { color: inherit; }
.gen2 .sec-footer .wz :is(p, li, dd, dt, h3) { color: inherit; }
.gen2 .sec-footer .wz a { color: inherit; text-decoration: none; transition: opacity 0.2s, color 0.2s; }
.gen2 .sec-footer .wz a:hover { opacity: 0.7; }
.wz .nav { display: grid; gap: 10px; margin: 0; }
.wz-copy { margin: 0; font-size: 0.8125rem; opacity: 0.72; }
.wz-lead { margin: 0; }
.wz-facts { margin: 0; display: grid; gap: 14px; }
.wz-facts dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.62; }
.wz-facts dd { margin: 2px 0 0; }
.wz-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wz-col h3 { margin: 0 0 16px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; font-family: var(--font-body); }
.wz .is-off { position: absolute; visibility: hidden; pointer-events: none; height: 0; margin: 0; overflow: hidden; white-space: nowrap; }
.wz-oak .wz-name-small { margin: 0; font-family: var(--font-heading); text-transform: uppercase; font-size: var(--fit, clamp(1.6rem, 3vw, 2.4rem)); line-height: 1; letter-spacing: -0.01em; }
.wz-cafen .wz-card { min-width: 0; }
.wz-cafen .wz-card .wm { max-width: 100%; }
.wz-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.wz-bottom .nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.875rem; }

/* ---- Forken: licht en gecentreerd ---- */
.gen2.tp-forken .sec-footer .wz-forken { display: grid; justify-items: center; gap: 22px; text-align: center; padding-block: clamp(56px, 7vw, 96px) 36px; }
.wz-forken .wz-lead { max-width: 26em; }
.wz-forken .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
.wz-forken .wz-line { margin: 0; font-size: 0.875rem; opacity: 0.8; }

/* ---- Palais: vier kolommen en een handtekening ---- */
.gen2.tp-palais .sec-footer .wz-palais { padding-block: clamp(56px, 6vw, 88px) 36px; display: grid; gap: clamp(28px, 4vw, 48px); }
.wz-palais .wz-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.wz-palais .nav, .wz-palais .wz-list { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.wz-palais .wz-sign { margin: 0; text-align: center; font-family: var(--font-heading); font-style: italic; font-size: var(--fit, clamp(2.4rem, 6vw, 4.6rem)); line-height: 1.1; opacity: 0.9; }
.wz-palais .wz-copy { text-align: center; }

/* ---- Italiano: logo links, kolommen rechts ---- */
.gen2.tp-italiano .sec-footer .wz-italiano { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(28px, 6vw, 96px); padding-block: clamp(56px, 6vw, 88px) 32px; background: color-mix(in srgb, var(--dark) 88%, #000); }
.wz-italiano .wz-brand p { margin: 16px 0 0; max-width: 24em; font-size: 0.9375rem; opacity: 0.78; }
.wz-italiano .wz-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; font-size: 0.875rem; }
.wz-italiano .wz-bottom { grid-column: 1 / -1; }

/* ---- Brasa: grote menuwoorden en rode koppen ---- */
.gen2.tp-brasa .sec-footer .wz-brasa { padding-block: 0 32px; }
.wz-brasa .wz-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.wz-brasa .wz-lead { font-family: var(--font-heading); font-size: clamp(1.1rem, 2vw, 1.6rem); opacity: 0.7; }
.wz-brasa .wz-mid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; padding-block: clamp(32px, 5vw, 64px); align-items: start; }
.wz-brasa .nav { grid-template-columns: repeat(2, auto); justify-content: start; gap: 6px 48px; font-family: var(--font-heading); font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.1; text-transform: uppercase; }
.wz-brasa .wz-facts dt { color: var(--accent); opacity: 1; font-weight: 700; }

/* ---- Oak & Ember: een enorme naam ---- */
.gen2.tp-oak .sec-footer .wz-oak { display: grid; gap: clamp(20px, 3vw, 40px); padding-block: clamp(48px, 6vw, 88px) 28px; }
.wz-oak .wz-big { margin: 0; text-align: center; font-family: var(--font-heading); text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em; font-size: var(--fit, clamp(3rem, 12vw, 11rem)); white-space: nowrap; }
.wz-oak .wz-lead { text-align: center; max-width: 34em; margin-inline: auto; opacity: 0.85; }
.wz-oak { min-width: 0; }
.wz-oak .wz-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.wz-oak .wz-facts { grid-auto-flow: column; gap: 36px; }
.wz-oak .wz-facts dd { font-family: var(--font-heading); text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.5rem); }

/* ---- Cafen: twee afgeronde kaarten op crème ---- */
.gen2.tp-cafen .sec-footer.sec-footer { background: var(--bg); color: var(--text); border-radius: 0; border-top: 0; --btn-bg: var(--primary); --btn-fg: var(--on-primary); }
.gen2.tp-cafen .sec-footer .wz-cafen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); padding-block: clamp(32px, 4vw, 56px) 28px; }
.wz-cafen .wz-card { display: grid; gap: 18px; align-content: start; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: color-mix(in srgb, var(--accent) 22%, var(--bg)); }
.wz-cafen .wz-card p { margin: 0; max-width: 26em; opacity: 0.85; }
.wz-cafen .wz-card.is-dark { background: var(--dark); color: var(--on-dark); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wz-cafen .wz-bottom { grid-column: 1 / -1; border-top: 0; }

/* ---- Sushi Bar: menu, logo met knop, kaart ---- */
.gen2.tp-sushibar .sec-footer.sec-footer { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--text); }
.gen2.tp-cafen .sec-footer .wz-card .wm, .gen2.tp-sushibar .sec-footer .wz .wm { color: var(--text) !important; --lg-main: var(--primary) !important; --lg-on: var(--on-primary) !important; --lg-acc: var(--accent) !important; --lg-acc-text: var(--accent-ink) !important; }
.gen2.tp-cafen .sec-footer .wz-card.is-dark .wm { color: var(--on-dark) !important; }
.gen2.tp-sushibar .sec-footer .wz-sushi { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.wz-sushi .wz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-block: clamp(44px, 5vw, 72px); align-items: start; }
.wz-sushi .wz-col h3 { font-family: var(--font-heading); font-size: 1.25rem; opacity: 1; letter-spacing: 0.04em; }
.wz-sushi .wz-col:last-child { text-align: right; }
.wz-sushi .wz-center { display: grid; justify-items: center; gap: 16px; text-align: center; }
.wz-sushi .wz-center p { margin: 0; max-width: 24em; opacity: 0.8; }
.wz-sushi .wz-bar { padding: 18px var(--wa-gut, 24px); text-align: center; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }

/* ---- Velvet Shaker: sitemap ---- */
.gen2.tp-velvet .sec-footer .wz-velvet { padding-block: clamp(44px, 5vw, 72px) 24px; display: grid; gap: 28px; }
.wz-velvet .wz-rule { height: 1px; background: color-mix(in srgb, currentColor 34%, transparent); }
.wz-velvet .wz-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; min-height: 260px; }
.wz-velvet .wz-name-cell { min-width: 0; }
.wz-velvet .wz-name { margin: 0; font-family: var(--font-heading); font-weight: 300; font-size: var(--fit, clamp(2.4rem, 5.6vw, 4.8rem)); line-height: 1; letter-spacing: -0.02em; }
.wz-velvet .nav a::before { content: '› '; opacity: 0.6; }
.wz-velvet .wz-col h3 { text-transform: lowercase; letter-spacing: 0; font-size: 0.75rem; }
.wz-velvet .nav, .wz-velvet .wz-facts { font-size: 0.875rem; }

/* ---- Château Solaire: grote links en een afgesneden naam ---- */
.gen2.tp-solaire .sec-footer .wz-solaire { padding-top: clamp(48px, 6vw, 88px); overflow: hidden; }
.wz-solaire .wz-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.wz-solaire .wz-brand { display: grid; gap: 28px; align-content: start; }
.wz-solaire .nav { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.6vw, 2.2rem); gap: 10px; justify-items: end; text-align: right; }
.wz-solaire .wz-big { margin: clamp(24px, 4vw, 56px) 0 -0.14em; white-space: nowrap; font-family: var(--font-heading); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -0.02em; font-size: var(--fit, clamp(3rem, 14vw, 13rem)); }
.wz-solaire .wz-bottom { position: relative; z-index: 1; border-top: 0; padding-block: 10px 16px; background: color-mix(in srgb, var(--dark) 70%, transparent); }

/* ---- Armelio: kolommen, ronde stempel en een spooknaam ---- */
.gen2.tp-armelio .sec-footer .wz-armelio { padding-top: clamp(52px, 6vw, 88px); overflow: hidden; }
.wz-armelio .wz-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 150px; gap: 32px; align-items: start; font-size: 0.875rem; }
.wz-armelio .wz-col h3 { font-size: 0.6875rem; }
.wz-armelio .wz-stamp { width: 150px; height: 150px; opacity: 0.85; animation: wz-spin 40s linear infinite; }
.wz-armelio .wz-ghost { margin: clamp(8px, 2vw, 24px) 0 -0.2em; white-space: nowrap; font-family: var(--font-heading); line-height: 1; font-size: var(--fit, clamp(4rem, 16vw, 14rem)); opacity: 0.14; user-select: none; }
.wz-armelio .wz-bottom { border-top: 0; position: relative; z-index: 1; }
@keyframes wz-spin { to { transform: rotate(360deg); } }

/* ---- Florita: ruitrand en reuzenlinks ---- */
.gen2.tp-florita .sec-footer .wz-florita { position: relative; padding-block: clamp(52px, 6vw, 88px) 32px; }
.wz-florita::before, .wz-florita::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18px; background: repeating-conic-gradient(var(--on-primary) 0 25%, transparent 0 50%) 0 0 / 36px 36px; }
.wz-florita::before { left: 0; }
.wz-florita::after { right: 0; }
.wz-florita .wz-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.wz-florita .nav { grid-template-columns: repeat(2, auto); justify-content: start; gap: 4px 36px; font-family: var(--font-heading); text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1.05; }
.wz-florita .wz-facts dd { font-family: var(--font-heading); text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.6rem); }
.wz-florita .wz-cta { display: flex; justify-content: center; padding-block: clamp(32px, 5vw, 64px); }
.wz-florita .wz-copy { text-align: center; }

/* ---- Gastro: drie rustige kolommen ---- */
.gen2.tp-gastro .sec-footer .wz-gastro { padding-block: clamp(48px, 6vw, 88px) 28px; }
.wz-gastro .wz-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; font-size: 0.8125rem; padding-bottom: clamp(32px, 6vw, 80px); }
.wz-gastro .wz-bottom { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }

/* ---- Bouwtemplates ---- */
.gen2.tp-bouwwerk .sec-footer .wz-bouwwerk { display: grid; gap: clamp(20px, 3vw, 40px); padding-block: clamp(48px, 6vw, 88px) 28px; }
.wz-bouwwerk .wz-big { margin: 0; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em; font-size: var(--fit, clamp(3rem, 12vw, 11rem)); white-space: nowrap; color: var(--primary); }
.wz-bouwwerk .wz-name-small { margin: 0; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: var(--fit, clamp(1.6rem, 3vw, 2.4rem)); line-height: 1; color: var(--primary); }
.wz-bouwwerk .wz-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 32px; align-items: start; font-size: 0.9375rem; }
.gen2 .sec-footer .wz-bouwwerk .wz-cta .wa-btn { background: var(--primary); color: var(--on-primary); }
.gen2.tp-blauwdruk .sec-footer .wz-blauwdruk { display: grid; gap: clamp(28px, 4vw, 56px); padding-block: clamp(52px, 6vw, 88px) 28px; }
.wz-blauwdruk .wz-top { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.wz-blauwdruk .wz-brand p { margin: 16px 0 0; max-width: 22em; font-size: 0.9375rem; opacity: 0.75; }
.wz-blauwdruk .wz-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; font-size: 0.875rem; }
.wz-blauwdruk .wz-col h3 { font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 0.8125rem; opacity: 0.6; }
.wz-blauwdruk .wz-bottom a { text-decoration: underline; text-underline-offset: 4px; }
.gen2.tp-vakman .sec-footer .wz-vakman { padding: 0; }
.wz-vakman .wz-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-block: clamp(24px, 3vw, 40px) 0; padding: clamp(18px, 2.4vw, 30px) clamp(20px, 3vw, 40px); border-radius: 20px; background: var(--accent); color: var(--on-accent); }
.wz-vakman .wz-strip p { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.1rem, 1.8vw, 1.5rem); max-width: 28em; }
.gen2 .sec-footer .wz-vakman .wz-strip .wa-btn { background: var(--dark); color: var(--on-dark); }
.wz-vakman .wz-cols { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: clamp(36px, 5vw, 64px); font-size: 0.9375rem; }
.wz-vakman .wz-bottom { padding-bottom: 28px; }
.gen2.tp-houtwerk .sec-footer .wz-houtwerk { display: grid; gap: clamp(28px, 4vw, 56px); padding-block: clamp(48px, 6vw, 88px) 28px; }
.wz-houtwerk .wz-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.wz-houtwerk .wz-invite h3 { margin: 0; max-width: 20em; font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 700; text-transform: none; letter-spacing: -0.01em; opacity: 1; font-family: var(--font-heading); }
.wz-houtwerk .wz-cols { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 0.9375rem; }

@media (max-width: 820px) {
  .wz-bouwwerk .wz-cols, .wz-vakman .wz-cols, .wz-houtwerk .wz-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-blauwdruk .wz-top { grid-template-columns: minmax(0, 1fr); }
  .wz-blauwdruk .wz-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-palais .wz-cols, .wz-italiano .wz-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-italiano, .wz-cafen, .wz-solaire .wz-top, .wz-florita .wz-links, .wz-brasa .wz-mid, .wz-gastro .wz-cols, .wz-sushi .wz-grid, .wz-velvet .wz-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .wz-sushi .wz-col:last-child, .wz-solaire .nav { text-align: left; justify-items: start; }
  .wz-sushi .wz-center { order: -1; }
  .wz-armelio .wz-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-armelio .wz-stamp { grid-column: 1 / -1; justify-self: center; }
  .wz-oak .wz-facts { grid-auto-flow: row; }
  .wz-cafen .wz-card.is-dark { grid-template-columns: minmax(0, 1fr); }
  .wz-cafen .wz-card { padding: 18px; }
  .wz-cafen .wz-card .wm { font-size: 1.1rem; }
  .wz-velvet .wz-grid { min-height: 0; }
  .wz-brasa .nav, .wz-florita .nav { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .wz-armelio .wz-stamp { animation: none; } }

.gen2 .sec-footer .wz-houtwerk .wa-btn { background: var(--accent); color: var(--on-accent); }

/* ---- Meer bouwtemplates ---- */
.gen2.tp-werkplaats .sec-footer .wz-werkplaats { display: grid; gap: clamp(24px, 3.4vw, 44px); padding-block: clamp(44px, 5vw, 72px) 24px; }
.wz-werkplaats .wz-top p { margin: 14px 0 0; max-width: 28em; font-size: 0.9375rem; opacity: 0.75; }
.wz-werkplaats .wz-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 0.9375rem; }
.wz-werkplaats .wz-col h3 { color: var(--accent); opacity: 1; padding-bottom: 8px; border-bottom: 2px solid var(--accent); }
.gen2.tp-haard .sec-footer .wz-haard { display: grid; gap: clamp(28px, 4vw, 52px); padding-block: clamp(52px, 6vw, 88px) 26px; }
.wz-haard .wz-top { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(24px, 6vw, 96px); }
.wz-haard .wz-brand p { margin: 14px 0 0; max-width: 22em; font-size: 0.9375rem; opacity: 0.75; }
.wz-haard .wz-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; font-size: 0.875rem; }
.gen2.tp-klusser .sec-footer .wz-klusser { display: grid; gap: clamp(28px, 4vw, 52px); padding-block: clamp(52px, 6vw, 88px) 26px; }
.wz-klusser .wz-cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 0.9375rem; }
.wz-klusser .wz-brand { display: grid; gap: 14px; justify-items: start; }
.wz-klusser .wz-brand p { margin: 0; max-width: 22em; opacity: 0.8; }
.gen2 .sec-footer .wz-klusser .wa-btn { background: var(--on-dark); color: var(--dark); }
.gen2.tp-groenlijn .sec-footer .wz-groenlijn { display: grid; gap: clamp(28px, 4vw, 52px); padding-block: clamp(48px, 6vw, 80px) 24px; }
.wz-groenlijn .wz-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.wz-groenlijn .wz-invite h3 { margin: 0; max-width: 20em; font-size: clamp(1.4rem, 2.6vw, 2.2rem); text-transform: none; letter-spacing: -0.01em; opacity: 1; font-family: var(--font-heading); }
.gen2 .sec-footer .wz-groenlijn .wa-btn { background: var(--accent); color: var(--on-accent); }
.wz-groenlijn .wz-cols { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 0.9375rem; }
.gen2.tp-schoonwerk .sec-footer .wz-schoonwerk { display: grid; gap: clamp(28px, 4vw, 52px); padding-block: clamp(52px, 6vw, 88px) 26px; }
.wz-schoonwerk .wz-cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 0.9375rem; }
.wz-schoonwerk .wz-brand p { margin: 14px 0 0; max-width: 22em; opacity: 0.85; }
.wz-schoonwerk .wz-bottom a { text-decoration: underline; text-underline-offset: 4px; }
.gen2.tp-zwartwerk .sec-footer .wz-zwartwerk { display: grid; gap: clamp(24px, 3.4vw, 44px); padding-block: clamp(48px, 6vw, 88px) 24px; }
.wz-zwartwerk .wz-big { margin: 0; font-family: var(--font-heading); font-weight: 300; line-height: 0.92; letter-spacing: -0.03em; font-size: var(--fit, clamp(3rem, 12vw, 11rem)); white-space: nowrap; }
.wz-zwartwerk .wz-name-small { margin: 0; font-family: var(--font-heading); font-weight: 300; font-size: var(--fit, clamp(1.6rem, 3vw, 2.4rem)); line-height: 1; }
.wz-zwartwerk .wz-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 0.875rem; }
.gen2.tp-leidingwerk .sec-footer .wz-leidingwerk { display: grid; gap: clamp(28px, 4vw, 52px); padding-block: clamp(52px, 6vw, 88px) 26px; }
.wz-leidingwerk .wz-cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 0.9375rem; }
.wz-leidingwerk .wz-brand p { margin: 14px 0 0; max-width: 22em; opacity: 0.8; }
.gen2.tp-stadsbouw .sec-footer .wz-stadsbouw { display: grid; gap: clamp(24px, 3vw, 40px); padding-block: clamp(40px, 5vw, 72px) 20px; }
.wz-stadsbouw .wz-pills .nav { display: flex; flex-wrap: wrap; gap: 10px; }
.wz-stadsbouw .wz-pills .nav a { padding: 12px 26px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); font-size: 1rem; }
.wz-stadsbouw .wz-lines { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; font-size: 0.9375rem; padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.wz-stadsbouw .wz-big { margin: 0; font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.05em; line-height: 0.85; text-align: center; font-size: var(--fit, clamp(3rem, 16vw, 14rem)); white-space: nowrap; color: var(--primary); }

/* Een zeer lange naam in het logo (menu of voet) blijft binnen het scherm: past hij niet op één regel, dan breekt hij op een spatie (nooit afgekapt of buiten beeld) */
.gen2[class*='tp-'] .sec-header .hdr-logo, .gen2[class*='tp-'] .sec-footer .hdr-logo { min-width: 0; max-width: 100%; }
@media (max-width: 820px) {
  .gen2[class*='tp-'] .sec-header .hdr-logo { max-width: calc(100vw - 132px); }
  .gen2[class*='tp-'] :is(.sec-header, .sec-footer) .wm-text { white-space: normal; line-height: 1.1; overflow-wrap: break-word; }
  .gen2[class*='tp-'] .sec-footer .wz-brand { min-width: 0; max-width: 100%; }
}
@media (max-width: 820px) {
  .wz-vakman .wz-cols > .wz-brand, .wz-houtwerk .wz-cols > .wz-brand, .wz-klusser .wz-cols > .wz-brand, .wz-groenlijn .wz-cols > .wz-brand, .wz-schoonwerk .wz-cols > .wz-brand, .wz-leidingwerk .wz-cols > .wz-brand { grid-column: 1 / -1; }
  .wz-werkplaats .wz-cols, .wz-haard .wz-cols, .wz-zwartwerk .wz-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-klusser .wz-cols, .wz-groenlijn .wz-cols, .wz-schoonwerk .wz-cols, .wz-leidingwerk .wz-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wz-haard .wz-top, .wz-stadsbouw .wz-lines { grid-template-columns: minmax(0, 1fr); }
}

/* Aanwijsbewegingen van de complete restauranttemplates (zoals de muisinteracties in de Webflow-voorbeelden): foto's in kaarten en lijsten zoomen rustig in en
   knoppen tillen op. Alleen met een muis; de eigenschappen `scale` en `translate` staan los van de transformaties van GSAP. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gen2[class*='tp-'] :is(li, article, figure) .wa-photo img { transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .gen2[class*='tp-'] :is(li, article, figure):hover .wa-photo img { scale: 1.06; }
  .gen2[class*='tp-'] .wa-btn { transition: translate 0.25s ease, background-color 0.2s, color 0.2s, box-shadow 0.2s; }
  .gen2[class*='tp-'] .wa-btn:hover { translate: 0 -2px; }
  .gen2[class*='tp-'] .sec-footer :is(.nav, .wz-list) a { display: inline-block; transition: translate 0.25s ease, opacity 0.2s; }
  .gen2[class*='tp-'] .sec-footer :is(.nav, .wz-list) a:hover { translate: 4px 0; }
}

.media-note{display:none!important}