/* ------------------------------------------------------------------
   Knop hover: iets donkerder + tekst schuift mee
   (achtergrond staat inline, dus donkeren via inset box-shadow)
------------------------------------------------------------------ */
.btn_icon{transition: box-shadow 0.35s ease;box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0);}
.btn_icon:hover,.btn_icon:focus-visible{box-shadow: inset 0 0 0 100vmax rgba(0,0,0,0.14);color: #fff;}
.btn_icon img,.btn_icon spna{display: inline-block;transition: transform 0.35s cubic-bezier(.22,.61,.36,1);}
.btn_icon:hover img,.btn_icon:focus-visible img{transform: rotate(-12deg) scale(1.1);}
.btn_icon:hover spna,.btn_icon:focus-visible spna{transform: translateX(5px);}

/* ------------------------------------------------------------------
   Stapelende kaarten (home + De waarde van bomen)
   Class .is-stacking wordt door js/stacking-cards.js gezet, alleen
   als de kaarten in het scherm passen.
------------------------------------------------------------------ */
.sticky_section.is-stacking .card-wrapper{position: sticky;top: calc(var(--stack-top, 140px) + var(--stack-index, 0) * 18px);float: none;display: flow-root;}
.sticky_section.is-stacking .onze_specialiteiten{float: none;}
/* ruimte tussen kaarten via margin-top: een margin-bottom duwt de stapel te vroeg weg */
.sticky_section.is-stacking .inner_part .card-wrapper:not(:last-child){margin-bottom: 0;}
.sticky_section.is-stacking .inner_part .card-wrapper + .card-wrapper{margin-top: 60px;}

/* Services-kaarten (De waarde van bomen) */
.our-services.is-stacking .services-card{position: sticky;top: calc(var(--stack-top, 140px) + var(--stack-index, 0) * 18px);margin-bottom: 0;box-shadow: 0 0 0 1px rgba(0,56,67,0.12);}
.our-services.is-stacking .services-card + .services-card{margin-top: 80px;}

@media (prefers-reduced-motion: reduce){
    .btn_icon img,.btn_icon spna{transition: none;}
    .btn_icon:hover img,.btn_icon:hover spna{transform: none;}
}

/* Reviews-knop: wit i.p.v. grijs bij hover */
.review_section .button_box .btn_two:hover,.review_section .button_box .btn_two:focus-visible{background: #fff;border-color: #fff;color: #75B843;}

/* ------------------------------------------------------------------
   Hero (home): inzoomende achtergrond, tekst die invliegt en
   subtiele parallax (js/hero.js)
------------------------------------------------------------------ */
.banner_sec .outer_part{isolation: isolate;}
.banner_sec .hero_parallax{position: absolute;left: 0;top: -8%;width: 100%;height: 116%;z-index: -1;will-change: transform;}
.banner_sec .hero_bg{width: 100%;height: 100%;animation: heroZoom 2.4s cubic-bezier(.22,.61,.36,1) both;}
.banner_sec .text_box > *{animation: heroUp 1s cubic-bezier(.22,.61,.36,1) both;}
.banner_sec .text_box > *:nth-child(1){animation-delay: 0.25s;}
.banner_sec .text_box > *:nth-child(2){animation-delay: 0.45s;}
.banner_sec .text_box > *:nth-child(3){animation-delay: 0.65s;}
.banner_sec .text_box > *:nth-child(4){animation-delay: 0.85s;}
@keyframes heroZoom{from{transform: scale(1.12);}to{transform: scale(1);}}
@keyframes heroUp{from{opacity: 0;transform: translateY(30px);}to{opacity: 1;transform: none;}}

@media (prefers-reduced-motion: reduce){
    .banner_sec .hero_bg,.banner_sec .text_box > *{animation: none;}
}

/* Social-knoppen in de footer (alle sites): optillen bij hover */
.footer_flex li a{display: block;border-radius: 8px;transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease;}
.footer_flex li a img{display: block;}
.footer_flex li a:hover,.footer_flex li a:focus-visible{transform: translateY(-3px);box-shadow: 0 6px 14px rgba(0,56,67,0.15);}

/* Over ons: meer ruimte tussen "Dit is BOOM element" en de bruine teamsectie (ontwerp: ~150px) */
.boom-element-sec{margin-bottom: 150px;}
@media only screen and (max-width:1365px){ .boom-element-sec{margin-bottom: 120px;} }
@media only screen and (max-width:991px){ .boom-element-sec{margin-bottom: 90px;} }
@media only screen and (max-width:767px){ .boom-element-sec{margin-bottom: 60px;} }

/* Over ons: teamkaarten minder hoog - vierkant fotovak i.p.v. vaste hoogte (577/450/405px) */
.team-sec-boom .img-itam{height: auto;aspect-ratio: 1 / 1;overflow: hidden;}
.team-sec-boom .img-itam img{height: 94%;max-height: none;width: auto;max-width: 100%;object-fit: contain;object-position: bottom;}

/* Vacatures (blauw vak): scheidingslijn in huisstijl-blauw */
.vactures_groep .choose_your_service ul li{border-bottom-color: #004D5C;}

/* CF7: groene rand bij goed ingevuld veld (js/cf7-valid.js); rood van CF7 gaat voor */
.wpcf7 .wpcf7-form-control.is-valid:not(.wpcf7-not-valid){border-color: #75B843 !important;transition: border-color 0.3s ease;}

/* Inspiratie-galerij: afgeronde foto's */
.inspiratie_gallery .gallery-item{border-radius: 10px;overflow: hidden;}
.inspiratie_gallery .gallery-item img{border-radius: 10px;}

/* Vacature "Jouw dag in de bomen": titel bold */
.your-days .left-content h4{font-weight: 700;}

/* Slider-pijlen altijd vierkant: "your days" was 70x63 boven 1650px */
.your-days-contrls .slick-arrow{height: 70px;}
@media only screen and (max-width:1650px){ .your-days-contrls .slick-arrow{width: 52px;height: 52px;} }
@media only screen and (max-width:767px){ .your-days-contrls .slick-arrow{width: 42px;height: 42px;} }