/* Stijl van vanmaastricht.nl. Bovenaan de vormgeving: kleuren, letters, knoppen en kaarten als
   CSS-variabelen, op één plek (dit kwam eerder uit Keystatic). Daaronder de opmaak van de site. */

/* ---------- vormgeving ---------- */
:root {
    /* Colors */
    --primary-color: #13B79E;
    --primary-rgb: 19, 183, 158;
    --accent-color: #e6a23c;
    --accent-rgb: 230, 162, 60;
    --combo-1-color: #11322D;
    --combo-1-rgb: 17, 50, 45;
    --combo-2-color: #D63384;
    --combo-2-rgb: 214, 51, 132;
    --gray-100-rgb: 243, 244, 246;
    --gray-800-rgb: 31, 41, 55;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --bg-color: #ffffff;
    --text-color: #48484A;
    --heading-color: #11322D;
    --muted-color: #86868b;
    --card-text-color: #48484A;
    --icon-color: #13B79E;

    /* Gradients */
    --primary-gradient: #13B79E;
    --accent-gradient: #e6a23c;

    /* Hero Overlay */
    --hero-overlay-color: rgba(17, 50, 45, 0.55);

    /* Header */
    --header-color-rgb: 115, 115, 115;
    --header-opacity: 0;
    --header-blur: 20px;

    /* Animations */
    --anim-duration: 600ms;
    --anim-easing: cubic-bezier(0.16, 1, 0.3, 1);

    /* Buttons */
    --btn-radius: 50px;
    --btn-hover-scale: 1;
    --btn-primary-bg: #13B79E;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #e6a23c;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #13B79E;
    --btn-secondary-hover-bg: #13B79E;
    --btn-primary-border: transparent;
    --btn-secondary-border: #13B79E;

    /* Typography */
    --font-heading: Poppins, sans-serif;
    --font-body: Open Sans, sans-serif;
    --base-scale: 1;
    --h1-size: 3rem;
    --h2-size: 3rem;
    --h3-size: 1.3rem;

    /* Layout */
    --container-max: 70%;
    --section-padding: 8rem;

    /* Cards */
    --card-radius: 20px;
    --card-shadow: 0 1px 2px rgba(17, 50, 45, 0.04), 0 12px 32px -16px rgba(17, 50, 45, 0.22);
    --card-bg: #ffffff;
    --card-bg-rgb: 255, 255, 255;
    --card-hover-transform: translateY(-4px) scale(1) rotate(0deg);
    --card-hover-shadow: 0 2px 4px rgba(17, 50, 45, 0.05), 0 20px 40px -18px rgba(17, 50, 45, 0.3);

    /* Footer */
    --footer-bg: #11322D;
    --footer-text: #ffffff;


    /* Mapped variables (Backwards compatibility & shortcuts) */
    --primary: var(--primary-color);
    --primary-light: var(--primary-color);
    --accent: var(--accent-color);
    --bg-main: var(--bg-color);
    --text-main: var(--text-color);
    --text-heading: var(--heading-color);
    --text-muted: var(--muted-color);
    --text-card: var(--card-text-color);

    --header-bg-opacity: var(--header-opacity);
    --header-blur-val: var(--header-blur);

    --transition-speed: var(--anim-duration);
    --transition-timing: var(--anim-easing);

    --button-radius: var(--btn-radius);
    --button-hover-scale: var(--btn-hover-scale);

    /* Links */
    --link-color: #13B79E;
    --link-weight: 600;
}

/* Apply global color overrides */
html {
    font-size: calc(16px * var(--base-scale));
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

h1 { font-size: clamp(2rem, 5vw + 0.5rem, var(--h1-size)); line-height: 1.1; }
h2 { font-size: clamp(2.2rem, 4vw + 0.3rem, var(--h2-size)); line-height: 1.2; }
h3 { font-size: clamp(1.2rem, 3vw + 0.2rem, var(--h3-size)); line-height: 1.3; }

/* Link Styles */
a:not(.btn):not(.nav-link):not(.logo):not(.footer-link) {
    color: var(--link-color);
    font-weight: var(--link-weight);
    transition: color 0.2s var(--transition-timing);
}

a:not(.btn):not(.nav-link):not(.logo):not(.footer-link):hover {
    filter: brightness(1.1);
}

/* ---------- opmaak ---------- */
/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body, 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-main, #1d1d1f);
  background-color: var(--bg-main, #ffffff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, 'Poppins', sans-serif);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--text-heading, #1d1d1f);
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--accent, #e6a23c);
  outline-offset: 3px;
}

/* Colors - Base Variables */
:root {
  --primary: var(--primary-color);
  --primary-light: var(--accent-color);
  --primary-dark: var(--primary-color);
  --accent: var(--accent-color);
  --accent-light: var(--accent-color);
  --accent-dark: var(--accent-color);
  --success: #34C759;
  --error: #FF3B30;
  --warning: #FF9500;

  --gray-50: #FAFAFA;
  --gray-100: #F5F5F7;
  --gray-200: #E8E8ED;
  --gray-300: #D2D2D7;
  --gray-400: #AEAEB2;
  --gray-500: #8E8E93;
  --gray-600: #636366;
  --gray-700: #48484A;
  --gray-800: #444446;
  --gray-900: #000000;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Afgeleid van de primaire kleur uit Keystatic: donker genoeg voor kleine tekst op wit,
     en een zachte tint voor vlakken */
  --primary-strong: color-mix(in srgb, var(--primary-color, #13B79E) 65%, black);
  --primary-soft: color-mix(in srgb, var(--primary-color, #13B79E) 10%, white);
  --line: rgba(17, 50, 45, 0.08);
}

/* Layout */
.container-max {
  /* De containerbreedte uit Keystatic is een percentage: op een laptop van 1280 pixels
     leverde 70% nog geen 900 pixels op. Daarom een ondergrens van 1120 pixels (of de
     schermbreedte, als die kleiner is); op grote schermen blijft het percentage gelden. */
  max-width: max(var(--container-max, 90%), min(1120px, 100%));
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Hero ignores global max-width - uses its own contentWidth setting */
.hero .container-max {
  max-width: 100%;
}

.section-padding {
  padding: var(--section-padding, 6rem) 0;
}

@media (max-width: 768px) {
  .container-max {
    padding: 0 1.5rem;
  }

  .section-padding {
    padding: 4rem 0;
    overflow-x: hidden;
  }

  /* Container padding only for mobile */

  /* Mobile: always 98% container width as requested */
  .container-max {
    max-width: 98%;
    padding: 0 1rem;
  }

  /* Footer Mobile override */
  .container-footer {
    width: 97% !important;
  }
}

/* Footer Container - Independent of global layout settings */
.container-footer {
  width: 85%;
  margin: 0 auto;
  padding: 0 2rem;
  max-width: none;
  /* Ensure no max-width constraint */
}

/* Grid System */
.grid {
  display: grid;
  gap: 3rem;
}

.grid-cols-1 {
  grid-template-columns: 1fr;
}

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

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-3-responsive {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {

  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Form-specific 2-column grid - collapses at mobile breakpoint */
.grid-cols-2-form {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .grid-cols-2-form {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .grid-cols-3-responsive {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.grid-rows-0 {
  grid-template-rows: 0fr;
}

.grid-rows-1 {
  grid-template-rows: 1fr;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-radius: var(--btn-radius, 50px);
  cursor: pointer;
  transition: all 0.3s var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
  white-space: nowrap;
  font-family: var(--font-heading, 'Poppins', sans-serif);
}

.btn-primary {
  background: var(--btn-primary-bg, var(--primary-gradient, var(--primary)));
  color: var(--btn-primary-text, white);
  box-shadow: 0 4px 15px rgba(var(--primary-rgb, 173, 43, 145), 0.3);
  border: 2px solid var(--btn-primary-border, transparent);
}

.btn-primary:hover {
  background: var(--btn-primary-hover-bg, var(--accent));
  transform: translateY(-2px) scale(var(--btn-hover-scale));
  box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.4);
}

.btn-secondary {
  background: var(--btn-secondary-bg, white);
  color: var(--btn-secondary-text, var(--primary));
  border: 2px solid var(--btn-secondary-border, transparent);
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover-bg, var(--primary));
  color: white;
  transform: translateY(-2px) scale(var(--btn-hover-scale));
  box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.3);
}

/* Cards */
.card {
  background: rgba(var(--card-bg-rgb, 255, 255, 255), 0.2);
  border-radius: var(--card-radius, 20px);
  padding: 2.5rem;
  box-shadow: var(--card-shadow, var(--shadow));
  transition: transform 0.4s var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow 0.4s var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1));
  border: 1px solid var(--line, rgba(17, 50, 45, 0.08));
}

.card.card-hover:hover {
  transform: var(--card-hover-transform) !important;
  box-shadow: var(--card-hover-shadow);
}

/* Text Utilities */
.text-gradient {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

.text-primary {
  color: var(--primary);
}

.text-white {
  color: white;
}

.text-accent {
  color: var(--accent);
}

.text-gray-800 {
  color: var(--gray-800);
}

.text-gray-100 {
  color: var(--gray-100);
}

.text-black {
  color: black;
}

.text-combo1 {
  color: var(--combo-1-color);
}

.text-combo2 {
  color: var(--combo-2-color);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* Scroll Animations
   Alleen verbergen als de browser scripts draait; site.js laat ze daarna inschuiven. Zonder
   scripts blijft alle inhoud gewoon zichtbaar. */
@media (scripting: enabled) {
  .animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--transition-speed, 0.6s) var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
      transform var(--transition-speed, 0.6s) var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .animate-fade-left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity var(--transition-speed, 0.6s) var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
      transform var(--transition-speed, 0.6s) var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .animate-fade-left.visible {
    opacity: 1;
    transform: translateX(0);
  }

  .animate-fade-right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity var(--transition-speed, 0.6s) var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
      transform var(--transition-speed, 0.6s) var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .animate-fade-right.visible {
    opacity: 1;
    transform: translateX(0);
  }

  .animate-scale {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity var(--transition-speed, 0.6s) var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1)),
      transform var(--transition-speed, 0.6s) var(--transition-timing, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .animate-scale.visible {
    opacity: 1;
    transform: scale(1);
  }

  /* Mobiel: kortere afstand */
  @media (max-width: 768px) {
    .animate-on-scroll {
      transform: translateY(16px);
    }

    .animate-fade-left {
      transform: translateX(-16px);
    }

    .animate-fade-right {
      transform: translateX(16px);
    }
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Icon System - Monochrome SVG Icons */
.icon-users::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.icon-settings::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

.icon-shield::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.icon-target::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

.icon-chart::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
}

.icon-graduation::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E");
}

.icon-laptop::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E");
}

.icon-building::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v8h20v-8a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
}

.icon-brain::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z'/%3E%3Cpath d='M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z'/%3E%3C/svg%3E");
}

.icon-balance::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3Cpath d='M8 9l4-7 4 7'/%3E%3Cpath d='M16 16l3 2 3-2'/%3E%3Cpath d='M8 16l-3 2-3-2'/%3E%3C/svg%3E");
}

.icon-search::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
}

.icon-clipboard::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
}

.icon-rocket::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}

.icon-mail::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.icon-phone::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.icon-globe::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.icon-clock::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E");
}

.icon-chat::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.icon-check::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E");
}

.icon-zap::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolygon points='13,2 3,14 12,14 11,22 21,10 12,10 13,2'/%3E%3C/svg%3E");
}

.icon-zap-green::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolygon points='13,2 3,14 12,14 11,22 21,10 12,10 13,2'/%3E%3C/svg%3E");
}

.icon-target-small::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

.icon-award::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='7'/%3E%3Cpolyline points='8.21,13.89 7,23 12,20 17,23 15.79,13.88'/%3E%3C/svg%3E");
}

.icon-trending-up::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='23,6 13.5,15.5 8.5,10.5 1,18'/%3E%3Cpolyline points='17,6 23,6 23,12'/%3E%3C/svg%3E");
}

.icon-clock-small::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E");
}

.icon-users-small::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.icon-calendar::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.icon-check-circle::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22,4 12,14.01 9,11.01'/%3E%3C/svg%3E");
}

/* Icon containers */
.service-icon,
.feature-icon,
.process-icon,
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.service-icon::before,
.feature-icon::before,
.process-icon::before,
.contact-icon::before {
  display: block;
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
}

.process-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
}

.contact-icon {
  width: 24px;
  height: 24px;
}

/* Icon color schemes */
.icon-white.icon-users::before,
.icon-white.icon-settings::before,
.icon-white.icon-shield::before,
.icon-white.icon-target::before,
.icon-white.icon-chart::before,
.icon-white.icon-graduation::before,
.icon-white.icon-laptop::before,
.icon-white.icon-building::before,
.icon-white.icon-brain::before,
.icon-white.icon-balance::before,
.icon-white.icon-search::before,
.icon-white.icon-clipboard::before,
.icon-white.icon-rocket::before {
  filter: brightness(0) invert(1);
}

.icon-black {
  color: black !important;
}

/* Primary color filter (teal) */
.icon-primary::before {
  filter: brightness(0) saturate(100%) invert(59%) sepia(89%) saturate(393%) hue-rotate(127deg) brightness(95%) contrast(90%);
}

/* Accent color filter (orange) */
.icon-accent::before {
  filter: brightness(0) saturate(100%) invert(53%) sepia(79%) saturate(1294%) hue-rotate(350deg) brightness(99%) contrast(104%);
}

/* Gray color filter */
.icon-gray::before {
  filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(90%);
}

/* Header Styles */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s var(--transition-timing, ease);
  background: rgba(var(--header-color-rgb, 255, 255, 255), var(--header-bg-opacity, 0.15));
  backdrop-filter: blur(var(--header-blur-val, 20px));
  -webkit-backdrop-filter: blur(var(--header-blur-val, 20px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Na het scrollen een lichte glasbalk met donkere tekst: witte links met schaduw waren op
   de lichte secties slecht leesbaar. Boven de hero gelden de Keystatic-instellingen. */
.header.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(var(--header-blur-val, 20px));
  -webkit-backdrop-filter: blur(var(--header-blur-val, 20px));
  border-bottom: 1px solid var(--line, rgba(17, 50, 45, 0.08));
  box-shadow: 0 6px 24px -14px rgba(17, 50, 45, 0.35);
}

.header.scrolled .nav-link {
  color: var(--text-heading);
  text-shadow: none;
}

.header.scrolled .nav-link:hover {
  color: var(--primary-strong);
}

/* Mobile: Compacte header bij naar beneden scrollen */
@media (max-width: 768px) {
  .header.scrolling-down {
    transform: translateY(-10px);
  }

  .header.scrolling-down .header-content {
    height: 65px;
    padding: 0 1.5rem;
  }

  .header.scrolling-down .logo {
    font-size: 1.3rem;
  }

  .header.scrolling-down .logo-icon {
    width: 50px;
    height: 50px;
    margin-right: 0.5rem;
  }

  .header.scrolling-down .mobile-menu-btn {
    font-size: 1.25rem;
  }

  .logo-image {
    height: 60px;
  }

  .header.scrolling-down .logo-image {
    height: 50px;
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 3rem;
  transition: all 0.3s var(--transition-timing, ease);
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s var(--transition-timing, ease);
}

.logo-image {
  height: 80px;
  width: auto;
  padding: 8px 0;
  transition: all 0.3s var(--transition-timing, ease);
}

.logo-image-small {
  height: 55px !important;
}

.logo-icon {
  box-shadow: 0 4px 15px rgba(var(--primary-rgb, 173, 43, 145), 0.3);
  transition: all 0.3s var(--transition-timing, ease);
}

.logo-icon-small {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  margin-right: 0.5rem !important;
}

.logo-text-small {
  font-size: 1.2rem !important;
}

.btn-small {
  padding: 0.6rem 1.5rem !important;
  font-size: 0.9rem !important;
}

.prose-wide {
  max-width: 90ch !important;
}


.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s var(--transition-timing, ease);
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  position: relative;
}

.nav-link:hover {
  color: var(--primary);
  transform: translateY(-1px);
}

/* Subtle glow effect on hover */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 2px;
  height: 2px;
  background: var(--accent-gradient, var(--accent));
  transition: all 0.3s var(--transition-timing, ease);
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

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

/* Mobile Menu Animated Button */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1000;
  transition: all 0.3s var(--transition-timing, ease);
}

.hamburger-container {
  width: 24px;
  height: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hamburger-container span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--primary, #13B79E);
  border-radius: 2px;
  transition: all 0.3s var(--transition-timing, ease);
  transform-origin: center;
}

/* Hover effect: form a "+" */
.mobile-menu-btn:hover:not(.open) .hamburger-container span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn:hover:not(.open) .hamburger-container span:nth-child(1) {
  transform: translateY(9px) rotate(90deg);
}

.mobile-menu-btn:hover:not(.open) .hamburger-container span:nth-child(3) {
  transform: translateY(-9px);
}

/* Open state: rotating "+" to form "✕" */
.mobile-menu-btn.open .hamburger-container {
  transform: rotate(45deg);
}

.mobile-menu-btn.open .hamburger-container span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.open .hamburger-container span:nth-child(1) {
  transform: translateY(9px) rotate(90deg);
}

.mobile-menu-btn.open .hamburger-container span:nth-child(3) {
  transform: translateY(-9px);
}

@media (max-width: 768px) {
  .nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    /* Only dimming, no blur - blur is on menu itself */
    background: rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.2s ease-out forwards;
  }

  .mobile-menu-overlay.closing {
    animation: fadeOut 0.3s ease-out forwards;
  }

  .mobile-menu {
    /* Portal mode: position fixed since menu is rendered at body level */
    position: fixed;
    top: 90px;
    /* Below header */
    right: 1rem;
    width: 280px;
    max-width: calc(100vw - 2rem);
    z-index: 9999;
    /* Use same opacity as header for consistent look */
    background: rgba(var(--header-color-rgb, 255, 255, 255), var(--header-bg-opacity, 0.15));
    backdrop-filter: blur(calc(var(--header-blur-val, 20px) * 2)) saturate(180%);
    -webkit-backdrop-filter: blur(calc(var(--header-blur-val, 20px) * 2)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--card-radius, 20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 1rem 1.5rem;
    overflow: hidden;
    /* Rolldown animation using Keystatic animation settings */
    transform-origin: top right;
    animation: menuRollDown var(--transition-speed, 0.4s) var(--transition-timing, cubic-bezier(0.68, -0.55, 0.265, 1.55)) forwards;
  }

  .mobile-menu.closing {
    animation: menuRollUp calc(var(--transition-speed, 0.4s) * 0.6) ease-in forwards;
  }

  /* Rolldown animation - like a roller blind coming down */
  @keyframes menuRollDown {
    0% {
      opacity: 0;
      transform: scaleY(0);
      max-height: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      transform: scaleY(1);
      max-height: 500px;
    }
  }

  @keyframes menuRollUp {
    0% {
      opacity: 1;
      transform: scaleY(1);
      max-height: 500px;
    }

    100% {
      opacity: 0;
      transform: scaleY(0);
      max-height: 0;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }



  .mobile-menu .nav-link {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
    font-weight: 500;
  }

  .mobile-menu .nav-link:hover {
    color: var(--primary-light);
    transform: translateX(5px);
  }
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  /* On mobile: flex-start to prevent content going under navbar */
  align-items: flex-start;
  justify-content: center;
  /* Padding-top to push content down from navbar on mobile */
  padding-top: 120px;
  position: relative;
  overflow: hidden;
}

/* On larger screens: center the content vertically */
@media (min-width: 1024px) {
  .hero {
    align-items: center;
    padding-top: 0;
  }
}

/* Global Fluid Hero Typography */
.hero h1 {
  /* Default for Mobiel & Laptops (tot 1600px) */
  /* We verlagen de max-size van 4rem naar 3.5rem voor betere fit op 14" MacBook */
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 2rem;
}

/* Grotere schermen (27" iMac, externe monitors) */
@media (min-width: 1800px) {
  .hero h1 {
    font-size: clamp(4rem, 6vw, 5.5rem);
  }
}

/* Ultra-wide & 4K monitors */
@media (min-width: 2200px) {
  .hero h1 {
    font-size: clamp(5rem, 7vw, 7.5rem);
  }
}

.hero .hero-subtitle {
  /* Fluid scaling voor subtitle */
  font-size: clamp(1rem, 2vw, 1.4rem);
  line-height: 1.6;
  max-width: 800px !important;
  margin-left: auto;
  margin-right: auto;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  z-index: 1;
  transform: translateZ(0);
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hero-overlay-color, rgba(var(--primary-rgb, 173, 43, 145), 0.85));
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Parallax Effect */
.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-element {
  transform: translateZ(0);
  will-change: transform;
}

.hero-content {
  position: relative;
  z-index: 3;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-content h1 {
  color: white;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  font-weight: 700;
}

.hero-content p {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-weight: 400;
}

/* Section Backgrounds */
.bg-white {
  background-color: white;
}

.bg-gray-50 {
  background-color: var(--gray-50);
}

.bg-gray-100 {
  background-color: #e8e8e8;
}

.bg-primary-50 {
  background-color: rgba(19, 183, 158, 0.05);
}

.bg-accent-50 {
  background-color: rgba(255, 107, 53, 0.05);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-accent {
  background-color: var(--accent);
}

.bg-combo1 {
  background-color: var(--combo-1-color);
}

.bg-combo2 {
  background-color: var(--combo-2-color);
}

.bg-gradient {
  background: var(--primary-gradient, var(--primary));
}

.bg-gradient-primary {
  background: var(--primary-gradient, var(--primary));
}

.bg-gradient-accent {
  background: var(--accent-gradient, var(--accent));
}

/* Content Layout */
.content-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 1024px) {
  .content-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.content-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Service Icons */
.service-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

.service-icon.primary {
  background: var(--primary-gradient, var(--primary));
}

.service-icon.accent {
  background: var(--accent-gradient, var(--accent));
}

/* Form Styles */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--gray-700);
  font-family: 'Poppins', sans-serif;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: all 0.3s var(--transition-timing, ease);
  background: white;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(19, 183, 158, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* De verzendknop wisselt zijn tekst voor "Versturen..." (site.js). De omhulling telt voor de opmaak
   niet mee, zodat tekst en pijl gewoon in de knop staan. */
[data-klaar] {
  display: contents;
}

[data-klaar][hidden] {
  display: none;
}

/* Footer */
.footer {
  background: var(--gray-900);
  color: white;
  padding: 4rem 0 2rem;
}

.footer h3 {
  color: white;
  font-family: 'Poppins', sans-serif;
}

.footer p,
.footer a {
  color: var(--gray-400);
  text-decoration: none;
  font-weight: 300;
}

.footer a:hover {
  color: var(--primary-light);
}

/* Utility Classes */
.rounded {
  border-radius: var(--radius);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.shadow {
  box-shadow: var(--shadow);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-20 {
  margin-top: 5rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  /* AUTO columns: items are only as wide as their content + padding */
  grid-template-columns: repeat(3, auto);
  gap: 2rem;
  margin: 3rem 0;
  /* Center the grid items horizontally */
  justify-content: center;
}

/* Mobile: stack vertically with narrower badges */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    /* Add horizontal padding to prevent edge-to-edge */
    padding: 0 1.5rem;
  }

  .stat-item {
    /* Smaller padding on mobile */
    padding: 0.75rem 1rem;
    /* Make badges narrower, not full width */
  }
}

.stat-item {
  text-align: center;
  /* Smaller padding for laptops */
  padding: 1.5rem 2.5rem;
  /* Use header color and opacity for consistent frosty look */
  background: rgba(var(--header-color-rgb, 255, 255, 255), var(--header-bg-opacity, 0.1));
  border-radius: var(--radius);
  backdrop-filter: blur(var(--header-blur-val, 10px));
  -webkit-backdrop-filter: blur(var(--header-blur-val, 10px));
}

/* Larger padding for big monitors */
@media (min-width: 1800px) {
  .stat-item {
    padding: 1.5rem 3.5rem;
  }
}

.stat-number {
  /* Default: medium size for laptops */
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  font-weight: 700;
  color: white;
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  /* Prevent text wrapping in stat numbers */
  white-space: nowrap;
}

.stat-label {
  color: rgba(255, 255, 255, 0.8);
  /* Default: smaller for laptops */
  font-size: clamp(.9rem, 1vw, 0.9rem);
  font-weight: 300;
  /* Prevent text wrapping in stat labels */
  white-space: nowrap;
}

/* Larger stats for big monitors (27"+) */
@media (min-width: 1800px) {
  .stat-number {
    font-size: clamp(2rem, 3vw, 3rem);
  }

  .stat-label {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  }
}

/* Extra large stats for 4K screens */
@media (min-width: 2000px) {
  .stat-number {
    font-size: clamp(2.5rem, 3vw, 4rem);
  }

  .stat-label {
    font-size: clamp(1rem, 1.2vw, 1.3rem);
  }
}

/* Responsive Mobile Adjustments */
@media (max-width: 768px) {
  .hero-subtitle {
    font-size: 1rem;
    /* 20% smaller than 1.25rem */
  }

  /* Removed static stat-number sizing in favor of global fluid clamp */

  .stat-item {
    padding: 0.75rem 1rem !important;
    /* Force reduction on mobile */
  }
}

/* Services Grid Override */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 5rem;
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Contact Section Masonry Grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid-main {
    grid-row: span var(--grid-rows, 2);
  }
}

/* Mobile fixes for Contact section */
@media (max-width: 768px) {

  .contact-grid .card,
  .contact-grid .contact-card {
    padding: 1.25rem;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
  }

  .contact-grid .form-input,
  .contact-grid .form-select,
  .contact-grid .form-textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  .contact-grid .btn {
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
  }
}

/* Introtekst onder een sectiekop */
.section-intro {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem);
  color: var(--gray-600);
  max-width: 46rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Praktijkvoorbeelden (Empowerment.tsx) */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

@media (max-width: 900px) {
  .case-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.card.case-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: white;
}

.case-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-body {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1;
}

.case-main,
.case-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* De zijkolom groeit mee, zodat looptijd en deelnemers onderaan de kaart staan */
.case-side {
  flex: 1;
}

/* Bij een oneven aantal casussen neemt de laatste de volle breedte, met vraag en aanpak
   links en de opbrengst rechts. Zo blijft er geen losse kaart op een halve rij staan. */
@media (min-width: 901px) {
  .case-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .case-card:last-child:nth-child(odd) .case-body {
    flex-direction: row;
    gap: 2.5rem;
  }

  .case-card:last-child:nth-child(odd) .case-main {
    flex: 1.2;
  }
}

.case-label {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-heading);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
}

.case-kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-strong);
  margin: 0;
}

.case-title {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.65rem);
  margin: -0.75rem 0 0;
}

.case-story {
  display: grid;
  gap: 1rem;
  margin: 0;
}

.case-story dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.25rem;
}

.case-story dd {
  margin: 0;
  color: var(--gray-700);
  line-height: 1.65;
}

.case-results {
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
}

.case-results h4 {
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  color: var(--text-heading);
}

.case-results ul {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.case-results li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--gray-700);
  line-height: 1.5;
}

.case-results li svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--primary-strong);
}

.case-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--gray-600);
}

.case-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.case-meta svg {
  color: var(--primary-strong);
}

.case-link {
  align-self: flex-start;
  gap: 0.5rem;
  font-size: 0.95rem;
  padding: 0.6rem 1.2rem;
}

/* Werkwijze in stappen */
.card.process-card {
  box-shadow: none;
  border: none;
}

.process-head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.75rem;
}

.process-head h3 {
  margin-bottom: 0.75rem;
}

.process-head p {
  color: var(--gray-600);
  font-size: 1.1rem;
}

.process-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}

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

/* Op brede schermen alle stappen naast elkaar, verbonden door een lijn */
@media (min-width: 1024px) {
  .process-steps {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    left: calc(50% + 44px);
    width: calc(100% + 2rem - 88px);
    border-top: 2px dashed rgba(var(--primary-rgb, 19, 183, 158), 0.35);
  }
}

.process-step {
  position: relative;
  text-align: center;
}

.process-step .process-icon {
  position: relative;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
}

.process-number {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: white;
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.6rem;
  box-shadow: 0 2px 6px rgba(17, 50, 45, 0.18);
}

.process-step h4 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.process-step p {
  color: var(--gray-600);
  line-height: 1.6;
  max-width: 22rem;
  margin: 0 auto;
}

/* Minder beweging als de bezoeker daarom vraagt in de systeeminstellingen */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .animate-on-scroll,
  .animate-fade-left,
  .animate-fade-right,
  .animate-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-float {
    animation: none;
  }

  .card,
  .btn {
    transition: none;
  }

  .card.card-hover:hover,
  .btn:hover {
    transform: none !important;
  }
}

/* Footer: hover zonder JavaScript (de footer krijgt geen React mee). !important omdat de
   basiskleur inline in Footer.tsx staat. */
.footer-link {
  /* Zelfde gewicht als de algemene linkstijl, waar .footer-link van is uitgezonderd */
  font-weight: var(--link-weight, 600);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--primary) !important;
}

.footer-cta-btn:hover,
.footer-cta-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Voet: het copyright alleen op een breed scherm */
@media (max-width: 768px) {
  .copyright-text-container {
    display: none !important;
  }
}
@media (min-width: 769px) {
   .copyright-text-container {
     display: block !important;
   }
}