/* ===========================================================================
   DC Hero Slider (Multi Banner) — dc-hero-slider
   Scoped under .dc-hero--slider so it does not collide with other hero widgets.
   Var-gebaseerd thema: image-modus (.has-bg-img) klapt de tekst-vars naar wit.
   "Achter de header" (.dc-hero--bh + body.dc-hero-bh) maakt de header transparant.
   =========================================================================== */

.dc-hero--slider{
    --a:#a0c040;
    --ah:#82a222;
    --ar:160,192,64;
    --bg:#1a1a1a;
    --tx:#2b2926;--tx2:#555;--mu:#999;
    --bd:rgba(0,0,0,.07);
    --r:24px;
}
.dc-hero--slider *,
.dc-hero--slider *::before,
.dc-hero--slider *::after{box-sizing:border-box;}

/* ── ROOT ── */
.dc-hero--slider.dc-hero{
    position:relative;
    min-height:clamp(720px, 88vh, 820px);
    display:flex;align-items:center;
    background:var(--bg);color:var(--tx);
    font-family:'DM Sans','Poppins',system-ui,sans-serif;
}

/* ── AMBIENT BG ── */
.dc-hero--slider .dc-hero__bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}

/* ── Architectural lines — pass over the fixed header ──
   z-index higher than .lc-header (9999). The hero top (y=0)
   coincides with the document top, so lines at top:0 render
   inside the area occupied by the fixed header. */
.dc-hero--slider .dc-hero__line{
    position:absolute;
    background:var(--bd);
    pointer-events:none;
    z-index:10001;
}
.dc-hero--slider .dc-hero__line--v{
    width:1px;
    top:0;
    bottom:0;
}
.dc-hero--slider .dc-hero__line--v1{left:6%;}
.dc-hero--slider .dc-hero__line--v2{right:6%;}
.dc-hero--slider .dc-hero__line--v::after{
    content:'';position:absolute;top:-15%;left:-1px;width:3px;height:80px;
    background:linear-gradient(180deg,transparent,rgba(var(--ar),.45),transparent);
    border-radius:2px;
    animation:_dchsLineTrace 9s ease-in-out infinite;
}
.dc-hero--slider .dc-hero__line--v2::after{animation-delay:-4.5s;}

@keyframes _dchsLineTrace{0%{top:-15%;opacity:0;}8%{opacity:1;}92%{opacity:1;}100%{top:105%;opacity:0;}}

/* ── CONTAINER ── */
.dc-hero--slider .dc-hero__container{
    position:relative;z-index:2;width:100%;max-width:1400px;margin:0 auto;
    padding:110px 40px 96px;
    display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}

/* ── REVEAL ── */
.dc-hero--slider .dc-hero__rv{
    opacity:0;transform:translateY(36px);filter:blur(4px);
    transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1),filter .85s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform,filter;
}
.dc-hero--slider .dc-hero__rv.in{opacity:1;transform:translateY(0);filter:blur(0);}

/* ── LEFT ── */
.dc-hero--slider .dc-hero__left{position:relative;z-index:2;}

/* ══════════════════════════════════════════════════════════
   EYEBROW — flat floor-plank icon + compact uppercase label
   ══════════════════════════════════════════════════════════ */
.dc-hero--slider .dc-hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:28px;
    padding:0;
    background:none;
    border:none;
    box-shadow:none;
    position:relative;
    opacity:0;
    transform:translateY(6px);
    transition:
        opacity .6s cubic-bezier(.22,1,.36,1),
        transform .6s cubic-bezier(.22,1,.36,1);
}
.dc-hero--slider .dc-hero__eyebrow.in{
    opacity:1;
    transform:translateY(0);
}
.dc-hero--slider .dc-hero__eyebrow-icon{
    position:relative;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--a);
    background:none;
    border:none;
    box-shadow:none;
}
.dc-hero--slider .dc-hero__eyebrow-icon svg{
    width:28px;
    height:28px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    overflow:visible;
}
.dc-hero--slider .dc-hero__eyebrow-icon svg .fp-plank{
    opacity:0;
    transform:translateY(4px);
    transform-box:fill-box;
    transform-origin:center;
    transition:
        opacity .45s ease,
        transform .5s cubic-bezier(.22,1,.36,1);
}
.dc-hero--slider .dc-hero__eyebrow-icon svg .fp-plank:nth-of-type(1){transition-delay:.28s;}
.dc-hero--slider .dc-hero__eyebrow-icon svg .fp-plank:nth-of-type(2){transition-delay:.34s;}
.dc-hero--slider .dc-hero__eyebrow-icon svg .fp-plank:nth-of-type(3){transition-delay:.40s;}
.dc-hero--slider .dc-hero__eyebrow-icon svg .fp-plank:nth-of-type(4){transition-delay:.46s;}
.dc-hero--slider .dc-hero__eyebrow-icon svg .fp-plank:nth-of-type(5){transition-delay:.52s;}
.dc-hero--slider .dc-hero__eyebrow-icon svg .fp-plank:nth-of-type(6){transition-delay:.58s;}
.dc-hero--slider .dc-hero__eyebrow-icon svg .fp-plank:nth-of-type(7){transition-delay:.64s;}
.dc-hero--slider .dc-hero__eyebrow.in .dc-hero__eyebrow-icon svg .fp-plank{
    opacity:1;
    transform:translateY(0);
}
.dc-hero--slider .dc-hero__eyebrow-title{
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    line-height:1;
    color:var(--tx);
    white-space:nowrap;
    display:inline-block;
    font-style:normal;
    background:none;
    -webkit-text-fill-color:currentColor;
            color:var(--tx);
}

/* Title */
.dc-hero--slider .dc-hero__title{
    font-size:clamp(30px,4vw,52px);font-weight:800;line-height:1.2;
    color:var(--tx);margin-bottom:14px;
}
.dc-hero--slider .dc-hero__title-line{display:block;overflow:hidden;}
.dc-hero--slider .dc-hero__title-inner{display:inline-block;}
.dc-hero--slider .dc-hero__hl{color:var(--a);display:inline-block;}

/* Description */
.dc-hero--slider .dc-hero__desc{
    font-size:17px;line-height:1.8;color:var(--tx2);max-width:480px;margin-bottom:28px;
}

/* ── HIGHLIGHT — Material sample tag ── */
.dc-hero--slider .dc-hero__highlight{
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:12px 22px 12px 0px;
    margin-bottom:18px;
    max-width:540px;
    transform:rotate(-0.6deg);
    position:relative;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.dc-hero--slider .dc-hero__highlight:hover{transform:rotate(0deg) translateY(-2px);}
.dc-hero--slider .dc-hero__highlight-swatch{
    flex-shrink:0;
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--a);
    background:#fff;
    border:1px solid rgba(43,41,38,.08);
    border-radius:3px;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
    position:relative;
}
.dc-hero--slider .dc-hero__highlight-swatch::after{
    content:'';
    position:absolute;
    top:-1px;
    right:-1px;
    width:8px;
    height:8px;
    background:var(--a);
    clip-path:polygon(100% 0, 100% 100%, 0 0);
}
.dc-hero--slider .dc-hero__highlight-swatch svg{
    width:28px;
    height:28px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.dc-hero--slider .dc-hero__highlight-body{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-right:8px;
}
.dc-hero--slider .dc-hero__highlight-kicker{
    font-size:9px;
    font-weight:800;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--mu);
    line-height:1;
}
.dc-hero--slider .dc-hero__highlight-text{
    font-size:15px;
    font-weight:800;
    color:var(--tx);
    letter-spacing:-.3px;
    line-height:1.25;
}

/* ── CONDITION — Flooring measurement ruler ── */
.dc-hero--slider .dc-hero__condition{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:32px;
    padding:0;
    color:var(--mu);
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
}
.dc-hero--slider .dc-hero__condition-ruler{
    position:relative;
    display:inline-block;
    width:44px;
    height:8px;
    flex-shrink:0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 3px,
            rgba(var(--ar),.35) 3px 4px,
            transparent 4px 10px,
            rgba(var(--ar),.6) 10px 11px,
            transparent 11px 22px
        );
}
.dc-hero--slider .dc-hero__condition-ruler::before,
.dc-hero--slider .dc-hero__condition-ruler::after{
    content:'';
    position:absolute;
    top:-2px;
    width:1px;
    height:12px;
    background:var(--a);
}
.dc-hero--slider .dc-hero__condition-ruler::before{left:0;}
.dc-hero--slider .dc-hero__condition-ruler::after{right:0;}
.dc-hero--slider .dc-hero__condition svg{
    width:13px;
    height:13px;
    color:var(--a);
    opacity:.85;
    flex-shrink:0;
}

/* ── COUNTDOWN ── */
.dc-hero--slider .dc-hero__countdown{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    padding:24px 8px 20px;
    background:#fff;
    border:1px solid var(--bd);
    border-radius:16px;
    position:relative;
    overflow:hidden;
    margin-bottom:36px;
    max-width:540px;
}
.dc-hero--slider .dc-hero__countdown::before{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:6px;
    background-image:repeating-linear-gradient(
        90deg,
        rgba(43,41,38,.14) 0 1px,
        transparent 1px 8px
    );
    opacity:.8;
}
.dc-hero--slider .dc-hero__countdown-item{
    text-align:center;
    position:relative;
    padding:0 4px;
    background:none;
    border:none;
    border-radius:0;
    box-shadow:none;
    transition:none;
    transform:none;
}
.dc-hero--slider .dc-hero__countdown-item + .dc-hero__countdown-item::before{
    content:'';
    position:absolute;
    left:0;
    top:14%;
    bottom:14%;
    width:1px;
    height:auto;
    background:var(--bd);
    opacity:1;
}
.dc-hero--slider .dc-hero__countdown-item::after{
    content:none;
}
.dc-hero--slider .dc-hero__countdown-item:hover{
    transform:none;
    box-shadow:none;
}
.dc-hero--slider .dc-hero__countdown-value{
    display:block;
    font-size:clamp(32px, 4vw, 46px);
    font-weight:900;
    color:var(--tx);
    line-height:1;
    letter-spacing:-2px;
    font-variant-numeric:tabular-nums;
    margin-bottom:8px;
    position:relative;
    z-index:1;
}
.dc-hero--slider .dc-hero__countdown-label{
    display:block;
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--mu);
    position:relative;
    z-index:1;
}

/* ── CTA ── */
.dc-hero--slider .dc-hero__ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px;}
.dc-hero--slider .dc-hero__btn{
    display:inline-flex;align-items:center;gap:10px;padding:17px 34px;
    font-size:15px;font-weight:600;font-family:inherit;text-decoration:none;
    border-radius:14px;cursor:pointer;position:relative;overflow:hidden;
    transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,background .3s,border-color .3s,color .3s;
    will-change:transform;border:none;-webkit-tap-highlight-color:transparent;
}
.dc-hero--slider .dc-hero__btn--pri{
    background:var(--a);color:#fff;box-shadow:0 10px 36px rgba(var(--ar),.22);
}
.dc-hero--slider .dc-hero__btn--pri::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);
}
.dc-hero--slider .dc-hero__btn--pri:hover{
    background:var(--ah);box-shadow:0 16px 50px rgba(var(--ar),.35);transform:translateY(-3px);
}
.dc-hero--slider .dc-hero__btn--pri:focus-visible{outline:3px solid var(--a);outline-offset:3px;}
.dc-hero--slider .dc-hero__btn-arrow{width:18px;height:18px;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.dc-hero--slider .dc-hero__btn--pri:hover .dc-hero__btn-arrow{transform:translateX(6px);}

.dc-hero--slider .dc-hero__btn--sec{
    background:transparent;color:var(--tx);border:1.5px solid var(--bd);
    box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.dc-hero--slider .dc-hero__btn--sec::after{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(100deg,transparent 20%,rgba(var(--ar),.07) 50%,transparent 80%);
    transition:left .6s ease;
}
.dc-hero--slider .dc-hero__btn--sec:hover::after{left:100%;}
.dc-hero--slider .dc-hero__btn--sec:hover{
    border-color:var(--a);color:var(--a);box-shadow:0 8px 28px rgba(var(--ar),.10);transform:translateY(-2px);
}
.dc-hero--slider .dc-hero__btn--sec:focus-visible{outline:3px solid var(--a);outline-offset:3px;}

/* ── TRUST ── */
.dc-hero--slider .dc-hero__trust{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;}
.dc-hero--slider .dc-hero__trust-item{
    display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
    font-size:13px;font-weight:500;color:var(--tx2);
    background:#f7f5f2;border:1px solid var(--bd);border-radius:100px;
    transition:all .35s cubic-bezier(.22,1,.36,1);cursor:default;
}
.dc-hero--slider .dc-hero__trust-item:hover{
    border-color:rgba(var(--ar),.22);background:rgba(var(--ar),.04);
    transform:translateY(-2px);box-shadow:0 6px 20px rgba(var(--ar),.08);
}
.dc-hero--slider .dc-hero__trust-icon{color:var(--a);font-size:13px;flex-shrink:0;}
.dc-hero--slider .dc-hero__trust-icon svg{width:13px;height:13px;}

/* ══════════════════════════════════
   RIGHT — Bento Category Grid
══════════════════════════════════ */
.dc-hero--slider .dc-hero__right{
    position:relative;display:flex;justify-content:right;align-items:center;
}
.dc-hero--slider .dc-hero__bento{
    display:grid;width:100%;max-width:560px;
    grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px;
}
.dc-hero--slider .dc-hero__cat--featured{grid-column:1/-1;}
.dc-hero--slider .dc-hero__cat{
    position:relative;border-radius:var(--r);overflow:hidden;
    text-decoration:none;display:block;
    transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease;
}
.dc-hero--slider .dc-hero__cat:hover{
    transform:translateY(-4px);box-shadow:0 24px 56px rgba(0,0,0,.12);
}
.dc-hero--slider .dc-hero__cat-img{
    display:block;width:100%;object-fit:cover;
    transition:transform .7s cubic-bezier(.22,1,.36,1);
    position:absolute;
    inset:0;
    height:100%;
    z-index:0;
}
.dc-hero--slider .dc-hero__cat--featured{min-height:280px;}
.dc-hero--slider .dc-hero__cat:not(.dc-hero__cat--featured){min-height:200px;}
.dc-hero--slider .dc-hero__cat:hover .dc-hero__cat-img{transform:scale(1.05);}

.dc-hero--slider .dc-hero__cat-video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    z-index:1;
    opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.dc-hero--slider .dc-hero__cat-video.is-playing{opacity:1;}
.dc-hero--slider .dc-hero__cat{
    background:linear-gradient(135deg, #2b2926, #1a1a1a);
}
.dc-hero--slider .dc-hero__cat-overlay{
    position:absolute;inset:0;z-index:2;
    background:linear-gradient(0deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.10) 50%,rgba(0,0,0,.02) 100%);
    transition:background .4s ease;
}
.dc-hero--slider .dc-hero__cat:hover .dc-hero__cat-overlay{
    background:linear-gradient(0deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.05) 100%);
}
.dc-hero--slider .dc-hero__cat-content{
    position:absolute;inset:0;z-index:3;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:22px 24px;color:#fff;
}
.dc-hero--slider .dc-hero__cat-title{
    font-family:'Poppins','DM Sans',sans-serif;
    font-weight:700;line-height:1.15;margin-bottom:4px;
}
.dc-hero--slider .dc-hero__cat--featured .dc-hero__cat-title{font-size:24px;}
.dc-hero--slider .dc-hero__cat:not(.dc-hero__cat--featured) .dc-hero__cat-title{font-size:17px;}
.dc-hero--slider .dc-hero__cat-sub{font-size:13px;opacity:.75;font-weight:400;}
.dc-hero--slider .dc-hero__cat-offer{
    position:absolute;top:16px;right:16px;z-index:3;
    background:var(--a);color:#fff;
    font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
    padding:6px 14px;border-radius:100px;
    box-shadow:0 4px 16px rgba(var(--ar),.35);
}
.dc-hero--slider .dc-hero__cat-arrow{
    position:absolute;bottom:22px;right:22px;z-index:3;
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transform:translateX(-8px);
    transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1);
}
.dc-hero--slider .dc-hero__cat:hover .dc-hero__cat-arrow{opacity:1;transform:translateX(0);}
.dc-hero--slider .dc-hero__cat-arrow svg{width:16px;height:16px;color:#fff;}
.dc-hero--slider .dc-hero__cat-progress{
    position:absolute;bottom:0;left:0;z-index:4;
    height:3px;background:var(--a);border-radius:0 2px 0 0;width:0%;
}
.dc-hero--slider .dc-hero__cat-progress.running{
    animation:_dchsCatProgress 4500ms linear forwards;
}
@keyframes _dchsCatProgress{0%{width:0%;}100%{width:100%;}}

.dc-hero--slider .dc-hero__cat-dots{
    display:flex;justify-content:center;gap:8px;margin-top:16px;grid-column:1/-1;
}
.dc-hero--slider .dc-hero__cat-dot{
    width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
    background:var(--bd);transition:all .35s cubic-bezier(.22,1,.36,1);
    -webkit-tap-highlight-color:transparent;
}
.dc-hero--slider .dc-hero__cat-dot.active{
    background:var(--a);width:24px;border-radius:4px;
}

/* ══════════════════════════════════
   UNIQUE RULER SCROLL CUE (FLOORING)
══════════════════════════════════ */
.dc-hero--slider .dc-hero__scroll{
    position:absolute;bottom:56px;right:48px;z-index:5;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    opacity:1;transition:opacity .5s,transform .5s;user-select:none;
}
.dc-hero--slider .dc-hero__scroll.hide{opacity:0;transform:translateY(8px);pointer-events:none;}
.dc-hero--slider .dc-hero__scroll-label{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    writing-mode:vertical-rl;transform:rotate(180deg);
}
.dc-hero--slider .dc-hero__scroll-label-main{
    font-size:11px;font-weight:800;letter-spacing:3px;
    text-transform:uppercase;color:var(--tx);
}
.dc-hero--slider .dc-hero__scroll-label-sub{
    font-size:9px;font-weight:600;letter-spacing:1.5px;
    text-transform:uppercase;color:var(--mu);
}
.dc-hero--slider .dc-hero__scroll-ruler{
    position:relative;width:34px;height:140px;
    background:#faf7f4;border:1px solid rgba(0,0,0,.14);
    border-radius:3px;overflow:hidden;
    box-shadow:0 8px 24px rgba(43,41,38,.08);
}
.dc-hero--slider .dc-hero__scroll-ruler::before{
    content:'';position:absolute;inset:0;
    background-image:repeating-linear-gradient(
        180deg,
        transparent 0 19px,
        var(--tx) 19px 20px,
        transparent 20px 39px,
        var(--tx) 39px 40px
    );
    opacity:.5;
}
.dc-hero--slider .dc-hero__scroll-ruler::after{
    content:'';position:absolute;left:0;top:0;width:10px;height:100%;
    background-image:repeating-linear-gradient(
        180deg,
        transparent 0 9px,
        var(--tx) 9px 10px
    );
    opacity:.25;
}
.dc-hero--slider .dc-hero__scroll-ticks{
    position:absolute;top:0;right:4px;bottom:0;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:6px 0;font-size:8px;font-weight:700;color:var(--mu);
    letter-spacing:-.3px;font-variant-numeric:tabular-nums;
}
.dc-hero--slider .dc-hero__scroll-handle{
    position:absolute;left:-6px;right:-6px;top:0;height:3px;
    background:var(--a);box-shadow:0 0 10px rgba(var(--ar),.6);
    animation:_dchsHandle 3s cubic-bezier(.65,0,.35,1) infinite;z-index:2;
}
.dc-hero--slider .dc-hero__scroll-handle::before,
.dc-hero--slider .dc-hero__scroll-handle::after{
    content:'';position:absolute;top:50%;width:8px;height:8px;
    border-radius:50%;background:var(--a);transform:translateY(-50%);
    box-shadow:0 0 6px rgba(var(--ar),.6);
}
.dc-hero--slider .dc-hero__scroll-handle::before{left:-4px;}
.dc-hero--slider .dc-hero__scroll-handle::after{right:-4px;}

@keyframes _dchsHandle{
    0%{top:0;opacity:0;}
    10%{opacity:1;}
    90%{opacity:1;}
    100%{top:calc(100% - 3px);opacity:0;}
}

/* ══════════════════════════════════
   BG IMAGE MODE (.has-bg-img) — donkere foto + overlay, witte tekst
   De afbeelding-URL wordt per-instance inline op .dc-hero__bg-image gezet.
══════════════════════════════════ */
.dc-hero--slider .dc-hero__bg-image{
    position:absolute;inset:0;z-index:0;
    background-size:cover;background-position:center;background-repeat:no-repeat;
}
.dc-hero--slider .dc-hero__bg-overlay{
    position:absolute;inset:0;z-index:1;
    background:rgba(0,0,0,0.7);
}
.dc-hero--slider.has-bg-img .dc-hero__line{background:rgba(255,255,255,.06);}
.dc-hero--slider.has-bg-img .dc-hero__line--v::after{background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);}
.dc-hero--slider.has-bg-img{--tx:#ffffff;--tx2:rgba(255,255,255,.75);--mu:rgba(255,255,255,.45);--bd:rgba(255,255,255,.10);}
.dc-hero--slider.has-bg-img .dc-hero__eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);}
.dc-hero--slider.has-bg-img .dc-hero__eyebrow::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);}
.dc-hero--slider.has-bg-img .dc-hero__trust-item{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10);color:rgba(255,255,255,.85);}
.dc-hero--slider.has-bg-img .dc-hero__trust-item:hover{background:rgba(255,255,255,.14);border-color:rgba(var(--ar),.35);color:#fff;}
.dc-hero--slider.has-bg-img .dc-hero__btn--sec{border-color:rgba(255,255,255,.18);color:#fff;}
.dc-hero--slider.has-bg-img .dc-hero__btn--sec:hover{border-color:var(--a);color:var(--a);}
.dc-hero--slider.has-bg-img .dc-hero__cat-dot{background:rgba(255,255,255,.20);}
.dc-hero--slider.has-bg-img .dc-hero__cat-dot.active{background:var(--a);}
.dc-hero--slider.has-bg-img .dc-hero__scroll-ruler{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);}
.dc-hero--slider.has-bg-img .dc-hero__scroll-ruler::before,
.dc-hero--slider.has-bg-img .dc-hero__scroll-ruler::after{background-image:repeating-linear-gradient(180deg,transparent 0 19px,rgba(255,255,255,.4) 19px 20px,transparent 20px 39px,rgba(255,255,255,.4) 39px 40px);}
.dc-hero--slider.has-bg-img .dc-hero__scroll-label-main{color:#fff;}

/* ══════════════════════════════════
   ACHTERGROND ACHTER HEADER (.dc-hero--bh + body.dc-hero-bh)
   De header + topbar worden transparant en over de hero geplaatst, zodat de
   achtergrondafbeelding fullscreen tot bovenaan doorloopt. De body-class wordt
   door de widget-JS gezet wanneer een behind-header hero op de pagina staat.
══════════════════════════════════ */
body.dc-hero-bh .lc-header{
    position:absolute!important;top:0;left:0;right:0;
    background:transparent!important;
    box-shadow:none!important;border-bottom:0!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    z-index:10000;
}
body.dc-hero-bh .lc-topbar,
body.dc-hero-bh .lc-header__main{background:transparent!important;}
body.dc-hero-bh .lc-header__nav-link,
body.dc-hero-bh .lc-topbar__usp,
body.dc-hero-bh .lc-topbar__usp--link,
body.dc-hero-bh .lc-topbar__usp span,
body.dc-hero-bh .lc-topbar__usp-icon{color:#ffffff!important;}
body.dc-hero-bh .lc-header__nav-link svg{stroke:#ffffff!important;}
body.dc-hero-bh .lc-topbar__divider{background:rgba(255,255,255,.28)!important;}
body.dc-hero-bh .lc-header__mobile-toggle span{background:#ffffff!important;}
body.dc-hero-bh .lc-header__nav-link:hover{color:#a0c040!important;}
/* container vrijhouden van de overlappende header */
.dc-hero--slider.dc-hero--bh .dc-hero__container{padding-top:200px;}
/* extra donkere gradient bovenaan voor leesbare navigatie */
.dc-hero--slider.dc-hero--bh .dc-hero__bg-overlay{
    background:linear-gradient(180deg,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.7) 30%,
        rgba(0,0,0,0.7) 100%);
}
@media (max-width:1024px){
    .dc-hero--slider.dc-hero--bh .dc-hero__container{padding-top:148px;}
}
@media (max-width:600px){
    .dc-hero--slider.dc-hero--bh .dc-hero__container{padding-top:120px;}
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce){
    .dc-hero--slider .dc-hero__rv{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;}
    .dc-hero--slider *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ── RESPONSIVE ── */
@media (max-width:1200px){
    .dc-hero--slider .dc-hero__container{gap:48px;}
    .dc-hero--slider .dc-hero__line{display:none;}
    .dc-hero--slider .dc-hero__scroll{right:24px;}
}
@media (max-width:1024px){
    .dc-hero--slider .dc-hero__container{grid-template-columns:1fr;text-align:center;gap:48px;padding:88px 30px 76px;}
    .dc-hero--slider .dc-hero__right{order:-1;}
    .dc-hero--slider .dc-hero__bento{max-width:520px;margin:0 auto;}
    .dc-hero--slider .dc-hero__desc{margin-left:auto;margin-right:auto;}
    .dc-hero--slider .dc-hero__ctas{justify-content:center;}
    .dc-hero--slider .dc-hero__trust{justify-content:center;}
    .dc-hero--slider .dc-hero__eyebrow{margin-left:auto;margin-right:auto;}
    .dc-hero--slider .dc-hero__scroll{display:none;}
}
@media (max-width:600px){
    .dc-hero--slider .dc-hero__container{padding:64px 20px 56px;}
    .dc-hero--slider .dc-hero__ctas{flex-direction:column;align-items:stretch;}
    .dc-hero--slider .dc-hero__btn{justify-content:center;width:100%;}
    .dc-hero--slider .dc-hero__trust{flex-direction:row;justify-content:center;gap:6px;}
    .dc-hero--slider .dc-hero__trust-item{padding:7px 12px;font-size:12px;}
    .dc-hero--slider .dc-hero__bento{gap:10px;}
    .dc-hero--slider .dc-hero__cat--featured .dc-hero__cat-img{height:200px;}
    .dc-hero--slider .dc-hero__cat:not(.dc-hero__cat--featured) .dc-hero__cat-img{height:150px;}
    .dc-hero--slider .dc-hero__cat-content{padding:16px 18px;}
    .dc-hero--slider .dc-hero__cat--featured .dc-hero__cat-title{font-size:20px;}
}