.elementor-kit-6{--e-global-color-primary:#000000;--e-global-color-secondary:#9D9D9D;--e-global-color-text:#000000;--e-global-color-accent:#9D9D9D;--e-global-typography-primary-font-family:"europa";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"aptos";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"aptos";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"aptos";--e-global-typography-accent-font-weight:500;--e-global-typography-3817790f-font-family:"europa";--e-global-typography-3817790f-font-size:30px;--e-global-typography-3817790f-font-weight:700;--e-global-typography-3817790f-text-transform:lowercase;--e-global-typography-65fb082c-font-family:"europa";--e-global-typography-65fb082c-font-size:18px;--e-global-typography-65fb082c-font-weight:700;--e-global-typography-65fb082c-text-transform:lowercase;--e-global-typography-566ff466-font-family:"europa";--e-global-typography-566ff466-font-size:30px;--e-global-typography-566ff466-font-weight:700;--e-global-typography-566ff466-text-transform:lowercase;--e-global-typography-e2decce3-font-family:"aptos";--e-global-typography-e2decce3-font-size:20px;--e-global-typography-e2decce3-font-weight:400;--e-global-typography-3f054875-font-family:"aptos";--e-global-typography-3f054875-font-size:20px;--e-global-typography-3f054875-font-weight:400;--e-global-typography-ce04cbc6-font-family:"europa";--e-global-typography-ce04cbc6-font-size:clamp(32px, 4vw, 52px);--e-global-typography-ce04cbc6-font-weight:700;--e-global-typography-ce04cbc6-text-transform:none;--e-global-typography-1ac41b30-font-family:"europa";--e-global-typography-1ac41b30-font-size:clamp(26px, 3.2vw, 36px);--e-global-typography-1ac41b30-font-weight:700;--e-global-typography-1ac41b30-text-transform:none;--e-global-typography-1a83949a-font-family:"aptos";--e-global-typography-1a83949a-font-size:18px;--e-global-typography-1a83949a-font-weight:400;--e-global-typography-b63e94de-font-family:"aptos";--e-global-typography-b63e94de-font-size:18px;--e-global-typography-b63e94de-font-weight:400;--e-global-typography-b59ccec1-font-family:"europa";--e-global-typography-b59ccec1-font-size:clamp(34px, 5.5vw, 68px);--e-global-typography-b59ccec1-font-weight:700;--e-global-typography-b59ccec1-text-transform:none;--e-global-typography-b59ccec1-line-height:1.15em;--e-global-typography-c41879ba-font-family:"europa";--e-global-typography-c41879ba-font-size:clamp(36px, 7vw, 96px);--e-global-typography-c41879ba-font-weight:700;--e-global-typography-c41879ba-text-transform:lowercase;--e-global-typography-85b1fe64-font-family:"europa";--e-global-typography-85b1fe64-font-size:clamp(32px, 6vw, 80px);--e-global-typography-85b1fe64-font-weight:700;--e-global-typography-ff5ea92e-font-family:"europa";--e-global-typography-ff5ea92e-font-size:clamp(32px, 6vw, 72px);--e-global-typography-ff5ea92e-font-weight:700;--e-global-typography-ff5ea92e-text-transform:lowercase;--e-global-typography-aeaf63b6-font-family:"aptos";--e-global-typography-aeaf63b6-font-size:18px;--e-global-typography-aeaf63b6-font-weight:400;--e-global-typography-c9bb83d8-font-family:"europa";--e-global-typography-c9bb83d8-font-size:clamp(26px, 3vw, 38px);--e-global-typography-c9bb83d8-font-weight:700;--e-global-typography-c9bb83d8-text-transform:none;--e-global-typography-b6396485-font-family:"aptos";--e-global-typography-b6396485-font-size:18px;--e-global-typography-b6396485-font-weight:400;--e-global-typography-0d199cd4-font-family:"aptos";--e-global-typography-0d199cd4-font-size:18px;--e-global-typography-0d199cd4-font-weight:400;--e-global-typography-e581acf4-font-family:"europa";--e-global-typography-e581acf4-font-size:18px;--e-global-typography-e581acf4-font-weight:700;--e-global-typography-e581acf4-text-transform:lowercase;--e-global-typography-4a4e778d-font-family:"europa";--e-global-typography-4a4e778d-font-size:18px;--e-global-typography-4a4e778d-font-weight:700;--e-global-typography-cb78d507-font-family:"europa";--e-global-typography-cb78d507-font-size:22px;--e-global-typography-cb78d507-font-weight:700;--e-global-typography-cb78d507-text-transform:none;--e-global-typography-a9f67930-font-family:"europa";--e-global-typography-a9f67930-font-size:clamp(32px, 6vw, 76px);--e-global-typography-a9f67930-font-weight:700;--e-global-typography-a9f67930-text-transform:none;--e-global-typography-c6030335-font-family:"europa";--e-global-typography-c6030335-font-size:clamp(24px, 3vw, 32px);--e-global-typography-c6030335-font-weight:700;--e-global-typography-c6030335-text-transform:none;--e-global-typography-655f4746-font-family:"aptos";--e-global-typography-655f4746-font-size:18px;--e-global-typography-655f4746-font-weight:400;--e-global-typography-ee60e9dd-font-family:"europa";--e-global-typography-ee60e9dd-font-size:18px;--e-global-typography-ee60e9dd-font-weight:700;--e-global-typography-d4140e27-font-family:"europa";--e-global-typography-d4140e27-font-size:clamp(28px, 3.5vw, 40px);--e-global-typography-d4140e27-font-weight:700;--e-global-typography-d4140e27-text-transform:none;--e-global-typography-3d50b6b1-font-family:"aptos";--e-global-typography-3d50b6b1-font-size:18px;--e-global-typography-3d50b6b1-font-weight:400;--e-global-typography-0d2db424-font-family:"europa";--e-global-typography-0d2db424-font-size:clamp(16px, 1.6vw, 20px);--e-global-typography-0d2db424-font-weight:700;--e-global-typography-0d2db424-text-transform:none;--e-global-typography-0fb445d4-font-family:"europa";--e-global-typography-0fb445d4-font-size:20px;--e-global-typography-0fb445d4-font-weight:700;--e-global-typography-838747db-font-family:"aptos";--e-global-typography-838747db-font-size:18px;--e-global-typography-838747db-font-weight:400;--e-global-typography-25d42de1-font-family:"aptos";--e-global-typography-25d42de1-font-size:18px;--e-global-typography-25d42de1-font-weight:400;--e-global-typography-25d42de1-text-decoration:underline;--e-global-typography-a6a7172d-font-family:"europa";--e-global-typography-a6a7172d-font-size:22px;--e-global-typography-a6a7172d-font-weight:700;--e-global-typography-adf58b9c-font-family:"aptos";--e-global-typography-adf58b9c-font-size:18px;--e-global-typography-adf58b9c-font-weight:400;--e-global-typography-adf58b9c-text-transform:lowercase;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */span.swiper-pagination-bullet {
    width: 80px;
    border-radius: 0px;
    height: 1px;
}


.fotogallerij .elementor-image-gallery .gallery-item img {
    margin: 0 auto;
    height: 160px;
    object-fit: cover!important;
}

.header-nav-hover .elementor-item {
    position: relative !important;
    padding-left: 14px !important;
    transition: padding-left 0.2s ease !important;
}
.header-nav-hover .elementor-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -2px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background-color: transparent !important;
    transition: background-color 0.2s ease;
    pointer-events: none;
}
.header-nav-hover .current-menu-item > .elementor-item::before,
.header-nav-hover .elementor-item-active::before,
.header-nav-hover .elementor-item.elementor-item-active::before {
    background-color: currentColor !important;
}
.header-nav-hover .current-menu-item > .elementor-item,
.header-nav-hover .elementor-item-active,
.header-nav-hover .elementor-item.elementor-item-active,
.header-nav-hover .elementor-item:hover {
    padding-left: 22px !important;
}

.elementor-element-db5dd36 .elementor-heading-title { color: #FFFFFF !important; }




.dot-accordion .elementor-accordion {
    border: none;
}
.dot-accordion .elementor-accordion-item {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.dot-accordion .elementor-accordion-item:not(:first-child) {
    border-top: 1px solid rgba(0,0,0,0.12);
}
.dot-accordion .elementor-tab-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 24px 0 24px 30px;
    background: none;
    border: none;
    font-family: "aptos", sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: lowercase;
    color: #000;
    position: relative;
    transition: padding-left 0.2s ease;
}
.dot-accordion .elementor-tab-title.elementor-active,
.dot-accordion .elementor-tab-title:hover {
    padding-left: 38px;
}
.dot-accordion .elementor-accordion-title {
    color: #000;
}
.dot-accordion .elementor-tab-title:focus {
    color: #000;
}
.dot-accordion .elementor-accordion-icon {
    display: none !important;
}
.dot-accordion .elementor-tab-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid currentColor;
    transition: background-color 0.2s ease;
}
.dot-accordion .elementor-tab-title.elementor-active::before,
.dot-accordion .elementor-tab-title:hover::before {
    background-color: currentColor;
}
.dot-accordion .elementor-tab-content {
    padding: 0;
    border: none;
    color: rgba(0,0,0,0.68);
    font-family: "aptos", sans-serif;
    font-size: 18px;
    line-height: 1.6;
}
.dot-accordion .elementor-tab-content ul {
    list-style: none;
    margin: 0;
    padding: 0 0 28px;
    display: grid;
    gap: 10px;
}
.dot-accordion .elementor-tab-content li {
    font-family: "aptos", sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(0,0,0,0.68);
    padding-left: 20px;
    position: relative;
}
.dot-accordion .elementor-tab-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
}


.navdot {
    position: relative;
    display: inline-block;
    color: inherit;
}
.navdot-prev { padding-left: 22px; }
.navdot-next { padding-right: 22px; }
.navdot a {
    position: relative;
}
.navdot a::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
}
.navdot-prev a::after { left: -22px; right: 0; }
.navdot-next a::after { left: 0; right: -22px; }
.navdot::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid currentColor;
    transition: background-color 0.2s ease;
}
.navdot-prev::before { left: 0; }
.navdot-next::before { right: 0; }
.elementor-element-proj-nav-prev:hover .navdot-prev::before,
.elementor-element-proj-nav-next:hover .navdot-next::before {
    background-color: currentColor;
}
.elementor-element-proj-nav-prev:hover .navdot-prev,
.elementor-element-proj-nav-next:hover .navdot-next {
    transform: translateX(4px);
}
.elementor-element-proj-nav-prev .elementor-widget-image img,
.elementor-element-proj-nav-next .elementor-widget-image img {
    border-radius: 4px;
    transform: scale(1.08);
    transition: transform 0.6s ease;
}
.elementor-element-proj-nav-prev:hover .elementor-widget-image img,
.elementor-element-proj-nav-next:hover .elementor-widget-image img {
    transform: scale(1);
}
.elementor-element-proj-nav-prev .elementor-widget-image,
.elementor-element-proj-nav-next .elementor-widget-image {
    overflow: hidden;
    border-radius: 4px;
    flex-shrink: 0;
}


/* Actueel article prev/next nav (Elementor Pro's post-navigation widget):
   same outline-circle dot as the project prev/next nav, instead of the old
   knop-cirkel.svg icon. */
.elementor-post-navigation .post-navigation__arrow-wrapper {
    position: relative;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.elementor-post-navigation .post-navigation__arrow-wrapper svg {
    display: none;
}
.elementor-post-navigation .post-navigation__arrow-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background-color: transparent;
    transition: background-color 0.2s ease;
}
.elementor-post-navigation__link a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.elementor-post-navigation__link:hover .post-navigation__arrow-wrapper::before {
    background-color: currentColor;
}


.proj-hero-fixed {
    position: relative;
}
.proj-hero-fill-img {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}
.proj-hero-fill-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.proj-hero-fixed [data-id="proj-hero-title"] {
    z-index: 2;
}


.hero-title-wrap-fixed {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 64px;
    padding-left: clamp(20px, 4vw, 64px);
    padding-right: clamp(20px, 4vw, 64px);
    z-index: 3;
    text-align: left;
}


.team-card-img {
    margin-bottom: 16px;
}
.team-card-img .elementor-widget-container,
.team-card-img.elementor-widget-image {
    border-radius: 4px;
    overflow: hidden;
}
.team-card-img img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    transition: transform 0.5s ease;
}


.bct-filter-widget .filter-title {
    display: none;
}
.bct-filter-widget .bpfwe-taxonomy-wrapper {
    display: inline-block;
}
.bct-filter-widget ul.taxonomy-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bct-filter-widget .taxonomy-filter li.parent-term {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}
.bct-filter-widget .taxonomy-filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "aptos", sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-transform: lowercase;
    color: rgba(0,0,0,0.45);
    cursor: pointer;
    margin: 0;
}
.bct-filter-widget .taxonomy-filter label::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid currentColor;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}
.bct-filter-widget .taxonomy-filter input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.bct-filter-widget .taxonomy-filter label:has(input:checked) {
    color: #000000;
}
.bct-filter-widget .taxonomy-filter label:has(input:checked)::before {
    background-color: currentColor;
}
.bct-filter-widget .low-group-trigger {
    display: none;
}
.bct-filter-widget .reset-form {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-family: "aptos", sans-serif;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: lowercase;
    color: rgba(0,0,0,0.45) !important;
    cursor: pointer;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    order: -1;
}
.bct-filter-widget .reset-form:hover {
    background: none !important;
    color: #000 !important;
}
.bct-filter-widget .reset-form::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid currentColor;
    flex-shrink: 0;
}
.bct-filter-widget form.form-tax {
    display: flex;
    align-items: center;
}
.bct-filter-widget .flex-wrapper.expertise {
    display: flex;
    align-items: center;
}





.visual-fullwidth-img img {
    width: 100%;
    max-height: 640px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.visual-fullwidth-video {
    border-radius: 4px;
    overflow: hidden;
}
.visual-fullwidth-video .elementor-wrapper,
.visual-fullwidth-video .elementor-video {
    border-radius: 4px;
    overflow: hidden;
}


/* Actueel single-article template */
.elementor-element-35fb6b1 img { border-radius: 4px; }
.elementor-element-art-content p { margin: 0 0 24px; font-family: 'aptos', sans-serif; font-size: 19px; line-height: 1.7; color: #000; }
.elementor-element-art-content p:last-child { margin-bottom: 0; }
.elementor-element-art-content h2 { font-family: 'europa', sans-serif; font-weight: 700; font-size: 28px; margin: 48px 0 18px; }
.elementor-element-art-content h3 { font-family: 'europa', sans-serif; font-weight: 700; font-size: 22px; margin: 36px 0 14px; }
.elementor-element-art-content a { text-decoration: underline; transition: opacity 0.2s ease; }
.elementor-element-art-content a:hover { opacity: 0.6; }
.elementor-element-art-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0 24px; }


/* Homepage hero scroll-cue icon overlaps the wrapped 3-line title on mobile; hide it below tablet */
@media (max-width: 767px) {
    .elementor-element-9251304 { display: none !important; }
}


/* Projects filter widget: expertise + type_gebouw groups are a fixed nowrap row from the
   BPFWE plugin's own CSS, so on mobile they get squeezed into two illegible ~130px columns.
   Let them wrap onto their own lines below tablet. */
@media (max-width: 767px) {
    .bct-filter-widget .form-tax { flex-wrap: wrap; }
    .bct-filter-widget .flex-wrapper { width: 100% !important; flex-basis: 100% !important; }
}

/* Mobile: collapse the filter widget behind a "filters" toggle button
   (injected by bct-mobile-filter-toggle.php) instead of always showing the
   full expertise + filters checkbox list, which otherwise eats a lot of
   vertical space before any projects are visible. Desktop/tablet keep the
   always-expanded layout above. */
.bct-filter-toggle {
    display: none;
}
@media (max-width: 767px) {
    /* The BPFWE plugin generates its own #filter-<id> { display: flex !important; }
       rule for this widget's form, which as an ID .elementor-kit-6 beats a plain class
       override even with !important on both sides — so the collapsed/expanded
       state below has to be pinned to that same ID to actually win. */
    .bct-filter-widget .form-tax,
    .bct-filter-widget #filter-da145ca {
        display: none !important;
    }
    .bct-filter-widget.bct-filters-open .form-tax,
    .bct-filter-widget.bct-filters-open #filter-da145ca {
        display: flex !important;
    }
    .bct-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        font-family: "aptos", sans-serif;
        font-weight: 700;
        font-size: 18px;
        text-transform: lowercase;
        color: #000;
    }
    .bct-filter-toggle::before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid currentColor;
        transition: background-color 0.2s ease;
        flex-shrink: 0;
    }
    .bct-filter-toggle[aria-expanded="true"]::before {
        background-color: currentColor;
    }
}

/* Above mobile: each filter group (expertise, type_gebouw) was being forced
   to an equal ~50/50 split of the row via flex-shrink, so a 6-item group
   ran out of room and wrapped onto its own second line even though the row
   as a whole had plenty of space. Let each group size to its own content
   instead so they sit side by side on one line. */
@media (min-width: 768px) {
    .bct-filter-widget .flex-wrapper {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .bct-filter-widget form.form-tax {
        flex-wrap: nowrap;
        gap: 48px;
    }
}


/* Legal pages (algemene voorwaarden, privacyverklaring) body typography */
.elementor-element-legal-text h3 { font-family: 'europa', sans-serif; font-weight: 700; font-size: 22px; margin: 40px 0 14px; }
.elementor-element-legal-text p { margin: 0 0 20px; }
.elementor-element-legal-text ul { margin: 0 0 20px; padding-left: 20px; }
.elementor-element-legal-text li { margin-bottom: 6px; }
.elementor-element-legal-text a { text-decoration: underline; transition: opacity 0.2s ease; }
.elementor-element-legal-text a:hover { opacity: 0.6; }


/* Scroll fly-in reveal for headings and photos (matches bctarchitecten.nl's
   subtle fade + rise entrance). Class is toggled by JS in bct-scroll-reveal.php. */
.bct-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bct-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .bct-reveal { opacity: 1; transform: none; transition: none; }
}


/* Project card image zoom-in on hover: clip to the card's own bounds so the
   zoomed photo doesn't spill past the card edges. Reverted to the simple,
   unconditional version — the .is-visible-scoped attempts (combined or not
   with the .bct-reveal transform) kept causing the photo to visibly "grow"
   instead of cleanly relaxing on hover. This trades away the scroll fly-in
   motion for this specific image (it still fades in via .bct-reveal's own
   opacity transition, just without the translateY rise), in favour of the
   hover zoom reliably matching the confirmed-good original behaviour:
   resting at 110%, relaxing to 100% on hover, every time. */
.project-card-hover .elementor-widget-image {
    overflow: hidden;
}
.project-card-hover .elementor-widget-image img {
    transform: scale(1.1);
    transition: transform 0.8s ease;
}
.project-card-hover:hover .elementor-widget-image img {
    transform: scale(1);
}


/* Dynamic image tags render a literal broken src ("http://Null") when the
   bound ACF image field is empty (e.g. a project with no real photo on the
   live site). Hide it so the container's own background/color shows through
   cleanly instead of a broken-image icon. */
img[src*="://Null"], img[src="Null"] { display: none !important; }


/* Project card image: dark fallback background for the rare project with no
   real photo on the live site, so the card shows a clean frame instead of an
   empty/broken image. Invisible on every card that has a real photo, since
   the photo fully covers this background. */


.elementor-element-2f08d18 { min-height: 300px; }


/* Dark fallback background ONLY for the two projects with no real photo on
   the live site (Engineering elektrische regelstations, Meerjaren
   onderhoudsplannen onderwijs) — scoped by post ID so it never sits behind
   the fly-in reveal on any of the other 59 project photos. */
.post-1328 .elementor-element-2f08d18,
.post-1335 .elementor-element-2f08d18,
.post-1328 .elementor-element-proj-hero,
.post-1335 .elementor-element-proj-hero { background-color: #111111 !important; }


/* Actueel card photo: same effect as the project loop photo (image starts
   zoomed in slightly and relaxes to its normal size on hover), without the
   card/frame itself changing size. Applied via a ::before overlay (instead of
   background-size percentages) so the image always properly covers the card
   at every step of the animation — background-size alone left gaps that
   caused the browser to tile/repeat the image. */
.elementor-element-46c6381 {
    position: relative;
    overflow: hidden;
}
.elementor-element-46c6381::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: scale(1.1);
    transition: transform 0.8s ease;
}
.e-loop-item:hover .elementor-element-46c6381::before {
    transform: scale(1);
}


/* Ons Bureau groepsfoto: framed/contained instead of full-bleed */
.elementor-element-ob-groepsfoto img { border-radius: 4px; }
.elementor-element-ob-groepsfoto { padding: 24px 24px 40px; }


/* Standalone heading-widget links (404 quick-links, "alle projecten" back-link):
   dot fades in on hover, matching the header/footer nav dot-hover pattern \u2014
   applied here too per the "cirkel op hover" instruction, since these use a
   single Elementor heading widget (<p><a>text</a></p>), not a nav-menu list. */
.dot-link-heading .elementor-heading-title a {
    position: relative;
    display: inline-block;
    padding-left: 18px;
    text-decoration: none;
    transition: padding-left 0.2s ease;
}
.dot-link-heading .elementor-heading-title a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background-color: transparent;
    transition: background-color 0.2s ease;
}
.dot-link-heading .elementor-heading-title a:hover::before {
    background-color: currentColor;
}
.dot-link-heading .elementor-heading-title a:hover {
    padding-left: 26px;
}


/* Standalone buttons (lees meer, CTA links): same outline-circle dot as
   everywhere else on the site instead of the old separate SVG icon +
   black/white-circle-fill hover ("knophover"/"knophover2"), per client
   feedback that it should match the project-loop title dot. currentColor
   means this works unchanged on both dark and light button text colors. */
.btn-dot .elementor-button-icon {
    display: none;
}
.btn-dot .elementor-button-content-wrapper {
    position: relative;
    display: inline-flex;
    padding-left: 18px;
    transition: padding-left 0.2s ease;
}
.btn-dot .elementor-button-content-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background-color: transparent;
    transition: background-color 0.2s ease;
}
.btn-dot .elementor-button:hover .elementor-button-content-wrapper::before {
    background-color: currentColor;
}
.btn-dot .elementor-button:hover .elementor-button-content-wrapper {
    padding-left: 26px;
}


/* Project card title: new consistent dot-circle (outline always visible,
   filled on hover of the card), matching the accordion / nav-dot style. */
.project-card-hover .elementor-widget-heading .elementor-heading-title {
    position: relative;
    display: inline-block;
    padding-left: 18px;
    transition: padding-left 0.2s ease;
}
.project-card-hover .elementor-widget-heading .elementor-heading-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background-color: transparent;
    transition: background-color 0.2s ease;
}
.project-card-hover:hover .elementor-widget-heading .elementor-heading-title::before {
    background-color: currentColor;
}
.project-card-hover:hover .elementor-widget-heading .elementor-heading-title {
    padding-left: 26px;
}


/* Project links inside the dienstenoverzicht accordion: black + underlined
   instead of the theme's default pink link color. */
.dot-accordion .elementor-tab-content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease;
}
.dot-accordion .elementor-tab-content a:hover {
    opacity: 0.6;
}



/* Footer: make sure the full-footer hover-video background sits behind
   all footer content (title, nav, contact, social, legal). */
[data-elementor-type="footer"] {
    position: relative;
}
[data-elementor-type="footer"] > .elementor-element {
    position: relative;
    z-index: 1;
}


/* Force the footer video background widget's own Elementor wrapper to
   span the full footer (its inline position:absolute content otherwise
   collapses to 0 height inside an auto-height wrapper). */
.elementor-element-footer-video-bg {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none;
}


/* Mobile menu popup — rebuilt. The nav-menu widget now uses Elementor's
   "vertical" layout instead of "dropdown", so this is a plain always-visible
   list (no hidden/collapsed state relying on extra CSS to force it open).
   Reuses .header-nav-hover's dot mechanics, just sized up to match the much
   larger menu text. */
.mobile-menu-list .elementor-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mobile-menu-list .elementor-item {
    font-family: europa, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(28px, 8vw, 38px) !important;
    text-transform: lowercase !important;
    color: #fff !important;
    padding: 0 !important;
    padding-left: 26px !important;
}
.mobile-menu-list .elementor-item::before {
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    border-width: 2px !important;
}
.mobile-menu-list .current-menu-item > .elementor-item,
.mobile-menu-list .elementor-item-active,
.mobile-menu-list .elementor-item.elementor-item-active {
    padding-left: 38px !important;
}


/* ============================================================
   Full-black theme: Expertises hub + Architecten/Ingenieurs/
   Adviseurs discipline pages ("exclusieve look" per client).
   Scoped via the shared .bct-dark-page body class (added by
   bct-dark-pages.php) rather than repeating page-id-N per page. */
.bct-dark-page {
    background-color: #000000;
}

/* Header: black banner on these pages only. Shared by .bct-dark-page (full
   black-page treatment) and .bct-dark-header (header only, e.g. Duurzaamheid
   — rest of that page stays as-is). The logo is a black SVG everywhere
   else, so it's flipped white here with a filter instead of needing a
   second logo asset/setting. The sticky header's outer wrapper
   (elementor-element-45473dc) carries its own white background
   independently of [data-elementor-type="header"], both in its normal-flow
   spacer state and its position:fixed stuck state — without this it shows
   as a white bar above/behind the black header. */
.bct-dark-page [data-elementor-type="header"],
.bct-dark-header [data-elementor-type="header"],
.bct-dark-page .elementor-element-45473dc,
.bct-dark-header .elementor-element-45473dc {
    background-color: #000000 !important;
}
.bct-dark-page [data-elementor-type="header"] img,
.bct-dark-header [data-elementor-type="header"] img {
    filter: brightness(0) invert(1);
}
.bct-dark-page [data-elementor-type="header"] .elementor-item,
.bct-dark-header [data-elementor-type="header"] .elementor-item,
.bct-dark-page [data-elementor-type="header"] .elementor-button,
.bct-dark-header [data-elementor-type="header"] .elementor-button,
.bct-dark-page [data-elementor-type="header"] .elementor-button-text,
.bct-dark-header [data-elementor-type="header"] .elementor-button-text {
    color: #ffffff !important;
}

/* Body copy: headings, paragraphs, links */
.bct-dark-page .elementor-heading-title {
    color: #ffffff !important;
}
.bct-dark-page .elementor-widget-text-editor,
.bct-dark-page .elementor-widget-text-editor p {
    color: rgba(255,255,255,0.85) !important;
}
.bct-dark-page .elementor-widget-text-editor a {
    color: #ffffff !important;
}

/* Services accordion (.dot-accordion): light dividers and copy instead
   of the black-on-white version used on other pages. */
.bct-dark-page .dot-accordion .elementor-tab-title,
.bct-dark-page .dot-accordion .elementor-accordion-title,
.bct-dark-page .dot-accordion .elementor-tab-title:focus {
    color: #ffffff !important;
}
.bct-dark-page .dot-accordion .elementor-accordion-item:not(:first-child) {
    border-top-color: rgba(255,255,255,0.18) !important;
}
.bct-dark-page .dot-accordion .elementor-tab-content,
.bct-dark-page .dot-accordion .elementor-tab-content li {
    color: rgba(255,255,255,0.72) !important;
}
.bct-dark-page .dot-accordion .elementor-tab-content a {
    color: #ffffff !important;
}

/* Project-loop card titles sit directly on the black page background
   here (no white card behind them like on the main projects page). */
.bct-dark-page .project-card-hover .elementor-widget-heading .elementor-heading-title {
    color: #ffffff !important;
}












/* Sitewide minimum text size: nothing should render smaller than 18px. This is the base fallback that widgets without an explicit override inherit (theme default was 16px), added after finding several elements were silently falling back to this 16px base due to an Elementor typography-linking issue. */
body { font-size: 18px; }


/* "Uitgelichte projecten" inside the diensten-accordion tabs: small photo
   strip (thumbnail + title) instead of plain text links, so the featured
   projects are visible at a glance instead of just named. */
.bct-proj-strip-label {
    margin: 20px 0 12px !important;
    font-size: 18px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
}
.bct-proj-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 12px;
}
.bct-proj-strip-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 200px;
    text-decoration: none !important;
    color: inherit;
    transition: opacity 0.2s ease;
}
.bct-proj-strip-item:hover {
    opacity: 0.7;
}
.bct-proj-strip-item img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.bct-proj-strip-item span {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}
@media (max-width: 600px) {
    .bct-proj-strip-item { width: calc(50% - 8px); }
}


/* Keurmerken/certificaten grid, rendered by the [bct_keurmerken] shortcode
   from the ACF repeater on the options page (replaces the old fixed set of
   4 hardcoded Elementor widgets so the client can add/remove a cert
   themselves). Mirrors the exact card styling the hardcoded version used. */
.bct-keurmerken-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.bct-keurmerk {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.bct-keurmerk-badge {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 28px;
    min-height: 180px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bct-keurmerk-badge img {
    width: 100%;
    height: 124px;
    object-fit: contain;
}
.bct-keurmerk-caption {
    margin: 16px 0 0;
    font-family: "aptos", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
}
@media (max-width: 900px) {
    .bct-keurmerken-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .bct-keurmerken-grid { grid-template-columns: 1fr; }
}
.bct-dark-page .bct-keurmerk-caption,
.elementor-element-ob-certs .bct-keurmerk-caption {
    color: #ffffff;
}/* End custom CSS */