/*
Theme Name: Brro Flex Theme
Author: ronaldpostma.com @ Brro.nl
Description: Minimal flexbox-friendly starter theme with assets + templates
Version: 1.2.0
Text Domain: brro-flex-theme
*/

/* ========================================
   GLOBAL STYLES
   ======================================== */
/* CSS custom properties */
:root {
    --content-max-desk: 1600px;
    --content-max-tab: 1179px;
    --content-max-mob: 767px;
    --gutter-desktop: 0px;
    --gutter-tablet: 0px;
    --gutter-mobile: 0px;
    --def-mob: clamp(309px, calc(28.26vw + 218.28px), 435px) /*320px @ 360 : 435px @ 767*/;
    --small-mob: clamp(290px, calc(19.66vw + 209.24px), 360px);
    --wide-mob: clamp(300px, calc(63.88vw + 90.02px), 580px);
    --white: #FFF;
    --blue: #253E4E;
    --greyblue: #71828C;
    --greybluetrans: rgba(113, 130, 140, 0.60);
    --gold: #BE8845;
    --lightgold: #D5B286;
    --greytext: #838383;
    --grey: #EEEEEE;
    --grey2: #D9D9D9;
    --gradient-trans-black: linear-gradient(0deg, transparent 0%, black 100%);
    --gradient-black-trans: linear-gradient(0deg, black 0%, transparent 100%);
    --cubix: cubic-bezier(.8, 0, .4, 1);
    --cubixslow: cubic-bezier(.55, 0, 0, 1);
}

/* ========================================
   ANIMATIONS
   ======================================== */
/* Logo letter shake */
@keyframes drop-in-fade-in {
    100% { opacity: 1; transform: translate(0); }
}

/* ========================================
   FONTS AND COLORS
   ======================================== */
/* Fonts */
.mega-kop,
.kop-groot,
.kopje-kleiner,
.inleiding-txt,
.body-txt,
.button-txt,
.testimonial-txt {
    font-style: normal;
}
.inleiding-txt,
.body-txt,
.button-txt,
.footer-txt {
    font-family: "brandon-grotesque", sans-serif;
}
.mega-kop,
.kop-groot,
.kopje-kleiner,
.testimonial-txt {
    font-family: "Abhaya Libre", serif;
}
.mega-kop {
    font-size: clamp(123px, 10.42vw, 167px) /*150px @ 1440*/;
    line-height: 81.33% /*122px @ 1440*/;
    font-weight: 400;
}
@media (max-width: 767px) {
    .mega-kop {
        font-size: clamp(60px, calc(10.32vw + 26.85px), 106px) /*64px @ 360 : 106px @ 767*/;
    }
}
.kop-groot {
    font-size: clamp(74px, 6.25vw, 100px) /*90px @ 1440*/;
    line-height: 91.1%;
    font-weight: 400;
}
@media (max-width: 767px) {
    .kop-groot {
        font-size: clamp(41.94px, calc(5.16vw + 25.43px), 65px) /*44px @ 360 : 65px @ 767*/;
    }
}
.kopje-kleiner {
    font-size: clamp(25px, 2.08vw, 33px) /*30px @ 1440*/;
    line-height: 100%;
    font-weight: 700;
}
.button-txt {
    font-size: clamp(17px, 1.18vw, 19px) /*17px @ 1440*/;
    line-height: clamp(19px, 1.39vw, 22px) /*20px @ 1440*/;
    font-weight: 500;
}
.inleiding-txt {
    font-size: clamp(32px, 2.64vw, 42px) /*38px @ 1440*/;
    line-height: 121%;
    font-weight: 400;
}
@media (max-width: 767px) {
    .inleiding-txt {
        font-size: clamp(21.41px, calc(1.47vw + 16.69px), 28px) /*22px @ 360 : 28px @ 767*/;
    }
}
.body-txt {
    font-size: clamp(18px, 1.39vw, 22px) /*20px @ 1440*/;
    line-height: 145%;
    font-weight: 400;
}
@media (max-width: 767px) {
    .body-txt {
        font-size: 17px;
        line-height: 135%;
    }
    form .body-txt {
        font-size: 16px;
        line-height: 110%;
    }
}
.testimonial-txt {
    font-size: clamp(37px, 3.06vw, 49px) /*44px @ 1440*/;
    line-height: 107%;
    font-weight: 400;
}
@media (max-width: 767px) {
    .testimonial-txt {
        font-size: clamp(22px, calc(1.97vw + 15.92px), 31px) /*23px @ 360 : 31px @ 767*/;
    }
}
.footer-txt {
    font-size: clamp(16px, 1.18vw, 19px) /*17px @ 1440*/;
    line-height: 105.8%;
    font-weight: 400;
}

/* Colors */
.blue { color: var(--blue); }
.bg-blue { background-color: var(--blue); }
.bg-blue-hover:hover { background-color: var(--blue); }
.greyblue { color: var(--greyblue); }
.bg-greyblue { background-color: var(--greyblue); }
.bg-greyblue-hover:hover { background-color: var(--greyblue); }
.greybluetrans { color: var(--greybluetrans); }
.bg-greybluetrans { background-color: var(--greybluetrans); }
.bg-greybluetrans-hover:hover { background-color: var(--greybluetrans); }
.white { color: var(--white); }
.bg-white { background-color: var(--white); }
.bg-white-hover:hover { background-color: var(--white); }
.black-hover:hover { color: black; }
.black-hover:hover .button-txt { color: black; }
.grey { color: var(--grey); }
.bg-grey { background-color: var(--grey); }
.bg-grey-hover:hover { background-color: var(--grey); }
.grey2 { color: var(--grey2); }
.bg-grey2 { background-color: var(--grey2); }
.bg-grey2-hover:hover { background-color: var(--grey2); }
.gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }
.bg-gold-hover:hover { background-color: var(--gold); }
.lightgold { color: var(--lightgold); }
.bg-lightgold { background-color: var(--lightgold); }
.bg-lightgold-hover:hover { background-color: var(--lightgold); }
.greytext { color: var(--greytext); }
.transparent { color: transparent; }
.transparency-60 { opacity: .6; }

/* ========================================
   WORDPRESS ADMIN BAR
   ======================================== */
/* Hide all admin bar items by default */
body:not(.webadmin) #wpadminbar li:not(#wp-admin-bar-site-name, #wp-admin-bar-my-account, #wp-admin-bar-logout) {
    display: none !important;
}

/* ========================================
   HTML & BODY
   ======================================== */
/* Prevent horizontal scrolling */
html {
    overflow-x: hidden !important;
    margin: 0 !important;
}

/* Relative body for absolutely positioned children */
body {
    overflow: hidden;
    position: relative;
    transition: background 250ms var(--cubix);
    margin: 0 !important;
    background-color: var(--blue);
    background-image: linear-gradient(270deg, #848484 0%, #FFF 30%, #FFF 59.62%, #848484 100%);
    background-blend-mode: multiply;
}

@media (max-width: 767px) {
    .content-wrapper {
        max-width: var(--def-mob) !important;
    }
    footer .content-wrapper {
        max-width: none !important;
    }
}

/* Page top anchor for smooth scrolling */
#page-top {
    width: 100%;
    position: absolute;
    height: 1px;
    margin-bottom: -1px;
    top: -1px;
}

/* Page top gradient overlay */
.brro-flex-page:after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100vw;
    height: clamp(361px, 30.56vw, 489px) /*440px @ 1440*/;
    background: var(--gradient-trans-black);
    background-blend-mode: multiply;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
/* Remove default search input styling in Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    filter: grayscale(100%) invert(1) brightness(200%);
}

/* Brro form (informatie-aanvragen) */
#form {
    padding-top: clamp(45px, 3.75vw, 60px) /*54px @ 1440*/;
}
.brro-form {
    width: 100%;
    max-width: clamp(568px, 48.13vw, 770px) /*693px @ 1440*/;
    gap: clamp(19px, 1.53vw, 24px) /*22px @ 1440*/;
    margin: 0 auto;
}
.brro-form h2 {
    margin-top: clamp(22px, 1.81vw, 29px) /*26px @ 1440*/;
    margin-bottom: 0;
}
.brro-form h2:first-child {
    margin-top: 0;
}
.brro-form-indent {
    padding-left: clamp(28px, 2.29vw, 37px) /*33px @ 1440*/ !important;
}
.brro-form__row {
    gap: clamp(30px, 2.5vw, 40px) /*36px @ 1440*/;
    margin-bottom: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
}
.brro-form__row--helper {
    display: none;
}
.brro-form__row > .brro-form__input {
    flex: 1 1 0;
    min-width: 0;
}
.brro-form__input {
    box-sizing: border-box;
    width: 100%;
    padding: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/ clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
    border: 0;
    border-radius: 999px;
    background-color: var(--white);
    outline: none;
    box-shadow: 0 0 0 0 rgba(213, 178, 134, 0);
}
.brro-form__input::placeholder {
    color: var(--greytext);
    opacity: 1;
}
.brro-form__input:focus-visible {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
}
.brro-form__textarea {
    min-height: clamp(164px, 13.89vw, 222px) /*200px @ 1440*/;
    border-radius: clamp(30px, 2.5vw, 40px) /*36px @ 1440*/;
    resize: vertical;
}
/*
.brro-form__input--voornaam    { flex: 0 1 38% !important; }
.brro-form__input--achternaam  { flex: 0 1 58% !important; }
.brro-form__input--straatnaam  { flex: 0 1 58% !important; }
.brro-form__input--huisnummer  { flex: 0 1 38% !important; }
.brro-form__input--postcode    { flex: 0 1 38% !important; }
.brro-form__input--plaatsnaam  { flex: 0 1 58% !important; }
*/

/* Custom circular checkbox: hide native input in-flow so label clicks don't jump the page */
.brro-form__check {
    appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.brro-form__check-label {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
    padding-left: 0;
    cursor: pointer;
    color: var(--white);
    user-select: none;
}
.brro-form__check-label::before {
    content: '';
    flex: 0 0 auto;
    box-sizing: border-box;
    width: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    height: clamp(20px, 1.67vw, 27px) /*24px @ 1440*/;
    margin-top: 0.15em;
    border-radius: 50%;
    background-color: var(--grey2);
    transition: background-color 180ms var(--cubix), box-shadow 180ms var(--cubix);
}
.brro-form__check:checked + .brro-form__check-label::before {
    border: clamp(5px, 0.35vw, 6px) /*5px @ 1440*/ solid var(--grey2);
    background-color: var(--blue);
    background-clip: content-box;
}
.brro-form__check:focus-visible + .brro-form__check-label::before {
    box-shadow: 0 0 0 2px var(--lightgold);
}
.brro-form__check-label--rich {
    flex-direction: row;
    align-items: flex-start;
}
.brro-form__check-title {
    display: block;
    color: var(--lightgold);
    font-weight: 600;
}
.brro-form__check-label:not(.brro-form__check-label--rich) .brro-form__check-title {
    color: var(--white);
    font-weight: inherit;
}
.brro-form__check-desc {
    display: block;
    margin-top: 0.4em;
    color: var(--white);
    font-weight: 400;
    line-height: 1.4;
}
.brro-form__check-label--rich {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
.brro-form__check-label--rich::before {
    grid-row: 1 / span 2;
}

/* Hide address fields unless the informatiepakket checkbox is checked */
#brro-informatiepakket:not(:checked) ~ .brro-form__informatiepakket-only {
    display: none;
}
label[for="brro-telefonisch-contact"] {
    margin-top: clamp(-44px, -2.78vw, -32px) /*-40px @ 1440*/;
}
label[for="brro-informatiepakket"] span.body-txt {
    margin-top: clamp(-17px, -1.04vw, -12px) /*-15px @ 1440*/;
}
.brro-form__submit {
    margin-top: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
.brro-form__submit:disabled {
    opacity: 1;
    cursor: wait;
}
.brro-form__submit:disabled.bg-white-hover:hover {
    background-color: var(--lightgold);
}
.brro-form__submit:disabled.black-hover:hover,
.brro-form__submit:disabled.black-hover:hover .button-txt {
    color: var(--blue);
}
.brro-form__submit.is-sending .brro-form__submit-dots {
    display: inline-block;
    min-width: 3ch;
    text-align: left;
}
.brro-form-message {
    margin: 0;
    font-weight: 500;
}
.brro-form-message[hidden],
.brro-form [data-brro-rc-form-home][hidden] {
    display: none;
}
.brro-form-message[data-state="success"] {
    color: var(--lightgold);
}
.brro-form-message[data-state="error"] {
    color: #f3b4b4;
}
[data-brro-rc-form-fields] {
    display: contents;
}
[data-brro-rc-form-fields][hidden] {
    display: none;
}

/* Stack paired fields on mobile (row uses justify-between on desktop only) */
@media (max-width: 767px) {
    .brro-form__row.flex.row-wrap {
        flex-flow: column nowrap;
        align-items: stretch;
        justify-content: flex-start;
    }
    .brro-form__row > .brro-form__input {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
}

/* ========================================
   RESPONSIVE DISPLAY UTILITIES
   ======================================== */
/* Desktop only (1180px and up) */
@media (min-width: 1180px) {
    .only.desk {
        display: revert !important;
    }
    .only.mob:not(.desk),
    .only.tab:not(.desk) {
        display: none !important;
    }
}

/* Tablet only (768px to 1179px) */
@media (min-width: 768px) and (max-width: 1179px) {
    .only.tab {
        display: revert !important;
    }
    .only.mob:not(.tab),
    .only.desk:not(.tab) {
        display: none !important;
    }
}

/* Mobile only (767px and down) */
@media (max-width: 767px) {
    .only.mob {
        display: revert !important;
    }
    .only.desk:not(.mob),
    .only.tab:not(.mob) {
        display: none !important;
    }
    .width-def-mob {
        width: var(--def-mob) !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .width-small-mob {
        width: var(--small-mob) !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .width-wide-mob {
        width: var(--wide-mob) !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
}

/* ========================================
   POPUP NAV
   ======================================== */
#popup-nav {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(37, 62, 78, 0.25);
    background-image: var(--gradient-trans-black);
    background-blend-mode: multiply;
    backdrop-filter: blur(60px);
    left: 0;
    z-index: 999;
    overflow: hidden;
}
.popup-closed {
    top: -110vh;
    opacity: 0;
    transition: all 400ms var(--cubix);
}
.popup-open {
    top: 0;
    opacity: 1;
    transition: opacity 400ms var(--cubix);
}
#popup-nav .content-wrapper {
    gap: clamp(78px, 6.53vw, 104px) /*94px @ 1440*/;
    margin-top: clamp(227px, 19.17vw, 307px) /*276px @ 1440*/;
}
@media (max-width: 767px) {
    #popup-nav .content-wrapper {
        gap: 56px;
        margin-top: 145px;
        height: calc(100vh - 125px);
    }
    #popup-nav .nav-col-left {
        text-align: center;
    }
}
.popup-nav-primary {
    gap: clamp(28px, 2.36vw, 38px) /*34px @ 1440*/;
}

/* ========================================
   HEADER
   ======================================== */
/* Sticky header */
header {
    position: fixed;
    width: 100%;
    transform: translateY(-500px);
    top: 0;
    left: 0;
    z-index: 9999;
}
header #menu,
header.popup-open #logo {
    transform: translateY(500px);
    transition: transform 800ms var(--cubixslow);
}
header:not(.popup-open) #logo {
    display: none;
}

/* Logo */
header #logo,
#logo-absolute {
    line-height: 1;
    margin-top: clamp(29px, 2.43vw, 39px) /*35px @ 1440*/;
}
#logo-hero,
#logo-absolute {
    line-height: 1;
    z-index: 3;
    margin-bottom: clamp(85px, 7.15vw, 114px) /*103px @ 1440*/;
}
#logo-absolute {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
svg#logo-home-flower,
svg#logo-minimal {
    width: clamp(219px, 18.54vw, 297px) /*267px @ 1440*/;
    line-height: 1;
    overflow: visible;
}
@media (max-width: 767px) {
    svg#logo-home-flower,
    svg#logo-minimal {
        width: clamp(146px, calc(9.58vw + 115.5px), 189px) /*150px @ 360 : 189px @ 767*/;
    }
}
svg#logo-home-flower {
    height: 65.5%;
}
svg#logo-minimal {
    height: 32.6%;
}
svg#logo-home-flower path,
svg#logo-minimal path,
header #menu #nav-icon {
    animation: drop-in-fade-in 1200ms var(--cubixslow) forwards;
    opacity: 0;
}
#rococe-frame { transform: translateY(-20px); }
#rococe-letter-r { animation-delay: 150ms !important; }
#rococe-letter-o { animation-delay: 200ms !important; }
#rococe-letter-c { animation-delay: 300ms !important; }
#rococe-letter-o2 { animation-delay: 350ms !important; }
#rococe-letter-c2 { animation-delay: 400ms !important; }
#rococe-letter-e { animation-delay: 450ms !important; }
#rococe-letter-e2 { animation-delay: 500ms !important; }

/* Menu / nav icon */
header #menu {
    margin-top: clamp(19px, 1.6vw, 26px) /*23px @ 1440*/;
    margin-right: clamp(110px, 9.31vw, 149px) /*134px @ 1440*/;
    position: absolute;
    right: 0;
    top: 0;
}
@media (max-width: 767px) {
    header #menu {
        margin-right: clamp(13.83px, calc(17.94vw - 43.57px), 94px) /*21px @ 360 : 94px @ 767*/;
    }
}
header #nav-icon:before {
    content: "Menu";
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    position: absolute;
    right: clamp(-31px, -1.94vw, -22px) /*-28px @ 1440*/;
    top: clamp(-19px, -1.18vw, -13px) /*-17px @ 1440*/;
    color: var(--white);
    transition: background 400ms var(--cubix);
    background: transparent;
    border-radius: clamp(22px, 1.81vw, 29px) /*26px @ 1440*/;
    width: clamp(107px, 9.03vw, 144px) /*130px @ 1440*/;
    height: clamp(40px, 3.33vw, 53px) /*48px @ 1440*/;
    padding-left: clamp(23px, 1.88vw, 30px) /*27px @ 1440*/;
    padding-bottom: 2px;
    box-sizing: border-box;
    z-index: -1;
}
header #nav-icon.open:before {
    content: "Sluiten";
    width: clamp(112px, 9.44vw, 151px) /*136px @ 1440*/;
}
@media (max-width: 767px) {
    header #nav-icon.open:before {
        content: none;
    }
}
@media (min-width: 768px) {
    header #nav-icon:hover:before {
        background: var(--greyblue);
    }
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    margin-top: clamp(263px, 22.22vw, 356px) /*320px @ 1440*/;
    position: relative;
    background-color: var(--blue);
}
body.page-template-binnenkort-online footer {
    margin-top: clamp(24px, -20.85px + 5.84vw, 48px);
}
footer .content-wrapper {
    padding: clamp(43px, 3.61vw, 58px) /*52px @ 1440*/ clamp(111px, 9.38vw, 150px) /*135px @ 1440*/;
}
.footer-right .footer-txt {
    margin-left: clamp(73px, 6.11vw, 98px) /*88px @ 1440*/;
    margin-bottom: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
footer .eeken-logo {
    width: clamp(208px, 17.57vw, 281px) /*253px @ 1440*/;
}
footer .eeken-logo a {
    display: block;
    line-height: 0;
}
footer .eeken-logo svg {
    width: 100%;
    height: auto;
}
footer:before {
    content: "";
    position: absolute;
    top: clamp(-489px, -30.56vw, -360px) /*-440px @ 1440*/;
    left: 0;
    width: 100%;
    height: clamp(361px, 30.56vw, 489px) /*440px @ 1440*/;
    background: var(--gradient-black-trans);
    z-index: -1;
}
@media (max-width: 767px) {
    footer {
        padding-top: 60px;
    }
    footer .content-wrapper {
        gap: 60px;
        padding: 0px 30px 32px 55px;
    }
}

/* ========================================
   ADRES EN ROUTE
   ======================================== */
.adres,
#popup-nav .adres .tel {
    margin-bottom: clamp(33px, 2.78vw, 45px) /*40px @ 1440*/;
}
.adres a {
    display: block;
}
.adres .tel:not(:hover) {
    text-decoration: none;
}
@media (min-width: 768px) {
    .route {
        transform: translateX(clamp(-28px, -1.74vw, -20px) /*-25px @ 1440*/);
    }
}
.route .route-link {
    display: inline-flex;
    align-items: center;
    gap: clamp(9px, 0.69vw, 11px) /*10px @ 1440*/;
}
.route .route-link__icon {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}
.route .route-link__icon .brro-route-pin-svg {
    display: block;
    width: clamp(13px, 1.04vw, 17px) /*15px @ 1440*/;
    height: clamp(17px, 1.39vw, 22px) /*20px @ 1440*/;
}

/* ========================================
   TEXT & LINKS
   ======================================== */
p {
    margin-block-start: 0;
    margin-block-end: clamp(23px, 1.94vw, 31px) /*28px @ 1440*/;
}
p:last-of-type {
    margin-block-end: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin-block-start: 0;
    margin-block-end: 0;
}
#page-title.mega-kop {
    margin-top: clamp(77px, 6.46vw, 103px) /*93px @ 1440*/;
    transform: translateX(clamp(-42px, -2.64vw, -31px) /*-38px @ 1440*/);
}

/* ========================================
   BORDERS & RADIUS
   ======================================== */
.radius-20 {
    border-radius: clamp(17px, 1.39vw, 22px) /*20px @ 1440*/;
}
.radius-26 {
    border-radius: clamp(22px, 1.81vw, 29px) /*26px @ 1440*/;
}
.button.radius-26 {
    border-radius: clamp(26px, 1.81vw, 29px) /*26px @ 1440*/;
}
.radius-30 {
    border-radius: clamp(25px, 2.08vw, 33px) /*30px @ 1440*/;
}
.content-box-image.radius-30 {
    border-radius: clamp(25px, 2.08vw, 33px) /*30px @ 1440*/;
}
.radius-40 {
    border-radius: clamp(33px, 2.78vw, 44px) /*40px @ 1440*/;
}
.radius-66 {
    border-radius: clamp(55px, 4.58vw, 73px) /*66px @ 1440*/;
}
.radius-top-500 {
    border-radius: clamp(410px, 34.72vw, 556px) clamp(410px, 34.72vw, 556px) 0 0; /*500px @ 1440*/
}
.radius-top-full {
    border-radius: 1000px 1000px 0 0;
}

/* ========================================
   BUTTONS
   ======================================== */
button,
a.button {
    border: none;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    padding: clamp(13px, 0.9vw, 14px) clamp(25px, 1.74vw, 28px) clamp(14px, 0.97vw, 16px) clamp(25px, 1.74vw, 28px) /* 13px 25px 14px 25px */;
    transition: background-color 250ms var(--cubix);
}
.button-txt {
    text-align: left;
    transition: all 250ms var(--cubix);
}
a.button.bg-blue:has(.button-txt.white):hover .button-txt {
    color: var(--blue);
}

/* ========================================
   HIGHLIGHT BULLETS
   ======================================== */
#bullets h2 {
    text-align: center;
}
.bullets-wrapper {
    margin: 0 clamp(123px, 10.42vw, 167px) /*150px @ 1440*/;
    z-index: 5;
}
.highlight-bullet {
    width: clamp(286px, 24.24vw, 388px) /*349px @ 1440*/;
    padding: clamp(37px, 3.06vw, 49px) clamp(19px, 1.53vw, 25px) clamp(45px, 3.75vw, 60px) clamp(45px, 3.75vw, 60px) /* 44px 22px 54px 54px */;
    box-sizing: border-box;
    box-shadow: 0 0 50px #000;
}
.highlight-bullet img {
    margin-left: clamp(62px, 5.21vw, 83px) /*75px @ 1440*/;
    height: clamp(75px, 6.32vw, 101px) /*91px @ 1440*/;
    object-fit: contain;
    object-position: 0% 0%;
}
.highlight-bullet-placeholder {
    width: clamp(17px, 1.39vw, 22px) /*20px @ 1440*/;
    height: clamp(17px, 1.39vw, 22px) /*20px @ 1440*/;
    border-radius: 50%;
    background-color: var(--blue);
    margin-top: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
    margin-bottom: clamp(17px, 1.39vw, 22px) /*20px @ 1440*/;
    margin-left: clamp(91px, 7.71vw, 123px) /*111px @ 1440*/;
}
.highlight-bullet h3 {
    margin-top: clamp(15px, 1.25vw, 20px) /*18px @ 1440*/;
    min-height: clamp(50px, 4.17vw, 67px) /*60px @ 1440*/;
}
.highlight-bullet p {
    margin-top: clamp(13px, 1.04vw, 17px) /*15px @ 1440*/;
}
@media (max-width: 1179px) {
    .bullets-wrapper {
        margin: 0;
    }
    .highlight-bullet {
        width: clamp(230px, calc(13.63vw + 125.36px), 286px) /*230px @ 768 : 286px @ 1179*/;
        padding-left: clamp(24px, calc(5.11vw - 15.24px), 45px) /*24px @ 768 : 45px @ 1179*/;
    }
}
@media (max-width: 767px) {
    .highlight-bullet {
        width: 300px;
        margin-bottom: 32px;
    }
    .highlight-bullet img {
        margin-left: 92px;
    }
    .highlight-bullet-placeholder {
        margin-left: 118px;
    }
    /* Brro FX: skip fade-in-up on small viewports (cards stay visible; scroll FX unchanged) */
    .highlight-bullet.brro-fx--fade-in-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ========================================
   SLIDER / SWIPER
   ======================================== */
.swiper.brro-swiper {
    width: 100%;
}
.brro-swiper .swiper-slide {
    box-sizing: border-box;
}
.brro-swiper .swiper-pagination {
    position: relative;
    text-align: center;
}
.brro-swiper .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    background: rgba(209, 209, 209, 0.30);
    opacity: 1;
    margin: 0 6px !important;
    border-radius: 50%;
    transition: all 0.3s ease;
}
.brro-swiper .swiper-pagination-bullet-active {
    background: var(--gold);
    transform: scale(1.1);
    opacity: 1;
}

/* ========================================
   CONTENT BOX
   ======================================== */
.content-box {
    overflow: hidden;
    box-shadow: 0 0 250px 0 rgba(0, 0, 0, 0.75);
    margin-bottom: clamp(148px, 12.5vw, 200px) /*180px @ 1440*/;
    width: 100%;
    max-width: clamp(961px, 81.39vw, 1302px) /*1172px @ 1440*/;
    /*gap: clamp(64px, 5.35vw, 86px) /*77px @ 1440*/
    box-sizing: border-box;
}
.content-box-text {
    width: clamp(392px, 33.19vw, 531px) /*478px @ 1440*/;
}
.content-box-text h2 {
    max-width: 75%;
    margin-bottom: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
}
.content-box a.button {
    margin-top: clamp(40px, 3.33vw, 53px) /*48px @ 1440*/;
}
.content-box .content-box-image img {
    height: 100%;
    object-fit: cover;
}
@media (max-width: 1179px) {
    .content-box-text h2 {
        max-width: 100%;
    }
    .content-box {
        gap: 0;
        padding: clamp(28px, calc(4.14vw - 3.77px), 45px) /*28px @ 768 : 45px @ 1179*/
                 clamp(31px, calc(4.62vw - 4.5px), 50px) /*31px @ 768 : 50px @ 1179*/ !important;
        margin-left: 12px;
        margin-right: 12px;
    }
    .content-box-text {
        width: 48%!important;
    }
    .content-box .content-box-image {
        margin-top: 32px;
        width: 48%!important;
    }
}
@media (max-width: 767px) {
    .content-box-text h2 {
        margin-bottom: 24px;
    }
    .content-box {
        max-width: var(--wide-mob);
        gap: 32px;
        padding: clamp(23px, calc(1.47vw + 16.69px), 28px) /*22px @ 360 : 28px @ 767*/
                 clamp(23px, calc(1.47vw + 18.69px), 30px) /*24px @ 360 : 30px @ 767*/
                 23px
                 clamp(23px, calc(1.47vw + 16.69px), 28px) /*22px @ 360 : 28px @ 767*/ !important;
        margin-left: 0px;
        margin-right: 0px;
    }
    .content-box-text {
        width: 100%!important;
    }
    .content-box .content-box-image {
        margin-top: 0px;
        width: 100%!important;
    }
}

/* ========================================
   BIG BACKGROUND
   ======================================== */
#big_bg {
    position: relative;
    margin-top: -205px;
}
#big_bg:after {
    background: linear-gradient(0deg, rgba(37, 62, 78, 0.00) 0%, #000 100%);
    background-blend-mode: multiply;
    position: absolute;
    content: "";
    bottom: -265px;
    left: 0;
    width: 100%;
    height: 265px;
}
#big_bg:before {
    background: linear-gradient(0deg, #000 0%, rgba(37, 62, 78, 0.00) 100%);
    background-blend-mode: multiply;
    position: absolute;
    content: "";
    top: -205px;
    left: 0;
    width: 100%;
    height: 205px;
}
#behang {
    position: relative;
    line-height: 0;
    width: 100%;
}
#behang img {
    width: 100%;
    height: clamp(814px, 68.96vw, 1103px) /*993px @ 1440*/;
    object-fit: cover;
}

/* ========================================
   FRONT PAGE
   ======================================== */
/* Hero */
#hero .content-wrapper {
    background-size: cover;
    background-position: 0 100%;
    box-shadow: 0 0 250px 0 #000;
    padding-top: clamp(61px, 5.14vw, 82px) /*74px @ 1440*/;
    padding-bottom: clamp(66px, 5.56vw, 89px) /*80px @ 1440*/;
    margin: 0 clamp(48px, 4.03vw, 64px) /*58px @ 1440*/;
    position: relative;
    z-index: 4;
}
@media (max-width: 1179px) {
    #hero .content-wrapper {
        margin: 0 clamp(24px, calc(5.84vw - 20.85px), 48px) /*24px @ 768 : 48px @ 1179*/;
        padding-bottom: clamp(36px, calc(4.67vw + 21.19px), 57px) /*38px @ 360 : 57px @ 767*/;
    }
}
#hero .content-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    width: 100vw;
    height: clamp(361px, 30.56vw, 489px) /*440px @ 1440*/;
    background: var(--gradient-trans-black);
    background-blend-mode: multiply;
}
#hero h2 {
    max-width: clamp(566px, 47.92vw, 767px) /*690px @ 1440*/;
    text-align: center;
    text-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
#hero div:has(> h2) {
    z-index: 1;
}
#hero a.button {
    margin-top: clamp(89px, 7.5vw, 120px) /*108px @ 1440*/;
    z-index: 2;
}
@media (max-width: 767px) {
    #hero a.button {
        margin-top: clamp(36px, calc(8.85vw + 8.16px), 76px) /*40px @ 360 : 76px @ 767*/;
    }
}

/* Inleiding */
#inleiding .inner-flex-wrapper {
    padding: clamp(135px, 11.39vw, 182px) /*164px @ 1440*/ 0;
}
#inleiding .inner-flex-wrapper p {
    max-width: clamp(529px, 44.79vw, 717px) /*645px @ 1440*/;
    margin-left: clamp(354px, 30vw, 480px) /*432px @ 1440*/;
}
@media (max-width: 1179px) {
    #inleiding .inner-flex-wrapper p {
        margin-left: 0;
    }
}
@media (max-width: 767px) {
    #inleiding .inner-flex-wrapper p {
        max-width: var(--def-mob);
    }
}
#inleiding a.button {
    margin-top: clamp(46px, 3.89vw, 62px) /*56px @ 1440*/;
}

/* Bullets (front-page overlap with big bg) */
body.front-page .bullets-wrapper {
    margin-bottom: clamp(-191px, -11.94vw, -140px) /*-172px @ 1440*/;
}
body.front-page .highlight-bullet:first-of-type img {
    width: clamp(78px, 6.53vw, 104px) /*94px @ 1440*/;
}
body.front-page .highlight-bullet:nth-of-type(2) img {
    width: clamp(61px, 5.14vw, 82px) /*74px @ 1440*/;
}
body.front-page .highlight-bullet:last-of-type img {
    width: clamp(69px, 5.83vw, 93px) /*84px @ 1440*/;
}

/* Slider */
#slider {
    margin-top: clamp(-484px, -30.28vw, -357px) /*-436px @ 1440*/;
    margin-bottom: clamp(200px, 16.94vw, 271px) /*244px @ 1440*/;
}
#slider .swiper-slide {
    position: relative;
    overflow: visible;
}
#slider .swiper-slide .slide-content {
    width: clamp(328px, 27.78vw, 444px) /*400px @ 1440*/;
    position: absolute;
    right: 0;
    bottom: clamp(74px, 6.25vw, 100px) /*90px @ 1440*/;
    box-sizing: border-box;
    padding: clamp(37px, 3.06vw, 49px) /*44px @ 1440*/ clamp(43px, 3.61vw, 58px) /*52px @ 1440*/;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.75);
}
#slider .swiper-slide .slide-content p {
    margin-top: clamp(14px, 1.11vw, 18px) /*16px @ 1440*/;
}
#slider .swiper-slide img {
    width: clamp(587px, 49.72vw, 796px) /*716px @ 1440*/;
    height: clamp(604px, 51.18vw, 819px) /*737px @ 1440*/;
    flex-shrink: 0;
    object-fit: cover;
}
#slider .swiper {
    width: clamp(751px, 63.61vw, 1018px) /*916px @ 1440*/;
    margin-left: clamp(297px, 25.14vw, 402px) /*362px @ 1440*/;
}
#slider .brro-swiper .swiper-pagination {
    /* transform offset comes from ACF slider_bullets_offset via inline style in render */
    width: clamp(587px, 49.72vw, 796px) /*716px @ 1440*/;
    height: clamp(59px, 5vw, 80px) /*72px @ 1440*/;
}
#slider .swiper-button-next,
#slider .swiper-button-prev {
    top: calc(var(--swiper-navigation-top-offset, 50%) - clamp(53px, 4.44vw, 71px)) !important;
}
@media (max-width: 1179px) {
    #slider .swiper {
        margin: 0;
    }
}
@media (max-width: 767px) {
    #slider .swiper {
        width: var(--wide-mob);
        height: 600px;
    }
    #slider .swiper-slide img {
        width: 90%;
        height: 450px;
    }
    #slider .swiper-slide .slide-content {
        bottom: -108px;
    }
    #slider .brro-swiper .swiper-pagination {
        transform: translateY(134px);
        width: auto;
    }
}

/* Over ons */
#over_ons .content-box-image {
    width: clamp(407px, 34.44vw, 551px) /*496px @ 1440*/;
    height: clamp(441px, 37.29vw, 597px) /*537px @ 1440*/;
    overflow: hidden;
}
#over_ons .content-box {
    padding: clamp(46px, 3.89vw, 62px) /*56px @ 1440*/
             clamp(50px, 4.17vw, 67px) /*60px @ 1440*/;
}

/* Testimonials */
#testimonials {
    margin-top: clamp(50px, 4.17vw, 67px) /*60px @ 1440*/;
}
#testimonials .swiper {
    width: clamp(758px, 64.24vw, 1028px) /*925px @ 1440*/;
}
#testimonials .brro-testimonial-slide {
    max-width: clamp(467px, 39.51vw, 632px) /*569px @ 1440*/;
    margin: auto;
    padding-bottom: clamp(53px, 4.44vw, 71px) /*64px @ 1440*/;
}
#brro-swiper-testimonials {
    position: relative;
}
#brro-swiper-testimonials .swiper-button-prev,
#brro-swiper-testimonials .swiper-button-next {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: transparent;
    box-sizing: border-box;
}
#brro-swiper-testimonials .swiper-button-prev::after,
#brro-swiper-testimonials .swiper-button-next::after {
    display: none;
}
#brro-swiper-testimonials .swiper-button-prev {
    left: 0;
}
#brro-swiper-testimonials .swiper-button-next {
    right: 0;
}
#brro-swiper-testimonials .swiper-button-prev:focus-visible,
#brro-swiper-testimonials .swiper-button-next:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
.testimonial-txt {
    margin-bottom: clamp(27px, 2.22vw, 36px) /*32px @ 1440*/;
}
@media (max-width: 767px) {
    #testimonials .brro-testimonial-slide {
        max-width: 75%;
    }
}

/* ========================================
   MOGELIJKHEDEN
   ======================================== */
/* Intro */
#intro .content-wrapper {
    padding: clamp(48px, 4.03vw, 64px) /*58px @ 1440*/ 0 clamp(122px, 10.28vw, 164px) /*148px @ 1440*/;
}
@media (min-width: 1180px) {
    #intro .content-wrapper {
        margin-top: clamp(-27px, -1.67vw, -19px) /*-24px @ 1440*/;
    }
}
#intro .inleiding-txt {
    width: clamp(529px, 44.79vw, 717px) /*645px @ 1440*/;
    margin-left: clamp(179px, 15.14vw, 242px) /*218px @ 1440*/;
}
#intro a.button {
    margin-left: clamp(122px, 10.28vw, 164px) /*148px @ 1440*/;
}
@media (max-width: 1179px) {
    #intro .inleiding-txt {
        margin-left: 0px;
    }
    #intro a.button {
        margin-left: 0px;
        margin-top: 40px;
    }
}
@media (max-width: 767px) {
    #intro .inleiding-txt {
        width: auto;
    }
}

/* Big bg overlay */
#mogelijkheden #big_bg {
    position: absolute;
    width: 100%;
    z-index: -1;
    top: clamp(212px, 17.92vw, 287px) /*258px @ 1440*/;
}

/* Content boxes */
@media (min-width: 1180px) {
    #mogelijkheden .content-box {
        padding: clamp(46px, 3.89vw, 62px) /*56px @ 1440*/
                 clamp(53px, 4.44vw, 71px) /*64px @ 1440*/
                 clamp(46px, 3.89vw, 62px) /*56px @ 1440*/
                 clamp(69px, 5.83vw, 93px) /*84px @ 1440*/;
    }
}
@media (max-width: 767px) {
    #mogelijkheden .content-box {
        padding-top: 48px !important;
        padding-bottom: 28px;
    }
}
#mogelijkheden .content-box-image {
    width: clamp(377px, 31.87vw, 510px) /*459px @ 1440*/;
    height: clamp(377px, 31.87vw, 510px) /*459px @ 1440*/;
    overflow: hidden;
}
#mogelijkheden .content-box-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#mogelijkheden .content-box-image .brro-swiper,
#mogelijkheden .content-box-image .brro-swiper .swiper-wrapper,
#mogelijkheden .content-box-image .brro-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}
#mogelijkheden .content-box-image .brro-swiper .swiper-slide {
    display: flex;
}
#mogelijkheden .content-box-image .brro-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#mogelijkheden .swiper-pagination {
    bottom: clamp(23px, 1.88vw, 30px) /*27px @ 1440*/ !important;
}

/* Every first of 3 boxes */
#mogelijkheden .content-box:nth-of-type(3n+1) {
    background-color: var(--gold);
}
#mogelijkheden .content-box:nth-of-type(3n+1) h2 {
    color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+1) a.button {
    background-color: var(--blue);
}
#mogelijkheden .content-box:nth-of-type(3n+1) a.button:hover {
    background-color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+1) .button-txt {
    color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+1) a.button:hover .button-txt {
    color: black;
}

/* Every second of 3 boxes */
#mogelijkheden .content-box:nth-of-type(3n+2) {
    background-color: var(--blue);
}
#mogelijkheden .content-box:nth-of-type(3n+2) h2 {
    color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+2) p {
    color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+2) a.button {
    background-color: var(--lightgold);
}
#mogelijkheden .content-box:nth-of-type(3n+2) a.button:hover {
    background-color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+2) .button-txt {
    color: var(--blue);
}
#mogelijkheden .content-box:nth-of-type(3n+2) a.button:hover .button-txt {
    color: black;
}

/* Every third of 3 boxes */
#mogelijkheden .content-box:nth-of-type(3n+3) {
    background-color: var(--greyblue);
}
#mogelijkheden .content-box:nth-of-type(3n+3) h2 {
    color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+3) p {
    color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+3) a.button {
    background-color: var(--lightgold);
}
#mogelijkheden .content-box:nth-of-type(3n+3) a.button:hover {
    background-color: var(--white);
}
#mogelijkheden .content-box:nth-of-type(3n+3) .button-txt {
    color: var(--blue);
}
#mogelijkheden .content-box:nth-of-type(3n+3) a.button:hover .button-txt {
    color: black;
}

/* CTA before footer */
#cta_before_footer {
    padding: clamp(451px, 38.19vw, 611px) /*550px @ 1440*/ 0 clamp(83px, 7.01vw, 112px) /*101px @ 1440*/ 0;
    margin-top: clamp(158px, 13.33vw, 213px) /*192px @ 1440*/;
    box-shadow: 0 0 250px 0 #000;
    background-size: cover;
}
#cta_before_footer .content-wrapper {
    padding: 0 32px 0 clamp(192px, 16.25vw, 260px) /*234px @ 1440*/;
    gap: clamp(50px, 4.17vw, 67px) /*60px @ 1440*/;
    position: relative;
    z-index: 2;
}
#cta_before_footer .cta-titel {
    width: clamp(272px, 22.99vw, 368px) /*331px @ 1440*/;
}
@media (max-width: 767px) {
    #cta_before_footer .content-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }
}
body.page-template-mogelijkheden footer {
    margin-top: 0;
}
body.page-template-mogelijkheden footer:before {
    z-index: 1;
}

/* ========================================
   404
   ======================================== */
.error404 #not-found .content-wrapper {
    padding: clamp(40px, 3.33vw, 53px) /*48px @ 1440*/ 0 clamp(122px, 10.28vw, 164px) /*148px @ 1440*/;
    width: clamp(459px, 38.89vw, 622px) /*560px @ 1440*/;
    gap: clamp(40px, 3.33vw, 53px) /*48px @ 1440*/;
}