/* ==========================================================================
   Flexible Content blokken
   ========================================================================== */

.bk-section { padding-block: var(--bk-section-y); }
.bk-section__title {
    text-align: left;
    margin-bottom: 40px;
}

/* Header-over-hero staat gebundeld bij .has-hero verderop; de voorpagina krijgt
   die styling via de has-hero body-class, dus hier geen aparte body.home-regels. */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bk-hero {
    position: relative;
    min-height: clamp(460px, 47.45vw, 980px);   /* Figma 911/1920; met ondergrens voor tablet/mobiel */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bk-black) center/cover no-repeat;
    color: var(--bk-white);
    text-align: center;
    padding: 160px 0 90px;   /* onderkant 90px voor de scroll-indicator (geconsolideerd) */
    overflow: hidden;        /* de langzaam inzoomende foto netjes binnen het kader houden */
}
.bk-hero__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.2);   /* Figma: vlak transparant-zwart over de hele hero */
}
.bk-hero__inner { position: relative; max-width: 1000px; }
.bk-hero__eyebrow {
    font-family: var(--bk-font-body);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 14px;
    margin-bottom: 16px;
}
.bk-hero__title {
    line-height: 1.15;          /* Figma: line-height normal */
    margin-bottom: 24px;
}
.bk-hero__intro {
    font-size: 18px;
    line-height: 26px;          /* Figma: 18px / 26px */
    max-width: 760px;
    margin: 0 auto 32px;
}
.bk-hero__intro p { margin: 0; }
.bk-hero__intro p + p { margin-top: 1em; }   /* meerdere alinea's (bedankt-pagina's) */

/* --------------------------------------------------------------------------
   Tekst gecentreerd
   -------------------------------------------------------------------------- */
.bk-text-center__inner { max-width: 1100px; margin-inline: auto; text-align: center; }  /* Figma: introtekst ~1087px breed */
.bk-text-center__title { margin-bottom: 15px; }
.bk-text-center__body { color: var(--bk-text-muted); font-size: 18px; line-height: 26px; margin-bottom: 28px; }

/* Tweekoloms-variant (Figma: titel links ~364px, tekst rechts ~944px) */
.bk-text-center--twocol .bk-text-center__inner {
    max-width: var(--bk-container);
    display: grid;
    grid-template-columns: 364px 1fr;
    gap: 15px;
    text-align: left;
    align-items: start;
}
.bk-text-center--twocol .bk-text-center__title { margin-bottom: 0; line-height: 1.2; }
.bk-text-center--twocol .bk-text-center__body { margin-bottom: 0; }
@media (max-width: 1024px) {
    .bk-text-center--twocol .bk-text-center__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* --------------------------------------------------------------------------
   Brede afbeelding
   -------------------------------------------------------------------------- */
.bk-image-wide img { width: 100%; aspect-ratio: 1590 / 633; border-radius: var(--bk-radius); object-fit: cover; object-position: top; display: block; margin-inline: auto; }
/* Full-bleed-variant (Figma: edge-to-edge 1920x899, geen radius) */
.bk-image-wide--bleed .bk-container { max-width: none; padding-inline: 0; }
.bk-image-wide--bleed img { border-radius: 0; aspect-ratio: 1920 / 899; }

/* --------------------------------------------------------------------------
   Voor / na (twee beelden naast elkaar met label-pills, Figma: Before/After)
   -------------------------------------------------------------------------- */
.bk-voor-na__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }   /* Figma: 2 beelden, 22px ertussen */
.bk-voor-na__item { position: relative; margin: 0; }
.bk-voor-na__item img { width: 100%; aspect-ratio: 784 / 633; object-fit: cover; border-radius: var(--bk-radius); display: block; }
.bk-voor-na__label {
    position: absolute; top: 20px; left: 20px;
    background: var(--bk-gold); color: var(--bk-white);
    font-family: var(--bk-font-heading); font-weight: 600; font-size: 22px; line-height: 1;
    padding: 12px 26px; border-radius: var(--bk-radius);
}
@media (max-width: 600px) {
    .bk-voor-na__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Diensten-grid (kaarten)
   -------------------------------------------------------------------------- */
.bk-diensten__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;   /* Figma: 22px tussen de kaarten */
}
/* Diensten-grid lijnt uit op de containerrand (Figma ≈426px kaarten) */
.bk-diensten .bk-container { max-width: 1370px; }
.bk-dienst-card {
    position: relative;
    aspect-ratio: 426 / 564;
    border-radius: var(--bk-radius);
    overflow: hidden;
    background: var(--bk-black) center/cover no-repeat;
    display: flex;
    align-items: center;          /* Figma: titel/knop verticaal gecentreerd */
    justify-content: center;
}
.bk-dienst-card__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.2);   /* Figma: vlakke overlay 20% */
}
.bk-dienst-card__content {
    position: relative;
    text-align: center;
    padding: 0 24px;
    color: var(--bk-white);
}
.bk-dienst-card__title { margin-bottom: 18px; }

/* Landscape-variant: titel ONDER de kaart (Totaalconcept-projecten, Figma) */
.bk-diensten--landscape .bk-container { max-width: 1706px; }

/* Landscape-projecten zijn een horizontale slider i.p.v. een vaste grid:
   de kaarten staan op een scroll-track die met scroll-snap netjes inklikt.
   De pijl-knoppen (zie navigation.js) scrollen telkens één kaart op. */
.bk-diensten--landscape .bk-diensten__grid {
    display: flex;
    grid-template-columns: none;          /* override van de gedeelde grid-regel */
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;             /* IE/Edge: scrollbar verbergen */
    scrollbar-width: none;                /* Firefox: scrollbar verbergen */
    /* ruimte voor de focus-ring/afronding zodat niets wordt afgekapt */
    padding-bottom: 4px;
}
.bk-diensten--landscape .bk-diensten__grid::-webkit-scrollbar { display: none; }

.bk-dienst-card--landscape { display: block; aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; color: inherit; }
/* 3 kaarten zichtbaar op desktop (22px gap ertussen) */
.bk-diensten--landscape .bk-dienst-card--landscape {
    flex: 0 0 calc((100% - 2 * 22px) / 3);
    scroll-snap-align: start;
}
.bk-dienst-card--landscape .bk-dienst-card__media {
    aspect-ratio: 538 / 430;          /* Figma: landscape projectkaart */
    border-radius: var(--bk-radius);
    overflow: hidden;
    background: var(--bk-black) center/cover no-repeat;
}
.bk-dienst-card--landscape .bk-dienst-card__title { margin: 14px 0 0; text-align: left; font-size: 25px; color: var(--bk-white); }
a.bk-dienst-card--landscape:hover { text-decoration: none; }
a.bk-dienst-card--landscape:hover .bk-dienst-card__title { color: var(--bk-gold); }

/* Landscape-projecten: kop-rij (titel links + ronde pijl-knoppen rechts, Figma) */
.bk-diensten--landscape .bk-diensten__head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    margin-bottom: 34px;
}
.bk-diensten--landscape .bk-diensten__head .bk-section__title { margin-bottom: 0; }
.bk-diensten__nav { display: flex; gap: 12px; flex: 0 0 auto; }
.bk-arrow-btn {
    width: 50px; height: 50px; border-radius: 50%; border: 0;
    background: var(--bk-gold); color: var(--bk-white);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color .2s ease;
}
.bk-arrow-btn:hover { background: var(--bk-gold-dark); }
.bk-arrow-btn:disabled { opacity: .35; cursor: default; }
.bk-arrow-btn:disabled:hover { background: var(--bk-gold); }
/* Categorie-pills op de projectkaart (transparante chip met dunne witte rand,
   gelijk aan de inspiratie-kaarten zodat beide secties consistent zijn) */
.bk-dienst-card--landscape .bk-dienst-card__media { position: relative; }
.bk-dienst-card--landscape .bk-dienst-card__tags {
    position: absolute; right: 16px; top: 16px;
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
.bk-dienst-tag {
    background: transparent; color: var(--bk-white);
    border: 1px solid var(--bk-white);          /* transparante chip met dunne witte rand */
    font-family: var(--bk-font-body); font-size: 13px; line-height: 1;
    padding: 7px 16px; border-radius: var(--bk-radius-pill);
}

/* --------------------------------------------------------------------------
   Tekst + afbeelding
   -------------------------------------------------------------------------- */
/* Tekst+afbeelding gebruikt dezelfde sectie-ritmiek als de rest (var --bk-section-y),
   zodat de witruimte over alle pagina's gelijk is — geen aparte 80px meer. */
.bk-text-image__inner {
    display: grid;
    grid-template-columns: minmax(600px, 0.9fr) 1fr;   /* tekstkolom breed genoeg voor 60px-titel op één regel */
    gap: 48px;
    align-items: center;
}
.bk-text-image--links .bk-text-image__text { order: 2; }
.bk-text-image--links .bk-text-image__media { order: 1; }
.bk-text-image__title { margin-bottom: 23px; line-height: 1.2; }
.bk-text-image__body { color: var(--bk-text-muted); font-size: 18px; line-height: 26px; margin-bottom: 26px; }
.bk-text-image__media img { width: 100%; border-radius: var(--bk-radius); object-fit: cover; aspect-ratio: 950 / 546; }

/* Checklist (vinkjes) + knoppenrij in tekst+afbeelding (Figma: o.a. Totaalconcept, Over ons) */
.bk-text-image__usps { display: grid; gap: 14px; margin: 0 0 26px; }
.bk-text-image__usp { display: flex; align-items: center; gap: 14px; }
.bk-text-image__usp .check { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; background: var(--bk-gold); display: inline-flex; align-items: center; justify-content: center; }
.bk-text-image__usp .check svg { width: 11px; height: 11px; }
.bk-text-image__usp span:last-child { font-family: var(--bk-font-heading); font-weight: 600; font-size: 20px; }
.bk-text-image__buttons { display: flex; flex-wrap: wrap; gap: 22px; }

/* "Over BK"-variant: beeld rechts bloedt tot de schermrand (Figma 1:1).
   Beeld start in de container en loopt door tot rechts buiten de container. */
.bk-text-image--rechts { overflow: hidden; }   /* voorkomt horizontale scroll door sub-pixels */
@media (min-width: 1100px) {
    .bk-text-image--rechts .bk-text-image__media {
        width: calc(100% + (100vw - min(100vw, var(--bk-container))) / 2 + var(--bk-container-pad));
        margin-right: calc(-1 * ((100vw - min(100vw, var(--bk-container))) / 2 + var(--bk-container-pad)));
    }
    .bk-text-image--rechts .bk-text-image__media img {
        border-radius: var(--bk-radius) 0 0 var(--bk-radius);  /* rechts vlak tegen de rand */
    }
}

/* "Zo werken wij"-variant: beeld LINKS bloedt tot de schermrand (spiegel van --rechts) */
.bk-text-image--links { overflow: hidden; }
@media (min-width: 1100px) {
    .bk-text-image--links .bk-text-image__media {
        width: calc(100% + (100vw - min(100vw, var(--bk-container))) / 2 + var(--bk-container-pad));
        margin-left: calc(-1 * ((100vw - min(100vw, var(--bk-container))) / 2 + var(--bk-container-pad)));
    }
    .bk-text-image--links .bk-text-image__media img {
        border-radius: 0;  /* geen ronde hoeken */
    }
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
/* Kop-rij: titel links, ronde pijl-knoppen rechts (Figma) */
.bk-reviews__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
}
.bk-reviews__head .bk-section__title { margin-bottom: 0; }
.bk-reviews__nav { display: flex; gap: 12px; flex: 0 0 auto; }
.bk-reviews__arrow {
    width: 50px; height: 50px;          /* Figma: ronde knoppen 50px */
    border-radius: 50%;
    border: 0;
    background: var(--bk-gold);
    color: var(--bk-white);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease;
}
.bk-reviews__arrow:hover { background: var(--bk-gold-dark); }

/* Horizontale carousel — kaarten 426px, 4e bloedt rechts uit beeld (Figma) */
.bk-reviews__track {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* eerste kaart lijnt uit met de container; de track loopt door tot de
       rechter schermrand zodat de laatste kaart deels buiten beeld valt.
       max(...) met de container-padding zorgt dat de kaart op mobiel (smaller dan
       de container) niet tegen de schermrand plakt maar op 24px = de titelrand. */
    margin-left: max(var(--bk-container-pad), calc((100vw - min(100vw, var(--bk-container))) / 2));   /* eerste kaart op container-/titelrand */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.bk-reviews__track::-webkit-scrollbar { display: none; }

.bk-review {
    flex: 0 0 426px;                    /* Figma: 426px breed */
    height: 404px;                      /* Figma: 404px hoog */
    scroll-snap-align: start;
    background: #f5f3ee;
    border-radius: var(--bk-radius);
    padding: 42px 37px;                 /* Figma-marges in de kaart */
    overflow: hidden;
}
.bk-review__stars {
    color: #F9AE0E;                     /* Figma: stergeel #F9AE0E */
    font-size: 38px; letter-spacing: 4px; line-height: 1;   /* Figma: sterrenrij ~172px breed, glyph ~28px */
    margin-bottom: 16px;
}
.bk-review__name { margin-bottom: 9px; }
.bk-review__text { color: var(--bk-text-muted); font-size: 16px; line-height: 26px; }

/* --------------------------------------------------------------------------
   CTA-band
   -------------------------------------------------------------------------- */
.bk-cta-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: var(--bk-black);
    color: var(--bk-white);
    border-radius: var(--bk-radius);
    padding: 56px;
}
.bk-cta-band__title { margin: 0; }

/* Full-bleed beeldband-variant (achtergrond-afbeelding + overlay-tekst) */
.bk-cta-band--image {
    position: relative;
    padding-block: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: clamp(380px, 31.3vw, 601px); /* Figma: beeldband 601px hoog (601/1920 = 31.3%) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bk-white);
    text-align: center;
}
.bk-cta-band__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .2);   /* Figma: overlay 20% */
}
.bk-cta-band--image .bk-cta-band__inner {
    position: relative;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    background: none;
    border-radius: 0;
    padding: 0;
}
.bk-cta-band--image .bk-cta-band__title {
    font-size: var(--bk-h-banner);   /* 80px — bewust groter dan de rest (Figma) */
    line-height: 1.04;
    max-width: 9em;
    margin: 0 auto;
    text-wrap: balance;
}
.bk-cta-band__sub { margin: 0 auto; max-width: 52ch; font-size: 18px; line-height: 26px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .bk-diensten__grid { grid-template-columns: repeat(2, 1fr); }
    .bk-diensten--landscape .bk-dienst-card--landscape { flex: 0 0 calc((100% - 22px) / 2); }  /* 2 kaarten */
    .bk-text-image__inner { grid-template-columns: 1fr; gap: 32px; }
    .bk-text-image--links .bk-text-image__text,
    .bk-text-image--links .bk-text-image__media { order: 0; }
    .bk-cta-band__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
    .bk-diensten__grid { grid-template-columns: 1fr; }
    .bk-diensten--landscape .bk-dienst-card--landscape { flex: 0 0 86%; }  /* 1 kaart + glimp van de volgende */
    .bk-diensten.bk-dark { background: var(--bk-dark); }   /* mobiel: vlak donker i.p.v. zwarte onderband */
    .bk-review { flex-basis: 82vw; height: auto; min-height: 360px; }
    .bk-hero { min-height: 72vh; padding-top: 120px; }
    /* Minder section-padding op mobiel: standaard 40px boven+onder gaf tussen twee
       secties 80px ("padding op padding"). Verkleind zodat de tussenruimtes
       compacter ogen. (Geldt voor .bk-section en .prefooter via de var.) */
    :root { --bk-section-y: 24px; }
    .bk-cta-band--image { min-height: 60vh; }
}

/* --------------------------------------------------------------------------
   USP / stappen-grid (donkere band)
   -------------------------------------------------------------------------- */
.bk-usp-grid {
    background: linear-gradient(180deg, var(--bk-dark) 60%, var(--bk-black) 40%);
    color: var(--bk-white);
    border-radius: var(--bk-radius);
}
/* Figma: het stappen-grid is breder dan de standaardcontainer (≈1770/1920) */
.bk-usp-grid .bk-container { max-width: 1818px; }
.bk-usp-grid__title {
    margin-bottom: 29px;
    text-align: center;                  /* Figma: gecentreerde sectietitel 50px (mobiel kleiner) */
    font-size: clamp(30px, 20px + 1.6vw, 50px);
}
.bk-usp-grid__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bk-usp {
    position: relative;
    overflow: hidden;
    background: var(--bk-black);           /* Figma: zwarte vakken op de grijs->zwart sectie */
    border-radius: var(--bk-radius);
    min-height: 332px;                     /* Figma: 426x332 vak */
    padding: 82px 40px 0 39px;             /* Figma: 82px boven, 39/40px zij */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;           /* label boven, tekst eronder (zoals Figma) */
}
.bk-usp__num {
    position: absolute;
    left: 0;
    top: 55%;
    transform: translateY(-50%);
    text-align: center;
    font-family: var(--bk-font-heading);
    font-weight: 400;
    font-size: clamp(200px, 26vw, 395px); /* Figma: reusachtig achterliggend cijfer 395px */
    line-height: 1;
    color: var(--bk-dark);                /* #1f1f1f, subtiel zichtbaar op zwarte kaart */
    z-index: 0;
    pointer-events: none;
}
.bk-usp__title {
    position: relative; z-index: 1;
    font-size: var(--bk-h3);              /* Figma 40px; clamp-token → mobiel kleiner */
    color: var(--bk-white);
    margin-bottom: 20px;
}
.bk-usp__text {
    position: relative; z-index: 1;
    color: var(--bk-white);               /* Figma: vol wit, geen opacity */
    font-size: 18px; line-height: 26px;
}

/* --------------------------------------------------------------------------
   FAQ-accordeon (donkere band)
   -------------------------------------------------------------------------- */
.bk-faq { background: var(--bk-dark); color: var(--bk-white); border-radius: var(--bk-radius); }
.bk-faq__title { margin-bottom: 40px; text-align: center; }   /* Figma: gecentreerd */
.bk-faq__list { max-width: 1008px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }  /* Figma: losse balken gecentreerd, 18px tussenruimte */
.bk-faq__item { background: var(--bk-black); border-radius: 5px; }                       /* Figma: zwarte balk radius 5px */
.bk-faq__q {
    cursor: pointer;
    list-style: none;
    min-height: 47px;                     /* Figma: balkhoogte 47px */
    display: flex;
    align-items: center;
    padding: 12px 46px 12px 16px;         /* rechts ruimte voor het +-icoon (lange vragen botsen anders), verticale lucht voor 2-regelige vragen */
    font-family: var(--bk-font-heading);
    font-size: 20px;                      /* Figma: vraag 20px */
    position: relative;
}
.bk-faq__q::-webkit-details-marker { display: none; }
.bk-faq__q::after {
    content: "";
    position: absolute; right: 16px; top: 50%;
    transform: translateY(-50%);
    width: 15px; height: 15px;                  /* Figma: goud circle-plus icoon 15px */
    background: url(../img/faq-plus.svg) center/contain no-repeat;
    transition: transform .2s ease;
}
.bk-faq__item[open] .bk-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.bk-faq__a { padding: 0 16px 16px; color: rgba(255,255,255,.75); font-size: 16px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Inspiratie-grid (filterbaar)
   -------------------------------------------------------------------------- */
.bk-inspiratie { background: var(--bk-dark); color: var(--bk-white); border-radius: var(--bk-radius); }
.bk-inspiratie .bk-container { max-width: 1706px; }   /* Figma: rasterbreedte ≈1658 + marges */
.bk-insp-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 40px; }
.bk-insp-filter {
    font-family: var(--bk-font-body); font-size: 16px; line-height: 1;
    padding: 14px 26px;
    border-radius: var(--bk-radius-pill);
    border: 1px solid rgba(255,255,255,.3);          /* Figma: inactieve pill = transparant met dunne rand */
    background: transparent; color: rgba(255,255,255,.85);
    cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bk-insp-filter:hover { border-color: var(--bk-gold); color: var(--bk-white); }
.bk-insp-filter.is-active { background: var(--bk-gold); border-color: var(--bk-gold); color: var(--bk-white); }  /* Figma: actief = goud #c3b491 */

.bk-insp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 21px; }
.bk-insp-card { display: block; color: inherit; }
.bk-insp-card.is-hidden { display: none; }
.bk-insp-card__media {
    position: relative;
    aspect-ratio: 538 / 430;          /* Figma: landscape kaart 538x430 */
    border-radius: var(--bk-radius);
    overflow: hidden;
    background: var(--bk-black) center/cover no-repeat;
}
.bk-insp-card__tags { position: absolute; right: 16px; top: 16px; left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }   /* Figma: pills rechtsboven */
.bk-insp-tag {
    background: transparent; color: var(--bk-white);
    border: 1px solid var(--bk-white);          /* Figma: transparante chip met dunne witte rand */
    font-family: var(--bk-font-body); font-size: 13px; line-height: 1;
    padding: 7px 16px; border-radius: var(--bk-radius-pill);
}
.bk-insp-card__title { margin: 14px 0 0; font-size: 25px; }   /* Figma: titel ONDER de kaart op de #1f1f1f band */
a.bk-insp-card:hover { text-decoration: none; }
a.bk-insp-card:hover .bk-insp-card__title { color: var(--bk-gold); }

/* --------------------------------------------------------------------------
   Detailpagina (single bericht / project) — Figma "Inspiratie pagina 1"
   -------------------------------------------------------------------------- */
/* De detail-hero gebruikt exact dezelfde hero als de dienstenpagina's
   (.bk-hero--content in de markup): donker vlak links + titel links op desktop,
   en op mobiel een volledige donkere overlay. Zo is hij identiek aan o.a. Keukens.
   Hier alleen de eigen hoogte (Figma-detail = 574px) + de categorie-pills. */
.bk-hero--detail { min-height: clamp(360px, 29.9vw, 574px); }
.bk-hero__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bk-hero__cat {
    display: inline-block;
    background: transparent; color: var(--bk-white);
    border: 1px solid var(--bk-white);
    border-radius: var(--bk-radius-pill);
    font-family: var(--bk-font-body); font-size: 16px; line-height: 1;
    padding: 12px 24px;
}
.bk-hero--detail .bk-hero__title { margin: 0; }

/* Optionele tekst onder de hero (alleen als de redacteur tekst invult) */
.bk-detail__content { max-width: 1000px; margin: 48px auto 0; font-size: 18px; line-height: 28px; }
.bk-detail__content img { max-width: 100%; height: auto; border-radius: var(--bk-radius); }
.bk-detail__content > * + * { margin-top: 1em; }

/* Fotogalerij: 2-koloms ritme — 1 brede, 2 naast elkaar, 1 brede, herhaald.
   (Figma: brede 1319x626 → 2x 649x626 → brede 1318x403, 22px gap, radius 5px.) */
.bk-proj-gallery {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.bk-proj-gallery__item {
    margin: 0;
    border-radius: var(--bk-radius);
    overflow: hidden;
    aspect-ratio: 649 / 626;              /* standaard: bijna vierkant (2 naast elkaar) */
}
.bk-proj-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-proj-gallery__item:nth-child(4n+1) { grid-column: 1 / -1; aspect-ratio: 1319 / 626; }  /* brede, hogere */
.bk-proj-gallery__item:nth-child(4n)   { grid-column: 1 / -1; aspect-ratio: 1318 / 403; }  /* brede, lagere band */

/* "Terug naar overzicht": gouden pill, gecentreerd */
.bk-detail__back { text-align: center; padding-block: 56px 8px; }
.bk-detail__back .bk-btn { display: inline-flex; align-items: center; gap: 10px; }

@media (max-width: 600px) {
    .bk-proj-gallery { grid-template-columns: 1fr; margin-top: 32px; }
    .bk-proj-gallery__item,
    .bk-proj-gallery__item:nth-child(4n+1),
    .bk-proj-gallery__item:nth-child(4n) { grid-column: auto; aspect-ratio: 16 / 10; }
}

.bk-insp-more { display: flex; justify-content: center; margin-top: 44px; }
/* Figma: "Laad meer..." is een platte witte tekstlink, geen knop-omkadering */
.bk-insp-more__btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--bk-font-body); font-size: 16px; line-height: 1;
    color: var(--bk-white);
}
.bk-insp-more__btn:hover { text-decoration: underline; }

@media (max-width: 1024px) {
    .bk-insp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .bk-insp-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Contact-info kaarten
   -------------------------------------------------------------------------- */
/* Figma: kaartenrij x=116..1804 (grid 1688px, 116px marge), 404px per kaart.
   max-width = 1688 + 2x24px padding zodat de inhoud exact 1688px breed is. */
.bk-contact-info .bk-container { max-width: calc(1688px + var(--bk-container-pad) * 2); }
.bk-contact-info__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bk-gap); }
/* Onder 1400px passen 4 brede kaarten niet meer netjes naast elkaar → 2×2
   (en 1 kolom op mobiel, zie de max-width:600-regel verderop). */
@media (max-width: 1400px) {
    .bk-contact-info__grid { grid-template-columns: repeat(2, 1fr); }
    /* In 2 kolommen worden de kaarten breed; de 404/182-verhouding zou ze dan
       onnodig hoog/leeg maken. Vaste min-hoogte → breed-en-laag, zoals het ontwerp.
       Hogere specificiteit zodat dit de basis-aspect-ratio wint, ongeacht bronvolgorde. */
    .bk-contact-info .bk-info-card { aspect-ratio: auto; min-height: 182px; }
}
.bk-info-card {
    position: relative;
    overflow: hidden;
    background: var(--bk-black);            /* Figma: zwarte horizontale kaart */
    color: var(--bk-white);
    border-radius: var(--bk-radius);
    aspect-ratio: 404 / 182;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;             /* tekst linksonder */
    padding: 0 24px 30px 29px;
    text-align: left;
    transition: background-color .2s ease;
}
.bk-info-card:hover { background: var(--bk-gold); }
/* Klikbare kaart (hele kaart is een link): geen onderstreping, wel pointer. */
a.bk-info-card { text-decoration: none; cursor: pointer; }
a.bk-info-card:hover { text-decoration: none; }
.bk-info-card__watermark {                 /* Figma: groot, vaag icoon achter de tekst */
    position: absolute;
    right: -8px; top: 50%; transform: translateY(-50%);
    opacity: .12;
    line-height: 0;
    pointer-events: none;
    color: var(--bk-white);
}
.bk-info-card__watermark svg { width: 120px; height: 120px; fill: currentColor; }
.bk-info-card__body { position: relative; z-index: 1; }
.bk-info-card__title { font-size: var(--bk-h3); margin-bottom: 6px; color: var(--bk-white); }
.bk-info-card__text { color: var(--bk-white); font-size: 18px; margin: 0; }
.bk-info-card__link { color: var(--bk-white); font-weight: 700; }

/* Uitgelichte kaart (goud accent) — bv. de adres-kaart in het ontwerp.
   Donkere tekst voor leesbaar contrast op de gouden achtergrond. */
.bk-info-card--accent { background: var(--bk-gold); }
.bk-info-card--accent:hover { background: var(--bk-gold-dark); }
.bk-info-card--accent .bk-info-card__title,
.bk-info-card--accent .bk-info-card__text,
.bk-info-card--accent .bk-info-card__link { color: var(--bk-black); }
.bk-info-card--accent .bk-info-card__watermark { color: var(--bk-black); opacity: .14; }

/* --------------------------------------------------------------------------
   Contactformulier
   -------------------------------------------------------------------------- */
.bk-form__inner { max-width: 874px; margin-inline: auto; }
.bk-form__title { text-align: center; margin-bottom: 16px; }
.bk-form__success {
    background: #eef6ec; border: 1px solid #b7d8ad; color: #2f5d23;
    padding: 14px 18px; border-radius: var(--bk-radius); margin-bottom: 20px;
}
.bk-form__form { display: grid; gap: 21px; }
.bk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bk-form__form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.bk-form__form input,
.bk-form__form textarea {
    font-family: var(--bk-font-body); font-size: 16px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.35);   /* Figma: dunne lichte rand */
    border-radius: var(--bk-radius-pill);       /* Figma: pill-vormige velden */
    background: transparent;                    /* Figma: transparante velden */
    color: inherit;
    width: 100%;
}
.bk-form__form textarea { border-radius: var(--bk-radius); resize: vertical; min-height: 158px; }
.bk-form__form ::placeholder { color: rgba(255,255,255,.65); opacity: 1; }   /* Figma: label-als-placeholder in het veld */
.bk-form__form button { justify-self: end; margin-top: 6px; }   /* Figma: knop rechtsonder */

/* --------------------------------------------------------------------------
   Afspraak / adviesgesprek (kop + checklist; 2-koloms formulier + beeld)
   -------------------------------------------------------------------------- */
.bk-afspraak__head { margin-bottom: 40px; }
.bk-afspraak__title { margin-bottom: 24px; }
.bk-afspraak__usps { display: grid; gap: 14px; }
.bk-afspraak__usp { display: flex; align-items: center; gap: 14px; }
.bk-afspraak__usp .check { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; background: var(--bk-gold); display: inline-flex; align-items: center; justify-content: center; }
.bk-afspraak__usp .check svg { width: 11px; height: 11px; }
.bk-afspraak__usp span:last-child { font-family: var(--bk-font-heading); font-weight: 600; font-size: 20px; }

.bk-afspraak__body { display: grid; grid-template-columns: 1fr clamp(340px, 40%, 560px); gap: 54px; align-items: start; }   /* beeldkolom responsief (Figma ~606px op 1920) */
/* min-width:0 zodat de kolommen mogen krimpen: anders dwingt het upload-veld
   (nowrap-tekst + gereserveerde knopruimte) een te grote minimumbreedte af en
   loopt het formulier op smalle schermen buiten beeld. */
.bk-afspraak__main,
.bk-afspraak__media { min-width: 0; }
.bk-afspraak__media img { width: 100%; aspect-ratio: 606 / 823; object-fit: cover; object-position: center; border-radius: var(--bk-radius); display: block; }

/* Desktop: staand beeld zoals het ontwerp (verhouding 606/823 uit de basisregel).
   De foto is landschap met rechts lege showroom, dus de uitsnede ligt iets naar
   links (35%) zodat béide personen in beeld blijven i.p.v. dat de linker man
   wegvalt. max-height voorkomt extreem hoog op zeer brede schermen. */
@media (min-width: 1025px) {
    .bk-afspraak__media img { object-position: 35% center; max-height: 760px; }
}

.bk-afspraak__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.bk-afspraak__form label { display: block; margin-bottom: 16px; }
.bk-afspraak__row label { margin-bottom: 0; }
.bk-afspraak__form input,
.bk-afspraak__form select,
.bk-afspraak__form textarea {
    width: 100%; font-family: var(--bk-font-body); font-size: 16px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--bk-radius-pill);
    background: transparent; color: var(--bk-white);
}
.bk-afspraak__form input[type="date"] { color-scheme: dark; color: rgba(255,255,255,.65); }
.bk-afspraak__form select { color: rgba(255,255,255,.65); color-scheme: dark; }
/* Uitgeklapte dropdown donker (i.p.v. de witte browser-standaard) */
.bk-afspraak__form select option { background-color: var(--bk-dark); color: var(--bk-white); }
.bk-afspraak__form select option:disabled { color: rgba(255,255,255,.5); }
.bk-afspraak__form textarea { border-radius: var(--bk-radius); resize: vertical; min-height: 120px; }
.bk-afspraak__form ::placeholder { color: rgba(255,255,255,.65); opacity: 1; }

/* Hogere specificiteit dan `.bk-afspraak__form label { display:block }`, anders
   verliest deze flex-regel en plakt de "Kies bestand"-knop achter de tekst
   i.p.v. rechts. */
/* Zelfde verticale maat (padding 14px + 16px tekst) als de andere velden, zodat
   het exact even hoog is. Rechts ruimte gereserveerd voor de knop, die absoluut
   geplaatst de rechterkant flush vult — zonder de veldhoogte te beïnvloeden. */
.bk-afspraak__form label.bk-afspraak__file {
    position: relative; display: block;
    padding: 14px 175px 14px 20px;
    border: 1px solid rgba(255,255,255,.35); border-radius: var(--bk-radius-pill);
    overflow: hidden;                      /* de knop volgt de afgeronde rechterrand van het veld */
    cursor: pointer; margin-bottom: 16px;
}
.bk-afspraak__file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bk-afspraak__file-text {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: rgba(255,255,255,.65); font-size: 16px;
}
.bk-afspraak__file-btn {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 36px; font-size: 14px; font-weight: 700;
    background: var(--bk-gold); color: var(--bk-white);
    border-radius: var(--bk-radius-pill);
}
.bk-afspraak__file-icon { display: none; }   /* desktop: tekst "Kies bestand" */
.bk-afspraak__file-icon svg { display: block; width: 20px; height: 20px; }

.bk-afspraak__submit { justify-self: center; margin-top: 8px; min-width: 268px; }

@media (max-width: 1024px) {
    .bk-afspraak__body { grid-template-columns: 1fr; gap: 32px; }
    .bk-afspraak__media { order: -1; }
    /* Gestapeld vult het staande beeld de volle breedte → veel te hoog.
       Cap het tot een nette banner (object-fit: cover cropt netjes). */
    .bk-afspraak__media img { height: 360px; aspect-ratio: auto; }
    .bk-usp-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .bk-usp-grid__grid { grid-template-columns: 1fr; }
    .bk-contact-info__grid { grid-template-columns: 1fr; }
    .bk-form__row { grid-template-columns: 1fr; }
    .bk-afspraak__row { grid-template-columns: 1fr; }
    .bk-afspraak__media img { height: 230px; }   /* nog compacter op mobiel */
    /* Upload-veld blijft op één rij; de "Kies bestand"-tekst wordt op smalle
       schermen vervangen door een compacte gouden upload-icoonknop rechts, zodat
       de helptekst er ruim naast past en niets buiten beeld valt. */
    .bk-afspraak__form label.bk-afspraak__file { padding-right: 64px; }
    .bk-afspraak__file-btn { padding: 0 18px; }
    .bk-afspraak__file-label { display: none; }
    .bk-afspraak__file-icon { display: inline-flex; }
    .bk-afspraak__submit { min-width: 0; width: 100%; }
    /* Beelden hoger/zichtbaar op mobiel: content-foto's + brede beeldbanden
       4:3 i.p.v. lage landschapsstroken. (Staande beelden zoals het afspraak-
       beeld behouden hun eigen, specifiekere verhouding.) */
    .bk-text-image__media img,
    .bk-image-wide img,
    .prefooter__media img { aspect-ratio: 4 / 3; }
    /* Stappenkaarten compacter op mobiel: de 332px-min-hoogte + 82px-toppadding
       + reuzecijfer gaven veel lege ruimte per kaart. */
    .bk-usp { min-height: auto; padding: 34px 24px 30px; }
    /* Cijfer iets lichter dan #1f1f1f zodat het op de onderste kaarten (waar de
       sectie-gradient naar zwart loopt) ook leesbaar blijft — wel subtiel. */
    .bk-usp__num { font-size: 250px; color: rgba(255, 255, 255, .18); }
}

/* ==========================================================================
   1:1 ontwerp: donkere Home + donkere blok-varianten + header-overlay
   ========================================================================== */
body.home { background: var(--bk-dark); }
/* Inner-pagina's die met een hero starten: donkere achtergrond (zoals Figma). */
body.has-hero { background: var(--bk-dark); color: var(--bk-white); }

/* Hero MET tekst (binnenpagina's): tekst links uitgelijnd + leesbaarheidsgradient. */
.bk-hero--content { text-align: left; }
.bk-hero--content .bk-hero__title,
.bk-hero--content .bk-hero__intro,
.bk-hero--content .bk-hero__eyebrow { max-width: 418px; margin-left: 0; margin-right: 0; }
.bk-hero--content .bk-hero__intro { margin-bottom: 0; }
/* Figma: solide donker vlak (560/1920) dat op 200/1920 (10.42%) van links begint */
.bk-hero--content .bk-hero__overlay {
    inset: 0 auto 0 clamp(0px, 10.42vw, 200px);
    width: clamp(360px, 29.17vw, 560px);
    background: rgba(0,0,0,.47);
}
/* Tekst links uitgelijnd op de Figma-positie (x=253 ≈ 13.18%), in het donkere vlak */
.bk-hero--content .bk-hero__inner {
    max-width: none;
    margin-inline: 0;
    padding-left: clamp(24px, 13.18vw, 253px);
}

/* Per-pagina hero-hoogtes (Figma: binnenpagina-hero's korter dan de home-hero 911px) */
.page-id-16 .bk-hero,
.page-id-14 .bk-hero { min-height: clamp(360px, 29.9vw, 574px); }   /* Contact / Inspiratie: 574px */
.page-id-17 .bk-hero { min-height: clamp(420px, 36.77vw, 706px); }   /* Plan je bezoek: 706px */

/* Hero met tekstpaneel RECHTS (Figma wisselt links/rechts) — Badkamers + Vloeren.
   Alleen vanaf tablet; op mobiel (≤600px) wint de generieke full-width-links-hero
   anders zou de tekst ~230px naar rechts staan ("teveel padding links"). */
@media (min-width: 601px) {
	.page-id-10 .bk-hero--content .bk-hero__overlay,
	.page-id-12 .bk-hero--content .bk-hero__overlay { inset: 0 clamp(0px, 15.63vw, 300px) 0 auto; }
	.page-id-10 .bk-hero--content .bk-hero__inner,
	.page-id-12 .bk-hero--content .bk-hero__inner { padding-left: clamp(24px, 58.9vw, 1131px); padding-right: 24px; }
}

/* Plan je bezoek: staande, contained foto (geen full-bleed) */
.page-id-17 .bk-text-image--rechts .bk-text-image__media { width: 100%; margin-right: 0; }
.page-id-17 .bk-text-image--rechts .bk-text-image__media img { aspect-ratio: 606 / 823; border-radius: var(--bk-radius); }

/* Bedankt-pagina's (contact/adviesgesprek): hero-intro 16px met 26px witregels
   tussen de alinea's, en de "Terug naar de homepage"-knop op Figma-maat 311x47. */
.page-id-92 .bk-hero__intro,
.page-id-93 .bk-hero__intro { font-size: 16px; }
.page-id-92 .bk-hero__intro p + p,
.page-id-93 .bk-hero__intro p + p { margin-top: 26px; }   /* Figma: lege witregel 26px tussen zinnen */
.page-id-92 .bk-hero .bk-btn,
.page-id-93 .bk-hero .bk-btn { min-width: 311px; padding-block: 13px; }   /* Figma: knop 311x47 */

/* Totaalconcept (13) header "Alles goed geregeld": titel-kolom 504px, body op x=858 (Figma) */
@media (min-width: 1025px) {
	.page-id-13 .bk-text-center--twocol .bk-text-center__inner { grid-template-columns: 504px 1fr; gap: 54px; }
}

/* --------------------------------------------------------------------------
   Over ons (15): centrale tekst vol-breed + rechter tekstkolom op x=1029
   -------------------------------------------------------------------------- */
.page-id-15 .bk-text-center__inner { max-width: none; }   /* Figma: introtekst 1322px breed (5 regels) */
/* "Volledig afgestemd" (beeld links): beeld tot x=950, tekstkolom start x=1029.
   Alleen op desktop — anders overrulet deze (specifiekere) regel de
   max-width:1024px-collapse en eist de tekstkolom 650px op mobiel → overflow. */
@media (min-width: 1025px) {
	.page-id-15 .bk-text-image--links .bk-text-image__inner { grid-template-columns: 650px 1fr; gap: 79px; }
}
/* Binnenpagina-hero op mobiel (ALLE --content hero's): het smalle, ~51px
   ingesprongen donkere vlak verbreden naar volle breedte en de tekst-padding
   terugbrengen naar 24px. Anders staat de tekst te ver naar rechts ("teveel
   padding links") en/of buiten het donkere vlak. */
@media (max-width: 600px) {
	.bk-hero--content .bk-hero__overlay { inset: 0; width: auto; }
	.bk-hero--content .bk-hero__inner { padding-left: 24px; padding-right: 24px; }
	.bk-hero--content .bk-hero__title,
	.bk-hero--content .bk-hero__intro,
	.bk-hero--content .bk-hero__eyebrow { max-width: none; }
}

/* --------------------------------------------------------------------------
   Hero verticale tekstpositie (Figma: titel boven-geankerd, niet midden).
   Alleen pagina's met een gemeten Figma-titel-y; overige hero's blijven gecentreerd.
   inner-padding-top = (Figma titel-y) − 160px hero-padding-top; responsive via clamp.
   -------------------------------------------------------------------------- */
.page-id-12 .bk-hero--content,   /* Vloeren */
.page-id-15 .bk-hero--content,   /* Over ons */
.page-id-17 .bk-hero--content,   /* Plan je bezoek */
.page-id-92 .bk-hero--content,   /* Bedankt adviesgesprek */
.page-id-93 .bk-hero--content {  /* Bedankt contact */
    align-items: flex-start;
}
.page-id-12 .bk-hero--content .bk-hero__inner { padding-top: clamp(40px, 5.94vw, 114px); }  /* titel-y 274 */
.page-id-15 .bk-hero--content .bk-hero__inner { padding-top: clamp(40px, 9.48vw, 182px); }  /* titel-y 342 */
.page-id-17 .bk-hero--content .bk-hero__inner { padding-top: clamp(40px, 6.41vw, 123px); }  /* titel-y 283 */
.page-id-92 .bk-hero--content .bk-hero__inner,
.page-id-93 .bk-hero--content .bk-hero__inner { padding-top: clamp(30px, 5.31vw, 102px); }   /* titel-y 262 */

/* Header zweeft (transparant) over de hero op elke pagina die met een hero begint;
   de vaste positie + donkere balk-bij-scrollen komen van de .site-header-basis in style.css. */
.has-hero .site-branding .site-title { color: var(--bk-white); }

/* Donkere blok-variant */
.bk-dark { background: var(--bk-dark); color: var(--bk-white); }

/* "Over BK Woonconcept"-sectie: donkere achtergrond (#1f1f1f). */
.bk-text-image.bk-dark { background: var(--bk-dark); }
/* Zwart-variant per blok (Figma: o.a. "Laat je inspireren" op #000). */
.bk-text-image.bk-text-image--black { background: var(--bk-black); }

/* Diensten-sectie: onderste deel is zwart (Figma Rectangle 14, #000) — de
   kaarten overlappen de grijs/zwart-grens en het zwart sluit naadloos aan op
   de "Wij denken mee"-banner eronder. Zwart begint op ~63% van de sectie. */
.bk-diensten.bk-dark {
    background: linear-gradient(to bottom, var(--bk-dark) 63%, var(--bk-black) 63%);
}
/* Donkere koppen wit — expliciet per blok-klasse i.p.v. een bare `.bk-dark h2,h3`
   die over álle donkere blokken tegelijk lekte (usp-grid/faq zetten hun eigen wit). */
.bk-dark .bk-section__title,
.bk-dark .bk-text-center__title,
.bk-dark .bk-text-image__title { color: var(--bk-white); }
.bk-dark .bk-text-center__body,
.bk-dark .bk-text-image__body { color: var(--bk-white); }

/* Reviews donker (zoals ontwerp) */
.bk-reviews.bk-dark { background: var(--bk-dark); }             /* Figma: band #1f1f1f */
.bk-reviews.bk-dark .bk-review { background: var(--bk-black); } /* Figma: kaarten #000 steken af op de grijze band */
.bk-reviews.bk-dark .bk-review__name { color: var(--bk-white); }
.bk-reviews.bk-dark .bk-review__text { color: var(--bk-white); }  /* Figma: vol wit */

/* Pre-footer donker (sluit naadloos aan op de zwarte footer) */
.prefooter { background: var(--bk-dark); color: var(--bk-white); }
.prefooter__intro { color: var(--bk-white); }   /* Figma: vol wit */
.prefooter__usp span { color: var(--bk-white); }
.prefooter__buttons .bk-btn--outline { color: var(--bk-white); border-color: var(--bk-white); }
.prefooter__buttons .bk-btn--outline:hover { background: var(--bk-white); color: var(--bk-black); }

/* Hero: muis-scroll-indicator onderaan (klikbaar) — padding-bottom staat in de
   hoofd-.bk-hero-regel hierboven (was hier dubbel gedeclareerd). */
.bk-hero__scroll {
    position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
    width: 66px; height: 66px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,.85);
    transition: color .2s ease, transform .2s ease;
    animation: bk-hero-scroll-bounce 2s ease-in-out infinite;
}
.bk-hero__scroll:hover { color: #fff; }
.bk-hero__scroll-arrow {
    animation: bk-hero-scroll-arrow 2s ease-in-out infinite;
}
@keyframes bk-hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}
@keyframes bk-hero-scroll-arrow {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-hero__scroll, .bk-hero__scroll-arrow { animation: none; }
}

/* Hero achtergrond-video */
.bk-hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.bk-hero__overlay { z-index: 1; }
.bk-hero__inner { z-index: 2; }
.bk-hero__scroll { z-index: 2; }

/* Hero achtergrond-slideshow: foto's gestapeld, wisselen met een fade (zie navigation.js) */
.bk-hero__slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.bk-hero__slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.1s ease;
}
.bk-hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .bk-hero__slide { transition: none; }
}

/* Hero-foto: langzame, subtiele in-/uitzoom (Ken Burns) — puur CSS, GPU-versneld.
   Geldt voor de losse foto én de slideshow (die zoomt als geheel mee tijdens het faden). */
.bk-hero__photo {
    position: absolute; inset: 0; z-index: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Alleen de Contact-pagina: foto vanaf de bovenkant uitlijnen. */
.page-id-16 .bk-hero__photo { background-position: top; }
/* Niveau instelbaar via ACF (data-zoom op de hero): elk niveau z'n eigen zoom + tempo. */
.bk-hero                       { --bk-zoom-scale: 1.20; --bk-zoom-time: 16s; }   /* standaard = Sterk */
.bk-hero[data-zoom="rustig"]   { --bk-zoom-scale: 1.08; --bk-zoom-time: 24s; }
.bk-hero[data-zoom="normaal"]  { --bk-zoom-scale: 1.14; --bk-zoom-time: 20s; }
.bk-hero[data-zoom="sterk"]    { --bk-zoom-scale: 1.20; --bk-zoom-time: 16s; }
.bk-hero__photo,
.bk-hero__slideshow {
    transform-origin: center;
    animation: bk-hero-zoom var(--bk-zoom-time, 16s) ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes bk-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(var(--bk-zoom-scale, 1.20)); }
}
/* 'Geen' of prefers-reduced-motion: geen beweging. */
.bk-hero[data-zoom="geen"] .bk-hero__photo,
.bk-hero[data-zoom="geen"] .bk-hero__slideshow { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .bk-hero__photo,
    .bk-hero__slideshow { animation: none; transform: none; }
}


/* --------------------------------------------------------------------------
   Scroll-reveal: elementen faden zacht omhoog in beeld bij het scrollen.
   Alleen actief als <html> de .bk-anim-class heeft (die JS in de <head> zet,
   uitsluitend bij IntersectionObserver-steun én zonder reduced-motion). Zonder
   JS of bij reduced-motion blijft alles gewoon zichtbaar — progressive enhancement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .bk-anim .bk-section__title,
    .bk-anim .bk-text-center__inner,
    .bk-anim .bk-text-image__text,
    .bk-anim .bk-text-image__media,
    .bk-anim .bk-image-wide,
    .bk-anim .bk-voor-na__item,
    .bk-anim .bk-usp,
    .bk-anim .bk-dienst-card:not(.bk-dienst-card--landscape),
    .bk-anim .bk-insp-card,
    .bk-anim .bk-info-card,
    .bk-anim .bk-faq__item,
    .bk-anim .bk-cta-band__inner,
    .bk-anim .bk-reviews__head,
    .bk-anim .bk-diensten__head,
    .bk-anim .prefooter__intro-col,
    .bk-anim .prefooter__cta-col,
    .bk-anim .prefooter__media,
    .bk-anim .bk-afspraak__main,
    .bk-anim .bk-afspraak__media,
    .bk-anim .bk-proj-gallery__item,
    .bk-anim .footer-col {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
        transition-delay: var(--bk-reveal-delay, 0ms);
    }
    .bk-anim .is-visible {
        opacity: 1 !important;
        transform: none !important;
    }
}