/*
 * BuildPrint Design – huisstijl voor WordPress (Blocksy + blokeditor).
 * Gebaseerd op het Claude Design-ontwerp (Homepage/index.html).
 * Alle kleuren staan als tokens op :root. Dark mode hangt aan <html data-theme="dark">: dat zet een klein
 * script in <head> (eigen keuze via de schakelaar in de header, anders de instelling van het apparaat).
 */

/* ── Lettertypes (lokaal gehost, geen Google) ─────────────────────── */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2")}

/* ── Tokens ───────────────────────────────────────────────────────── */
:root{
  --bp-bg:#eef0f3;--bp-ink:#0f1419;--bp-ink-muted:#4a5360;--bp-ink-subtle:#5f6874;
  --bp-filament:#c2410c;--bp-filament-hover:#a8380a;--bp-on-filament:#fff;--bp-filament-text:#b23c0b;--bp-filament-deep:#7c2d12;--bp-filament-light:#fb923c;--bp-filament-tint:#ffe6d5;--bp-filament-glow:rgba(194,65,12,.30);
  --bp-teal:#0e7c86;--bp-focus:var(--bp-teal);
  --bp-glass-fill:rgba(255,255,255,.52);--bp-glass-fill-strong:rgba(255,255,255,.74);--bp-glass-fill-float:rgba(255,255,255,.82);--bp-glass-stroke:rgba(255,255,255,.70);--bp-glass-rim:rgba(255,255,255,.95);--bp-glass-sheen:rgba(255,255,255,.45);
  --bp-hairline:rgba(15,20,25,.10);
  --bp-surface:#fff; /* dichte achtergrond, bijv. voor de keuzelijst van een <select> */
  --bp-blob-filament:rgba(255,138,76,.50);--bp-blob-teal:rgba(60,198,207,.38);--bp-blob-sun:rgba(242,194,48,.28);
  --bp-glass-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 2px rgba(15,20,25,.06),0 12px 32px rgba(15,20,25,.08);
  --bp-float-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(15,20,25,.06),0 24px 48px rgba(15,20,25,.14);
  --bp-radius-sm:10px;--bp-radius-md:16px;--bp-radius-lg:24px;--bp-radius-xl:32px;--bp-radius-pill:999px;
  --bp-blur:24px;--bp-saturate:180%;
  --bp-maxw:1200px;--bp-gutter:24px;--bp-section-gap:120px;
  --bp-font-display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bp-font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bp-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;

  /* Blocksy-variabelen laten meekleuren met de huisstijl */
  --theme-palette-color-1:var(--bp-filament);
  --theme-palette-color-2:var(--bp-filament-hover);
  --theme-palette-color-3:var(--bp-ink-muted);
  --theme-palette-color-4:var(--bp-ink);
  --theme-palette-color-5:var(--bp-hairline);
  --theme-text-color:var(--bp-ink-muted);
  --theme-link-initial-color:var(--bp-filament-text);
  --theme-link-hover-color:var(--bp-filament-hover);
  --theme-headings-color:var(--bp-ink);
  --theme-heading-color:var(--bp-ink);
  --theme-font-family:var(--bp-font-sans);
  --theme-button-background-initial-color:var(--bp-filament);
  --theme-button-background-hover-color:var(--bp-filament-hover);
  --theme-button-text-initial-color:var(--bp-on-filament);
  --theme-button-text-hover-color:var(--bp-on-filament);
  --theme-button-border-radius:var(--bp-radius-pill);
}
:root[data-theme=dark]{
  --bp-bg:#0b0d11;--bp-ink:#f2f4f7;--bp-ink-muted:#a3acb9;--bp-ink-subtle:#8a94a1;
  --bp-filament:#ff7a33;--bp-filament-hover:#ff9a5c;--bp-on-filament:#0b0d11;--bp-filament-text:#ff8f52;--bp-filament-deep:#c2410c;--bp-filament-light:#ffb07a;--bp-filament-tint:#4a2410;--bp-filament-glow:rgba(255,122,51,.30);
  --bp-teal:#3cc6cf;
  --bp-glass-fill:rgba(255,255,255,.06);--bp-glass-fill-strong:rgba(255,255,255,.11);--bp-glass-fill-float:rgba(24,28,36,.78);--bp-glass-stroke:rgba(255,255,255,.13);--bp-glass-rim:rgba(255,255,255,.34);--bp-glass-sheen:rgba(255,255,255,.06);
  --bp-hairline:rgba(255,255,255,.10);
  --bp-surface:#161a21;
  --bp-blob-filament:rgba(255,106,31,.26);--bp-blob-teal:rgba(15,163,173,.26);--bp-blob-sun:rgba(242,194,48,.12);
  --bp-glass-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.40),0 16px 40px rgba(0,0,0,.35);
  --bp-float-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 6px rgba(0,0,0,.45),0 24px 56px rgba(0,0,0,.50);
  color-scheme:dark;
}
:root[data-theme=dark] .bp-site .bp-logo-light,:root:not([data-theme=dark]) .bp-site .bp-logo-dark{display:none}
@media (max-width:900px){:root{--bp-section-gap:96px;--bp-blur:16px}}
@media (max-width:600px){:root{--bp-gutter:16px;--bp-section-gap:80px}}

/* ── Basis ───────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;scroll-padding-top:110px}
body.bp-site{background:var(--bp-bg)!important;color:var(--bp-ink-muted);font-family:var(--bp-font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Zachte kleurvlekken achter de pagina, waar het glas iets te breken heeft */
body.bp-site::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(620px circle at 92% 6%,var(--bp-blob-filament),transparent 70%),
    radial-gradient(560px circle at 0% 42%,var(--bp-blob-teal),transparent 70%),
    radial-gradient(520px circle at 96% 88%,var(--bp-blob-sun),transparent 70%),
    radial-gradient(520px circle at 18% 104%,var(--bp-blob-filament),transparent 70%)}
.bp-site #main-container,.bp-site .site-main,.bp-site main#main{background:transparent}
.bp-site :where(h1,h2,h3,h4){color:var(--bp-ink);font-family:var(--bp-font-display);letter-spacing:-.02em}
.bp-site :focus-visible{outline:2px solid var(--bp-focus);outline-offset:3px}
.bp-site .entry-content a:where(:not(.wp-element-button)){color:var(--bp-filament-text)}
.editor-styles-wrapper{background:var(--bp-bg)!important;font-family:var(--bp-font-sans);color:var(--bp-ink-muted)}
.editor-styles-wrapper :where(h1,h2,h3,h4){color:var(--bp-ink);font-family:var(--bp-font-display)}

/* ── Sectie: volle breedte, inhoud gecentreerd op max 1200px ─────── */
.bp-section{box-sizing:border-box;width:100%;padding-inline:max(var(--bp-gutter),calc((100% - var(--bp-maxw))/2 + var(--bp-gutter)))!important;padding-block:var(--bp-section-gap) 0;margin-block:0!important}
.bp-section.bp-hero{padding-top:56px}
.bp-hero+.bp-section{padding-top:72px}
.bp-section:last-child{padding-bottom:calc(var(--bp-section-gap) * .6)}
.bp-section *,.bp-footer *{box-sizing:border-box}
/* Rasters van de blokeditor geen extra marges laten geven */
:where(.bp-grid-4,.bp-grid-3,.bp-cases,.bp-usp,.bp-hero,.bp-faq,.bp-cta,.bp-cta-actions,.bp-steps)>*{margin-block:0!important}

/* ── Glas ─────────────────────────────────────────────────────────── */
.bp-glass{position:relative;isolation:isolate;background-color:var(--bp-glass-fill);background-image:linear-gradient(180deg,var(--bp-glass-sheen) 0%,transparent 42%);-webkit-backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate));backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate));border:1px solid var(--bp-glass-stroke);border-radius:var(--bp-radius-lg);box-shadow:var(--bp-glass-shadow)}
.bp-glass--strong{background-color:var(--bp-glass-fill-strong)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bp-glass{background-color:var(--bp-glass-fill-float)}}

/* ── Typografie ──────────────────────────────────────────────────── */
.bp-site .bp-h1,.editor-styles-wrapper .bp-h1{font:600 clamp(42px,6.2vw,72px)/1.03 var(--bp-font-display);letter-spacing:-.035em;color:var(--bp-ink);margin:22px 0 22px}
.bp-site .bp-h2,.editor-styles-wrapper .bp-h2{font:600 clamp(34px,4.2vw,48px)/1.08 var(--bp-font-display);letter-spacing:-.03em;color:var(--bp-ink);margin:0}
.bp-site .bp-h3,.editor-styles-wrapper .bp-h3,.bp-card h3,.bp-step h3,.bp-case h3{font:600 20px/28px var(--bp-font-sans);letter-spacing:-.01em;color:var(--bp-ink);margin:0 0 10px}
.bp-accent,.bp-h1 mark,.bp-h2 mark{color:var(--bp-filament-text)!important;background:none!important}
/* Het oranje deel van de grote kop altijd op een eigen regel, zodat hij niet midden in de zin afbreekt */
.bp-h1 mark{display:block}
.bp-lead{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--bp-ink-muted);max-width:36em}
.bp-section-head .bp-lead{margin-top:18px}
.bp-text,.bp-card p,.bp-step p,.bp-case p{font-size:15px;line-height:24px;color:var(--bp-ink-muted);margin:0}
.bp-kicker{display:block;font:500 12px/16px var(--bp-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bp-filament-text);margin:0 0 16px!important}
.bp-eyebrow{display:inline-flex!important;align-items:center;gap:10px;margin:0!important;padding:8px 16px 8px 12px;border-radius:var(--bp-radius-pill);font-size:14px;font-weight:500;color:var(--bp-ink-muted);background:var(--bp-glass-fill);border:1px solid var(--bp-glass-stroke);box-shadow:var(--bp-glass-shadow);-webkit-backdrop-filter:blur(var(--bp-blur));backdrop-filter:blur(var(--bp-blur))}
.bp-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bp-teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--bp-teal) 20%,transparent)}

/* ── Knoppen (knop-blok met extra CSS-klasse) ────────────────────── */
.bp-site .wp-block-buttons.bp-actions{gap:12px;margin:34px 0 30px}
.wp-block-button:where(.bp-btn-primary,.bp-btn-glass,.bp-btn-whatsapp) .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--bp-radius-pill);font:600 15px/1.2 var(--bp-font-sans);letter-spacing:-.005em;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.wp-block-button:where(.bp-btn-primary,.bp-btn-glass,.bp-btn-whatsapp) .wp-block-button__link:hover{transform:translateY(-1px)}
.wp-block-button:where(.bp-btn-primary,.bp-btn-glass,.bp-btn-whatsapp) .wp-block-button__link:active{transform:scale(.98)}
.bp-btn-primary .wp-block-button__link{background:var(--bp-filament)!important;color:var(--bp-on-filament)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px var(--bp-filament-glow)}
.bp-btn-primary .wp-block-button__link:hover{background:var(--bp-filament-hover)!important}
.bp-btn-glass .wp-block-button__link,.bp-btn-whatsapp .wp-block-button__link{color:var(--bp-ink)!important;background:var(--bp-glass-fill-strong)!important;border-color:var(--bp-glass-stroke)!important;box-shadow:var(--bp-glass-shadow);-webkit-backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate));backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate))}
.bp-btn-primary .wp-block-button__link::before,.bp-btn-glass .wp-block-button__link::after,.bp-btn-whatsapp .wp-block-button__link::before{content:"";display:inline-block!important;position:static!important;opacity:1!important;z-index:auto!important;transform:none!important;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--bp-i) center/contain no-repeat;mask:var(--bp-i) center/contain no-repeat}
.bp-btn-primary .wp-block-button__link::before{--bp-i:var(--bp-i-form)}
.bp-btn-glass .wp-block-button__link::after{--bp-i:var(--bp-i-arrow)}
.bp-btn-whatsapp .wp-block-button__link::before{--bp-i:var(--bp-i-chat)}
.bp-btn-block,.bp-btn-block .wp-block-button__link{width:100%}

/* ── Lijsten met vinkjes en labels ──────────────────────────────── */
.bp-site ul:where(.bp-checks,.bp-list,.bp-tags),.editor-styles-wrapper ul:where(.bp-checks,.bp-list,.bp-tags){list-style:none;padding:0;margin:0}
.bp-checks{display:flex;flex-wrap:wrap;gap:12px 24px}
.bp-checks li{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--bp-ink-muted);margin:0}
.bp-list{display:grid;gap:8px;margin-top:20px!important}
.bp-list li{display:flex;gap:10px;font-size:14px;line-height:22px;color:var(--bp-ink-muted);margin:0}
.bp-checks li::before,.bp-list li::before{content:"";flex:none;width:18px;height:18px;background:var(--bp-teal);-webkit-mask:var(--bp-i-check) center/contain no-repeat;mask:var(--bp-i-check) center/contain no-repeat}
.bp-list li::before{width:16px;height:16px;margin-top:3px}
.bp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px!important}
.bp-tags li{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--bp-radius-pill);font-size:13px;font-weight:500;color:var(--bp-ink-muted);background:var(--bp-glass-fill);border:1px solid var(--bp-hairline);margin:0}

/* ── Iconentegels: klasse bp-ico-* op een kaart of USP-item ──────── */
/* ::before = de tegel, ::after = het icoon (masker) erbovenop */
[class*="bp-ico-"]{position:relative;--bp-i:var(--bp-i-cube)}
[class*="bp-ico-"]::before{content:"";display:block;flex:none;width:48px;height:48px;margin-bottom:22px;border-radius:var(--bp-radius-md);background:var(--bp-glass-fill-strong);border:1px solid var(--bp-glass-stroke);box-shadow:var(--bp-glass-shadow)}
[class*="bp-ico-"]::after{content:"";position:absolute;top:calc(var(--bp-card-pad,28px) + 13px);left:calc(var(--bp-card-pad,28px) + 13px);z-index:1;width:22px;height:22px;background:var(--bp-filament-text);-webkit-mask:var(--bp-i) center/contain no-repeat;mask:var(--bp-i) center/contain no-repeat;pointer-events:none}
.bp-ico-print{--bp-i:var(--bp-i-cube)}.bp-ico-teken{--bp-i:var(--bp-i-pen)}.bp-ico-onderdeel{--bp-i:var(--bp-i-wrench)}.bp-ico-model{--bp-i:var(--bp-i-layers)}
.bp-ico-prijs{--bp-i:var(--bp-i-tag)}.bp-ico-kalender{--bp-i:var(--bp-i-calendar)}.bp-ico-pakket{--bp-i:var(--bp-i-box)}.bp-ico-zakelijk{--bp-i:var(--bp-i-briefcase)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.bp-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.bp-hero-visual{border-radius:var(--bp-radius-xl);padding:20px;aspect-ratio:1/1.02}
.bp-hero-visual svg{display:block;width:100%;height:100%}
/* Hero met foto: echte foto in een glazen kader met zwevende labels */
.bp-hero-photo{position:relative;padding:12px;aspect-ratio:auto}
.bp-hero-photo>*{margin:0!important}
.bp-hero-photo .wp-block-image{aspect-ratio:1/1.08;border-radius:22px;overflow:hidden;background:#111}
.bp-hero-photo .wp-block-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 72%;transition:transform 1.2s ease}
.bp-hero-photo:hover .wp-block-image img{transform:scale(1.025)}
.bp-hero-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--bp-radius-pill);font-size:13px;font-weight:600;color:var(--bp-ink);background:var(--bp-glass-fill-float);border:1px solid var(--bp-glass-stroke);box-shadow:var(--bp-float-shadow);-webkit-backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate));backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate));animation:bp-float 6s ease-in-out infinite}
.bp-hero-chip--top{top:28px;left:-18px}
.bp-hero-chip--top::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bp-teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--bp-teal) 20%,transparent)}
.bp-hero-chip--bottom{bottom:32px;right:-18px;font-family:var(--bp-font-mono);font-weight:500;letter-spacing:.04em;animation-delay:-3s}
@keyframes bp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:600px){.bp-hero-chip--top{left:12px;top:24px}.bp-hero-chip--bottom{right:12px;bottom:24px}}
.bp-layer-ghost{fill:none;stroke:var(--bp-ink-subtle);stroke-opacity:.35;stroke-dasharray:3 5}
.bp-nozzle{animation:bp-nozzle 5s ease-in-out infinite;transform-box:view-box}
.bp-layer-new{animation:bp-layer 5s ease-in-out infinite}
@keyframes bp-nozzle{0%,100%{transform:translateX(0)}50%{transform:translateX(-56px)}}
@keyframes bp-layer{0%,100%{opacity:.35}50%{opacity:1}}

/* ── USP-balk ─────────────────────────────────────────────────────── */
.bp-usp{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--bp-radius-xl);padding:8px}
.bp-usp-item{display:grid;grid-template-columns:42px 1fr;column-gap:14px;align-content:start;padding:22px}
.bp-usp-item+.bp-usp-item{border-left:1px solid var(--bp-hairline)}
.bp-usp-item::before{grid-row:span 2;width:42px;height:42px;margin:0;border-radius:14px;background:var(--bp-filament-tint);border:0;box-shadow:none}
.bp-usp-item::after{top:33px;left:33px;width:20px;height:20px}
.bp-usp-item p{margin:0!important}
.bp-usp-title{font-size:15px;line-height:22px;font-weight:600;color:var(--bp-ink)}
.bp-usp-text{font-size:14px;line-height:21px;color:var(--bp-ink-muted)}

/* ── Sectiekop ───────────────────────────────────────────────────── */
.bp-section-head{max-width:640px;margin-bottom:48px!important}
.bp-section-head--row{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.bp-section-head--row>*{margin:0!important}
.bp-section-head--row>.wp-block-group{max-width:640px}

/* ── Rasters en kaarten ─────────────────────────────────────────── */
.bp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bp-card{--bp-card-pad:28px;padding:var(--bp-card-pad);transition:transform .25s ease,box-shadow .25s ease}
.bp-card:hover{transform:translateY(-4px);box-shadow:var(--bp-float-shadow)}
.bp-card--featured{border-color:color-mix(in srgb,var(--bp-filament) 45%,transparent);background-color:var(--bp-glass-fill-strong)}

/* ── Cases ───────────────────────────────────────────────────────── */
.bp-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bp-case{position:relative;display:flex;flex-direction:column;padding:12px;border-radius:var(--bp-radius-xl);transition:transform .25s ease,box-shadow .25s ease}
.bp-case:hover{transform:translateY(-4px);box-shadow:var(--bp-float-shadow)}
.bp-case .wp-block-image{margin:0;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--bp-hairline)}
.bp-case .wp-block-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bp-case:hover .wp-block-image img{transform:scale(1.03)}
.bp-case-chip{position:absolute;top:24px;left:24px;z-index:2;margin:0!important;padding:7px 14px;border-radius:var(--bp-radius-pill);font-size:13px;font-weight:600;color:var(--bp-ink);background:var(--bp-glass-fill-float);border:1px solid var(--bp-glass-stroke);box-shadow:var(--bp-float-shadow);-webkit-backdrop-filter:blur(var(--bp-blur));backdrop-filter:blur(var(--bp-blur))}
.bp-case-body{padding:20px 14px 14px}

/* ── Werkwijze ───────────────────────────────────────────────────── */
.bp-step{padding:28px}
.bp-step-num{display:inline-grid!important;place-items:center;height:30px;padding:0 12px;border-radius:var(--bp-radius-pill);background:var(--bp-filament-tint);font:600 13px/1 var(--bp-font-mono)!important;color:var(--bp-filament-deep)!important;margin:0 0 22px!important}
:root[data-theme=dark] .bp-step-num{color:var(--bp-filament-text)!important}

/* ── Materialen ──────────────────────────────────────────────────── */
.bp-material{display:flex;flex-direction:column;padding:32px 28px 28px}
.bp-material>*{margin-block:0!important}
.bp-material-name{font:600 28px/34px var(--bp-font-display)!important;letter-spacing:-.02em;color:var(--bp-ink)!important;margin-bottom:6px!important}
.bp-material-sub{font:500 13px/18px var(--bp-font-mono)!important;color:var(--bp-ink-subtle)!important;margin-bottom:16px!important}
.bp-material .bp-tags{margin-bottom:22px!important}
.bp-material>p:not(.bp-material-name,.bp-material-sub){margin-bottom:16px!important}
.bp-material>*:last-child{margin-bottom:0!important}
.bp-note{margin-top:24px!important;font-size:15px;color:var(--bp-ink-muted)}
.bp-note a{font-weight:600}

/* ── FAQ (Details-blok) ──────────────────────────────────────────── */
.bp-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.bp-faq>.bp-section-head{position:sticky;top:120px;margin-bottom:0!important}
.bp-faq-list{display:grid;gap:12px}
.bp-faq-list>*{margin:0!important}
.wp-block-details.bp-faq-item{border-radius:var(--bp-radius-md);padding:0}
.bp-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;cursor:pointer;list-style:none;font-size:17px;font-weight:600;color:var(--bp-ink);border-radius:inherit}
.bp-site .bp-faq-item summary{margin:0!important}
.bp-faq-item summary::-webkit-details-marker{display:none}
.bp-faq-item summary::marker{content:""}
.bp-faq-item summary::after{content:"";flex:none;width:20px;height:20px;background:var(--bp-ink-subtle);-webkit-mask:var(--bp-i-plus) center/contain no-repeat;mask:var(--bp-i-plus) center/contain no-repeat;transition:transform .25s ease}
.bp-faq-item[open] summary::after{transform:rotate(45deg)}
.bp-faq-item>p{padding:0 22px 22px;margin:0!important;font-size:15px;line-height:25px;color:var(--bp-ink-muted)}

/* ── CTA ─────────────────────────────────────────────────────────── */
.bp-cta{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;padding:56px;border-radius:var(--bp-radius-xl)}
.bp-cta-actions{display:grid;gap:12px}
.bp-cta-actions .wp-block-buttons{display:grid;gap:12px}
.bp-cta-actions .wp-block-button,.bp-cta-actions .wp-block-button__link{width:100%}
.bp-cta-meta{text-align:center;font-size:14px;color:var(--bp-ink-muted);margin:6px 0 0!important}
.bp-cta-meta a{font-weight:600;color:var(--bp-ink)!important}

/* ── Footer (patroon voor de Blocksy-footer of onderaan een pagina) ─ */
.bp-footer{margin-top:var(--bp-section-gap);border-top:1px solid var(--bp-hairline);padding-block:56px 40px!important}
.bp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.bp-footer-grid>*{margin:0!important}
.bp-footer h4,.bp-footer .bp-footer-title{margin:0 0 14px!important;font:500 12px/16px var(--bp-font-mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--bp-ink-subtle)!important}
.bp-footer ul{list-style:none;padding:0;margin:0}
.bp-footer li,.bp-footer p{font-size:14px;line-height:28px;color:var(--bp-ink-muted);margin:0}
.bp-footer a{color:inherit!important;text-decoration:none}
.bp-footer a:hover{color:var(--bp-ink)!important}
.bp-footer .bp-footer-about{line-height:22px;max-width:28em;margin-top:14px!important}
.bp-footer-logo img{height:34px;width:auto}
.bp-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:48px!important;padding-top:24px;border-top:1px solid var(--bp-hairline);font-size:13px;color:var(--bp-ink-subtle)}
.bp-footer-bottom>*{margin:0!important;font-size:13px!important}

/* De BuildPrint-footer vervangt de standaard Blocksy-footer */
.bp-has-footer .ct-footer{display:none}
.bp-site-footer{position:relative}
.bp-site-footer .bp-footer{margin-top:0}

/* ── Blocksy-header als zwevende glazen balk ─────────────────────── */
.bp-site #header{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:50;background:transparent!important;padding:16px var(--bp-gutter) 0}
.bp-site #header [data-row]{background:transparent!important;border:0!important;box-shadow:none!important}
/* Staat in Blocksy "transparante header" of "sticky header" aan, dan zou de balk over de pagina zweven of een vaste
   hoogte krijgen. De plugin regelt het meeschuiven zelf (#header is sticky), dus Blocksy's versie hier uitschakelen. */
.bp-site #header [data-device],.bp-site #header [data-sticky]{position:relative!important;inset:auto!important;transform:none!important}
.bp-site #header .ct-sticky-container{height:auto!important}
.bp-site #header .site-logo-container{height:auto!important}
.bp-site #header [data-row="middle"]>.ct-container,.bp-site #header [data-row="middle"]>div{max-width:1152px;margin-inline:auto;padding-inline:24px 12px;border-radius:var(--bp-radius-pill);background:var(--bp-glass-fill-strong);border:1px solid var(--bp-glass-stroke);box-shadow:var(--bp-glass-shadow);-webkit-backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate));backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate))}
.bp-site #header [data-row="middle"]>.ct-container{min-height:66px;align-items:center}
.bp-site #header .site-logo-container img{max-height:30px;width:auto}
.bp-site #header .site-title{font:700 21px/1 var(--bp-font-display);letter-spacing:-.03em}
.bp-site #header .site-title a{color:var(--bp-ink)}
/* Logo: de sitenaam wordt het BuildPrint-logo (wisselt mee met licht/donker). De tekst blijft voor schermlezers en
   zoekmachines. Upload je in de Customizer zelf een logo, dan wint dat en doet deze regel niets. */
.bp-site #header .site-branding:not(:has(.site-logo-container)) .site-title a{display:block;width:129px;height:30px;overflow:hidden;white-space:nowrap;text-indent:110%;background:url("../img/logo-donker.svg") left center/contain no-repeat}
:root[data-theme=dark] .bp-site #header .site-branding:not(:has(.site-logo-container)) .site-title a{background-image:url("../img/logo-wit.svg")}
@media (max-width:600px){.bp-site #header .site-branding:not(:has(.site-logo-container)) .site-title a{width:112px;height:26px}}
/* Schakelaar licht/donker (wordt door thema.js in de header gezet) */
.bp-site .bp-thema-knop{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;min-height:0;margin:0 6px;padding:0;border:1px solid var(--bp-glass-stroke);border-radius:50%;background:var(--bp-glass-fill);color:var(--bp-ink);box-shadow:none;cursor:pointer;transition:background-color .2s,border-color .2s}
.bp-site .bp-thema-knop:hover{background:var(--bp-glass-fill-strong);border-color:color-mix(in srgb,var(--bp-filament) 45%,transparent)}
.bp-site .bp-thema-knop:focus-visible{outline:2px solid var(--bp-focus);outline-offset:2px}
.bp-thema-icoon{width:18px;height:18px;background:currentColor;-webkit-mask:var(--bp-i-maan) center/contain no-repeat;mask:var(--bp-i-maan) center/contain no-repeat}
:root[data-theme=dark] .bp-thema-icoon{-webkit-mask-image:var(--bp-i-zon);mask-image:var(--bp-i-zon)}
.bp-site .bp-thema-knop--zwevend{position:fixed;left:16px;bottom:16px;z-index:60;margin:0;background:var(--bp-glass-fill-float);box-shadow:var(--bp-float-shadow)}
/* Cookiemelding (cookiemelding.js): zwevende balk onderin, tot de bezoeker op Oké klikt */
.bp-site .bp-cookiemelding{position:fixed;left:50%;bottom:16px;z-index:70;transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:min(640px,calc(100% - 32px));padding:14px 14px 14px 20px;border:1px solid var(--bp-glass-stroke);border-radius:var(--bp-radius-md);background:var(--bp-glass-fill-float);-webkit-backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate));backdrop-filter:blur(var(--bp-blur)) saturate(var(--bp-saturate));box-shadow:var(--bp-float-shadow);color:var(--bp-ink);font:400 14px/1.5 var(--bp-font-sans)}
.bp-site .bp-cookiemelding p{margin:0;flex:1}
.bp-site .bp-cookiemelding a{color:var(--bp-filament-text);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.bp-site .bp-cookiemelding .bp-cookiemelding-knop{flex:none;min-height:44px;margin:0;padding:0 22px;border:0;border-radius:var(--bp-radius-pill);background:var(--bp-filament);color:var(--bp-on-filament);font:600 15px/1 var(--bp-font-sans);cursor:pointer;transition:background-color .2s}
.bp-site .bp-cookiemelding .bp-cookiemelding-knop:hover{background:var(--bp-filament-hover)}
.bp-site .bp-cookiemelding .bp-cookiemelding-knop:focus-visible{outline:2px solid var(--bp-focus);outline-offset:2px}
@media (max-width:600px){.bp-site .bp-cookiemelding{flex-direction:column;align-items:stretch;gap:12px;padding:16px}}
.bp-site #header .menu{gap:2px}
.bp-site #header .ct-menu-link{padding:9px 14px!important;height:auto!important}
.bp-site #header .ct-menu-link,.bp-site #offcanvas .ct-menu-link{text-transform:none!important;letter-spacing:0!important}
.bp-site #header .current-menu-item:not(.bp-menu-cta)>.ct-menu-link:not(:hover){background:transparent}
/* Menu-item met CSS-klasse "bp-menu-cta" wordt de oranje knop "Offerte aanvragen" */
.bp-site #header .bp-menu-cta{margin-left:8px}
.bp-site #header .bp-menu-cta>.ct-menu-link,.bp-site #offcanvas .bp-menu-cta>.ct-menu-link{display:inline-flex;align-items:center;min-height:42px;padding:0 18px!important;border-radius:var(--bp-radius-pill);background:var(--bp-filament)!important;color:var(--bp-on-filament)!important;font-weight:600;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px var(--bp-filament-glow)}
.bp-site #header .bp-menu-cta>.ct-menu-link:hover{background:var(--bp-filament-hover)!important}
.bp-site #offcanvas .bp-menu-cta{margin-top:16px}
.bp-site #header .ct-menu-link{border-radius:var(--bp-radius-pill);font-size:15px;font-weight:500;color:var(--bp-ink-muted);transition:color .2s,background-color .2s}
.bp-site #header .ct-menu-link:hover,.bp-site #header .ct-menu-link:focus-visible{color:var(--bp-ink);background:var(--bp-glass-fill-strong)}
.bp-site #header .ct-button,.bp-site #header .ct-header-cta a{border-radius:var(--bp-radius-pill)!important;background:var(--bp-filament)!important;color:var(--bp-on-filament)!important;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px var(--bp-filament-glow)}
/* Menuknop (mobiel): rond, net als de licht/donker-knop. Blocksy zet vorm en icoonkleur met !important via eigen variabelen, daarom die hier invullen */
.bp-site #header .ct-header-trigger{--theme-icon-color:var(--bp-ink);--theme-icon-hover-color:var(--bp-ink);--theme-icon-size:16px;--toggle-button-size:40px;--toggle-button-radius:50%;--toggle-button-border-width:1px;--toggle-button-border-color:var(--bp-glass-stroke);--toggle-button-background:var(--bp-glass-fill);--toggle-button-margin-end:2px;color:var(--bp-ink)}
.bp-site #header .ct-header-trigger:hover{--toggle-button-background:var(--bp-glass-fill-strong);--toggle-button-border-color:color-mix(in srgb,var(--bp-filament) 45%,transparent)}
.bp-site #header .ct-header-trigger:focus-visible{outline:2px solid var(--bp-focus);outline-offset:2px}
.bp-site #offcanvas .ct-toggle-close{--theme-icon-color:var(--bp-ink);--theme-icon-hover-color:var(--bp-ink)}
/* Mobiel menu (Blocksy off-canvas) */
.bp-site #offcanvas .ct-panel-inner{background:var(--bp-glass-fill-float);-webkit-backdrop-filter:blur(var(--bp-blur));backdrop-filter:blur(var(--bp-blur))}
.bp-site #offcanvas .ct-menu-link{font:600 20px/1.3 var(--bp-font-display);color:var(--bp-ink)}
@media (max-width:600px){.bp-site #header{padding-top:12px}.bp-site #header [data-row="middle"]>.ct-container{min-height:58px;padding-inline:20px 8px}}
/* Pagina's met een BuildPrint-hero hebben de standaard paginatitel niet nodig */
body.bp-site:has(.bp-hero,.bp-page-head) .hero-section{display:none}
.bp-section.bp-page-head{padding-top:56px}
.bp-kv-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px;max-width:760px}
.bp-kv-card:hover{transform:none}
.bp-kv-card>*{margin:0!important}
.bp-kv{font-size:15px;line-height:24px;color:var(--bp-ink-muted)}
.bp-kv strong+br{display:none}
.bp-kv strong{display:block;font:500 12px/16px var(--bp-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bp-ink-subtle);margin-bottom:4px}
@media (max-width:600px){.bp-kv-card{grid-template-columns:1fr}}

/* ── Pagina's Cases, case-details en Over ons ────────────────────── */
/* Klikbare casekaart: de link in de kop ligt over de hele kaart */
.bp-case h3 a{color:inherit!important;text-decoration:none}
.bp-case h3 a::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.bp-case h3 a:focus-visible{outline:none}
.bp-case:has(h3 a:focus-visible){outline:2px solid var(--bp-focus);outline-offset:3px}
.bp-site .bp-case .bp-case-more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--bp-filament-text)}
.bp-case-more::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--bp-i-arrow) center/contain no-repeat;mask:var(--bp-i-arrow) center/contain no-repeat;transition:translate .2s ease}
.bp-case:hover .bp-case-more::after{translate:4px 0}
.bp-cases--2{grid-template-columns:repeat(2,1fr)}
.bp-cases--2 .bp-case .wp-block-image{aspect-ratio:1/1}

/* Paginakop met tekst links en een foto rechts */
.bp-page-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.bp-page-hero>*,.bp-page-hero-text>*{margin-block:0!important}
.bp-page-hero-text .bp-lead{margin-top:18px!important}
.bp-page-hero-text>p:not(.bp-kicker,.bp-lead,.bp-back){max-width:36em;margin-top:16px!important;font-size:16px;line-height:26px;color:var(--bp-ink-muted)}
.bp-page-hero>.bp-photo{justify-self:end;width:100%;max-width:500px}
.bp-site .bp-back{margin-bottom:28px!important;font-size:14px;font-weight:600}
.bp-site .bp-back a{display:inline-flex;align-items:center;gap:8px;color:var(--bp-ink-muted);text-decoration:none}
.bp-site .bp-back a:hover{color:var(--bp-ink)}
.bp-back a::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--bp-i-arrow) center/contain no-repeat;mask:var(--bp-i-arrow) center/contain no-repeat;transform:scaleX(-1)}
.bp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 28px;max-width:560px;margin-top:32px!important;padding-top:24px;border-top:1px solid var(--bp-hairline)}
.bp-facts>*{margin:0!important}

/* Foto in een glazen kader, onderschrift eronder */
.bp-photo{padding:12px;border-radius:var(--bp-radius-xl)}
.bp-photo>*{margin:0!important}
.bp-photo .wp-block-image{border-radius:22px;overflow:hidden;background:var(--bp-hairline)}
.bp-photo .wp-block-image img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
.bp-photo:hover .wp-block-image img{transform:scale(1.025)}
.bp-site .bp-photo-caption{padding:12px 8px 4px;font-size:14px;line-height:22px;color:var(--bp-ink-muted)}

/* Verhaal naast foto's */
.bp-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.bp-split>*{margin:0!important}
.bp-prose{max-width:640px}
.bp-prose>*{margin-block:0!important}
.bp-prose .bp-h2{margin-bottom:24px!important}
.bp-site .bp-prose>p:not(.bp-kicker){margin-bottom:16px!important;font-size:16px;line-height:27px;color:var(--bp-ink-muted)}
.bp-gallery{display:grid;gap:24px}
.bp-gallery>*{margin:0!important}
.bp-gallery--2{grid-template-columns:1fr 1fr}
.bp-gallery:not(.bp-gallery--2){justify-self:end;width:100%;max-width:440px}
.bp-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.bp-ico-slot{--bp-i:var(--bp-i-slot)}.bp-ico-herhaal{--bp-i:var(--bp-i-herhaal)}.bp-ico-huis{--bp-i:var(--bp-i-huis)}
:where(.bp-grid-2,.bp-gallery)>*{margin-block:0!important}

@media (max-width:900px){
  .bp-page-hero,.bp-split{grid-template-columns:1fr;gap:40px}
  .bp-page-hero>.bp-photo,.bp-gallery:not(.bp-gallery--2){justify-self:start;max-width:520px}
  .bp-grid-2,.bp-cases--2{grid-template-columns:1fr}
}
@media (max-width:600px){.bp-gallery--2{grid-template-columns:1fr}}

/* ── Responsief ──────────────────────────────────────────────────── */
@media (max-width:1080px){
  .bp-grid-4{grid-template-columns:repeat(2,1fr)}
  .bp-usp{grid-template-columns:repeat(2,1fr)}
  .bp-usp-item:nth-child(3){border-left:0}
  .bp-usp-item:nth-child(n+3){border-top:1px solid var(--bp-hairline)}
}
@media (max-width:900px){
  .bp-hero{grid-template-columns:1fr;gap:48px}
  .bp-section.bp-hero{padding-top:32px}
  .bp-hero-visual{max-width:520px;width:100%;margin-inline:auto}
  .bp-grid-3,.bp-cases{grid-template-columns:1fr}
  .bp-case .wp-block-image{aspect-ratio:4/3}
  .bp-faq{grid-template-columns:1fr;gap:32px}
  .bp-faq>.bp-section-head{position:static}
  .bp-cta{grid-template-columns:1fr;gap:32px;padding:36px 28px}
  .bp-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .bp-grid-4,.bp-usp{grid-template-columns:1fr}
  .bp-usp-item+.bp-usp-item{border-left:0;border-top:1px solid var(--bp-hairline)}
  .bp-actions .wp-block-button{flex:1 1 100%}
  .bp-actions .wp-block-button__link{width:100%}
  .bp-footer-grid{grid-template-columns:1fr}
  .bp-footer-bottom{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .bp-site *,.bp-site *::before,.bp-site *::after{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ── Iconen (lijn-iconen als CSS-masker) ─────────────────────────── */
:root{
  --bp-i-cube:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 3.5 7v10l8.5 4.5 8.5-4.5V7z'/%3E%3Cpath d='m3.5 7 8.5 4.5L20.5 7M12 11.5v10'/%3E%3C/svg%3E");
  --bp-i-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.7 21.3a1 1 0 0 1-1.4 0l-1.6-1.6a1 1 0 0 1 0-1.4l5.6-5.6a1 1 0 0 1 1.4 0l1.6 1.6a1 1 0 0 1 0 1.4z'/%3E%3Cpath d='m18 13-1.4-6.9a1 1 0 0 0-.7-.8L3.2 2a1 1 0 0 0-1.2 1.2l3.3 12.7a1 1 0 0 0 .8.7L13 18'/%3E%3Cpath d='m2.3 2.3 7.3 7.3'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
  --bp-i-wrench:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
  --bp-i-layers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.5 9.5 4.75L12 12 2.5 7.25z'/%3E%3Cpath d='m2.5 16.75 9.5 4.75 9.5-4.75'/%3E%3Cpath d='m2.5 12 9.5 4.75L21.5 12'/%3E%3C/svg%3E");
  --bp-i-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
  --bp-i-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  --bp-i-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8M7.5 5.5l9 5'/%3E%3C/svg%3E");
  --bp-i-briefcase:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2.5'/%3E%3Cpath d='M8.5 7V5.5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2V7M3 12.5h18'/%3E%3C/svg%3E");
  --bp-i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --bp-i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --bp-i-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.3 7.5L3 21l2-5.7A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E");
  --bp-i-form:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='3'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
  --bp-i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --bp-i-maan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.2A8.5 8.5 0 1 1 9.8 3.5a6.8 6.8 0 0 0 10.7 10.7z'/%3E%3C/svg%3E");
  --bp-i-zon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --bp-i-slot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3M12 14.5v2.5'/%3E%3C/svg%3E");
  --bp-i-herhaal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-14.3 4.9M4 12a8 8 0 0 1 14.3-4.9'/%3E%3Cpath d='M18.6 3v4.2h-4.2M5.4 21v-4.2h4.2'/%3E%3C/svg%3E");
  --bp-i-huis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7'/%3E%3Cpath d='M5.5 9v11.5h13V9M10 20.5v-6h4v6'/%3E%3C/svg%3E");
  --bp-i-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M7 8l5-5 5 5'/%3E%3Cpath d='M4 15v3a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-3'/%3E%3C/svg%3E");
}

/* ── Offerteformulier (Contact Form 7) ──────────────────────────── */
:root{--bp-error:#c81e1e}
:root[data-theme=dark]{--bp-error:#ff7b7b}
.bp-offerte-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.bp-offerte-grid>*{margin:0!important}
.bp-offerte-aside{padding:28px;position:sticky;top:120px}
.bp-offerte-aside>*{margin-block:0 14px!important}
.bp-offerte-aside>*:last-child{margin-bottom:0!important}
.bp-offerte-aside .bp-list{margin-top:0!important}
.bp-aside-text{font-size:15px;line-height:24px;color:var(--bp-ink-muted)}
.bp-aside-meta{font-size:14px;color:var(--bp-ink-subtle);text-align:center}
.bp-offerte-aside .wp-block-buttons,.bp-offerte-aside .wp-block-button,.bp-offerte-aside .wp-block-button__link{width:100%}

.bp-form{display:grid;gap:20px}
.bp-form>p:empty{display:none}
.bp-form br{display:none}
.bp-form fieldset.bp-form-step{margin:0;padding:28px;min-width:0;border:1px solid var(--bp-glass-stroke)}
.bp-form legend{float:left;width:100%;display:flex;align-items:center;gap:12px;padding:0;margin:0 0 22px;font:600 20px/28px var(--bp-font-sans);letter-spacing:-.01em;color:var(--bp-ink)}
.bp-form legend+*{clear:both}
.bp-form legend .bp-step-num{margin:0!important}
.bp-field{display:grid;align-content:start;gap:8px;margin:0 0 20px}
.bp-form-step>.bp-field:last-child,.bp-form-step>.bp-row:last-child .bp-field,.bp-form-step>.bp-zakelijk>.bp-field:last-child{margin-bottom:0}
.bp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.bp-field--small{max-width:180px}
.bp-label{font-size:14px;font-weight:600;color:var(--bp-ink)}
.bp-label abbr{text-decoration:none;color:var(--bp-filament-text)}
.bp-hint{font-size:13px;line-height:20px;color:var(--bp-ink-subtle);margin-top:-4px}
.bp-form .wpcf7-form-control-wrap{display:block}

.bp-site .bp-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],select,textarea){
  box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:12px 14px;border-radius:12px;border:1px solid var(--bp-hairline);
  background:var(--bp-glass-fill-strong);color:var(--bp-ink);font:400 15px/1.5 var(--bp-font-sans);box-shadow:none;transition:border-color .2s,box-shadow .2s}
.bp-site .bp-form textarea{min-height:120px;resize:vertical}
/* De uitklaplijst van een <select> neemt anders de doorzichtige veldkleur over: wit op wit in dark mode */
.bp-site .bp-form select :is(option,optgroup){background-color:var(--bp-surface);color:var(--bp-ink)}
/* Pijltje terug in de keuzelijst (Blocksy zet appearance:none; ons achtergrondveld wiste zijn pijltje). Klasse erbij zodat dit wint van de veldregel. */
.bp-site .bp-form select.wpcf7-form-control{padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;cursor:pointer}
:root[data-theme=dark] .bp-site .bp-form select.wpcf7-form-control{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3acb9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.bp-site .bp-form :is(input,select,textarea)::placeholder{color:var(--bp-ink-subtle);opacity:1}
.bp-site .bp-form :is(input,select,textarea):focus{outline:none;border-color:var(--bp-teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--bp-teal) 25%,transparent)}

/* Keuzes als knoppen */
.bp-form :is(.wpcf7-radio,.wpcf7-checkbox){display:flex;flex-wrap:wrap;gap:8px}
.bp-form .wpcf7-list-item{margin:0}
.bp-form .wpcf7-list-item label{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 14px;border-radius:var(--bp-radius-pill);border:1px solid var(--bp-hairline);background:var(--bp-glass-fill);color:var(--bp-ink-muted);font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.bp-form .wpcf7-list-item label:hover{border-color:color-mix(in srgb,var(--bp-filament) 40%,transparent)}
.bp-form .wpcf7-list-item label:has(input:checked){border-color:var(--bp-filament);background:var(--bp-filament-tint);color:var(--bp-ink)}
.bp-form .wpcf7-list-item label:has(input:focus-visible){outline:2px solid var(--bp-focus);outline-offset:2px}
.bp-form .wpcf7-list-item input{accent-color:var(--bp-filament);margin:0;width:16px;height:16px}

/* Uploadvak */
.bp-file{display:grid;gap:6px}
.bp-site .bp-form input[type=file]{box-sizing:border-box;width:100%;padding:14px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--bp-ink-subtle) 45%,transparent);background:var(--bp-glass-fill);color:var(--bp-ink-muted);font:400 14px var(--bp-font-sans);cursor:pointer}
.bp-site .bp-form input[type=file]:hover{border-color:var(--bp-filament)}
.bp-site .bp-form input[type=file]::file-selector-button{margin-right:14px;padding:9px 16px;border:0;border-radius:var(--bp-radius-pill);background:var(--bp-ink);color:var(--bp-bg);font:600 14px var(--bp-font-sans);cursor:pointer}
.bp-file-error{font-size:13px;color:var(--bp-error)}
.bp-js .bp-file[hidden],.bp-zakelijk[hidden]{display:none!important}

/* Verzenden */
.bp-form-submit{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.bp-form-submit>p{margin:0}
.bp-privacy-note{font-size:13px;line-height:20px;color:var(--bp-ink-subtle);max-width:48em}
.bp-site .bp-form input.bp-submit{min-height:52px;padding:0 28px;border:0;border-radius:var(--bp-radius-pill);background:var(--bp-filament);color:var(--bp-on-filament);font:600 16px/1 var(--bp-font-sans);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 24px var(--bp-filament-glow);transition:transform .2s,background-color .2s}
.bp-site .bp-form input.bp-submit:hover{background:var(--bp-filament-hover);transform:translateY(-1px)}
.bp-site .bp-form input.bp-submit:disabled{opacity:.6;cursor:wait}
.bp-form .wpcf7-spinner{margin:0}

/* Meldingen van Contact Form 7 */
.bp-form .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:13px;color:var(--bp-error)}
.bp-site .bp-form .wpcf7-not-valid{border-color:var(--bp-error)!important}
.bp-site .bp-form .wpcf7-response-output{margin:0!important;padding:14px 16px!important;border-radius:14px;border:1px solid var(--bp-hairline)!important;background:var(--bp-glass-fill-strong);color:var(--bp-ink);font-size:14px}
.bp-site .bp-form.invalid .wpcf7-response-output,.bp-site .bp-form.unaccepted .wpcf7-response-output,.bp-site .bp-form.failed .wpcf7-response-output,.bp-site .bp-form.spam .wpcf7-response-output{border-color:var(--bp-error)!important}
.bp-site .bp-form.sent .wpcf7-response-output{border-color:var(--bp-teal)!important}

@media (max-width:900px){
  .bp-offerte-grid{grid-template-columns:1fr}
  .bp-offerte-aside{position:static}
}
@media (max-width:600px){
  .bp-row{grid-template-columns:1fr}
  .bp-form fieldset.bp-form-step{padding:20px}
  .bp-site .bp-form input.bp-submit{width:100%}
}
.bp-offerte-aside h3{font:600 20px/28px var(--bp-font-sans)!important;letter-spacing:-.01em}
.bp-form .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bp-site .bp-form .wpcf7-list-item input{flex:none;margin:0!important;position:static;vertical-align:middle}
.bp-form .wpcf7-list-item-label{line-height:1.3}

/* Verplichte akkoord-vinkjes (algemene voorwaarden en privacy) */
.bp-akkoord{display:grid;gap:12px;width:100%;max-width:48em}
.bp-akkoord .wpcf7-form-control-wrap,.bp-akkoord .wpcf7-acceptance,.bp-akkoord .wpcf7-list-item{display:block;margin:0}
.bp-site .bp-form .bp-akkoord .wpcf7-list-item label,.bp-site .bp-form .bp-akkoord .wpcf7-list-item label:has(input:checked){display:flex;align-items:flex-start;gap:12px;min-height:0;padding:0;border:0;border-radius:0;background:none;color:var(--bp-ink-muted);font-size:14px;line-height:22px;font-weight:400;cursor:pointer}
.bp-site .bp-form .bp-akkoord input[type=checkbox]{width:20px;height:20px;margin:1px 0 0!important;flex:none;accent-color:var(--bp-filament);cursor:pointer}
.bp-akkoord a{font-weight:600}
.bp-akkoord abbr{text-decoration:none;color:var(--bp-filament-text)}
.bp-akkoord .wpcf7-not-valid-tip{margin-left:32px}

/* ══ Interactieve effecten (assets/js/effecten.js) ═════════════════
   Werken alleen als het script draait; zonder script ziet alles er gewoon normaal uit. */

/* 1. Eigen cursor */
html.bp-cursor-on,html.bp-cursor-on *{cursor:none!important}
html.bp-cursor-on :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],input[type=date],textarea,[contenteditable=true]){cursor:text!important}
.bp-cursor{position:fixed;inset:0;z-index:99999;pointer-events:none}
.bp-cursor__ring,.bp-cursor__dot{position:absolute;top:0;left:0;width:0;height:0;opacity:0;transition:opacity .25s ease}
.bp-cursor.is-visible .bp-cursor__ring,.bp-cursor.is-visible .bp-cursor__dot{opacity:1}
.bp-cursor__dot::before,.bp-cursor__ring::before{content:"";position:absolute;left:0;top:0;border-radius:50%;translate:-50% -50%}
.bp-cursor__dot::before{width:7px;height:7px;background:var(--bp-filament);transition:scale .2s ease}
.bp-cursor__ring::before{width:38px;height:38px;border:1.5px solid color-mix(in srgb,var(--bp-ink) 70%,transparent);box-sizing:border-box;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),background-color .3s,border-color .3s,scale .2s}
/* Boven links en knoppen: ring wordt groter en kleurt oranje */
.bp-cursor.is-hover .bp-cursor__ring::before{width:62px;height:62px;border-color:var(--bp-filament);background:color-mix(in srgb,var(--bp-filament) 12%,transparent)}
.bp-cursor.is-hover .bp-cursor__dot::before{scale:.6}
.bp-cursor.is-primary .bp-cursor__ring::before{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.18)}
.bp-cursor.is-primary .bp-cursor__dot::before{background:#fff}
/* Boven foto's: grote glazen lens */
.bp-cursor.is-media .bp-cursor__ring::before{width:96px;height:96px;border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.bp-cursor.is-media .bp-cursor__dot::before{scale:0}
/* In tekstvelden: gewone tekstcursor */
.bp-cursor.is-typing .bp-cursor__ring,.bp-cursor.is-typing .bp-cursor__dot{opacity:0}
.bp-cursor.is-down .bp-cursor__ring::before{scale:.85}

/* 2. Kantelende kaarten met lichtglans */
.bp-tilt{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.bp-tilt.is-tilting{transition:transform .12s linear,box-shadow .25s ease;transform:perspective(900px) rotateX(var(--bp-rx,0deg)) rotateY(var(--bp-ry,0deg)) translateY(-4px);box-shadow:var(--bp-float-shadow)}
.bp-glass.bp-tilt.is-tilting{background-image:radial-gradient(circle at var(--bp-mx,50%) var(--bp-my,50%),rgba(255,255,255,.38),transparent 46%),linear-gradient(180deg,var(--bp-glass-sheen) 0%,transparent 42%)}
:root[data-theme=dark] .bp-glass.bp-tilt.is-tilting{background-image:radial-gradient(circle at var(--bp-mx,50%) var(--bp-my,50%),rgba(255,255,255,.10),transparent 46%),linear-gradient(180deg,var(--bp-glass-sheen) 0%,transparent 42%)}

/* 3. Foto-lens: eromheen zacht vervaagd, scherp rond de muis */
.bp-lens{position:relative}
.bp-lens::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s ease;
  -webkit-backdrop-filter:blur(5px) saturate(.75) brightness(.92);backdrop-filter:blur(5px) saturate(.75) brightness(.92);
  -webkit-mask:radial-gradient(circle 70px at var(--bp-lx,50%) var(--bp-ly,50%),transparent 0 72%,#000 100%);
  mask:radial-gradient(circle 70px at var(--bp-lx,50%) var(--bp-ly,50%),transparent 0 72%,#000 100%)}
.bp-lens:hover::after{opacity:1}

/* 4. Magnetische knoppen */
.bp-magnet{transition:translate .35s cubic-bezier(.2,.8,.2,1),transform .2s ease,box-shadow .2s ease,background-color .2s ease!important}

/* 5. Zacht in beeld komen tijdens het scrollen */
html.bp-reveal-on :is(.bp-section-head,.bp-card,.bp-case,.bp-step,.bp-usp,.bp-cta,.bp-faq-item,.bp-form-step,.bp-offerte-aside,.bp-photo):not(.bp-in){opacity:0;translate:0 26px;filter:blur(6px)}
html.bp-reveal-on :is(.bp-section-head,.bp-card,.bp-case,.bp-step,.bp-usp,.bp-cta,.bp-faq-item,.bp-form-step,.bp-offerte-aside,.bp-photo).bp-in{transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--bp-reveal-delay,0ms),translate .8s cubic-bezier(.2,.8,.2,1) var(--bp-reveal-delay,0ms),filter .8s cubic-bezier(.2,.8,.2,1) var(--bp-reveal-delay,0ms),transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}

@media (prefers-reduced-motion:reduce){
  html.bp-cursor-on,html.bp-cursor-on *{cursor:auto!important}
  .bp-cursor{display:none}
}