/* =========================================================
   OXAVIX GLOBAL V5
   Eén visuele taal voor alle publieke pagina's
   ========================================================= */


/* ---------------------------------------------------------
   BASIS
   --------------------------------------------------------- */

:root{
    --oxv5-navy:#061a2a;
    --oxv5-orange:#ed8108;
    --oxv5-soft:#f8f7f4;
    --oxv5-line:#e6e1d8;
    --oxv5-muted:#66717c;
    --oxv5-radius:8px;
}

html{
    scroll-behavior:smooth;
}

body{
    color:#071b2c;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.ox-site-header{
    background:var(--oxv5-navy) !important;
}

.ox-header-inner{
    min-height:66px !important;
}

.ox-brand img{
    width:auto !important;
    height:31px !important;
}

.ox-main-navigation{
    gap:25px !important;
}

.ox-main-navigation a{
    font-size:12.5px !important;
    font-weight:750 !important;
    letter-spacing:-.01em;
}

.ox-header-actions{
    gap:12px !important;
}

.ox-header-phone{
    min-height:40px !important;
    padding:0 17px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    border:0 !important;
    border-radius:6px !important;

    background:var(--oxv5-orange) !important;
    color:#fff !important;

    font-size:13px !important;
    font-weight:850 !important;
}

.ox-header-cta{
    display:none !important;
}


/* ---------------------------------------------------------
   ALGEMENE TYPOGRAFIE
   --------------------------------------------------------- */

main h1,
main h2,
main h3,
.ox-final-cta h2,
.ox-scan h2,
.ox-scan h3,
.ox-prose h2,
.ox-prose h3,
.ox-side-box h3,
.ox-unified-summary>strong{
    font-family:Inter,Arial,sans-serif !important;
    letter-spacing:-.035em;
}

main h1{
    font-weight:850 !important;
}

main h2,
main h3{
    font-weight:820 !important;
}


/* ---------------------------------------------------------
   BINNENPAGINA HERO
   --------------------------------------------------------- */

.ox-unified-hero{
    background:
        linear-gradient(
            118deg,
            #061a2a,
            #0c3049
        ) !important;
}

.ox-unified-hero>.ox-shell{
    padding-top:50px !important;
    padding-bottom:50px !important;
}

.ox-unified-hero-grid{
    gap:50px !important;
}

.ox-unified-hero h1{
    max-width:820px !important;

    font-size:clamp(38px,4.6vw,58px) !important;
    line-height:1.02 !important;

    font-family:Inter,Arial,sans-serif !important;
    font-weight:850 !important;
}

.ox-unified-lead{
    max-width:720px !important;

    margin-top:17px !important;

    font-size:16px !important;
    line-height:1.6 !important;
}

.ox-unified-summary{
    padding:24px !important;

    border-radius:8px !important;
}

.ox-unified-summary>strong{
    font-size:22px !important;
    font-weight:820 !important;
}

.ox-unified-summary>p{
    font-size:13px !important;
    line-height:1.55 !important;
}

.ox-unified-summary ul{
    margin-top:16px !important;
}

.ox-unified-summary li{
    font-size:13px !important;
}


/* lichte hero */

.ox-unified-hero-light{
    background:var(--oxv5-soft) !important;
}

.ox-unified-hero-light h1{
    color:#071b2c !important;
}

.ox-unified-hero-light .ox-unified-lead{
    color:var(--oxv5-muted) !important;
}


/* ---------------------------------------------------------
   SECTIES
   --------------------------------------------------------- */

.ox-section{
    padding-top:56px !important;
    padding-bottom:56px !important;
}

.ox-section-soft{
    background:var(--oxv5-soft) !important;
}

.ox-section-dark{
    background:var(--oxv5-navy) !important;
}


/* ---------------------------------------------------------
   CONTENTPAGINA'S
   --------------------------------------------------------- */

.ox-prose-layout{
    gap:44px !important;
}

.ox-prose h2{
    margin:38px 0 14px !important;

    font-size:clamp(27px,3.2vw,38px) !important;
    line-height:1.12 !important;

    font-weight:820 !important;
}

.ox-prose h3{
    margin:26px 0 10px !important;

    font-size:19px !important;

    font-weight:820 !important;
}

.ox-prose h4{
    margin-top:21px !important;

    font-size:16px !important;
}

.ox-prose p,
.ox-prose li,
.ox-prose address{
    color:var(--oxv5-muted) !important;

    font-size:15px !important;
    line-height:1.68 !important;
}

.ox-prose p{
    margin-bottom:15px !important;
}

.ox-prose ul,
.ox-prose ol{
    gap:6px !important;
    margin:15px 0 21px !important;
}

.ox-prose blockquote,
.ox-prose .art-highlight,
.ox-prose .highlight,
.ox-prose .callout{
    margin:22px 0 !important;
    padding:17px 19px !important;
}

.ox-prose details{
    margin:8px 0 !important;

    border-color:var(--oxv5-line) !important;
    border-radius:7px !important;
}

.ox-prose summary{
    padding:15px 17px !important;

    font-size:14px !important;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.ox-prose-sidebar{
    top:90px !important;
    gap:13px !important;
}

.ox-side-box{
    padding:21px !important;

    border-radius:8px !important;

    box-shadow:none !important;
}

.ox-side-box h3{
    font-size:20px !important;
    font-weight:820 !important;
}

.ox-side-box p:not(.ox-eyebrow){
    margin:8px 0 17px !important;

    font-size:12.5px !important;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.ox-action,
.btn,
button[type="submit"]{
    min-height:43px;

    border-radius:6px !important;

    font-size:12.5px !important;
    font-weight:820 !important;
}

.ox-action{
    padding-left:18px !important;
    padding-right:18px !important;
}


/* ---------------------------------------------------------
   TRUSTBAR
   --------------------------------------------------------- */

.ox-trustbar{
    background:#fff !important;
}

.ox-trust-grid{
    min-height:auto !important;
}

.ox-trust-item{
    padding-top:18px !important;
    padding-bottom:18px !important;
}

.ox-trust-item strong{
    font-size:12.5px !important;
}

.ox-trust-item span{
    margin-top:4px !important;
    font-size:11px !important;
}


/* ---------------------------------------------------------
   WONINGSCAN
   --------------------------------------------------------- */

.ox-scan{
    padding:50px 0 !important;

    background:var(--oxv5-soft) !important;
}

.ox-scan>.ox-shell{
    max-width:1030px !important;
}

.ox-scan-intro,
.ox-scan-header{
    padding:35px 40px 27px !important;
}

.ox-scan h2{
    max-width:700px !important;

    margin:0 !important;

    font-size:clamp(30px,3.6vw,45px) !important;
    line-height:1.08 !important;

    font-weight:820 !important;
}

.ox-scan h3{
    font-size:20px !important;
}

.ox-scan p{
    font-size:14px !important;
    line-height:1.6 !important;
}

.ox-scan-form{
    border-radius:9px !important;

    box-shadow:
        0 16px 40px rgba(7,27,44,.08) !important;
}

.ox-form-step{
    padding:31px 40px 35px !important;
}

.ox-project-options{
    gap:9px !important;
}

.ox-project-option label{
    min-height:54px !important;

    padding:12px 15px !important;

    border-radius:6px !important;

    font-size:13px !important;
}

.ox-field label,
.ox-field-label{
    font-size:11.5px !important;
}

.ox-field input,
.ox-field select,
.ox-field textarea{
    min-height:46px !important;

    border-radius:6px !important;

    font-size:14px !important;
}

.ox-field textarea{
    min-height:110px !important;
}


/* progress */

.ox-scan-progress{
    gap:8px !important;
}

.ox-scan-progress span,
.ox-progress-segment{
    height:5px !important;
    border-radius:99px !important;
}


/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */

.ox-faq-grid,
.ox-faq-layout{
    gap:46px !important;
}

.ox-faq-title h2,
.ox-faq-copy h2{
    font-family:Inter,Arial,sans-serif !important;

    font-size:clamp(29px,3.5vw,42px) !important;
    font-weight:820 !important;

    line-height:1.08 !important;
}

details{
    border-radius:7px;
}

details summary{
    font-family:Inter,Arial,sans-serif;
}


/* ---------------------------------------------------------
   FINAL CTA
   --------------------------------------------------------- */

.ox-final-cta{
    padding:34px 0 !important;

    background:var(--oxv5-navy) !important;
}

.ox-final-grid{
    gap:32px !important;
}

.ox-final-cta h2{
    max-width:720px !important;

    color:#fff !important;

    font-family:Inter,Arial,sans-serif !important;

    font-size:clamp(27px,3.4vw,39px) !important;
    font-weight:820 !important;

    line-height:1.08 !important;
}

.ox-final-cta p{
    margin-top:9px !important;

    color:rgba(255,255,255,.68) !important;

    font-size:13px !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.ox-site-footer{
    padding-top:43px !important;

    background:#041522 !important;
}

.ox-footer-grid{
    gap:40px !important;
}

.ox-footer-logo{
    width:auto !important;
    height:31px !important;
}

.ox-site-footer h3{
    margin-bottom:11px !important;

    font-family:Inter,Arial,sans-serif !important;

    font-size:13px !important;
    font-weight:820 !important;
}

.ox-site-footer p,
.ox-footer-links a,
.ox-footer-links span{
    font-size:12px !important;
    line-height:1.7 !important;
}

.ox-footer-links{
    gap:5px !important;
}

.ox-footer-bottom{
    margin-top:30px !important;
    padding-top:17px !important;
    padding-bottom:17px !important;

    font-size:10.5px !important;
}


/* ---------------------------------------------------------
   CARDS / GRID
   --------------------------------------------------------- */

.ox-service-card,
.ox-project-card,
.ox-address-card,
.ox-card{
    border-radius:8px !important;
    box-shadow:none !important;
}


/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

.ox-prose table{
    margin:21px 0 !important;

    font-size:13px;
}

.ox-prose th,
.ox-prose td{
    padding:10px 11px !important;
}


/* ---------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------- */

.ox-breadcrumbs{
    margin-bottom:20px !important;

    font-size:11px !important;
}


/* ---------------------------------------------------------
   EYEBROW
   --------------------------------------------------------- */

.ox-eyebrow{
    font-family:Inter,Arial,sans-serif !important;

    font-size:10.5px !important;
    font-weight:850 !important;

    letter-spacing:.09em !important;
    text-transform:uppercase;
}


/* ---------------------------------------------------------
   MOBILE ACTION BAR
   --------------------------------------------------------- */

.ox-mobile-actions{
    background:#061a2a !important;
}

.ox-mobile-actions a{
    font-size:12px !important;
    font-weight:800 !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:980px){

    .ox-main-navigation{
        gap:15px !important;
    }

    .ox-unified-hero-grid,
    .ox-prose-layout{
        gap:30px !important;
    }

    .ox-prose-sidebar{
        gap:12px !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:680px){

    .ox-header-inner{
        min-height:61px !important;
    }

    .ox-brand img{
        height:28px !important;
    }

    .ox-header-phone{
        display:none !important;
    }

    .ox-unified-hero>.ox-shell{
        padding-top:38px !important;
        padding-bottom:40px !important;
    }

    .ox-unified-hero h1{
        font-size:36px !important;
    }

    .ox-unified-lead{
        font-size:14px !important;
    }

    .ox-section{
        padding-top:42px !important;
        padding-bottom:42px !important;
    }

    .ox-prose h2{
        margin-top:30px !important;

        font-size:27px !important;
    }

    .ox-prose p,
    .ox-prose li{
        font-size:14px !important;
    }

    .ox-scan{
        padding:28px 0 !important;
    }

    .ox-scan-intro,
    .ox-scan-header,
    .ox-form-step{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .ox-scan h2{
        font-size:30px !important;
    }

    .ox-final-cta{
        padding:27px 0 !important;
    }

    .ox-final-cta h2{
        font-size:28px !important;
    }

    .ox-footer-grid{
        gap:26px !important;
    }

}