/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --blue-900: #0a1628;
    --blue-800: #0f2240;
    --blue-700: #143a6b;
    --blue-600: #1a4f8b;
    --blue-500: #2563eb;
    --blue-400: #4a8af5;
    --blue-300: #7babf8;
    --blue-200: #b3d1fc;
    --blue-100: #dbeafe;
    --blue-50:  #eff6ff;
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50:  #f9fafb;
    --white:    #ffffff;
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --max-w: 1200px;
    --radius: 12px;
    --shadow: 0 4px 24px rgba(10,22,40,.08);
    --shadow-lg: 0 8px 40px rgba(10,22,40,.12);
    --transition: .25s ease;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--gray-700); line-height: 1.7; background: var(--white); }
a { color: var(--blue-500); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-700); }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

.container { width: 90%; max-width: var(--max-w); margin: 0 auto; }

/* ===== Header / Navbar ===== */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
    transition: box-shadow var(--transition);
}
.navbar.scrolled { box-shadow: var(--shadow); }

.navbar .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
}

.navbar__logo {
    font-size: 1.5rem; font-weight: 800; color: var(--blue-700);
    letter-spacing: -.5px;
}
.navbar__logo span { color: var(--blue-500); }

.navbar__links { display: flex; gap: 1.5rem; align-items: center; }
.navbar__links a {
    font-size: .925rem; font-weight: 500; color: var(--gray-600);
    position: relative; padding: .25rem 0;
}
.navbar__links a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--blue-500); transition: width var(--transition);
}
.navbar__links a:hover, .navbar__links a.active { color: var(--blue-700); }
.navbar__links a:hover::after, .navbar__links a.active::after { width: 100%; }

.navbar__cta {
    background: transparent; color: var(--blue-600) !important; padding: .5rem 1.1rem;
    border-radius: 6px; font-weight: 600; font-size: .8rem;
    border: 1.5px solid var(--blue-200);
    transition: all var(--transition);
    display: inline-flex; align-items: center; gap: .3rem;
    letter-spacing: .2px;
}
.navbar__cta::after { display: none !important; }
.navbar__cta:hover { border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-700) !important; }

.hamburger {
    display: none; flex-direction: column; gap: 5px; cursor: pointer;
    background: none; border: none; padding: 4px;
}
.hamburger span { width: 24px; height: 2px; background: var(--gray-700); transition: var(--transition); border-radius: 2px; }

/* ===== Hero ===== */
.hero {
    padding: 8rem 0 4rem;
    background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 100%);
    color: var(--white); position: relative; overflow: hidden;
}
.hero::before {
    content: ''; position: absolute; top: -50%; right: -20%; width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(37,99,235,.25) 0%, transparent 70%);
    border-radius: 50%;
}
.hero .container { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.hero__badge {
    display: inline-block; background: rgba(255,255,255,.12); padding: .4rem 1rem;
    border-radius: 20px; font-size: .8rem; font-weight: 600; margin-bottom: 1.5rem;
    letter-spacing: .5px; text-transform: uppercase;
}
.hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem; }
.hero p { font-size: 1.15rem; line-height: 1.8; color: var(--blue-200); margin-bottom: 2rem; max-width: 520px; }

.hero__buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn {
    display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.8rem;
    border-radius: 8px; font-weight: 600; font-size: .95rem;
    transition: all var(--transition); cursor: pointer; border: none;
}
.btn--primary { background: var(--blue-500); color: var(--white); }
.btn--primary:hover { background: var(--blue-400); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,.35); }
.btn--outline { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.3); }
.btn--outline:hover { border-color: var(--white); color: var(--white); transform: translateY(-2px); }
.btn--white { background: var(--white); color: var(--blue-700); }
.btn--white:hover { background: var(--blue-50); color: var(--blue-700); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.hero__visual {
    display: flex; justify-content: center; align-items: center;
}
.hero__stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.stat-card {
    background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius);
    padding: 1.75rem; text-align: center;
    transition: transform var(--transition), background var(--transition);
}
.stat-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
.stat-card__number { font-size: 2.25rem; font-weight: 800; color: var(--blue-300); }
.stat-card__label { font-size: .85rem; color: var(--blue-200); margin-top: .25rem; }

/* ===== Sections ===== */
.section { padding: 3.5rem 0; }
.section--gray { background: var(--gray-50); }
.section--blue { background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 100%); color: var(--white); }
.section__header { text-align: center; margin-bottom: 2.5rem; }
.section__label {
    display: inline-block; font-size: .8rem; font-weight: 700; color: var(--blue-500);
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: .75rem;
}
.section__title { font-size: 2.25rem; font-weight: 800; color: var(--gray-900); line-height: 1.25; }
.section--blue .section__title { color: var(--white); }
.section__subtitle { font-size: 1.05rem; color: var(--gray-500); margin-top: .75rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.section--blue .section__subtitle { color: var(--blue-200); }

/* ===== Service Cards ===== */
.services-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.services-grid--2col { grid-template-columns: 1fr 1fr; }
.service-card {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 1.5rem; transition: all var(--transition); position: relative; overflow: hidden;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
    transform: scaleX(0); transition: transform var(--transition); transform-origin: left;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); }
.service-card:hover::before { transform: scaleX(1); }

.service-card__icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: var(--blue-50); color: var(--blue-500);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: .75rem;
}
.service-card__icon svg { width: 20px; height: 20px; }
.service-card h3 { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: .5rem; }
.service-card p { font-size: .85rem; color: var(--gray-600); line-height: 1.6; }
.service-card__link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .875rem; font-weight: 600; color: var(--blue-500); margin-top: 1.25rem;
}
.service-card__link:hover { gap: .6rem; }

/* ===== Feature List ===== */
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.features-grid--reverse .features-content { order: 2; }
.features-grid--reverse .features-visual { order: 1; }

.feature-item { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.feature-item__icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px;
    background: var(--blue-50); color: var(--blue-500); display: flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem;
}
.feature-item h4 { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: .25rem; }
.feature-item p { font-size: .9rem; color: var(--gray-600); }

.features-visual {
    background: linear-gradient(135deg, var(--blue-50), var(--blue-100));
    border-radius: var(--radius); padding: 3rem; text-align: center;
    border: 1px solid var(--blue-200);
}
.features-visual__icon { font-size: 4rem; margin-bottom: 1rem; color: var(--blue-500); opacity: .6; }

/* ===== Partners ===== */
.partners-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; align-items: center;
}
.partner-badge {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: 8px;
    padding: .75rem 1.5rem; font-weight: 600; color: var(--gray-600); font-size: .9rem;
    transition: all var(--transition);
}
.partner-badge:hover { border-color: var(--blue-300); color: var(--blue-600); box-shadow: var(--shadow); }

/* ===== Certifications ===== */
.cert-cards { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.cert-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius); padding: 2rem 2.5rem; text-align: center;
    transition: all var(--transition);
}
.cert-card:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
.cert-card__name { font-size: 1.5rem; font-weight: 800; color: var(--blue-300); }
.cert-card__desc { font-size: .85rem; color: var(--blue-200); margin-top: .5rem; }

/* ===== Dental Hero ===== */
.dental-hero {
    padding: 8rem 0 3.5rem;
    background: linear-gradient(135deg, var(--blue-800) 0%, #0c4a6e 100%);
    color: var(--white);
}
.dental-hero h1 { font-size: 2.75rem; font-weight: 800; margin-bottom: 1rem; }
.dental-hero p { font-size: 1.1rem; color: var(--blue-200); max-width: 600px; }

/* ===== Contact ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.contact-info-card {
    background: var(--blue-50); border-radius: var(--radius); padding: 2.5rem;
    border: 1px solid var(--blue-100);
}
.contact-info-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1.5rem; }
.contact-detail { display: flex; gap: 1rem; margin-bottom: 1.25rem; align-items: flex-start; }
.contact-detail__icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px;
    background: var(--blue-500); color: var(--white); display: flex;
    align-items: center; justify-content: center; font-size: .9rem; font-weight: 700;
}
.contact-detail h4 { font-size: .925rem; font-weight: 700; color: var(--gray-900); margin-bottom: .15rem; }
.contact-detail p, .contact-detail a { font-size: .9rem; color: var(--gray-600); }

.contact-form { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 2.5rem; }
.contact-form h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 1.5rem; }

.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .875rem; font-weight: 600; color: var(--gray-700); margin-bottom: .4rem; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: .75rem 1rem; border: 1px solid var(--gray-300); border-radius: 8px;
    font-family: var(--font); font-size: .925rem; color: var(--gray-700);
    transition: border-color var(--transition), box-shadow var(--transition);
    background: var(--white);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ===== Support Banner ===== */
.support-banner {
    background: var(--blue-500); color: var(--white); padding: 1rem 0;
    text-align: center; font-size: .9rem;
}
.support-banner a { color: var(--white); font-weight: 700; text-decoration: underline; }
.support-banner a:hover { color: var(--blue-100); }

/* ===== CTA Section ===== */
.cta-section {
    padding: 3.5rem 0; text-align: center;
    background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-900) 100%);
    color: var(--white);
}
.cta-section h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; }
.cta-section p { font-size: 1.05rem; color: var(--blue-200); margin-bottom: 2rem; max-width: 550px; margin-left: auto; margin-right: auto; }
.cta-section .btn { margin: 0 .5rem; }

/* ===== Footer ===== */
.footer {
    background: var(--blue-900); color: var(--blue-200); padding: 4rem 0 2rem;
}
.footer__grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
    margin-bottom: 3rem;
}
.footer__brand p { font-size: .9rem; line-height: 1.7; margin-top: .75rem; max-width: 300px; }
.footer h4 { font-size: .925rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .5px; }
.footer ul li { margin-bottom: .5rem; }
.footer ul a { color: var(--blue-200); font-size: .9rem; }
.footer ul a:hover { color: var(--white); }

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08); padding-top: 2rem;
    display: flex; justify-content: space-between; align-items: center;
    font-size: .825rem; color: var(--gray-500);
}
.footer__bottom a { color: var(--gray-500); }
.footer__bottom a:hover { color: var(--blue-300); }
.footer__certs { display: flex; gap: 1rem; }
.footer__cert-badge {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px; padding: .35rem .75rem; font-size: .75rem; font-weight: 600;
    color: var(--blue-300);
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
    --white: #1b1b1b;
    --gray-50: #222222;
    --gray-100: #2a2a2a;
    --gray-200: #3a3a3a;
    --gray-300: #4a4a4a;
    --gray-400: #888888;
    --gray-500: #999999;
    --gray-600: #b0b0b0;
    --gray-700: #cccccc;
    --gray-900: #e8e8e8;
    --blue-50: #1e2a3a;
    --blue-100: #243244;
    --blue-700: #60a5fa;
    --blue-600: #3b82f6;
}
[data-theme="dark"] .navbar { background: rgba(27,27,27,.97); border-bottom-color: #333; }
[data-theme="dark"] .navbar__links a:hover,
[data-theme="dark"] .navbar__links a.active { color: var(--blue-400); }
[data-theme="dark"] .navbar__cta { color: var(--blue-400) !important; border-color: #3a3a3a; }
[data-theme="dark"] .navbar__cta:hover { border-color: var(--blue-400); background: rgba(37,99,235,.1); color: var(--blue-300) !important; }
[data-theme="dark"] .service-card { background: #222; border-color: #333; }
[data-theme="dark"] .service-card:hover { border-color: var(--blue-400); }
[data-theme="dark"] .contact-form { background: #222; border-color: #333; }
[data-theme="dark"] .contact-info-card { background: #222; border-color: #333; }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select { background: #1b1b1b; border-color: #444; color: #ccc; }
[data-theme="dark"] .partner-badge { background: #222; border-color: #333; color: #999; }
[data-theme="dark"] .features-visual { background: linear-gradient(135deg, #222, #1b1b1b); border-color: #333; }
[data-theme="dark"] .features-visual h3 { color: var(--blue-300); }
[data-theme="dark"] .hamburger span { background: #b0b0b0; }
[data-theme="dark"] img:not([src*="logo"]) { filter: brightness(.92); }
[data-theme="dark"] .support-banner { background: var(--blue-600); }
[data-theme="dark"] .cert-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }

/* Dark mode: fix elements that use --white for text (buttons, hero, footer, etc.) */
[data-theme="dark"] .btn--primary { background: var(--blue-500); color: #ffffff; }
[data-theme="dark"] .btn--primary:hover { background: var(--blue-400); color: #ffffff; }
[data-theme="dark"] .btn--outline { color: #ffffff; border-color: rgba(255,255,255,.3); }
[data-theme="dark"] .btn--outline:hover { color: #ffffff; border-color: #ffffff; }
[data-theme="dark"] .btn--white { background: #222; color: var(--blue-300); }
[data-theme="dark"] .btn--white:hover { background: #2a2a2a; color: var(--blue-300); }
[data-theme="dark"] .hero { background: linear-gradient(135deg, #0a1225 0%, #0f2240 100%); color: #ffffff; }
[data-theme="dark"] .hero h1 { color: #ffffff; }
[data-theme="dark"] .hero p { color: var(--blue-300); }
[data-theme="dark"] .hero__badge { color: #ffffff; }
[data-theme="dark"] .dental-hero { background: linear-gradient(135deg, #0f2240 0%, #0c3a5e 100%); color: #ffffff; }
[data-theme="dark"] .dental-hero h1 { color: #ffffff; }
[data-theme="dark"] .section--blue { background: linear-gradient(135deg, #0a1225 0%, #0f1c30 100%); }
[data-theme="dark"] .section--blue .section__title { color: #ffffff; }
[data-theme="dark"] .section--blue .section__subtitle { color: var(--blue-300); }
[data-theme="dark"] .cta-section { background: linear-gradient(135deg, #0f2240 0%, #0a1225 100%); }
[data-theme="dark"] .cta-section h2 { color: #ffffff; }
[data-theme="dark"] .cta-section p { color: var(--blue-300); }
[data-theme="dark"] .footer { background: #111; color: var(--blue-300); }
[data-theme="dark"] .footer h4 { color: #e8e8e8; }
[data-theme="dark"] .contact-detail__icon { background: var(--blue-500); color: #ffffff; }
[data-theme="dark"] .support-banner { color: #ffffff; }
[data-theme="dark"] .support-banner a { color: #ffffff; }
[data-theme="dark"] .stat-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .stat-card__number { color: var(--blue-300); }
[data-theme="dark"] .stat-card__label { color: var(--blue-200); }

.theme-toggle {
    background: none; border: 1px solid var(--gray-200); border-radius: 6px;
    padding: .4rem; cursor: pointer; color: var(--gray-500); display: flex;
    align-items: center; justify-content: center; transition: all var(--transition);
}
.theme-toggle:hover { border-color: var(--blue-400); color: var(--blue-500); }

/* Smooth dark mode transition */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease !important;
}

.navbar__link--subtle {
    font-size: .85rem !important; font-weight: 500; color: var(--gray-400) !important;
}
.navbar__link--subtle::after { display: none !important; }
.navbar__link--subtle:hover { color: var(--blue-500) !important; }

/* ===== Vacatures: overzicht & navigatie ===== */
.vacature-anchor { scroll-margin-top: 130px; }

.vacature-jumpbar {
    position: sticky; top: 71px; z-index: 900;
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
}
.vacature-jumpbar__inner {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.vacature-jumpbar__inner::-webkit-scrollbar { display: none; }
.vacature-jumpbar__label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--gray-400); white-space: nowrap; margin-right: .35rem;
}
.vacature-pill {
    font-size: .85rem; font-weight: 600; color: var(--gray-600); white-space: nowrap;
    border: 1px solid var(--gray-200); border-radius: 999px; padding: .4rem .9rem;
    transition: all var(--transition);
}
.vacature-pill:hover { border-color: var(--blue-400); color: var(--blue-500); }
.vacature-pill.active { background: var(--blue-500); border-color: var(--blue-500); color: #ffffff; }

.vacature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.vacature-card {
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
    padding: 1.5rem; transition: all var(--transition); position: relative; overflow: hidden;
}
.vacature-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-400));
    transform: scaleX(0); transition: transform var(--transition); transform-origin: left;
}
.vacature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); }
.vacature-card:hover::before { transform: scaleX(1); }
.vacature-card__level {
    font-size: .7rem; font-weight: 700; color: var(--blue-500);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: .6rem;
}
.vacature-card__title { font-size: 1.15rem; font-weight: 700; color: var(--gray-900); margin-bottom: .6rem; line-height: 1.35; }
.vacature-card__text { font-size: .925rem; color: var(--gray-500); line-height: 1.7; flex: 1; margin-bottom: 1.1rem; }
.vacature-card__link {
    font-size: .875rem; font-weight: 600; color: var(--blue-500);
    display: inline-flex; align-items: center; gap: .4rem;
}
.vacature-card__link svg { transition: transform var(--transition); }
.vacature-card:hover .vacature-card__link svg { transform: translateY(3px); }

.vacature-back {
    display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem;
    font-size: .8rem; font-weight: 600; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .5px;
}
.vacature-back:hover { color: var(--blue-500); }

[data-theme="dark"] .vacature-jumpbar { background: rgba(27,27,27,.96); border-bottom-color: #333; }
[data-theme="dark"] .vacature-pill { border-color: #333; }
[data-theme="dark"] .vacature-pill:hover { border-color: var(--blue-400); color: var(--blue-400); }
[data-theme="dark"] .vacature-pill.active { background: var(--blue-500); border-color: var(--blue-500); color: #ffffff; }
[data-theme="dark"] .vacature-card { background: #222; border-color: #333; }
[data-theme="dark"] .vacature-card:hover { border-color: var(--blue-400); }

/* ===== Responsive ===== */
@media (max-width: 968px) {
    /* Navbar goes mobile at 968px - too many links for horizontal */
    .navbar__links {
        display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
        background: var(--white); flex-direction: column; padding: 2rem;
        gap: .75rem; align-items: flex-start; border-top: 1px solid var(--gray-200);
        overflow-y: auto; z-index: 999;
    }
    .navbar__links.open { display: flex; }
    .navbar__links a { font-size: 1rem; padding: .5rem 0; }
    .navbar__cta { margin-top: .5rem; }
    .theme-toggle { margin-top: .5rem; }
    .hamburger { display: flex; }

    .hero__grid { grid-template-columns: 1fr; text-align: center; }
    .hero p { margin-left: auto; margin-right: auto; }
    .hero__buttons { justify-content: center; }
    .hero__visual { margin-top: 2rem; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .features-grid--reverse .features-content { order: 1; }
    .features-grid--reverse .features-visual { order: 2; }
    .contact-grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .vacature-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .hero h1 { font-size: 2rem; }
    .hero { padding: 8rem 0 4rem; }
    .services-grid { grid-template-columns: 1fr !important; }
    .hero__stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .section__title { font-size: 1.75rem; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
    .form-row { grid-template-columns: 1fr; }
    .dental-hero h1 { font-size: 2rem; }
    .dental-hero { padding: 7rem 0 3rem; }
    .partners-row { gap: 1rem; }
    .partner-badge { padding: .5rem 1rem; font-size: .8rem; }
    .cert-cards { gap: 1rem; }
    .cert-card { padding: 1.25rem 1.5rem; }
    .vacature-cards { grid-template-columns: 1fr; }
    .vacature-jumpbar__label { display: none; }
}

/* ===== Mobile refinements ===================================================
   Added after a Playwright audit across 320/375/390/768/1024/1440 viewports.
   The audit found NO horizontal scrolling, no overflow and no console errors --
   the layout itself was sound. What it did find was interactive controls below
   the 44x44 CSS-px minimum (WCAG 2.5.5 Target Size / Apple HIG) and two labels
   under 12px.

   These rules grow the TAPPABLE AREA rather than the visual design, and are
   scoped to <=968px, so desktop rendering is byte-identical.
   ========================================================================== */

/* 0.7rem = 11.2px, below the ~12px practical floor for body text on a phone. */
.vacature-card__level,
.vacature-jumpbar__label { font-size: .75rem; }

@media (max-width: 968px) {
    /* The hamburger measured 32x24: the most important control on mobile and
       the smallest one on the page. Keep the 24px bars, grow the hit box. */
    .hamburger {
        box-sizing: border-box;
        width: 44px; height: 44px; padding: 0;
        align-items: center; justify-content: center;
    }

    /* Logo anchor wrapped a 36px image, giving a 36px-tall target. */
    .navbar__logo { display: inline-flex; align-items: center; min-height: 44px; }

    /* Footer links were the largest cluster of undersized targets -- 14 per
       page at 16px tall. Trade the 8px list gap for a proper 44px row so the
       footer does not grow more than necessary. */
    .footer ul li { margin-bottom: 0; }
    .footer ul a { display: flex; align-items: center; min-height: 44px; }

    /* Contact form controls sat at 43px -- one pixel short of the minimum. */
    .form-group input, .form-group select { min-height: 44px; }

    /* Vacature filter pills were 38px tall, the back link 22px. */
    .vacature-pill { padding: .6rem 1rem; }
    .vacature-back { display: inline-flex; align-items: center; min-height: 44px; }

    /* The pill bar scrolls horizontally with its scrollbar hidden, so on a
       phone the off-screen pills gave no hint they existed. Fade the right
       edge to signal there is more to swipe to. */
    .vacature-jumpbar { position: sticky; }
    .vacature-jumpbar::after {
        content: ''; position: absolute; top: 0; right: 0; bottom: 0;
        width: 2.5rem; pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96));
    }
    [data-theme="dark"] .vacature-jumpbar::after {
        background: linear-gradient(90deg, rgba(27,27,27,0), rgba(27,27,27,.96));
    }
}

/* --- Second pass: standalone controls the first pass missed -----------------
   Identified by re-running the audit and walking each element's ancestor chain,
   rather than by eye. Links sitting inside a sentence are deliberately NOT
   enlarged: WCAG 2.5.5 exempts inline text links, and padding them out would
   wreck the paragraph rhythm. Only standalone controls are grown.
   Also applied to any coarse pointer (touch tablets, which can be >968px). */
@media (max-width: 968px), (pointer: coarse) {
    /* Blue support banner: "Remote support" / phone number, 16px tall. */
    .support-banner a { display: inline-flex; align-items: center; min-height: 44px; }

    /* Footer brand logo: inline <a> around a 36px image collapsed to 19px. */
    .footer__brand > a { display: inline-flex; align-items: center; min-height: 44px; }

    /* Standalone "Bekijk de volledige aanpak ->" call to action. */
    .features-visual a { display: inline-flex; align-items: center; min-height: 44px; }

    /* "< Terug naar nieuws" back link at the top of each article. */
    .hero > .container > div > a[href="/nieuws"] {
        display: inline-flex; align-items: center; min-height: 44px;
    }
}