/* ============================
   Reset & basis
   ============================ */

   *,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   :root {
       /* Primair palet */
       --primary: #003282;        /* diep blauw */
       --primary-soft: #2459a3;   /* iets lichtere variant */
       --accent: #2f80ed;         /* rustige accentblauw */
       --bg-light: #f4f6fb;       /* licht grijs/blauw */
       --bg-surface: #ffffff;
       --border-subtle: #dde2ed;
   
       /* Tekst */
       --text-main: #1f2933;
       --text-muted: #6b7280;
       --text-on-dark: #ffffff;
   
       /* Footer / donkere vlakken */
       --dark: #101827;
   
       /* Component */
       --radius-sm: 6px;
       --radius-md: 10px;
       --shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.12);
       --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08);
   
       /* Typografie */
       --font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       --font-heading: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   
       /* Afstand */
       --container-width: 1200px;
       --section-y: 4.5rem;
   }
   
   /* Body & basis-typografie */
   
   body {
       font-family: var(--font-primary);
       color: var(--text-main);
       line-height: 1.6;
       background-color: #ffffff;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   
   /* Generieke container */
   
   .container {
       width: 100%;
       max-width: var(--container-width);
       margin: 0 auto;
       padding: 0 1.5rem;
   }
   
   /* Headings */
   
   h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-heading);
       font-weight: 600;
       color: var(--text-main);
   }
   
   /* ============================
      Header & navigatie
      ============================ */
   
   .site-header {
       position: sticky;
       top: 0;
       z-index: 1000;
       background: rgba(255, 255, 255, 0.96);
       backdrop-filter: blur(12px);
       border-bottom: 1px solid rgba(226, 232, 240, 0.8);
   }
   
   .header-container {
       display: flex;
       align-items: center;
       justify-content: space-between;
       max-width: var(--container-width);
       margin: 0 auto;
       padding: 0.9rem 1.5rem;
   }
   
   /* Logo */
   
   .logo {
       display: flex;
       align-items: center;
   }
   
   .text-logo {
       font-family: 'Montserrat', sans-serif;
       font-size: 1.5rem;
       font-weight: 600;
       color: var(--primary);
       text-decoration: none;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       position: relative;
   }
   
   .text-logo::after {
       content: '';
       position: absolute;
       right: -0.9rem;
       top: 50%;
       transform: translateY(-50%);
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--accent);
   }
   
   /* Desktop navigatie */
   
   .desktop-nav {
       display: flex;
       align-items: center;
   }
   
   .desktop-menu {
       list-style: none;
       display: flex;
       gap: 1.8rem;
   }
   
   .desktop-menu a {
       position: relative;
       display: inline-flex;
       align-items: center;
       font-size: 0.95rem;
       font-weight: 500;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       color: var(--text-muted);
       text-decoration: none;
       padding-block: 0.2rem;
       transition: color 0.2s ease, opacity 0.2s ease;
   }
   
   .desktop-menu a::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: -0.4rem;
       width: 0;
       height: 2px;
       border-radius: 999px;
       background: var(--accent);
       transition: width 0.2s ease;
   }
   
   .desktop-menu a:hover {
       color: var(--primary);
   }
   
   .desktop-menu a:hover::after {
       width: 100%;
   }
   
   /* Active states op basis van body class */
   
   body.home .desktop-menu a[href="index.html"],
   body.diensten .desktop-menu .nav-item-dropdown > a,
   body.over-ons .desktop-menu a[href="over-ons.html"],
   body.contact .desktop-menu a[href="contact.html"] {
       color: var(--primary);
   }
   
   body.home .desktop-menu a[href="index.html"]::after,
   body.diensten .desktop-menu .nav-item-dropdown > a::after,
   body.over-ons .desktop-menu a[href="over-ons.html"]::after,
   body.contact .desktop-menu a[href="contact.html"]::after {
       width: 100%;
   }

   /* Diensten dropdown (desktop) */
   .nav-item-dropdown {
       position: relative;
   }
   .nav-item-dropdown .dropdown-menu {
       position: absolute;
       top: 100%;
       left: 50%;
       transform: translateX(-50%) translateY(0.25rem);
       min-width: 220px;
       padding: 0.5rem 0;
       background: #ffffff;
       border-radius: var(--radius-sm);
       box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
       list-style: none;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
       z-index: 100;
   }
   .nav-item-dropdown:hover .dropdown-menu,
   .nav-item-dropdown.is-open .dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateX(-50%) translateY(0);
   }
   .nav-item-dropdown.is-open > a .fa-chevron-down {
       transform: rotate(180deg);
   }
   .nav-item-dropdown .dropdown-menu a {
       display: block;
       padding: 0.5rem 1.25rem;
       font-size: 0.9rem;
       text-transform: none;
       letter-spacing: 0.02em;
       color: var(--text-main);
   }
   .nav-item-dropdown .dropdown-menu a::after {
       display: none;
   }
   .nav-item-dropdown .dropdown-menu a:hover {
       background: var(--bg-light);
       color: var(--primary);
   }
   .nav-item-dropdown > a .fa-chevron-down {
       font-size: 0.65em;
       margin-left: 0.25rem;
       transition: transform 0.2s ease;
   }
   .nav-item-dropdown:hover > a .fa-chevron-down {
       transform: rotate(180deg);
   }
   
   /* Hamburger / mobiel */
   
   .nav-controls {
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .menu-toggle {
       display: none;
       background: none;
       border: none;
       font-size: 1.4rem;
       cursor: pointer;
       color: var(--primary);
   }
   
   /* Mobiel menu overlay */
   
   .main-nav {
       position: fixed;
       inset: 0;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       width: 100%;
       height: 100%;
       min-height: 100vh;
       min-height: 100dvh;
       background: rgba(15, 23, 42, 0.98);
       backdrop-filter: blur(10px);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
       transition: opacity 0.25s ease, visibility 0.25s ease;
       z-index: 999;
   }
   
   .main-nav.active {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
       z-index: 1001;
   }
   
   .menu-content {
       text-align: center;
       padding: 2rem 1.5rem;
       max-height: 85vh;
       overflow-y: auto;
       /* Geen -webkit-overflow-scrolling: touch i.v.m. betrouwbare taps op iOS */
   }
   
   .menu-close-btn {
       position: absolute;
       top: 1rem;
       right: 1rem;
       width: 44px;
       height: 44px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.1);
       border: none;
       border-radius: 50%;
       color: #fff;
       font-size: 1.4rem;
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
   }
   
   .menu-close-btn:hover,
   .menu-close-btn:focus {
       background: rgba(255, 255, 255, 0.2);
   }
   
   .nav-links {
       list-style: none;
   }
   
   .nav-links li + li {
       margin-top: 1.8rem;
   }
   
   .nav-links a {
       font-family: var(--font-heading);
       font-size: 1.4rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: var(--text-on-dark);
       text-decoration: none;
       transition: color 0.2s ease, opacity 0.2s ease;
   }
   
   .nav-links a:hover {
       color: var(--accent);
   }

   /* Twee panelen: hoofmenu en submenu Diensten/Services */
   .menu-content {
       position: relative;
       width: 100%;
       max-width: 320px;
   }
   .nav-panel {
       width: 100%;
   }
   .nav-panel--services {
       display: none;
       text-align: left;
   }
   .main-nav.show-services .nav-panel--main {
       display: none;
   }
   .main-nav.show-services .nav-panel--services {
       display: block;
   }
   .nav-open-submenu {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       padding: 0.6rem 0;
       font-family: var(--font-heading);
       font-size: 1.4rem;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: rgba(241, 245, 249, 0.95);
       background: none;
       border: none;
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
       min-height: 48px;
       text-align: left;
       touch-action: manipulation;
       text-decoration: none;
   }
   .nav-open-submenu:hover {
       color: var(--accent);
   }
   .nav-open-submenu .fa-chevron-right {
       font-size: 0.7em;
       opacity: 0.85;
   }
   .nav-back {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 0 1rem;
       font-family: var(--font-heading);
       font-size: 1rem;
       letter-spacing: 0.06em;
       color: rgba(241, 245, 249, 0.9);
       background: none;
       border: none;
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
       min-height: 44px;
       margin-bottom: 0.5rem;
       touch-action: manipulation;
   }
   .nav-back:hover {
       color: var(--accent);
   }
   .nav-back .fa-arrow-left {
       font-size: 0.9em;
   }
   .nav-submenu-title {
       font-family: var(--font-heading);
       font-size: 0.8rem;
       letter-spacing: 0.15em;
       text-transform: uppercase;
       color: rgba(241, 245, 249, 0.6);
       margin-bottom: 1rem;
       padding-bottom: 0.5rem;
       border-bottom: 1px solid rgba(241, 245, 249, 0.15);
   }
   .nav-panel--services .nav-sublinks {
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .nav-panel--services .nav-sublinks li + li {
       margin-top: 0;
   }
   .nav-panel--services .nav-sublinks a {
       display: block;
       padding: 0.75rem 0;
       font-size: 1.15rem;
       letter-spacing: 0.04em;
       color: rgba(241, 245, 249, 0.95);
       text-decoration: none;
       border-bottom: 1px solid rgba(241, 245, 249, 0.08);
   }
   .nav-panel--services .nav-sublinks a:hover {
       color: var(--accent);
   }
   .nav-panel--main .nav-links li + li {
       margin-top: 1.8rem;
   }

   /* Actieve items in mobiel menu (alleen hoofdnavigatie, niet in submenu) */
   
   body.home .nav-links a[href="index.html"],
   body.diensten-overview-page .nav-links a[href="diensten.html"],
   body.over-ons .nav-links a[href="over-ons.html"],
   body.contact .nav-links a[href="contact.html"] {
       color: var(--accent);
   }
   
   .menu-overlay {
       position: fixed;
       inset: 0;
       background: rgba(15, 23, 42, 0.45);
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.25s ease, visibility 0.25s ease;
       z-index: 998;
   }
   
   .menu-overlay.active {
       opacity: 1;
       visibility: visible;
   }
   
   /* ============================
      Hero sectie
      ============================ */
   
   .hero-section {
       position: relative;
       background: radial-gradient(circle at 0% 0%, #e5efff 0, #f7f9fc 55%, #ffffff 100%);
       padding: calc(var(--section-y) + 3.5rem) 0 var(--section-y);
       overflow: hidden;
   }
   
   /* Subtiele schuin vlak achter content */
   
   .hero-bg-accent {
       position: absolute;
       inset: -40%;
       background: linear-gradient(135deg, rgba(0, 50, 130, 0.08), rgba(47, 128, 237, 0.06));
       transform: rotate(-3deg);
       transform-origin: center;
       z-index: 0;
   }
   
   .hero-content {
       position: relative;
       display: grid;
       grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
       gap: 3.5rem;
       align-items: center;
       z-index: 1;
   }
   
   /* Hero tekst */
   
   .hero-text {
       max-width: 540px;
   }
   
   .hero-eyebrow {
       font-size: 0.8rem;
       letter-spacing: 0.18em;
       text-transform: uppercase;
       color: var(--primary-soft);
       font-weight: 600;
       margin-bottom: 0.9rem;
   }
   
   .hero-section h1 {
       font-size: clamp(2.3rem, 3vw + 1.2rem, 3.3rem);
       line-height: 1.15;
       margin-bottom: 1rem;
   }
   
   .hero-subtitle {
       font-size: 1rem;
       color: var(--text-muted);
       max-width: 30rem;
       margin-bottom: 1.8rem;
   }
   
   /* Hero knoppen */
   
   .hero-buttons {
       display: flex;
       flex-wrap: wrap;
       gap: 0.9rem;
   }
   
   .cta-button,
   .secondary-button {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 0.85rem 1.8rem;
       border-radius: 999px;
       font-size: 0.95rem;
       font-weight: 600;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       text-decoration: none;
       border: 1px solid transparent;
       transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease, border-color 0.2s ease;
   }
   
   /* Primaire CTA */
   
   .cta-button {
       background-color: var(--primary);
       color: var(--text-on-dark);
       box-shadow: var(--shadow-soft);
   }
   
   .cta-button:hover {
       background-color: var(--primary-soft);
       box-shadow: 0 18px 50px rgba(15, 23, 42, 0.25);
       transform: translateY(-1px);
   }
   
   /* Secundaire CTA */
   
   .secondary-button {
       background-color: transparent;
       color: var(--primary);
       border-color: rgba(15, 23, 42, 0.12);
   }
   
   .secondary-button:hover {
       background-color: rgba(0, 50, 130, 0.06);
       border-color: rgba(0, 50, 130, 0.25);
   }
   
   /* Hero zonder foto: gecentreerde layout + trust-row */
   .hero-content--centered {
       grid-template-columns: 1fr;
       text-align: center;
   }
   
   .hero-content--centered .hero-text {
       max-width: 640px;
       margin: 0 auto;
   }
   
   .hero-content--centered .hero-subtitle {
       margin-left: auto;
       margin-right: auto;
   }
   
   .hero-content--centered .hero-buttons {
       justify-content: center;
   }
   
   .hero-trust-row {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 1.5rem 2rem;
       margin-top: 2rem;
       padding-top: 1.5rem;
       border-top: 1px solid rgba(0, 50, 130, 0.12);
   }
   
   .hero-trust-item {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 0.9rem;
       font-weight: 500;
       color: var(--text-muted);
   }
   
   .hero-trust-item i {
       color: var(--primary-soft);
       font-size: 1rem;
   }
   
   /* Hero afbeelding */
   
   .hero-image {
       display: flex;
       justify-content: flex-end;
   }
   
   .hero-image-card {
       max-width: 380px;
       width: 100%;
   }
   
   .hero-image img {
       width: 100%;
       height: auto;
       display: block;
   }
   
   /* ============================
      USP sectie
      ============================ */
   
   .usp-section {
       padding: var(--section-y) 0;
       background: var(--bg-light);
   }
   
   .usp-header {
       text-align: center;
       max-width: 640px;
       margin: 0 auto 2.6rem auto;
   }
   
   .section-title {
       font-size: 1.9rem;
       margin-bottom: 0.5rem;
   }
   
   .section-subtitle {
       font-size: 0.98rem;
       color: var(--text-muted);
   }
   
   /* USP cards */
   
   .usp-container {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 1.8rem;
   }
   
   .usp-item {
       background: #ffffff;
       border-radius: var(--radius-md);
       padding: 1.8rem 1.6rem;
       box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
       border: 1px solid rgba(226, 232, 240, 0.9);
       display: flex;
       flex-direction: column;
       gap: 0.9rem;
       transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
   }
   
   .usp-item:hover {
       transform: translateY(-2px);
       box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
       border-color: rgba(148, 163, 184, 0.9);
   }
   
   .usp-icon {
       width: 42px;
       height: 42px;
       border-radius: 999px;
       background: rgba(0, 50, 130, 0.06);
       color: var(--primary);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 1.1rem;
   }
   
   .usp-title {
       font-size: 1.15rem;
   }
   
   .usp-text {
       font-size: 0.96rem;
       color: var(--text-muted);
   }
   
   /* ============================
      Testimonials
      ============================ */
   
   .testimonial-section {
       padding: var(--section-y) 0 calc(var(--section-y) + 1.5rem);
       background: #ffffff;
   }
   
   .testimonial-header {
       text-align: center;
       max-width: 640px;
       margin: 0 auto 2.6rem;
   }
   
   .testimonial-container {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 1.8rem;
       margin-bottom: 2.8rem;
   }
   
   .testimonial-item {
       background: #ffffff;
       border-radius: var(--radius-md);
       padding: 1.8rem 1.6rem;
       border: 1px solid rgba(226, 232, 240, 0.9);
       box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
       display: flex;
       flex-direction: column;
       gap: 1.1rem;
   }
   
   .testimonial-quote i {
       color: var(--primary-soft);
       font-size: 1.2rem;
       margin-bottom: 0.5rem;
   }
   
   .testimonial-quote p {
       font-size: 0.96rem;
       color: var(--text-main);
   }
   
   .testimonial-author {
       display: flex;
       align-items: center;
       gap: 0.9rem;
   }
   
   .testimonial-avatar i {
       font-size: 2rem;
       color: var(--primary-soft);
       opacity: 0.8;
   }
   
   .testimonial-info h4 {
       font-size: 1rem;
   }
   
   .testimonial-info p {
       font-size: 0.9rem;
       color: var(--text-muted);
   }
   
   /* Client logo’s */
   
   .client-logos {
       text-align: center;
   }
   
   .client-logos h3 {
       font-size: 1rem;
       letter-spacing: 0.16em;
       text-transform: uppercase;
       color: var(--text-muted);
       margin-bottom: 1.6rem;
   }
   
   .logo-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 1.2rem;
   }
   
   .client-logo {
       width: 56px;
       height: 56px;
       border-radius: 999px;
       background: #f3f4f7;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: #94a3b8;
       font-size: 1.4rem;
   }
   
   /* ============================
      Footer
      ============================ */
   
   .site-footer {
       background: var(--dark);
       color: var(--text-on-dark);
       margin-top: 0;
   }
   
   .footer-top {
       padding: 3.5rem 0 2.8rem;
   }
   
   .footer-container {
       max-width: var(--container-width);
       margin: 0 auto;
       padding: 0 1.5rem;
       display: flex;
       flex-wrap: wrap;
       gap: 3rem;
       justify-content: space-between;
   }
   
   /* Linker kolom */
   
   .footer-info {
       flex: 1 1 260px;
   }
   
   .footer-text-logo {
       font-family: 'Montserrat', sans-serif;
       font-size: 1.6rem;
       font-weight: 600;
       color: var(--text-on-dark);
       text-decoration: none;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       position: relative;
   }
   
   .footer-text-logo::after {
       content: '';
       position: absolute;
       right: -0.8rem;
       top: 50%;
       transform: translateY(-50%);
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--accent);
   }
   
   .footer-tagline {
       margin-top: 0.8rem;
       font-size: 0.95rem;
       color: rgba(249, 250, 251, 0.8);
   }
   
   .footer-contact-info {
       margin-top: 1.6rem;
       font-size: 0.9rem;
   }
   
   .footer-contact-info p {
       display: flex;
       align-items: center;
       gap: 0.6rem;
       color: rgba(249, 250, 251, 0.8);
       margin-bottom: 0.4rem;
   }
   
   .footer-contact-info a {
       color: inherit;
       text-decoration: none;
   }
   
   .footer-contact-info a:hover {
       text-decoration: underline;
   }
   
   .footer-social {
       margin-top: 1.5rem;
       display: flex;
       gap: 0.75rem;
   }
   
   .footer-social a {
       width: 34px;
       height: 34px;
       border-radius: 999px;
       border: 1px solid rgba(148, 163, 184, 0.5);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: rgba(249, 250, 251, 0.85);
       text-decoration: none;
       font-size: 0.9rem;
       transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
   }
   
   .footer-social a:hover {
       background-color: rgba(148, 163, 184, 0.28);
       border-color: rgba(148, 163, 184, 0.9);
       transform: translateY(-1px);
   }
   
   /* Rechter kolom met links */
   
   .footer-links-container {
       flex: 2 1 340px;
       display: flex;
       flex-wrap: wrap;
       gap: 2rem;
   }
   
   .footer-links {
       min-width: 160px;
       flex: 1 1 0;
   }
   
   .footer-links h3 {
       font-size: 0.9rem;
       letter-spacing: 0.16em;
       text-transform: uppercase;
       color: rgba(249, 250, 251, 0.9);
       margin-bottom: 0.9rem;
   }
   
   .footer-links ul {
       list-style: none;
   }
   
   .footer-links li + li {
       margin-top: 0.35rem;
   }
   
   .footer-links a {
       font-size: 0.9rem;
       color: rgba(209, 213, 219, 0.9);
       text-decoration: none;
   }
   
   .footer-links a:hover {
       color: #ffffff;
   }
   
   /* Footer bottom */
   
   .footer-bottom {
       border-top: 1px solid rgba(55, 65, 81, 0.9);
       padding: 1.2rem 0;
       font-size: 0.85rem;
   }
   
   .footer-bottom .footer-container {
       align-items: center;
       justify-content: space-between;
   }
   
   .footer-credits {
       color: rgba(156, 163, 175, 0.95);
   }
   
   /* ============================
      Responsiveness
      ============================ */
   
   @media (max-width: 992px) {
       .hero-content {
           grid-template-columns: minmax(0, 1.1fr);
       }
   
       .hero-image {
           order: -1;
           justify-content: flex-start;
           margin-bottom: 1.8rem;
       }
   
       .hero-image-card {
           max-width: 320px;
       }
   
       .usp-container,
       .testimonial-container {
           grid-template-columns: repeat(2, minmax(0, 1fr));
       }
   
       .desktop-menu {
           display: none;
       }
   
       .menu-toggle {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           min-width: 44px;
           min-height: 44px;
           padding: 0.5rem;
           -webkit-tap-highlight-color: transparent;
       }
       .nav-controls {
           gap: 0.25rem;
       }
       .nav-controls .lang-switch {
           min-height: 44px;
           padding: 0.4rem 0.6rem;
           display: inline-flex;
           align-items: center;
       }
   
       .footer-container {
           flex-direction: column;
           align-items: flex-start;
       }
   
       .footer-bottom .footer-container {
           flex-direction: column;
           gap: 0.4rem;
           align-items: flex-start;
       }
   }
   
   @media (max-width: 768px) {
       .site-header .header-container {
           padding-inline: 1.1rem;
       }
   
       .hero-section {
           padding-top: calc(var(--section-y) + 2.3rem);
       }
   
       .hero-content {
           gap: 2.1rem;
       }
   
       .hero-text {
           max-width: none;
       }
   
       .hero-buttons {
           flex-direction: column;
           align-items: stretch;
       }
   
       .cta-button,
       .secondary-button {
           width: 100%;
       }
   
       .usp-container,
       .testimonial-container {
           grid-template-columns: minmax(0, 1fr);
       }
   
       .footer-links-container {
           flex-direction: column;
       }
   }
   
   @media (max-width: 480px) {
       .hero-section h1 {
           font-size: 2.1rem;
       }

       .section-title {
           font-size: 1.6rem;
       }
   }

   /* ============================
      Smartphone (index + algemeen)
      ============================ */

   @media (max-width: 576px) {
       .container {
           padding-left: 1rem;
           padding-right: 1rem;
       }

       .site-header .header-container {
           padding-left: 1rem;
           padding-right: 1rem;
       }

       .hero-section {
           padding-top: calc(var(--section-y) + 1.75rem);
           padding-bottom: 2.5rem;
       }

       .hero-content {
           gap: 1.5rem;
       }

       .hero-section h1 {
           font-size: 1.75rem;
           line-height: 1.2;
       }

       .hero-eyebrow {
           font-size: 0.7rem;
           letter-spacing: 0.14em;
       }

       .hero-subtitle {
           font-size: 0.95rem;
       }

       .hero-image-card {
           max-width: 100%;
       }

       .hero-buttons {
           gap: 0.75rem;
       }

       .hero-trust-row {
           gap: 1rem 1.25rem;
           margin-top: 1.5rem;
           padding-top: 1.25rem;
       }

       .hero-trust-item {
           font-size: 0.85rem;
       }

       .cta-button,
       .secondary-button {
           min-height: 44px;
           padding: 0.75rem 1.25rem;
           font-size: 0.9rem;
       }

       .usp-section {
           padding: 2.5rem 0;
       }

       .usp-header {
           margin-bottom: 1.5rem;
       }

       .section-title {
           font-size: 1.5rem;
       }

       .section-subtitle {
           font-size: 0.9rem;
       }

       .usp-item {
           padding: 1.25rem 1rem;
       }

       .text-logo {
           font-size: 1.25rem;
       }

       .lang-switch {
           font-size: 0.75rem;
           padding: 0.2rem 0.4rem;
       }
   }

   /* Voorkom horizontaal scrollen op mobiel */
   @media (max-width: 767px) {
       html, body {
           overflow-x: hidden;
       }
   }

   /* ============================
   Subpage hero (diensten / over-ons / contact)
   ============================ */

.subpage-hero {
    position: relative;
    padding: calc(var(--section-y) + 2.5rem) 0 var(--section-y);
    background: linear-gradient(135deg, #f5f7fb, #eef2fa);
}

.subpage-hero--dark {
    background: radial-gradient(circle at 0% 0%, #0b1730 0, #111827 55%, #020617 100%);
    color: var(--text-on-dark);
}

.subpage-hero.contact-hero {
    background-image:
        linear-gradient(135deg, rgba(15, 23, 42, 0.90), rgba(15, 23, 42, 0.96)),
        url('../afbeeldingen/Achtergrond-riscovery.nl.jpg');
    background-size: cover;
    background-position: center;
    color: var(--text-on-dark);
}

.subpage-hero-content {
    max-width: 720px;
}

.subpage-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--primary-soft);
    margin-bottom: 0.75rem;
}

.subpage-hero--dark .subpage-eyebrow,
.contact .subpage-hero .subpage-eyebrow {
    color: rgba(191, 219, 254, 0.9);
}

.subpage-hero h1 {
    font-size: clamp(2.1rem, 2.7vw + 1.1rem, 2.8rem);
    line-height: 1.15;
    margin-bottom: 0.9rem;
}

.subpage-subtitle {
    font-size: 0.98rem;
    color: var(--text-muted);
    max-width: 34rem;
}

.subpage-hero--dark .subpage-subtitle,
.contact .subpage-hero .subpage-subtitle {
    color: rgba(241, 245, 249, 0.86);
}

/* ============================
   Diensten pagina
   ============================ */

.services-section {
    padding: var(--section-y) 0;
    background: #ffffff;
}

.services-intro {
    max-width: 640px;
    margin: 0 auto 2.4rem;
    text-align: center;
}

.services-list {
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
}

.service-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.4rem;
    padding: 1.6rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
}

.service-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(0, 50, 130, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.3rem;
}

.service-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
}

.service-content p {
    font-size: 0.96rem;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}

.service-content ul {
    margin: 0 0 0.9rem 1.1rem;
    padding: 0;
    list-style: disc;
    color: var(--text-main);
    font-size: 0.95rem;
}

.service-content li + li {
    margin-top: 0.15rem;
}

.service-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--primary);
    background: #f8fafc;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.service-cta:hover {
    background-color: rgba(0, 50, 130, 0.06);
    border-color: rgba(0, 50, 130, 0.28);
}

.service-link-inline {
    color: var(--primary-soft);
    text-decoration: none;
    font-size: 0.95rem;
    margin-right: 0.35rem;
}
.service-link-inline:hover {
    text-decoration: underline;
    color: var(--primary);
}

/* ============================
   Over ons pagina
   ============================ */

.about-intro {
    padding: var(--section-y) 0;
    background: #ffffff;
}

.intro-text {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.02rem;
    color: var(--text-main);
    text-align: center;
}

.about-image-section {
    padding: 0;
    background: #ffffff;
}

.about-image-wrap {
    max-width: 420px;
    margin: 0 auto;
}

.about-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.who-we-are {
    padding: var(--section-y) 0;
    background: var(--bg-light);
}

.about-layout {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.section-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-soft);
    margin-bottom: 0.35rem;
}

.about-text-block h2 {
    font-size: 1.7rem;
    margin-bottom: 0.4rem;
}

.about-text-block p {
    max-width: 760px;
    color: var(--text-muted);
    font-size: 0.98rem;
}

/* Wat wij doen blokken (hergebruikt grid-patroon) */

.what-we-do {
    padding: var(--section-y) 0;
    background: #ffffff;
}

.what-we-do-header {
    margin-bottom: 0.5rem;
}

.what-we-do-header .section-eyebrow {
    margin-bottom: 0.25rem;
}

.what-we-do h2,
.what-we-do-header h2 {
    font-size: 1.7rem;
    text-align: left;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    margin-top: 2.1rem;
}

.service-card {
    background: #0f172a;
    border-radius: var(--radius-md);
    padding: 1.7rem 1.5rem;
    color: var(--text-on-dark);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.45);
}

.service-card i {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #bfdbfe;
}

.service-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.55rem;
}

.service-card p {
    font-size: 0.96rem;
    color: rgba(241, 245, 249, 0.85);
}

/* Waarom Riscovery */

.why-choose-us {
    padding: var(--section-y) 0;
    background: #0b1120;
    color: var(--text-on-dark);
}

.why-choose-us h2 {
    font-size: 1.7rem;
    margin-bottom: 1.3rem;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.7rem;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.benefit-item i {
    font-size: 1.2rem;
    margin-top: 0.1rem;
    color: #22c55e;
}

.benefit-item p {
    font-size: 0.96rem;
    color: rgba(241, 245, 249, 0.9);
}

.closing-statement {
    font-size: 1rem;
    color: rgba(241, 245, 249, 0.9);
}

/* Contentpagina's (o.a. ISAE 3402) */

.content-section {
    padding: var(--section-y) 0;
    background: #ffffff;
}
.content-section--alt {
    background: var(--bg-light);
}

/* IT Risk Consultancy page – visuals */
.it-risk-consultancy-page .it-risk-hero {
    position: relative;
    background: linear-gradient(145deg, #e8eef7 0%, #f0f4fb 40%, #eef2fa 100%);
    overflow: hidden;
}
.it-risk-hero-accent {
    position: absolute;
    right: -8%;
    top: -20%;
    width: 42%;
    height: 140%;
    background: linear-gradient(160deg, rgba(0, 50, 130, 0.06) 0%, rgba(47, 128, 237, 0.04) 100%);
    border-radius: 50% 0 0 50%;
    pointer-events: none;
}
.it-risk-consultancy-page .subpage-hero-content {
    position: relative;
    z-index: 1;
}

.advisory-visual {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin: 1.75rem 0;
    padding: 1.5rem 1.25rem;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--accent);
}
.advisory-visual-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
}
.advisory-visual-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--primary-soft));
    color: #fff;
    font-size: 0.9rem;
}

.it-audit-focus-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.it-audit-focus-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.65rem;
}
.it-audit-focus-list li i {
    position: absolute;
    left: 0;
    top: 0.25rem;
    color: var(--accent);
    font-size: 0.85rem;
}

.pillars-section .container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.pillars-visual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch;
}
.pillar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-card);
    border-top: 3px solid var(--accent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pillar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.pillar-card-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-soft), var(--primary));
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.pillar-card-title {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    line-height: 1.3;
}
.pillar-card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    margin-top: auto;
}
.pillars-detail {
    padding-top: 0.5rem;
}
@media (max-width: 768px) {
    .pillars-visual {
        grid-template-columns: 1fr;
    }
    .advisory-visual {
        flex-direction: column;
    }
}

.content-wrap {
    max-width: 720px;
}
.content-wrap h2 {
    font-size: 1.65rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}
.content-wrap h3 {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}
.content-wrap p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.content-wrap ul {
    margin: 0 0 1rem 1.25rem;
    color: var(--text-muted);
    line-height: 1.7;
}
.content-steps {
    margin: 0 0 1rem 1.25rem;
    padding-left: 1.25rem;
    color: var(--text-muted);
    line-height: 1.75;
}
.content-steps li {
    margin-bottom: 0.75rem;
}

/* Verticale tijdslijn (ISAE 3402 e.d.) */
.timeline {
    position: relative;
    padding-left: 2rem;
    margin-top: 1.5rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-soft), var(--primary));
    border-radius: 2px;
}
.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-item--optional .timeline-marker {
    border: 2px solid var(--primary-soft);
    background: var(--bg-light);
}
.timeline-item--last .timeline-marker {
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 50, 130, 0.15);
}
.timeline-marker {
    position: absolute;
    left: -2rem;
    top: 0.25rem;
    width: 14px;
    height: 14px;
    margin-left: -1px;
    border-radius: 50%;
    background: var(--primary-soft);
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px var(--primary-soft);
}
.timeline-content {
    margin-left: 0;
}
.timeline-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.35rem;
}
.timeline-content p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
}
.content-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.content-table th,
.content-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--border-subtle);
}
.content-table th {
    background: var(--bg-light);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-main);
}
.content-table td {
    color: var(--text-muted);
}
.content-table tbody tr:nth-child(even) {
    background: rgba(244, 246, 251, 0.5);
}

/* CTA generiek voor subpagina's */

.cta-section {
    padding: var(--section-y) 0;
    background: var(--bg-light);
}

.cta-content {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.cta-content h2 {
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
}

.cta-content p {
    font-size: 0.98rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ============================
   Contact pagina
   ============================ */

.contact-section {
    padding: var(--section-y) 0 calc(var(--section-y) + 0.5rem);
    background: #ffffff;
}

.contact-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 1.8rem;
    align-items: flex-start;
}

.contact-info {
    background: #0b1120;
    border-radius: var(--radius-md);
    padding: 1.7rem 1.5rem;
    color: var(--text-on-dark);
}

.contact-info h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    font-size: 0.95rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.contact-item i {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e5e7eb;
    font-size: 1rem;
}

.contact-item a,
.contact-item p {
    color: rgba(243, 244, 246, 0.96);
    text-decoration: none;
}

.contact-item a:hover {
    text-decoration: underline;
}

/* Formulier */

.contact-form {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 1.7rem 1.6rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.contact-form h3 {
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 0.35rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-soft);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28);
}

/* ============================
   Responsiveness aanvullingen
   ============================ */

@media (max-width: 992px) {
    .service-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .subpage-hero {
        padding-top: calc(var(--section-y) + 2.1rem);
    }
}

/* ============================
   Smartphone: diensten, over-ons, contact (NL + EN)
   ============================ */

@media (max-width: 576px) {
    /* Subpage hero (alle subpagina's) */
    .subpage-hero {
        padding-top: calc(var(--section-y) + 1.75rem);
        padding-bottom: 2rem;
    }

    .subpage-hero-content {
        max-width: 100%;
    }

    .subpage-eyebrow {
        font-size: 0.7rem;
        letter-spacing: 0.14em;
    }

    .subpage-hero h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .subpage-subtitle {
        font-size: 0.9rem;
    }

    /* Dienstenpagina */
    .services-section {
        padding: 2rem 0;
    }

    .services-intro {
        margin-bottom: 1.5rem;
    }

    .services-intro .section-title {
        font-size: 1.5rem;
    }

    .services-intro .section-subtitle {
        font-size: 0.9rem;
    }

    .services-list {
        gap: 1.25rem;
    }

    .service-item {
        padding: 1.25rem 1rem;
        gap: 1rem;
    }

    .service-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }

    .service-content h3 {
        font-size: 1.1rem;
    }

    /* Tijdslijn op mobiel */
    .timeline {
        padding-left: 1.75rem;
        margin-top: 1.25rem;
    }
    .timeline::before {
        left: 4px;
    }
    .timeline-marker {
        width: 12px;
        height: 12px;
        left: -1.75rem;
        top: 0.2rem;
        border-width: 2px;
    }
    .timeline-item {
        padding-bottom: 1.5rem;
    }
    .timeline-title {
        font-size: 1.05rem;
    }
    .timeline-content p {
        font-size: 0.92rem;
    }

    .service-content p,
    .service-content ul {
        font-size: 0.9rem;
    }

    .service-cta {
        min-height: 44px;
        padding: 0.65rem 1.2rem;
        font-size: 0.85rem;
    }

    /* Over-ons pagina */
    .about-intro {
        padding: 2rem 0;
    }

    .about-image-section {
        padding: 0;
    }

    .about-image-wrap {
        max-width: 90%;
    }

    .intro-text {
        font-size: 0.95rem;
    }

    .who-we-are,
    .what-we-do,
    .why-choose-us {
        padding: 2rem 0;
    }

    .about-text-block h2,
    .what-we-do h2,
    .what-we-do-header h2,
    .why-choose-us h2 {
        font-size: 1.5rem;
    }

    .about-text-block p,
    .benefit-item p,
    .closing-statement {
        font-size: 0.9rem;
    }

    .over-ons .who-we-are .about-text-block {
        padding-left: 0.75rem;
    }

    .over-ons .benefit-item {
        padding: 0.65rem 0.85rem;
    }

    .services-grid {
        gap: 1.25rem;
        margin-top: 1.5rem;
    }

    .service-card {
        padding: 1.25rem 1rem;
    }

    .service-card i {
        font-size: 1.5rem;
    }

    .service-card h3 {
        font-size: 1.05rem;
    }

    .service-card p {
        font-size: 0.9rem;
    }

    .benefits-list {
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    /* CTA sectie (diensten + over-ons) */
    .cta-section {
        padding: 2rem 0;
    }

    .cta-content h2 {
        font-size: 1.5rem;
    }

    .cta-content p {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .cta-section .cta-button {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
    }

    /* Contactpagina */
    .contact-section {
        padding: 2rem 0;
    }

    .section-header .section-title {
        font-size: 1.5rem;
    }

    .section-header .section-subtitle {
        font-size: 0.9rem;
    }

    .contact-container {
        gap: 1.25rem;
    }

    .contact-info,
    .contact-form {
        padding: 1.25rem 1rem;
    }

    .contact-info h3,
    .contact-form h3 {
        font-size: 1.05rem;
    }

    .contact-details {
        gap: 0.75rem;
        font-size: 0.9rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 0.65rem 0.75rem;
        font-size: 0.95rem;
    }

    .contact-form .cta-button {
        min-height: 44px;
        width: 100%;
    }
}

/* =================================
   Kleuren & stijl consistentie subpagina's
   ================================== */

/* Hero's van Over-ons & Contact lichter maken, in lijn met home/diensten */
.over-ons .subpage-hero--dark,
.contact .subpage-hero.contact-hero {
    background-image: none;
    background: radial-gradient(circle at 0% 0%, #e5efff 0, #f7f9fc 55%, #ffffff 100%);
    color: var(--text-main);
}

.over-ons .subpage-hero--dark .subpage-eyebrow,
.contact .subpage-hero .subpage-eyebrow {
    color: var(--primary-soft);
}

.over-ons .subpage-hero--dark .subpage-subtitle,
.contact .subpage-hero .subpage-subtitle {
    color: var(--text-muted);
}

.over-ons .subpage-hero--dark {
    padding-bottom: 3.5rem;
}

/* Over-ons secties naar licht/blauw-grijs i.p.v. donker */
.over-ons .who-we-are {
    background: var(--bg-light);
    color: var(--text-main);
}

.over-ons .who-we-are h2 {
    color: var(--text-main);
}

.over-ons .who-we-are p {
    color: var(--text-muted);
}

.over-ons .why-choose-us {
    background: #ffffff;
    color: var(--text-main);
}

.over-ons .why-choose-us h2 {
    color: var(--text-main);
}

.over-ons .benefit-item p,
.over-ons .closing-statement {
    color: var(--text-muted);
}

.over-ons .benefit-item i {
    color: var(--primary);
}

/* Contact info-kaart lichter maken */
.contact .contact-info {
    background: var(--bg-light);
    color: var(--text-main);
}

.contact .contact-info h3 {
    color: var(--text-main);
}

.contact .contact-item i {
    background: rgba(0, 50, 130, 0.06);
    color: var(--primary);
}

.contact .contact-item a,
.contact .contact-item p {
    color: var(--text-main);
}

/* Over-ons: 'Wat wij doen' kaarten lichter en beter leesbaar maken */
.over-ons .service-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    color: var(--text-main);
}

.over-ons .service-card i {
    color: var(--primary-soft);
}

.over-ons .service-card h3 {
    color: var(--text-main);
}

.over-ons .service-card p {
    color: var(--text-muted);
}

/* =================================
   Over-ons pagina verfijningen
   ================================== */

.over-ons .about-intro {
    padding: 0.35rem 0 0;
}

.over-ons .intro-text {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--text-main);
}

.over-ons .who-we-are .about-text-block {
    padding-left: 1.25rem;
    border-left: 3px solid var(--primary-soft);
}

.over-ons .who-we-are .section-eyebrow {
    margin-bottom: 0.3rem;
}

.over-ons .what-we-do-header {
    margin-bottom: 0.25rem;
}

.over-ons .services-grid {
    margin-top: 2.25rem;
    gap: 1.75rem;
}

.over-ons .service-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.over-ons .service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
    border-color: rgba(0, 50, 130, 0.15);
}

.over-ons .why-choose-us .section-eyebrow {
    margin-bottom: 0.35rem;
}

.over-ons .why-choose-us h2 {
    margin-bottom: 1.5rem;
}

.over-ons .benefit-item {
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.over-ons .benefit-item i {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(0, 50, 130, 0.08);
    border-radius: 50%;
}

.over-ons .benefits-list {
    margin-bottom: 2rem;
}

.over-ons .closing-statement {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 1.02rem;
    color: var(--text-main);
}

.over-ons .cta-section {
    padding: 4rem 0;
}

.over-ons .cta-content h2 {
    font-size: 1.85rem;
}

.lang-switch {
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    margin-right: 0.4rem;
}

.lang-switch.active {
    color: var(--primary);
    border-color: rgba(148, 163, 184, 0.8);
    background: #f9fafb;
}