:root {
    /* Fonts */
    --primary-font: "Montserrat", sans-serif;
    --secondary-font: "Lora", serif;

    /* Responsive Font Sizes (clamp) */
    --fs-h1: clamp(1.9rem, 5.4vw + 0.65rem, 4rem);
    --fs-h2: clamp(1.75rem, 5vw + 1rem, 2.75rem);
    --fs-h3: clamp(1.25rem, 3vw + 1rem, 1.5rem);
    --fs-h4: clamp(1.1rem, 2vw + 1rem, 1.25rem);
    --fs-body: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);

    /* Primary Accent */
    --primary-color: #018c8c;
    --primary-light: #02a8a8;
    --primary-muted: rgba(1, 140, 140, 0.15);

    /* Dark Mode Greys & Petrols */
    --bg-main: #0d1212;             /* Diep petrol zwart */
    --bg-surface: #181f1f;          /* Voor secties/kaarten */
    --bg-elevated: #232b2b;         /* Voor dropdowns/inputs */

    /* Text Colors */
    --text-main: #f2f5f5;           /* Gebroken wit voor rust aan de ogen */
    --text-muted: #a0b0b0;          /* Voor captions/minder belangrijke tekst */
    --text-on-primary: #ffffff;

    /* Borders & Dividers */
    --border-color: #2a3535;

    /* Visual Effects */
    --filter-white: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(0%) hue-rotate(70deg) brightness(108%) contrast(108%);
    --br: 8px;
    --section-space: 96px;
    --container-width: 1320px;

    /* Icons */
    --font-awesome: "Font Awesome 6 Free";
    --chevron-down: '\f078';
}

 /* * {outline: 1px solid white;} */

/* --- Basis Styling --- */

body { font-family: var(--secondary-font); font-size: var(--fs-body); font-weight: 400; line-height: 1.7; color: var(--text-main); background-color: var(--bg-main); -webkit-font-smoothing: antialiased;min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
main > section { margin-bottom: var(--section-space); }
main > section:first-of-type:not(.home-hero) { padding-top: var(--section-space); }
.content > * + * { margin-top: 1rem; }

h1, h2, h3, h4 { font-family: var(--primary-font); color: var(--text-main); line-height: 1.1; margin-bottom: 0.5em; text-wrap: balance;}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 12px; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--primary-font); font-size: 1rem; font-weight: 600; padding: 10px 24px; border-radius: var(--br); border: 1px solid transparent; transition: all 0.5s ease; cursor: pointer; letter-spacing: 0.1em; text-decoration: none; }

.btn-primary { background: var(--primary-color); color: var(--text-on-primary); border-color: var(--primary-color); box-shadow: 0 4px 10px rgba(1, 140, 140, 0.15); }
.btn-primary:is(:hover, :focus-visible) { background: transparent; color: var(--primary-color); border-color: var(--primary-color); transform: translateY(-1px); box-shadow: none; outline: none; }

.btn-secondary { background: transparent; color: var(--text-main); border-color: var(--border-color); }
.btn-secondary:is(:hover, :focus-visible) { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-1px); outline: none; }

.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 4px; }

/* --- Secties --- */
.bg-color { background-color: var(--bg-surface); } /* Gebruik de surface kleur voor afwisseling */
[class*="bg-"] {  padding-top: var(--section-space);  padding-bottom: var(--section-space); }

/* --- Header & Navigatie --- */
.site-header { position: sticky; width: 100%; top: 0; z-index: 1000; background: transparent; }
.home-page > .site-header { position: fixed; left: 0; right: 0; }
.site-header .site-navbar { background: transparent; padding-top: 1rem; padding-bottom: 1rem; transition: all 0.25s ease;}
.site-navbar .navbar-nav { gap: 24px; }
.site-navbar .navbar-toggler { display: none; justify-content: center; align-items: center; padding: 0.7rem; border: 1px solid var(--border-color); border-radius: 14px; background: rgba(24, 31, 31, 0.72); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18); transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
.site-navbar .navbar-toggler:is(:hover, :focus-visible) { border-color: rgba(1, 140, 140, 0.42); }
.site-navbar .navbar-toggler:focus { box-shadow: none; }
.site-navbar .site-navbar-toggler-box { display: grid; gap: 5px; width: 20px; }
.site-navbar .site-navbar-toggler-line { display: block; width: 100%; height: 2px; border-radius: 999px; background: var(--text-main); transition: transform 0.3s ease, opacity 0.3s ease; }
.site-navbar .navbar-toggler.is-open .site-navbar-toggler-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-navbar .navbar-toggler.is-open .site-navbar-toggler-line:nth-child(2) { opacity: 0; }
.site-navbar .navbar-toggler.is-open .site-navbar-toggler-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-navbar .site-mobile-menu { color: var(--text-main); background: transparent; border: 0; }
.site-navbar .site-mobile-menu .offcanvas-body { display: flex; justify-content: flex-end; padding: 0; }
.site-navbar .site-mobile-menu-header { padding-bottom: 0; border-bottom: 0; }
.site-navbar .site-mobile-menu-brand { display: flex; flex-direction: column; gap: 4px; }
.site-navbar .site-mobile-menu-kicker { font-family: var(--primary-font); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--primary-color); }
.site-navbar .site-mobile-menu-title { font-family: var(--primary-font); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; }
.site-navbar .site-mobile-menu-close { width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; background: rgba(255, 255, 255, 0.04); box-shadow: none; opacity: 1; }
.site-navbar .site-mobile-menu-close:focus { box-shadow: none; border-color: rgba(1, 140, 140, 0.35); }

/* Subtiele achtergrond bij scrollen */
.site-header.is-scrolled .site-navbar { padding-top: 0.55rem; padding-bottom: 0.55rem; background: rgba(13, 18, 18, 0.95); backdrop-filter: blur(10px);border-bottom: 1px solid var(--border-color);}
.site-header .site-navbar .navbar-brand img {  height: 60px;  width: auto;  display: block;  filter: var(--filter-white);  transition: height 0.25s ease;}
.site-header.is-scrolled .site-navbar .navbar-brand img { height: 50px; }
.site-navbar .navbar-nav .nav-link { color: var(--text-main); font-family: var(--primary-font); font-weight: 500;transition: color 0.3s ease;}
.site-navbar .navbar-nav .nav-link:is(:hover, :focus) { color: var(--primary-color); }
.site-navbar .navbar-nav .dropdown-toggle { display: inline-flex; align-items: center; gap: 0.42rem; }
.site-navbar .navbar-nav .dropdown-toggle::after { content: var(--chevron-down); border: 0; margin-left: 0; width: auto; height: auto; font-family: var(--font-awesome); font-weight: 900; font-size: 0.72rem; line-height: 1; opacity: 0.92; transform-origin: center; transition: all 0.5s;}
.site-navbar .navbar-nav .dropdown-toggle.show::after,
.site-navbar .navbar-nav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); color: var(--primary-color); opacity: 1;}

/* Dropdown Menu */
.site-navbar .dropdown-menu {  background: var(--bg-elevated);  border: 1px solid var(--border-color);  border-radius: var(--br); box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding: 0.5rem;}
.site-navbar .dropdown-item { color: var(--text-main); font-family: var(--primary-font);font-size: 0.95rem;padding: 0.6rem 1rem;border-radius: 4px;transition: all 0.2s ease;}
.site-navbar .dropdown-item:is(:hover, :focus, .active) { color: var(--text-on-primary); background: var(--primary-color);}

/* --- Elementen --- */
.content a:not(.btn) {color: var(--primary-color);}
.picture {  border-radius: var(--br);  overflow: hidden;  border: 1px solid var(--border-color);}
.picture img {width: 100%;}
footer { color: var(--text-muted); border-top: 1px solid var(--border-color); background: var(--bg-surface); }
.site-footer { padding-top: 60px; padding-bottom: 28px; }
.footer-top { padding-bottom: 36px; border-bottom: 1px solid var(--border-color); }
.footer-brand { display: inline-block; margin-bottom: 18px; }
.footer-brand img { width: 170px; height: auto; filter: var(--filter-white); opacity: 0.95; }
.footer-intro { margin: 0; max-width: 272px; color: var(--text-muted); }
.footer-title { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; color: var(--text-main); }
.footer-links,
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a,
.footer-contact a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; }
.footer-links a:hover,
.footer-contact a:hover { color: var(--primary-color); }
.footer-contact li { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.footer-contact i { color: var(--primary-color); width: 18px; text-align: center; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-socials a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-main); text-decoration: none; transition: all 0.2s ease;}
.footer-socials a:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-1px); }
.footer-bottom { padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.footer-bottom p { margin: 0; font-size: 0.95rem; color: var(--text-muted); }
.footer-legal { margin-left: auto; text-align: right; }
.footer-legal a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; }
.footer-legal a:hover { color: var(--primary-color); }

.footer-links {display: block; column-count: 2;}

/* Banner vervolg pagina */
.banner { position: relative; height: clamp(210px, 21vw, 320px); }
.banner .image { margin: 0; height: 100%; }
.banner .image::before {content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(13, 18, 18, 0.4) 0%, rgba(13, 18, 18, 0.8) 100%); opacity: 0.8; }
.banner .image img { width: 100%; height: 100%; object-fit: cover; }
.banner .content {position: absolute; width: 100%; height: 100%; inset: 0; display: flex; align-items: center;}
.banner .content h1 {
    margin-bottom: 0;
    max-width: 100%;
    line-height: 0.98;
    overflow-wrap: anywhere;
}

/* --- Media Queries --- */

@media only screen and (max-width: 991px) {

    :root {
        --section-space: 56px;
        --mobile-header-offset: calc(84px + env(safe-area-inset-top, 0px));
    }

    html,
    body {
        overflow-x: clip;
    }

    html.mobile-menu-open,
    body.mobile-menu-open {
        overflow: hidden;
    }

    .site-header { position: fixed; left: 0; right: 0; }
    main:not(.home-page) { padding-top: var(--mobile-header-offset); }
    .site-header .site-navbar { padding-top: 0.7rem; padding-bottom: 0.7rem;}
    .site-navbar .navbar-toggler { display: flex; width: 52px; height: 52px; padding: 0; border-radius: 16px; background: linear-gradient(180deg, rgba(35, 43, 43, 0.96) 0%, rgba(19, 24, 24, 0.94) 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); position: relative; z-index: 1047; }
    .site-navbar .navbar-toggler.is-open { background: rgba(14, 19, 19, 0.94); border-color: rgba(1, 140, 140, 0.35); }
    .site-navbar .site-mobile-menu { width: 100% !important; max-width: none; height: 100dvh; padding: 0; background: radial-gradient(circle at top right, rgba(1, 140, 140, 0.28), transparent 34%), radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.08), transparent 20%), linear-gradient(180deg, rgba(9, 14, 14, 0.98) 0%, rgba(13, 18, 18, 0.99) 100%); }
    .site-navbar .site-mobile-menu .offcanvas-header { position: relative; z-index: 1; padding: 24px 22px 10px; }
    .site-navbar .site-mobile-menu .offcanvas-body { position: relative; z-index: 1; padding: 8px 22px 28px; align-items: flex-start; overflow-y: auto; }
    .site-navbar .site-mobile-menu .navbar-nav { width: 100%; gap: 10px; }
    .site-navbar .site-mobile-menu .navbar-nav .nav-item { width: 100%; }
    .site-navbar .site-mobile-menu .navbar-nav .nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); font-size: clamp(1.08rem, 3.8vw, 1.35rem); }
    .site-navbar .site-mobile-menu .navbar-nav .nav-link:is(:hover, :focus) { background: linear-gradient(180deg, rgba(1, 140, 140, 0.24) 0%, rgba(1, 140, 140, 0.12) 100%); border-color: rgba(1, 140, 140, 0.34); color: var(--text-main); }
    .site-navbar .site-mobile-menu .navbar-nav .dropdown-toggle { justify-content: space-between; width: 100%; }
    .site-navbar .site-mobile-menu .navbar-nav .dropdown-toggle::after { font-size: 0.82rem; }
    .site-navbar .site-mobile-menu .dropdown-menu { position: static !important; transform: none !important; width: 100%; margin-top: 8px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; }
    .site-navbar .site-mobile-menu .dropdown-menu.show { display: grid; gap: 6px; }
    .site-navbar .site-mobile-menu .dropdown-item { padding: 12px 14px; border-radius: 12px; color: var(--text-muted); }
    .site-navbar .site-mobile-menu .dropdown-item:is(:hover, :focus, .active) { color: var(--text-main); background: rgba(1, 140, 140, 0.16); }
    body.mobile-menu-open .site-header .site-navbar { background: rgba(13, 18, 18, 0.96); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

    .site-footer { padding-top: 44px; }
    .footer-top { padding-bottom: 28px; }
    .footer-links { column-count: 1; }
    .banner { height: clamp(180px, 24vw, 250px); }
    .footer-bottom { flex-wrap: wrap; gap: 10px; }
    .footer-legal { margin-left: 0; text-align: left; width: 100%; }
}

@media only screen and (max-width: 767px) {

    :root {
        --section-space: 44px;
    }

    main > section:first-of-type:not(.home-hero) { padding-top: 38px; }
    .banner { height: clamp(160px, 32vw, 210px); }
    .banner .content { align-items: flex-end; padding-bottom: 22px; }
    .banner .content h1 { margin-bottom: 0.2rem; }
    .site-footer { padding-top: 38px; padding-bottom: 18px; }
    .footer-top { padding-bottom: 22px; }
    .footer-bottom { padding-top: 14px; }
}

@media only screen and (max-width: 575px) {

    :root {
        --section-space: 36px;
    }

    .container,
    .container-sm {
        padding-left: 16px;
        padding-right: 16px;
    }

    .banner { height: clamp(145px, 36vw, 180px); }
    .btn {width: 100%;}
}