/* ===========================================================================
   DC Merken Overzicht — dc-brands-overview
   =========================================================================== */

.dc-brov,
.dc-brov *,
.dc-brov *::before,
.dc-brov *::after{
    font-family:'DM Sans','Poppins',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    box-sizing:border-box;
}

.dc-brov{
    --brov-primary:#a0c040;
    --brov-dark:#2b2926;
    --brov-bg:#ffffff;
    --brov-muted:#7a726a;
    --brov-surface:#faf7f4;
    --brov-soft:#f6f3ef;
    --brov-border:rgba(43,41,38,0.08);
    --brov-border-strong:rgba(43,41,38,0.14);
}

/* ═════════ SECTION ═════════ */
.dc-brov{
    background:var(--brov-bg);
    padding:104px 0;
    position:relative;
    overflow:hidden;
}
.dc-brov__container{
    max-width:1280px;
    margin:0 auto;
    padding:0 40px;
}

/* ═════════ HEADER ═════════ */
.dc-brov__head{
    max-width:680px;
    margin:0 auto 64px;
    text-align:center;
}
.dc-brov__head .dc-hero__eyebrow{justify-content:center;}
.dc-brov__title{
    margin:0 0 18px;
    font-size:clamp(30px, 3.4vw, 48px);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-1px;
    color:var(--brov-dark);
}
.dc-brov__title strong{color:var(--brov-primary);font-weight:800;}
.dc-brov__desc{
    margin:0;
    font-size:17px;
    line-height:1.7;
    color:var(--brov-muted);
}

/* ═════════ GRID ═════════ */
.dc-brov__grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

/* ═════════ CARD ═════════ */
.dc-brov__card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:30px 28px;
    background:#fff;
    border:1px solid var(--brov-border);
    border-radius:16px;
    box-shadow:0 18px 44px -28px rgba(43,41,38,.20);
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.dc-brov.is-in .dc-brov__card{opacity:1;transform:translateY(0);}
/* Staggered reveal */
.dc-brov.is-in .dc-brov__card:nth-child(1){transition-delay:0s;}
.dc-brov.is-in .dc-brov__card:nth-child(2){transition-delay:.06s;}
.dc-brov.is-in .dc-brov__card:nth-child(3){transition-delay:.12s;}
.dc-brov.is-in .dc-brov__card:nth-child(4){transition-delay:.18s;}
.dc-brov.is-in .dc-brov__card:nth-child(5){transition-delay:.24s;}
.dc-brov.is-in .dc-brov__card:nth-child(6){transition-delay:.30s;}
.dc-brov.is-in .dc-brov__card:nth-child(7){transition-delay:.36s;}
.dc-brov.is-in .dc-brov__card:nth-child(8){transition-delay:.42s;}
.dc-brov.is-in .dc-brov__card:nth-child(9){transition-delay:.48s;}
.dc-brov.is-in .dc-brov__card:nth-child(10){transition-delay:.54s;}
.dc-brov.is-in .dc-brov__card:nth-child(11){transition-delay:.60s;}
.dc-brov.is-in .dc-brov__card:nth-child(12){transition-delay:.66s;}
.dc-brov__card::before{
    content:'';
    position:absolute;
    top:0;left:0;
    width:46px;height:2px;
    background:var(--brov-primary);
    border-radius:16px 0 0 0;
}
.dc-brov__card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 60px -24px rgba(43,41,38,.30), 0 0 0 1px rgba(160,192,64,.18);
    border-color:rgba(160,192,64,.30);
}

/* Card head — logo/monogram + category */
.dc-brov__card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.dc-brov__logo{
    max-width:150px;
    max-height:46px;
    width:auto;height:auto;
    object-fit:contain;
    object-position:left center;
}
.dc-brov__monogram{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:52px;height:52px;
    border-radius:14px;
    background:linear-gradient(135deg, var(--brov-primary), #8aab33);
    color:#fff;
    font-size:22px;
    font-weight:800;
    letter-spacing:-.5px;
    flex-shrink:0;
    box-shadow:0 8px 18px -8px rgba(160,192,64,.6);
}
.dc-brov__cat{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 11px;
    background:rgba(160,192,64,.08);
    color:var(--brov-primary);
    font-size:9px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    border-radius:100px;
    border:1px solid rgba(160,192,64,.16);
    white-space:nowrap;
}

.dc-brov__name{
    margin:0;
    font-size:21px;
    font-weight:800;
    letter-spacing:-.4px;
    color:var(--brov-dark);
    line-height:1.2;
}
.dc-brov__text{
    margin:0;
    font-size:14.5px;
    line-height:1.7;
    color:var(--brov-muted);
}
.dc-brov__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:auto;
    padding-top:6px;
    color:var(--brov-dark);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    transition:gap .3s ease, color .3s ease;
}
.dc-brov__link:hover{gap:13px;color:var(--brov-primary);}
.dc-brov__link svg{width:15px;height:15px;}

/* ═════════ CTA ═════════ */
.dc-brov__cta{
    margin-top:56px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:40px 44px;
    background:var(--brov-surface);
    border:1px solid var(--brov-border);
    border-radius:20px;
}
.dc-brov__cta-title{
    margin:0 0 6px;
    font-size:23px;
    font-weight:800;
    letter-spacing:-.4px;
    color:var(--brov-dark);
}
.dc-brov__cta-text{
    margin:0;
    font-size:15px;
    line-height:1.6;
    color:var(--brov-muted);
    max-width:520px;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    .dc-brov *,
    .dc-brov *::before,
    .dc-brov *::after{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}

/* ═════════ RESPONSIVE ═════════ */
@media (max-width:1024px){
    .dc-brov{padding:80px 0;}
    .dc-brov__grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:768px){
    .dc-brov{padding:64px 0;}
    .dc-brov__container{padding:0 20px;}
    .dc-brov__head{margin-bottom:44px;}
    .dc-brov__cta{flex-direction:column;align-items:flex-start;padding:32px 26px;}
}
@media (max-width:560px){
    .dc-brov__grid{grid-template-columns:1fr;}
}