/* JDB: kleuren uit ons werk (branche-draai schilder) */
.jdb-kleuren{padding:96px 0;background:#fff;text-align:center}
.jdb-kleuren h2{color:var(--heading-brand,#151515)}
.jdb-kleuren .jdb-intro{max-width:620px;margin:0 auto 40px;color:var(--text-soft,#555);line-height:1.7}
.jdb-kl-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;max-width:1080px;margin:0 auto}
.jdb-kl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.jdb-swatch{border:0;background:none;padding:0;cursor:pointer;text-align:center;font:inherit;color:inherit}
.jdb-swatch-kleur{display:block;aspect-ratio:1/1.15;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s cubic-bezier(.22,.61,.36,1)}
.jdb-swatch:hover .jdb-swatch-kleur{transform:translateY(-4px)}
.jdb-swatch.is-actief .jdb-swatch-kleur{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--accent,#FAD60B)}
.jdb-swatch-naam{display:block;margin-top:8px;font-size:13px;font-weight:700;line-height:1.3}
.jdb-swatch-code{display:block;font-size:11.5px;color:#777;line-height:1.3}
.jdb-kl-beeld{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:#eee}
.jdb-kl-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s cubic-bezier(.22,.61,.36,1)}
.jdb-kl-label{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(0,0,0,.72);color:#fff;border-radius:999px;padding:9px 20px;font-size:14px;white-space:nowrap}
.jdb-kl-label b{color:var(--accent,#FAD60B)}
.jdb-kl-noot{margin:28px auto 0;font-size:13px;color:#888}
@media(max-width:900px){.jdb-kl-wrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.jdb-kl-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.jdb-swatch-naam{font-size:11.5px}.jdb-swatch-code{font-size:10.5px}.jdb-kl-label{font-size:12.5px;white-space:normal;width:86%}}