:root {
    --ink: #263b3b;
    --muted: #647373;
    --cream: #f2f6f5;
    --teal: #15aa9b;
    --teal-dark: #087f76;
    --lime: #ff7447;
    --line: #d9e3e1;
    --orange: #ff7447;
    --soft-mint: #dff5f1;
    font-family: "DM Sans", sans-serif;
}

body { background: #fff; color: var(--ink); }
h1, h2, h3, .brand { font-family: "Manrope", sans-serif; }
.page-shell { width: min(1200px, calc(100% - 64px)); }

.utility-bar { height: 34px; background: #eef3f2; color: #657573; font-size: .78rem; }
.utility-inner { width: min(1200px, calc(100% - 64px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.utility-inner > div { display: flex; align-items: center; gap: 13px; }
.utility-inner i { width: 4px; height: 4px; border-radius: 50%; background: #a9b5b3; }
.utility-inner a:hover { color: var(--teal-dark); }

.site-header { height: 96px; width: min(1200px, calc(100% - 64px)); gap: 38px; background: #fff; }
.brand { font-size: 1.3rem; line-height: 1; }
.brand > span:last-child, .footer-brand > span:last-child { display: grid; gap: 5px; }
.brand small, .footer-brand small { font-family: "DM Sans", sans-serif; color: #82908e; font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { width: 43px; height: 43px; border-radius: 50% 50% 50% 12px; background: var(--teal); color: #fff; }
.site-header nav { gap: 33px; }
.site-header nav a { color: #394d4c; font-weight: 700; position: relative; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 2px; background: var(--teal); transition: right .2s ease; }
.site-header nav a:hover::after, .site-header nav a.active::after { right: 0; }
.header-cta { background: var(--orange); padding: 14px 20px; border-radius: 7px; display: flex; gap: 16px; align-items: center; box-shadow: 0 8px 22px #ff74472b; }

.hero { width: 100%; max-width: none; min-height: 595px; padding: 74px max(32px, calc((100% - 1200px) / 2)) 110px; grid-template-columns: .88fr 1.12fr; background: #dfe7e6; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 410px; height: 410px; border: 76px solid #c7eee8; border-radius: 50%; left: -240px; top: -210px; opacity: .75; }
.hero-copy { position: relative; z-index: 1; }
.hero-label { display: flex; align-items: center; gap: 13px; color: var(--teal-dark); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.hero-label span { color: #fff; background: var(--teal); padding: 5px 9px; border-radius: 4px; font-weight: 800; }
.hero h1 { font-size: clamp(3.2rem, 5.4vw, 5.3rem); margin: 28px 0 27px; color: #293d3d; }
.hero h1 em { color: var(--teal-dark); }
.hero .lead { color: #506260; max-width: 600px; }
.primary-button { background: var(--orange); border-radius: 7px; box-shadow: 0 8px 22px #ff74472b; }
.secondary-button { border-radius: 7px; border-color: #bdccca; background: transparent; }
.primary-button:hover, .header-cta:hover { background: #eb6035; transform: translateY(-1px); }
.hero-photo-wrap { z-index: 1; }
.hero-photo { aspect-ratio: 16 / 10; border-radius: 4px; object-position: center; box-shadow: 0 24px 60px #254c4827; }
.hero-photo-wrap::after { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 2px solid #fff; z-index: -1; }
.photo-badge { left: -35px; bottom: -30px; background: #fff; border-radius: 8px; padding: 17px 22px; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; }
.photo-badge > div { display: grid; }
.badge-check, .proof-check { display: grid; place-items: center; border-radius: 50%; background: var(--soft-mint); color: var(--teal-dark); font-weight: 800; }
.badge-check { width: 38px; height: 38px; }

.quick-panel { position: relative; margin-top: -40px; background: #fff; border-radius: 11px; display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: 0 18px 65px #24413e17; z-index: 3; overflow: hidden; }
.quick-panel a { min-height: 112px; padding: 24px 27px; display: grid; grid-template-columns: 46px 1fr auto; gap: 15px; align-items: center; border-right: 1px solid var(--line); }
.quick-panel a:last-child { border-right: 0; }
.quick-panel a:hover { background: #f4faf8; }
.quick-panel div { display: grid; }
.quick-panel strong { font-family: "Manrope", sans-serif; }
.quick-panel small { color: var(--muted); font-size: .78rem; }
.quick-panel b { color: var(--teal); font-size: 1.25rem; }
.quick-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #a8dcd5; border-radius: 50%; color: var(--teal-dark); font-size: .75rem; font-weight: 800; }

.proof-strip { margin-top: 70px; background: #fff; color: var(--ink); border-block: 1px solid var(--line); padding-block: 22px; }
.proof-strip div { gap: 12px; }
.proof-strip p { display: grid; margin: 0; }
.proof-strip strong { color: var(--ink); }
.proof-strip span:not(.proof-check) { color: var(--muted); font-size: .82rem; }
.proof-check { width: 30px; height: 30px; }

.intro { padding-block: 105px; }
.eyebrow { color: var(--teal-dark); }
.intro h2 { color: #293d3d; }
.section-rule { margin: 60px 0 45px; height: 8px; background: repeating-linear-gradient(135deg, transparent 0 8px, #273b3b 8px 11px, transparent 11px 19px); opacity: .18; }
.service-grid { margin-top: 0; }
.service-grid article { border: 0; border-radius: 8px; background: #f1f5f4; }
.image-card img { height: 210px; }
.image-card > div > span { color: var(--teal-dark); }

.web-feature { background: var(--teal-dark); }
.web-feature img { border-radius: 4px; }
.web-feature .text-link { display: inline-block; margin-top: 15px; color: #fff; border-bottom: 2px solid var(--orange); }
.page-heading { width: 100%; max-width: none; padding: 80px max(32px, calc((100% - 1200px) / 2)) 60px; background: #dfe7e6; }
.page-heading h1, .contact-copy h1, .chat-intro h1 { color: #293d3d; }
.contact-card, .chat-panel { border-radius: 9px; box-shadow: 0 20px 60px #24413e12; }
.site-footer { background: #243b3a; color: #fff; padding-block: 46px; }
.site-footer p { color: #b8c8c5; }
.footer-brand { display: flex; align-items: center; gap: 11px; }
.footer-brand small { color: #9cafac; }

@media (max-width: 960px) {
    .utility-bar { display: none; }
    .site-header { height: 78px; }
    .quick-panel { grid-template-columns: 1fr; margin-top: -24px; }
    .quick-panel a { border-right: 0; border-bottom: 1px solid var(--line); min-height: 90px; }
    .quick-panel a:last-child { border-bottom: 0; }
}

@media (max-width: 850px) {
    .page-shell, .site-header { width: min(100% - 36px, 1200px); }
    .hero { padding-inline: 24px; grid-template-columns: 1fr; }
    .hero-photo-wrap { margin-top: 25px; }
    .hero-photo-wrap::after { display: none; }
    .photo-badge { left: 18px; bottom: -20px; }
    .proof-strip { margin-top: 50px; }
}

@media (max-width: 520px) {
    .site-header { width: calc(100% - 28px); }
    .brand small { display: none; }
    .hero { padding: 55px 18px 78px; }
    .hero h1 { font-size: 3rem; }
    .hero-label strong { display: none; }
    .actions { margin-top: 28px; }
    .quick-panel { width: calc(100% - 28px); }
    .proof-strip { padding-inline: 20px; }
    .service-grid article { border-radius: 7px; }
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.dropdown-arrow {
    display: inline-block;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    z-index: 1000;
    display: grid;
    width: 19rem;
    padding: 0.65rem;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 0.5rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    box-shadow: 0 1.25rem 3rem rgb(36 65 62 / 15%);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

/* Houdt het submenu open bij hover en toetsenbordfocus */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown:focus-within .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu > a {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    color: var(--ink);
    border-radius: 0.4rem;
}

    .nav-dropdown-menu > a::after {
        display: none;
    }

    .nav-dropdown-menu > a:hover,
    .nav-dropdown-menu > a.active {
        color: var(--teal-dark);
        background: var(--soft-mint);
    }

.nav-dropdown-menu strong {
    font-size: 0.9rem;
}

.nav-dropdown-menu small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
}