/* ===== styles/index.css ===== */
/* Tailwind CSS Directives - These are valid Tailwind directives processed by PostCSS */
/* css-validator-disable */
/* css-validator-enable */

/* CSS Reset and Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* FIX: Disable smooth scroll on mobile to prevent unwanted scroll-to-hash behavior */
  scroll-behavior: smooth;
  /* Last resort: prevent horizontal scroll */
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

/* Disable smooth scroll on mobile to prevent browser default scroll-to-hash */
@media (max-width: 768px) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: normal;
  overflow-wrap: break-word;
  /* Last resort: prevent horizontal scroll */
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

/* Design System CSS Variables */
:root {
  /* Colors - Primary */
  --color-blue-ribbon: #0070ff;
  --color-blue-ribbon-light: #004399;
  --color-blue-ribbon-lightest: #e5f0ff;
  
  /* Colors - Accent */
  --color-blaze-orange: #ff6f00;
  --color-green-haze: #04ab38;
  --color-whatsapp-green: #25d366;
  --color-star-gold: #ecb22e;
  
  /* Colors - Neutral */
  --color-neutral-darkest: #0d0600;
  --color-white: #ffffff;
  --color-background: #f7fbff; /* rgba(0, 122, 255, 0.03) over white = 3% blue opacity */
  --color-card-white: #fafafa;
  
  /* Colors - Transparency */
  --color-border-light: rgba(13, 6, 0, 0.15);
  
  /* Typography - Font Families */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Sora', sans-serif;
  
  /* Typography - Font Sizes (Responsive with clamp) */
  --heading-1: clamp(3rem, 1.8rem + 4vw, 5.4rem);
  --heading-2: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  --heading-3: clamp(1.5rem, 0.9rem + 2vw, 2.75rem);
  --heading-4: clamp(1.375rem, 0.85rem + 1.5vw, 2.25rem);
  --heading-5: clamp(1.25rem, 0.8rem + 1.25vw, 1.75rem);
  --heading-6: clamp(1.125rem, 0.85rem + 0.75vw, 1.375rem);
  --text-large: clamp(1.125rem, 0.85rem + 0.75vw, 1.375rem);
  --text-medium: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-regular: 1rem;
  --text-small: 0.875rem;
  
  /* Typography - Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Typography - Line Heights */
  --line-tight: 1.2;
  --line-snug: 1.3;
  --line-normal: 1.4;
  --line-relaxed: 1.5;
  --leading-heading: 1.1;
  
  /* Typography - Letter Spacing */
  --tracking-h1: -5.184px;
  --tracking-h2: -2.08px;
  --tracking-h3: -1.76px;
  --tracking-h4: -1.44px;
  --tracking-h5: -0.56px;
  --tracking-h6: -0.22px;
  --tracking-card-title: 0;
  
  /* Typography - Subtext/Description Styling */
  --text-subtext-size: 14px;
  --text-subtext-opacity: 0.62;
  --text-subtext-color: rgba(0, 0, 0, var(--text-subtext-opacity));
  --text-subtext-line-height: 1.7;
  
  /* Typography - Subtitle Styling */
  --text-subtitle-size: 16px;
  --text-subtitle-opacity: 0.8;
  --text-subtitle-color: rgba(0, 0, 0, var(--text-subtitle-opacity));
  --text-subtitle-line-height: var(--line-relaxed);
  
  /* Spacing - Page Level */
  --page-padding: 64px;
  --section-padding-small: 48px;
  --section-padding-medium: 80px;
  --section-padding-large: 112px;
  --splitted-gap: 280px;
  
  /* Spacing - Gaps */
  --gap-large: 80px;
  --gap-medium: 64px;
  --gap-small: 32px;
  --gap-xsmall: 24px;
  --gap-xxsmall: 16px;
  
  /* Spacing - Element Level */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  
  /* Border Radius */
  --radius-small: 8px;
  --radius-button: 10px;
  --radius-medium: 32px;
  --radius-large: 40px;
  
  /* Shadows */
  --shadow-xsmall: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-small: 0px 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-medium: 0px 6px 4px rgba(0, 0, 0, 0.25);
  --shadow-large: 5px 8px 4px rgba(0, 0, 0, 0.25);
  --shadow-inset: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
  
  /* Containers */
  --container-large: 1280px;
  --container-medium: 768px;
  --container-small: 400px;
  
  /* Gradients */
  --gradient-blue: linear-gradient(180deg, #0070ff 0%, #004399 100%);
  --gradient-hero: linear-gradient(209.92deg, rgba(0, 112, 255, 0.34) 1.66%, rgba(250, 251, 255, 0.34) 36.93%), linear-gradient(90deg, var(--color-background) 0%, var(--color-background) 100%);
  --gradient-team: linear-gradient(180deg, var(--color-background) 23.56%, #0070ff 100%);
}

/* Global Typography Styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  color: var(--color-neutral-darkest);
  margin: 0;
}

h1 {
  font-size: var(--heading-1);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h1);
}

h2 {
  font-size: var(--heading-2);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
}

h3 {
  font-family: var(--font-secondary);
  font-size: var(--heading-3);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h3);
}

h4 {
  font-size: var(--heading-4);
  line-height: var(--line-snug);
  letter-spacing: var(--tracking-h4);
}

h5 {
  font-size: var(--heading-5);
  line-height: var(--line-normal);
  letter-spacing: var(--tracking-h5);
}

h6 {
  font-family: var(--font-secondary);
  font-size: var(--heading-6);
  font-weight: var(--font-semibold);
  line-height: var(--line-normal);
  letter-spacing: var(--tracking-h6);
}

p {
  margin: 0;
}

/* Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  line-height: 1.5;
  border-radius: var(--radius-button);
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* Ensure links with btn class work correctly */
a.btn {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

a.btn-primary {
  color: var(--color-white);
}

.btn-primary {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  box-shadow: var(--shadow-small);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 112, 255, 0.4);
}

.btn-secondary {
  background-color: var(--color-blaze-orange);
  color: var(--color-white);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 111, 0, 0.4);
}

.btn-whatsapp {
  background-color: var(--color-green-haze);
  color: var(--color-white);
  box-shadow: var(--shadow-small);
}

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(4, 171, 56, 0.4);
}

.btn-outline {
  background: transparent;
  color: var(--color-neutral-darkest);
  border: 1px solid var(--color-border-light);
}

.btn-outline:hover {
  background-color: rgba(0, 112, 255, 0.05);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.btn-icon svg {
  width: 24px;
  height: 24px;
}

/* Text Link Style */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.text-link:hover {
  opacity: 0.8;
}

/* Section Base Styles */
.section {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.section-container {
  max-width: var(--container-large);
  margin: 0 auto;
}

/* Section Title */
.section-title {
  text-align: center;
  max-width: var(--container-medium);
  margin: 0 auto var(--gap-medium);
}

.section-tagline {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
  margin-bottom: var(--gap-xxsmall);
}

.section-heading {
  font-size: var(--heading-2);
  margin-bottom: var(--gap-xsmall);
}

.section-description {
  font-size: var(--text-medium);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
}

/* Text Color Utilities */
.text-blue {
  color: var(--color-blue-ribbon);
}

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

/* Card Base Style */
.card {
  background-color: var(--color-card-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
  overflow: hidden;
}

/* Custom Scrollbar - Passend bij website stijl */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-blue-ribbon);
  border-radius: var(--radius-small);
  border: none;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-blue-ribbon-light);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-ribbon) transparent;
}

/* Responsive Padding */
@media (max-width: 1024px) {
  :root {
    --page-padding: 48px;
    --section-padding-medium: 64px;
    --section-padding-large: 80px;
  }
}

@media (max-width: 768px) {
  :root {
    --page-padding: 24px;
    --section-padding-small: 32px;
    --section-padding-medium: 48px;
    --section-padding-large: 64px;
    --gap-large: 48px;
    --gap-medium: 32px;
  }

  /* Alle titels: letter-spacing naar 0 op mobiel */
  h1, h2, h3, h4, h5, h6,
  [data-animate-title],
  [class*="title"],
  [class*="Title"],
  .section-title,
  .section-heading {
    letter-spacing: 0 !important;
  }
}


/* ===== styles/App.css ===== */
/* App Container */
.app {
  min-height: 100vh;
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
}

/* Ensure full height background when intake page is present */
.app .intake-page {
  flex: 1;
  min-height: 100vh;
}

/* Page Content Wrapper - Scrolls over footer, covers footer during scroll */
/* FIX 4: Force stable scroll container - prevent horizontal scroll and ensure stable stacking */
.page-content {
  flex: 1;
  position: relative;
  /* Padding-bottom will be set dynamically via JS to match footer height */
  padding-bottom: var(--footer-h, 0);
  /* Content has lower z-index than footer, but background covers footer visually */
  z-index: 2;
  /* Disable pointer events - only content area will have them via ::before */
  pointer-events: none;
  /* Prevent horizontal scroll on mobile */
  overflow-x: hidden;
}

/* FIX: Mobile - geen padding-bottom nodig omdat footer in normale flow staat */
@media (max-width: 768px) {
  .page-content {
    padding-bottom: 0;
  }
}

/* Pseudo-element covers only the content area, not the padding-bottom space */
/* This allows footer to be visible in the padding-bottom area at the end */
/* Schaduw op onderkant van dit element zodat schaduw meebeweegt met laatste sectie */
.page-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Height is 100% minus footer height, so footer space is not covered */
  height: calc(100% - var(--footer-h, 0px));
  background-color: var(--color-background);
  z-index: -1;
  pointer-events: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Re-enable pointer events for all direct children of page-content */
.page-content > * {
  pointer-events: auto;
  position: relative;
}

/* Animation wrapper styling – start verborgen zodat init na eerste paint geen flits geeft */
[data-animate] {
  will-change: transform, opacity;
  opacity: 0;
}

[data-animate-title]:not(.hero-title),
.hero-title-desktop,
.hero-title-mobile,
.hero-title,
.about-hero-title,
.diensten-hero-title,
.contact-hero-title {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate-title]:not(.hero-title),
  .hero-title-desktop,
  .hero-title-mobile,
  .hero-title,
  .about-hero-title,
  .diensten-hero-title,
  .contact-hero-title {
    opacity: 1;
  }
  [data-animate] {
    will-change: auto;
  }
}

/* FIX: Disable smooth scroll on mobile to prevent unwanted scroll-to-hash behavior */
html {
  scroll-behavior: smooth;
}

/* Disable smooth scroll on mobile to prevent browser default scroll-to-hash */
@media (max-width: 768px) {
  html {
    scroll-behavior: auto;
  }
}

/* Global link styles */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

/* Selection styling */
::selection {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-blue-ribbon);
  outline-offset: 2px;
}

/* Smooth animations */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: ease;
  transition-duration: 150ms;
}

/* Disable transitions on page load */
.preload * {
  transition: none !important;
}


/* ===== components/layout/Navbar/Navbar.css ===== */
/* Navbar - Figma Design Style */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 10px var(--page-padding);
  /* Zorg dat navbar altijd boven hero overlays ligt */
  pointer-events: auto;
  /* Always have border-bottom for smooth transition (transparent when not scrolled) */
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 transparent;
  /* Hardware acceleration for smooth animation */
  will-change: transform, opacity, background, border-bottom-color, box-shadow;
  transform: translateZ(0);
  /* Unified transition for all properties with same duration/easing */
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-bottom-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-wrapper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 24px;
  /* Wrapper is now just for content alignment, no background styling */
  position: relative;
  z-index: 101;
  pointer-events: auto;
}

/* Scrolled state: full-width bar styling */
.navbar--scrolled {
  padding: 0;
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Default state: border and shadow are already transparent from base styles */

.navbar--scrolled .navbar-wrapper {
  padding: 16px 24px;
  /* Remove all pill styling - wrapper is just for content alignment */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.navbar-logo img {
  flex-shrink: 0;
  display: block;
}

.logo-text {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: var(--font-bold);
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--color-neutral-darkest);
}

.logo-blue {
  color: var(--color-blue-ribbon);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-link {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: var(--font-medium);
  line-height: 1.4;
  color: var(--color-neutral-darkest);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-blue-ribbon);
}

.nav-link:active {
  transform: scale(0.98);
}

.nav-link.active {
  color: var(--color-blue-ribbon);
  font-weight: var(--font-semibold);
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-blue-ribbon);
  border-radius: 1px;
}

/* Dropdown wrapper */
.nav-item--has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Dropdown toggle button */
.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-neutral-darkest);
  transition: color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.nav-dropdown-toggle:hover {
  color: var(--color-blue-ribbon);
}

.nav-dropdown-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.nav-item--has-dropdown:hover .nav-dropdown-toggle svg,
.nav-dropdown-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Dropdown menu */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-medium);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  padding: 8px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown-link {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: var(--font-regular);
  line-height: 1.4;
  color: var(--color-neutral-darkest);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  transition: background-color 0.2s ease, color 0.2s ease;
  display: block;
  opacity: 0;
  transform: translateX(-8px);
}

.nav-dropdown.is-open .nav-dropdown-link {
  animation: slideInFromLeft 0.3s ease-out forwards;
}

/* Staggered animation for dropdown items */
.nav-dropdown.is-open .nav-dropdown-link:nth-child(1) {
  animation-delay: 0.05s;
}

.nav-dropdown.is-open .nav-dropdown-link:nth-child(2) {
  animation-delay: 0.1s;
}

.nav-dropdown.is-open .nav-dropdown-link:nth-child(3) {
  animation-delay: 0.15s;
}

.nav-dropdown.is-open .nav-dropdown-link:nth-child(4) {
  animation-delay: 0.2s;
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-dropdown-link:hover {
  background-color: rgba(0, 112, 255, 0.05);
  color: var(--color-blue-ribbon);
}

.nav-dropdown-link:active {
  background-color: rgba(0, 112, 255, 0.1);
}

/* Legacy support - keep old classes for backwards compatibility */
.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-medium);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  padding: 8px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-item {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: var(--font-regular);
  line-height: 1.4;
  color: var(--color-neutral-darkest);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  transition: background-color 0.2s ease, color 0.2s ease;
  display: block;
}

.dropdown-item:hover {
  background-color: rgba(0, 112, 255, 0.05);
  color: var(--color-blue-ribbon);
}

.dropdown-item:active {
  background-color: rgba(0, 112, 255, 0.1);
}

.navbar-actions {
  display: flex;
  align-items: center;
}

.navbar-actions .btn {
  padding: 6px 16px;
  font-size: 0.875rem;
  border: 0.2px solid var(--color-blue-ribbon);
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  /* Zorg dat button altijd klikbaar is */
  position: relative;
  z-index: 102;
  pointer-events: auto;
  touch-action: manipulation; /* Verbeter touch responsiveness */
}

.mobile-menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-neutral-darkest);
  border-radius: 1px;
  /* Transition wordt overschreven in mobile breakpoint */
}

/* Hide mobile menu elements on desktop */
.mobile-menu-header,
.mobile-menu-center {
  display: none;
}

/* Tablet and smaller */
@media (max-width: 1200px) {
  .navbar-content {
    gap: 40px;
  }
  
  .navbar-links {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  /* Mobile: Navbar completely non-interactive and invisible */
  .navbar {
    padding: 0 !important;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  .navbar-wrapper {
    padding: 0 !important;
    max-width: none;
    margin: 0;
    width: 100%;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
  }

  /* Mobile: Scrolled state - still transparent and non-interactive */
  .navbar--scrolled {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  .navbar--scrolled .navbar-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Hide navbar logo and actions on mobile */
  .navbar-logo,
  .navbar-actions {
    display: none;
  }

  /* Make navbar-content non-interactive but allow menu to show when active */
  .navbar-content {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    gap: 0;
  }

  /* Mobile: Full screen overlay menu */
  .navbar-links {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    border-radius: 0;
    flex-direction: column;
    padding: 16px;
    gap: 0;
    z-index: 9999; /* Above everything including WhatsApp button */
    pointer-events: auto;
    overflow-y: auto;
  }

  .navbar-links.active {
    display: flex;
  }

  /* Hide desktop links on mobile - show only mobile menu elements */
  .navbar-links > .nav-link,
  .navbar-links > .nav-item--has-dropdown {
    display: none;
  }

  /* Mobile menu header with logo and close button */
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
  }

  /* Mobile menu center - centered navigation */
  .mobile-menu-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }

  .mobile-menu-header .navbar-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
  }

  .mobile-menu-header .navbar-logo img {
    flex-shrink: 0;
    display: block;
  }

  .mobile-menu-header .logo-text {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: var(--font-bold);
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--color-neutral-darkest);
  }

  .mobile-menu-header .logo-blue {
    color: var(--color-blue-ribbon);
  }

  /* Hamburger button in header */
  .mobile-menu-btn--header {
    position: relative;
    top: auto;
    right: auto;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  /* Typography for centered mobile navigation */
  .mobile-menu-center .nav-link {
    font-family: var(--font-primary);
    font-size: 1.625rem;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--color-neutral-darkest);
    text-decoration: none;
    transition: color 0.2s ease;
    text-align: center;
    padding: 8px 16px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s ease-out forwards;
  }

  /* Stagger animation for mobile menu items */
  .mobile-menu-center .nav-link:nth-child(1) {
    animation-delay: 0.05s;
  }

  .mobile-menu-center .nav-link:nth-child(2) {
    animation-delay: 0.1s;
  }

  .mobile-menu-center .nav-link:nth-child(3) {
    animation-delay: 0.15s;
  }

  .mobile-menu-center .nav-link:nth-child(4) {
    animation-delay: 0.2s;
  }

  .mobile-menu-center .nav-link:nth-child(5) {
    animation-delay: 0.25s;
  }

  .mobile-menu-center .nav-link:nth-child(6) {
    animation-delay: 0.3s;
  }

  /* Reset animation when menu closes */
  .navbar-links:not(.active) .mobile-menu-center .nav-link {
    animation: none;
    opacity: 0;
    transform: translateY(20px);
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-menu-center .nav-link:hover {
    color: var(--color-blue-ribbon);
  }

  .mobile-menu-center .nav-link.active {
    color: var(--color-blue-ribbon);
  }

  .mobile-menu-center .nav-link.active::after {
    display: none;
  }

  /* Mobile dropdown styling - centered */
  .mobile-menu-center .nav-item--has-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s ease-out forwards;
    animation-delay: 0.15s;
  }

  /* Reset animation when menu closes */
  .navbar-links:not(.active) .mobile-menu-center .nav-item--has-dropdown {
    animation: none;
    opacity: 0;
    transform: translateY(20px);
  }

  .mobile-menu-center .nav-item--has-dropdown .nav-link {
    position: relative;
  }

  .mobile-menu-center .nav-dropdown-toggle {
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-center .nav-dropdown {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .mobile-menu-center .nav-dropdown-link {
    padding: 4px 8px;
    font-size: 1.125rem;
    font-family: var(--font-primary);
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--color-neutral-darkest);
    text-decoration: none;
    transition: color 0.2s ease;
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
  }

  /* Staggered animation for mobile dropdown items */
  .mobile-menu-center .nav-dropdown.is-open .nav-dropdown-link {
    animation: fadeInUp 0.4s ease-out forwards;
  }

  .mobile-menu-center .nav-dropdown.is-open .nav-dropdown-link:nth-child(1) {
    animation-delay: 0.05s;
  }

  .mobile-menu-center .nav-dropdown.is-open .nav-dropdown-link:nth-child(2) {
    animation-delay: 0.1s;
  }

  .mobile-menu-center .nav-dropdown.is-open .nav-dropdown-link:nth-child(3) {
    animation-delay: 0.15s;
  }

  .mobile-menu-center .nav-dropdown.is-open .nav-dropdown-link:nth-child(4) {
    animation-delay: 0.2s;
  }

  .mobile-menu-center .nav-dropdown-link:hover {
    color: var(--color-blue-ribbon);
  }

  /* Legacy mobile dropdown menu styling */
  .dropdown-menu {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-left: 16px;
    margin-top: 4px;
    min-width: auto;
  }

  .dropdown-item {
    padding: 8px 14px;
    font-size: 1rem;
  }

  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    position: fixed;
    top: 16px;
    right: calc(env(safe-area-inset-right, 0px) + 16px);
    z-index: 1000;
    pointer-events: auto;
    /* Belangrijk: geen gap layout meer gebruiken */
    display: block;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  /* Hide hamburger button outside overlay when menu is open */
  .navbar--menu-open .navbar-wrapper > .mobile-menu-btn:not(.mobile-menu-btn--header) {
    display: none !important;
  }

  .mobile-menu-btn span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 3px;
    background: #000;
    border-radius: 2px;
    transform-origin: center;
    transform: translate(-50%, -50%);
    transition: transform 240ms ease, opacity 240ms ease;
  }

  /* Startpositie: 3 lijnen netjes verdeeld */
  .mobile-menu-btn span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 8px));
  }

  .mobile-menu-btn span:nth-child(2) {
    transform: translate(-50%, -50%);
  }

  .mobile-menu-btn span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 8px));
  }

  /* Open state -> kruis */
  .mobile-menu-btn--open span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

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

  .mobile-menu-btn--open span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .navbar-actions {
    display: none;
  }
}

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

  .navbar-wrapper {
    padding: 8px 12px;
  }

  .navbar-logo svg {
    width: 30px;
    height: 30px;
  }

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

/* ========== Desktop-only mega menu (>= 768px), strakke layout zoals referentie ========== */
@media (min-width: 768px) {
  .navbar-links > .nav-item--has-dropdown .nav-dropdown {
    left: 50%;
    right: auto;
    transform: translate(-50%, -8px);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 16px;
    min-width: 560px;
    max-width: 620px;
    width: max-content;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown.is-open {
    transform: translate(-50%, 0);
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-inner {
    display: flex;
    flex-direction: column;
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 20px;
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-cta {
    margin: 32px 0 0 0;
    padding: 0;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: var(--font-regular);
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-cta a {
    color: var(--color-neutral-darkest);
    font-weight: var(--font-semibold);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-cta a:hover {
    color: var(--color-blue-ribbon);
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--color-neutral-darkest);
    font-weight: var(--font-semibold);
    font-size: 0.875rem;
    opacity: 1;
    transform: none;
    animation: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-link-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.04);
    box-shadow: none;
    color: var(--color-blue-ribbon);
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-link:hover {
    background: rgba(0, 112, 255, 0.06);
    color: var(--color-blue-ribbon);
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-link:hover .nav-dropdown-link-icon {
    background: rgba(0, 112, 255, 0.08);
    border-color: rgba(0, 112, 255, 0.15);
  }

  .navbar-links > .nav-item--has-dropdown .nav-dropdown-link:active {
    background: rgba(0, 112, 255, 0.1);
  }
}

/* Reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
  .navbar {
    transition: none;
  }
  
  .navbar-wrapper {
    transition: none;
  }
}


/* ===== components/layout/Footer/Footer.css ===== */
/* Footer - Fixed Reveal Pattern (behind content) */
/* DEBUG: Issue op ultrawide schermen - tekst verdwijnt door overflow hidden en grid clipping */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 50px var(--section-padding-medium) 0;
  z-index: 1;
  /* Footer sits behind content visually, but links are clickable */
  pointer-events: auto;
  /* FIX: overflow visible om clipping te voorkomen op grote schermen */
  overflow: visible;
}

/* Footer background as pseudo-element so watermark can be above it */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-blue-ribbon);
  z-index: 0;
}

/* Footer Watermark */
.footer-watermark {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 50%;
  max-height: 300px;
  z-index: 1;
  pointer-events: none;
  /* FIX: overflow hidden alleen op watermark zelf, niet op footer */
  overflow: hidden;
  display: block;
}

/* Footer Gradient Background */
.footer-gradient-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(173, 216, 255, 0.2) 0%, rgba(173, 216, 255, 0.08) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0.5;
}

.footer-watermark-image {
  width: 100%;
  height: 600px;
  object-fit: contain;
  object-position: center top;
  opacity: 0.15;
  user-select: none;
  display: block;
  filter: brightness(1.3);
}

/* Ensure all links and buttons in footer are clickable with higher z-index */
.footer a,
.footer button {
  position: relative;
  z-index: 100;
}

.footer-container {
  position: relative;
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
  z-index: 2;
  background: transparent;
}

.footer-content {
  display: grid;
  /* FIX: minmax(0, 1fr) voorkomt grid item overflow op grote schermen */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: clamp(48px, 5vw, 80px);
  align-items: start;
  position: relative;
  z-index: 3;
  /* Zorg dat grid items niet buiten container vallen */
  min-width: 0;
}

.footer-branding {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  /* FIX: Zorg dat branding container niet clipt op grote schermen */
  overflow: visible;
  max-width: 100%;
}

.footer-brand-name {
  font-family: var(--font-secondary);
  font-size: clamp(2rem, 4vw + 1rem, 6.5rem);
  font-weight: var(--font-bold);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin: 0;
  /* FIX: white-space nowrap kan clipping veroorzaken op ultrawide - gebruik normal op grote schermen */
  white-space: nowrap;
  overflow: visible; /* FIX: visible in plaats van hidden om clipping te voorkomen */
  text-overflow: clip;
  max-width: 100%;
  /* Zorg dat tekst altijd zichtbaar blijft */
  min-width: 0; /* Laat flex/grid shrinking toe */
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xsmall);
  margin-top: var(--gap-small);
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-label {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  color: var(--color-white);
}

.contact-value {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--color-white);
}

.contact-links {
  display: flex;
  flex-direction: column;
}

.contact-link {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--color-white);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  display: inline;
}

.contact-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-link:hover:not(:disabled) {
  opacity: 0.8;
}

.footer-links-container {
  display: flex;
  gap: var(--gap-xsmall);
  flex-shrink: 0;
  min-width: fit-content;
}

.footer-links {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.footer-link {
  padding: 8px 0;
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  color: var(--color-white);
  transition: opacity 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  display: inline;
}

.footer-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.footer-link:hover:not(:disabled) {
  opacity: 0.8;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}

.footer-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-neutral-darkest);
  opacity: 0.2;
}

.footer-credits {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--gap-small);
}

.footer-copyright {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--color-white);
}

.footer-credit {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--color-white);
}

.footer-credit-link {
  color: var(--color-white);
  text-decoration: underline;
  transition: opacity 0.2s ease;
  pointer-events: auto;
  cursor: pointer;
  display: inline;
}

.footer-credit-link:hover {
  opacity: 0.8;
}

.footer-legal {
  display: flex;
  gap: var(--gap-xsmall);
}

.legal-link {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--color-white);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline;
}

.legal-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: underline;
}

.legal-link:hover:not(:disabled) {
  opacity: 0.8;
}

/* FIX: Ultrawide schermen - voorkom tekst clipping */
@media (min-width: 1920px) {
  .footer-brand-name {
    /* Op ultrawide schermen: zorg dat tekst altijd zichtbaar blijft */
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    max-width: 100%;
  }

  .footer-content {
    /* Extra ruimte op ultrawide schermen */
    gap: clamp(48px, 6vw, 120px);
  }

  .footer-container {
    /* Max width op ultrawide om layout te behouden */
    max-width: min(100%, 1800px);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-gradient-background {
    width: 500px;
    height: 500px;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
  }

  .footer-brand-name {
    font-size: clamp(1.75rem, 3vw + 1rem, 3.5rem);
    white-space: normal;
    word-break: break-word;
  }

  .footer-links-container {
    justify-content: flex-start;
    gap: var(--gap-medium);
  }

  .footer-credits {
    flex-direction: column;
    gap: var(--gap-xxsmall);
    align-items: center;
    text-align: center;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  /* FIX: Mobile footer - normale flow in plaats van fixed */
  /* Dit voorkomt clipping, overlap en scroll glitches op iOS */
  .footer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    padding: var(--gap-medium) var(--gap-xsmall);
    /* Extra ruimte voor iOS safe area en WhatsApp knop */
    padding-bottom: calc(var(--gap-medium) + env(safe-area-inset-bottom, 0px));
    overflow: visible;
    z-index: auto;
  }

  .footer-watermark {
    width: 400px;
    height: 50%;
    max-height: 200px;
  }

  .footer-watermark-image {
    height: 400px;
  }

  .footer-gradient-background {
    width: 400px;
    height: 400px;
  }

  /* Mobile layout fix - zorg dat branding altijd zichtbaar is */
  .footer-brand-name {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    line-height: 1;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
    word-break: break-word;
  }

  /* Zet content onder elkaar */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
  }

  /* Links in 2 kolommen naast elkaar */
  .footer-links-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap-medium);
    row-gap: var(--gap-xsmall);
    min-width: 0;
  }

  .footer-links {
    min-width: 0;
  }
}



/* ===== components/StickyWhatsAppButton.css ===== */
/* viewport layer die exact de zichtbare viewport volgt (iOS addressbar-proof) */
.vv-layer {
  position: fixed;
  top: var(--vv-top, 0px);
  left: var(--vv-left, 0px);
  width: var(--vv-width, 100vw);
  height: var(--vv-height, 100vh);
  pointer-events: none;
  z-index: 2147483647;
}

/* button absolute binnen layer, dus stabiel */
.sticky-whatsapp-button {
  position: absolute;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  background-color: var(--color-whatsapp-green);
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  pointer-events: auto;
  text-decoration: none;
  color: var(--color-white);
  
  /* voorkom animatie-jank - gebruik transform voor stable compositing */
  transition: none !important;
  transform: translate3d(0, 0, 0) !important; /* Force GPU layer */
  will-change: transform !important; /* Optimize for transform animations only */
  backface-visibility: hidden; /* Prevent flicker */
  -webkit-font-smoothing: antialiased;
}

/* iOS Safari mobile: use fixed position directly for maximum stability */
/* This prevents glitches when Safari address bar expands/contracts */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 767px) {
    .vv-layer {
      /* On iOS, don't use dynamic viewport variables - use stable fixed position */
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 2147483647;
      /* Disable dynamic CSS variable updates on iOS */
      --vv-top: 0px;
      --vv-left: 0px;
      --vv-width: 100vw;
      --vv-height: 100vh;
    }
    
    .sticky-whatsapp-button {
      /* Direct fixed positioning on iOS - bypasses viewport layer updates */
      position: fixed !important;
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom));
      transform: translate3d(0, 0, 0) !important;
      will-change: transform !important;
      backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0) !important; /* iOS specific */
    }
  }
}

.sticky-whatsapp-button:hover {
  transform: translate3d(0, -4px, 0) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.sticky-whatsapp-button:active {
  transform: translate3d(0, -2px, 0) scale(1.02) !important;
}

.whatsapp-icon {
  width: 28px;
  height: 28px;
  color: white;
}

@media (max-width: 768px) {
  .sticky-whatsapp-button {
    width: 52px;
    height: 52px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    /* MOBILE OPTIMIZATION: Reduce box-shadow complexity for better performance */
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
  }

  .sticky-whatsapp-button:hover {
    /* Simplified hover on mobile - use translate3d for GPU acceleration */
    transform: translate3d(0, -2px, 0) scale(1.03) !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  }

  .whatsapp-icon {
    width: 26px;
    height: 26px;
  }
}



/* ===== components/sections/GlassTagline/GlassTagline.css ===== */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.8;
  }
}

.glass-tagline {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(0, 122, 255, 0.1);
  border: none;
  box-shadow: none;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero secties behouden de originele glassmorphism stijl */
.hero .glass-tagline,
.hero-text .glass-tagline,
.diensten-hero-text .glass-tagline,
.about-hero-text .glass-tagline,
.contact-hero-text .glass-tagline {
  padding: 8px 16px;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Testimonial kicker stijl voor alle niet-hero taglines */
.glass-tagline .glass-shimmer {
  display: none;
}

.hero .glass-tagline .glass-shimmer,
.hero-text .glass-tagline .glass-shimmer,
.diensten-hero-text .glass-tagline .glass-shimmer,
.about-hero-text .glass-tagline .glass-shimmer,
.contact-hero-text .glass-tagline .glass-shimmer {
  display: block;
}

/* Tekst styling voor niet-hero taglines */
.glass-tagline p,
.glass-tagline span {
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: var(--line-normal, 1.5);
  color: var(--color-blue-ribbon);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Witte tekst voor taglines in secties met blauwe achtergrond */
.process-container .glass-tagline p,
.process-container .glass-tagline span,
.whatsapp-section .glass-tagline p,
.whatsapp-section .glass-tagline span,
.about-team-stable-container .glass-tagline p,
.about-team-stable-container .glass-tagline span {
  color: var(--color-white);
}

/* Witte achtergrond voor taglines in blauwe secties */
.process-container .glass-tagline,
.whatsapp-section .glass-tagline,
.about-team-stable-container .glass-tagline {
  background: rgba(255, 255, 255, 0.15);
  border: none;
}

/* Hero taglines behouden originele tekst styling */
.hero .glass-tagline p,
.hero .glass-tagline span,
.hero-text .glass-tagline p,
.hero-text .glass-tagline span,
.diensten-hero-text .glass-tagline p,
.diensten-hero-text .glass-tagline span,
.about-hero-text .glass-tagline p,
.about-hero-text .glass-tagline span,
.contact-hero-text .glass-tagline p,
.contact-hero-text .glass-tagline span {
  font-size: var(--text-small, 0.875rem);
  color: var(--color-neutral-darkest, #0d0600);
  letter-spacing: 0.5px;
}

/* Hover effect alleen voor hero secties */
.hero .glass-tagline:hover,
.hero-text .glass-tagline:hover,
.diensten-hero-text .glass-tagline:hover,
.about-hero-text .glass-tagline:hover,
.contact-hero-text .glass-tagline:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
}

.glass-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shimmer 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .glass-shimmer {
    animation: none;
    opacity: 0;
  }

  .glass-tagline-dot {
    animation: none;
  }

  .hero .glass-tagline:hover,
  .hero-text .glass-tagline:hover,
  .diensten-hero-text .glass-tagline:hover,
  .about-hero-text .glass-tagline:hover,
  .contact-hero-text .glass-tagline:hover {
    transform: none;
  }
}

.glass-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2xs, 8px);
}

.glass-tagline-dot {
  display: none;
}

/* Tagline wrapper styling - gebaseerd op WhatsAppSection taglinewrapper */
.tagline-wrapper {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  border: none;
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
}


/* ===== components/sections/Hero/Hero.css ===== */
/* Hero - Mobile First Layout */
.hero {
  --navbar-height: 93px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--navbar-height) + var(--gap-small)) var(--gap-xsmall) var(--gap-small);
  /* Prevent horizontal scroll from child elements (InfiniteGridOverlay) */
  overflow-x: clip;
}

/* Mobile: Exact vertical centering met 100dvh en safe-area support */
@media (max-width: 1023px) {
  .hero {
    /* Gebruik 100dvh voor stabiele viewport hoogte (rekent met dynamische browser UI) */
    min-height: 100dvh;
    /* Grid voor exacte centering */
    display: grid;
    place-items: center;
    /* Padding-top voor navbar + safe-area, padding-bottom voor safe-area */
    padding-top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: var(--gap-xsmall);
    padding-right: var(--gap-xsmall);
    /* Zorg dat hero niet het navbar gebied bedekt */
    position: relative;
    z-index: 0; /* Lager dan navbar z-index: 100 */
  }
  
  .hero-content {
    /* Content wrapper is nu exact gecentreerd in beschikbare ruimte (100dvh - navbar - safe-areas) */
    width: 100%;
    max-width: var(--container-large);
    padding: 0 var(--gap-xxsmall);
  }
}

.hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(140px, 18vh, 260px);
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.008) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.006) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.007) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.005) 3px
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.012) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.010) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(140px, 18vh, 260px);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(250, 251, 255, 0.15) 25%,
    rgba(250, 251, 255, 0.35) 45%,
    rgba(250, 251, 255, 0.55) 60%,
    rgba(250, 251, 255, 0.72) 72%,
    rgba(250, 251, 255, 0.85) 82%,
    rgba(250, 251, 255, 0.93) 90%,
    rgba(250, 251, 255, 0.97) 95%,
    rgba(250, 251, 255, 0.99) 98%,
    var(--color-background) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-small);
  width: 100%;
  max-width: var(--container-large);
  padding: 0 var(--gap-xxsmall);
}

.hero-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--gap-small);
  overflow: hidden;
}

.hero-logo img {
  height: clamp(150px, 12vw + 100px, 280px);
  width: auto;
  object-fit: contain;
  display: block;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 600px;
}

.hero-text .glass-tagline {
  margin-bottom: var(--space-2xs);
}

/* Vaste dot met snelle pulserende ringen die ervan af komen (hero tagline) */
.hero-text .glass-tagline .glass-tagline-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-blue-ribbon, #0070ff);
  flex-shrink: 0;
  z-index: 1;
}

.hero-text .glass-tagline .glass-tagline-dot::before,
.hero-text .glass-tagline .glass-tagline-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  border: 2px solid var(--color-blue-ribbon, #0070ff);
  opacity: 0;
  animation: hero-dot-pulse-ring 1.8s ease-out infinite;
  pointer-events: none;
}

.hero-text .glass-tagline .glass-tagline-dot::after {
  animation-delay: 0.9s;
}

@keyframes hero-dot-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-text .glass-tagline .glass-tagline-dot::before,
  .hero-text .glass-tagline .glass-tagline-dot::after {
    animation: none;
    display: none;
  }
}

.hero-title-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.hero-title {
  font-family: var(--font-primary);
  font-size: clamp(3.2rem, 1.5rem + 3.5vw, 5.5rem);
  font-weight: var(--font-bold);
  line-height: var(--leading-heading);
  letter-spacing: clamp(-1.8px, -0.36vw, -3.6px);
  color: var(--color-neutral-darkest);
  margin: 0;
}

/* Desktop title: visible on desktop, hidden on mobile */
.hero-title-desktop {
  display: block;
}

.hero-title-mobile {
  display: none;
}

/* Mobile title: visible on mobile, hidden on desktop */
@media (max-width: 1023px) {
  .hero-title-desktop {
    display: none;
  }

  .hero-title-mobile {
    display: block;
  }
}

/* Hero title letter-by-letter animation styling */
.hero-title .hero-letter {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
}

/* ALL-IN styling: uppercase en italic (desktop) */
.hero-all-in {
  text-transform: uppercase;
  font-style: italic;
}

/* Mobile: reset all-in to normal (no uppercase, no italic) */
@media (max-width: 1023px) {
  .hero-all-in {
    text-transform: none;
    font-style: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .hero-letter {
    will-change: auto;
  }
}

.hero-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Hide line break on mobile, show on desktop */
.hero-subtitle-break {
  display: none;
}

@media (min-width: 1024px) {
  .hero-subtitle-break {
    display: block;
  }
}

.hero-cta {
  align-self: center;
  margin-top: var(--space-md);
  /* Initial hidden state - will be animated by GSAP in Hero.js useLayoutEffect */
  /* This prevents flash on navigation before JS sets initial state */
  /* GSAP will override these values immediately in useLayoutEffect (runs before paint) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px) scale(0.95);
  will-change: transform, opacity;
}

/* Show buttons immediately if reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  .hero-cta {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    will-change: auto;
  }
}

/* Tablet: 768px - 1023px - behoud verticale centering */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero {
    /* Behoud grid centering op tablet */
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding-top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: var(--gap-small);
    padding-right: var(--gap-small);
  }

  .hero-content {
    gap: var(--gap-medium);
    padding: 0 var(--gap-small);
  }

  .hero-logo {
    margin-bottom: var(--gap-medium);
  }

  .hero-logo img {
    height: clamp(180px, 14vw + 110px, 320px);
  }
}

/* Desktop: 1024px+ - behoud originele flex layout */
@media (min-width: 1024px) {
  .hero {
    /* Desktop gebruikt flex i.p.v. grid (ongewijzigd) */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Desktop blijft 100vh gebruiken */
    padding: calc(var(--navbar-height) + var(--page-padding)) var(--page-padding) var(--page-padding);
  }

  .hero-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-medium);
    padding: 0;
    max-width: var(--container-large);
    margin: 0 auto;
  }

  .hero-logo {
    margin-bottom: var(--gap-medium);
  }

  .hero-logo img {
    height: clamp(200px, 15vw + 120px, 350px);
  }

  .hero-text {
    align-items: center;
    text-align: center;
    max-width: 600px;
  }

  .hero-cta {
    align-self: center;
  }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .hero-content {
    gap: var(--gap-large);
  }

  .hero-text {
    max-width: 700px;
  }
}

/* Small Mobile: < 600px - behoud verticale centering */
@media (max-width: 599px) {
  .hero {
    /* Behoud 100dvh en grid centering op small mobile */
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding-top: calc(var(--navbar-height) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--gap-medium) + env(safe-area-inset-bottom, 0px));
  }

  .hero-text .glass-tagline {
    font-size: 0.75rem;
  }
}



/* ===== components/ui/the-infinite-grid/InfiniteGridOverlay.css ===== */
.infinite-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  color: rgba(13, 6, 0, 0.28);
  /* Zorg dat overlay nooit boven navbar komt op mobiel */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Mobile: Zorg dat overlay niet het navbar gebied bedekt */
@media (max-width: 1023px) {
  .infinite-grid-overlay {
    /* Start overlay onder navbar (93px) */
    top: 93px;
    z-index: 0; /* Lager dan navbar z-index: 100 */
  }
}

.grid-stroke {
  color: rgba(13, 6, 0, 0.26);
}

.grid-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
  opacity: 0.55;
}

.grid-glow-blue {
  width: 42%;
  height: 42%;
  right: -18%;
  top: -22%;
  background: rgba(0, 112, 255, 0.30);
}

.grid-glow-orange {
  width: 44%;
  height: 44%;
  left: -12%;
  bottom: -22%;
  background: rgba(255, 111, 0, 0.22);
}



/* ===== components/sections/VideoSection/VideoSection.css ===== */
/* Video Section */
.video-section {
  width: 100%;
  padding: calc(var(--page-padding) + 96px) var(--page-padding);
  background-color: var(--color-background);
}

.video-container {
  max-width: var(--container-large);
  margin: 0 auto;
}

.video-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 223px;
}

.video-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.video-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin-bottom: var(--gap-xxsmall);
  margin-top: 0;
}

.video-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  max-width: 440px;
  margin: 0;
}

.video-cta-desktop {
  width: auto;
  display: inline-flex;
  padding: 0.625rem 1.25rem;
  margin-top: 1.5rem;
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  align-self: flex-start;
}

.video-cta-mobile {
  display: none;
}

.video-player {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  max-width: 528px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-large);
  overflow: hidden;
  background-color: var(--color-neutral-darkest);
  box-shadow: var(--shadow-small);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(13, 6, 0, 0.6);
}

.video-coming-soon {
  position: absolute;
  top: 20px;
  left: 20px;
  background: transparent;
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: var(--radius-medium);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: none;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 1;
}

.play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

/* Video Modal */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 999999;
  cursor: pointer;
}

.video-modal-wrapper {
  position: absolute;
  background-color: var(--color-neutral-darkest);
  overflow: hidden;
  cursor: default;
  will-change: transform, width, height, border-radius;
}

.video-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.video-modal-close:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.video-modal-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.video-modal-coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-neutral-darkest);
  z-index: 5;
}

.video-modal-coming-soon-text {
  background: transparent;
  color: var(--color-white);
  padding: 16px 32px;
  border-radius: var(--radius-large);
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: var(--font-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: none;
}

/* Responsive */
@media (max-width: 1200px) {
  .video-content {
    gap: 80px;
  }
}

@media (max-width: 1024px) {
  .video-content {
    flex-direction: column;
    gap: var(--gap-medium);
    align-items: stretch;
  }

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

  .video-cta-desktop {
    align-self: center;
  }

  .video-player {
    justify-content: center;
    flex: none;
    width: 100%;
  }

  .video-thumbnail {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .video-section {
    padding: calc(var(--section-padding-small) + 96px) var(--gap-xsmall);
  }

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

  .video-text {
    width: 100%;
  }

  .video-player {
    width: 100%;
    flex: none;
    display: flex;
    justify-content: center;
  }

  .video-thumbnail {
    width: 100%;
    max-width: 100%;
  }

  .video-cta-desktop {
    display: none;
  }

  .video-cta-mobile {
    display: inline-flex;
    width: auto;
    padding: 0.625rem 1.25rem;
    margin-top: var(--gap-medium);
    font-size: var(--text-regular);
    font-weight: var(--font-medium);
    align-self: center;
  }

  .video-modal-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }

  .video-coming-soon {
    top: 10px;
    left: 10px;
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .video-modal-coming-soon-text {
    padding: 12px 24px;
    font-size: 1.25rem;
  }
}



/* ===== components/sections/LogoSection/LogoSection.css ===== */
/* Logo Section */
.logo-section {
  width: 100%;
  padding: var(--page-padding) 0;
  background-color: var(--color-background);
  overflow: hidden;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.logo-title {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-bold);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
  text-align: center;
  max-width: 560px;
}

/* Carousel Wrapper with gradient masks */
.logo-carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  /* Prevent horizontal scroll from animated carousel */
  overflow-x: clip;
}

.logo-carousel-wrapper::before,
.logo-carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--color-background), transparent);
}

.logo-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--color-background), transparent);
}

/* Carousel Track - animated container */
.logo-carousel-track {
  display: flex;
  align-items: center;
  gap: var(--gap-large);
  width: fit-content;
  animation: logo-scroll 30s linear infinite;
  will-change: transform;
}

/* Keyframes for infinite scrolling from left to right */
@keyframes logo-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-33.333%));
  }
}

.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.logo-image {
  max-width: 200px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 1024px) {
  .logo-carousel-wrapper::before,
  .logo-carousel-wrapper::after {
    width: 80px;
  }

  .logo-carousel-track {
    gap: var(--gap-medium);
    animation-duration: 25s;
  }

  .logo-item {
    padding: 15px;
  }

  .logo-image {
    max-width: 160px;
    max-height: 65px;
  }
}

@media (max-width: 768px) {
  .logo-section {
    padding: var(--section-padding-small) 0;
  }

  .logo-carousel-wrapper::before,
  .logo-carousel-wrapper::after {
    width: 60px;
  }

  .logo-carousel-track {
    gap: var(--gap-small);
    animation-duration: 20s;
  }

  .logo-item {
    padding: 12px;
  }

  .logo-image {
    max-width: 120px;
    max-height: 50px;
  }
}


/* ===== components/sections/ProcessSection/ProcessSection.css ===== */
/* Process Section */
.process-section {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.process-wrapper {
  max-width: var(--container-large);
  margin: 0 auto;
}

.process-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--page-padding);
  padding: var(--section-padding-small) var(--section-padding-medium) var(--section-padding-medium);
  background: var(--gradient-blue);
  border-radius: var(--radius-large);
  box-shadow: 5px 10px 4px rgba(0, 0, 0, 0.25);
}

/* Header */
.process-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xxsmall);
  text-align: center;
  max-width: var(--container-medium);
  padding: var(--page-padding) 0 var(--gap-small);
}

.process-tagline {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  color: var(--color-white);
}

.process-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-white);
}

.process-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--color-white);
  opacity: 0.8;
  max-width: 440px;
  margin: 0;
}

/* Steps */
.process-steps {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative; /* For mobile rail container */
}

.process-step {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  min-height: 500px;
}

.step-content-left,
.step-content-right {
  display: flex;
  flex-direction: column;
  padding: var(--section-padding-small) 0;
}

.step-content-left {
  align-items: flex-end;
  text-align: right;
}

.step-content-right {
  align-items: flex-start;
  text-align: left;
}

/* Mobile-only content - hidden on desktop */
.step-content-mobile {
  display: none;
}

.step-title-container {
  color: var(--color-white);
}

.step-number {
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  line-height: var(--line-snug);
  letter-spacing: var(--tracking-h4);
  margin-bottom: 0;
}

.step-title {
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  line-height: var(--line-snug);
  letter-spacing: var(--tracking-h4);
  color: var(--color-white);
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.step-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0;
}

.step-description {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--color-white);
}

.step-image-container {
  width: 320px;
  height: 320px;
  border-radius: 141px 0 40px 0;
  overflow: hidden;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.step-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
}

/* Mobile: Ensure images and text are always visible */
@media (max-width: 1023px) {
  .step-image {
    opacity: 1 !important; /* Override GSAP initial state on mobile */
    transform: none !important; /* Reset any GSAP transforms */
    will-change: auto;
  }
  
  .timeline-text,
  .timeline-media {
    opacity: 1 !important; /* Override GSAP initial state on mobile */
    transform: none !important; /* Reset any GSAP transforms */
    will-change: auto;
  }
  
  .step-content-mobile {
    position: relative;
    z-index: 10; /* Above the timeline line */
  }
  
  .process-step {
    position: relative;
    z-index: 1; /* Ensure steps are above the line */
  }
  
  .process-step-final {
    position: relative;
    z-index: 1; /* Ensure step 6 is above the line */
  }
}

/* Timeline */
.step-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 145px;
  position: relative;
}

.timeline-line {
  flex: 1;
  width: 3px;
  position: relative;
}

.timeline-line-base {
  background-color: rgba(255, 255, 255, 0.3);
}

.timeline-line-progress {
  position: absolute;
  top: 0;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 100%;
  background-color: var(--color-white);
  transform-origin: top;
  transform: scaleY(0);
  z-index: 1;
}

.timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--color-white);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* Step Final */
.process-step-final {
  padding: 0 var(--splitted-gap);
  padding-bottom: var(--gap-large);
}

.step-final-title {
  font-family: var(--font-secondary);
  font-size: var(--heading-3);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h3);
  color: var(--color-white);
  text-align: right;
}


/* Responsive */
@media (max-width: 1023px) {
  /* Hide desktop content on mobile */
  .step-content-left,
  .step-content-right {
    display: none;
  }

  /* Show mobile content */
  .step-content-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
    align-items: flex-start;
    text-align: left;
    width: 100%;
    grid-column: 2;
    padding: 0;
    position: relative;
    z-index: 10; /* Above the timeline line */
  }
  
  /* Mobile: Ensure images and text are always visible */
  /* Override GSAP initial states that might hide content */
  .step-image {
    opacity: 1 !important; /* Override GSAP initial state on mobile */
    transform: none !important; /* Reset any GSAP transforms */
    will-change: auto;
  }
  
  .timeline-text,
  .timeline-media {
    opacity: 1 !important; /* Override GSAP initial state on mobile */
    transform: none !important; /* Reset any GSAP transforms */
    will-change: auto;
  }

  .process-step {
    grid-template-columns: 24px 1fr;
    min-height: auto;
    gap: var(--gap-small);
    align-items: start;
    padding: var(--gap-xxsmall) 0;
    margin-bottom: var(--gap-xxsmall);
    position: relative;
    z-index: 1; /* Ensure steps are above the line */
  }

  .process-step:last-of-type {
    margin-bottom: 0;
  }

  /* Mobile: Hide old process-steps::before line */
  .process-steps::before {
    display: none;
  }
  
  /* Mobile: Rail container for timeline line and dots */
  /* Define shared x-position for line and circles */
  .process-container {
    position: relative; /* For absolute positioned rail */
    /* Ensure content is not clipped - only clip horizontal overflow if needed */
    overflow-x: clip;
    overflow-y: visible; /* Allow content to be fully visible */
    --rail-x: calc(var(--section-padding-medium) + 12px - 1.5px - 48px); /* Container padding + center of 24px column (12px) - half line width (1.5px) - 48px offset (32px + 16px) */
  }
  
  /* Mobile: Rail wrapper for timeline line */
  .process-timeline-rail {
    position: absolute;
    left: var(--rail-x);
    top: 0;
    bottom: 0;
    width: 3px;
    z-index: 0; /* Behind all content */
    pointer-events: none;
  }
  
  /* Mobile: Static base line track (full height) */
  .process-timeline-track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  /* Mobile: Progressive fill that grows from top to bottom */
  .process-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0; /* Will be animated by GSAP to grow from 0 to max */
    background-color: var(--color-white);
    transform-origin: top;
  }

  .step-timeline {
    display: flex;
    flex-direction: column;
    width: 24px;
    align-items: center;
    padding-top: 0;
    grid-column: 1;
    position: relative;
    justify-content: flex-start;
    z-index: 1; /* Above the continuous line */
  }

  /* Hide individual timeline lines on mobile - we use the continuous line */
  .step-timeline .timeline-line {
    display: none;
  }

  .step-timeline .timeline-line-base {
    display: none;
  }

  /* Hide progress lines on mobile - no GSAP animation on mobile */
  .step-timeline .timeline-line-progress {
    display: none;
  }

  .step-timeline .timeline-dot {
    width: 11px;
    height: 11px;
    margin: 0;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    /* Use same x-position as rail line for perfect centering */
    /* rail-x is relative to container, dot is relative to step-timeline (24px wide, centered at 12px) */
    left: calc(12px - 5.5px); /* Center of 24px column minus half dot width */
    z-index: 2;
  }

  .step-content-mobile .step-title-container {
    width: 100%;
    margin-bottom: 0;
  }

  .step-content-mobile .step-number {
    margin-bottom: var(--gap-xxsmall);
  }

  .step-content-mobile .step-description {
    text-align: left;
    width: 100%;
    margin: 0;
  }

  .step-content-mobile .step-image-container {
    width: 100%;
    max-width: 100%;
    height: 280px;
    margin: 0;
    border-radius: var(--radius-medium);
  }

  .step-content-mobile .step-image-wrapper {
    width: 100%;
  }

  .step-content-mobile .btn {
    align-self: flex-start;
  }

  .process-step-final {
    padding: 0;
    padding-bottom: var(--gap-large);
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: var(--gap-small);
    align-items: start;
    position: relative;
    z-index: 1; /* Ensure step 6 is above the line */
    margin-left: -136px; /* Move step 6 136px to the left on mobile */
  }

  /* Dot for step 6 in mobile */
  .process-step-final::before {
    content: '';
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--color-white);
    position: absolute;
    top: 0;
    /* Use same x-position as rail line for perfect centering */
    /* rail-x is relative to container, step-final is in grid column 1 (24px wide) */
    left: calc(12px - 5.5px); /* Center of 24px column minus half dot width */
    z-index: 2;
    grid-column: 1;
  }

  .step-final-title {
    text-align: left;
    grid-column: 2;
  }
}

@media (max-width: 768px) {
  .process-section {
    padding: var(--section-padding-small) var(--gap-xsmall);
  }

  .process-container {
    padding: var(--gap-small);
    border-radius: var(--radius-medium);
  }

  .process-header {
    padding: var(--gap-small) 0;
  }

}



/* ===== components/sections/GallerySection/GallerySection.css ===== */
/* Gallery Section - circular gradient (zelfde als TeamSection ribbon) */
.gallery-section {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(64, 156, 255, 0.95) 0%,
    var(--color-blue-ribbon) 45%,
    #004799 100%
  );
}

/* Desktop: extra hoogte bovenkant zodat blauwe achtergrond boven titel-pill uitsteekt */
@media (min-width: 769px) {
  .gallery-section {
    padding-top: clamp(120px, 12vw, 180px);
  }
}

.gallery-section-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Card Wrapper */
.gallery-card-wrapper {
  position: relative;
  max-width: var(--container-large);
  margin: 0 auto;
}

/* Floating Title Overlay (Desktop) */
.gallery-floating-title {
  position: absolute;
  left: 50%;
  top: -82px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  width: 100%;
  text-align: center;
}

.gallery-title-pill {
  pointer-events: auto;
  background-color: var(--color-background);
  border-radius: var(--radius-medium);
  padding: var(--gap-small) var(--gap-medium);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  display: inline-block;
}

.gallery-floating-title .gallery-title {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Header inside Card (Mobile) */
.gallery-header-mobile {
  display: none;
}

.gallery-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-xxsmall);
}

.gallery-title .text-blue {
  color: var(--color-blue-ribbon);
}

.gallery-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  margin: 0;
}

/* Main Card */
.gallery-card {
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  height: clamp(520px, 60vh, 640px);
  display: flex;
  flex-direction: column;
}

.gallery-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  flex: 1;
  min-height: 0;
}

/* Left: Image Column (Vertical Carousel) */
.gallery-card-image-column {
  position: relative;
  overflow: hidden;
  background-color: var(--color-card-white);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-medium);
}

.gallery-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 520px;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-image-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.gallery-image-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Right: Content Column (Horizontal Carousel) */
.gallery-card-content-column {
  position: relative;
  overflow: hidden;
  padding: var(--gap-large);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 0;
}

.gallery-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.gallery-content-track {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.gallery-content-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 0;
  max-width: 600px;
  margin: 0 auto;
}

.gallery-content-slide-inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
  padding: var(--gap-small) 0;
  justify-content: center;
}

.gallery-content-slide-inner .gallery-content-title,
.gallery-content-slide-inner .gallery-content-description {
  margin: 0;
}

.gallery-content-title {
  font-family: var(--font-primary);
  font-size: var(--heading-3);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h3);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.gallery-content-description {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0;
}

/* Navigation Arrows - Outside Grid */
.gallery-nav-arrow {
  position: absolute;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  color: var(--color-neutral-darkest);
  box-shadow: none;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-nav-arrow:hover {
  background-color: transparent;
  box-shadow: none;
  transform: translateY(-50%) scale(1.1);
}

.gallery-nav-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.gallery-nav-arrow:focus-visible {
  outline: 3px solid var(--color-blue-ribbon);
  outline-offset: 2px;
}

.gallery-nav-arrow-left {
  left: calc(var(--gap-small) - 24px);
}

.gallery-nav-arrow-right {
  right: calc(var(--gap-small) - 24px);
}

/* Dots Navigation */
.gallery-dots {
  position: absolute;
  bottom: var(--gap-small);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
  background-color: transparent;
  padding: 8px 12px;
  border-radius: 20px;
  backdrop-filter: none;
  box-shadow: none;
}

/* Mobile: Position dots at bottom with 4px spacing */
@media (max-width: 900px) {
  .gallery-dots {
    bottom: 4px;
  }
}

.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-neutral-darkest);
  opacity: 0.3;
  border: none;
  cursor: pointer;
  transition: width 0.2s ease, border-radius 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.gallery-dot:hover:not(.active) {
  opacity: 0.6;
  transform: scale(1.2);
}

.gallery-dot.active {
  opacity: 1;
  width: 24px;
  border-radius: 4px;
  transform: none;
}

.gallery-dot:not(.active) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.gallery-dot:focus-visible {
  outline: 2px solid var(--color-blue-ribbon);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 900px) {
  /* Hide floating title on mobile */
  .gallery-floating-title {
    display: none;
  }

  /* Show mobile header inside card */
  .gallery-header-mobile {
    display: block;
    position: static;
    text-align: center;
    padding: var(--gap-medium) var(--gap-medium) var(--gap-small);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0 0 var(--gap-small);
  }

  .gallery-header-mobile .gallery-title {
    font-size: var(--heading-3);
    margin: 0;
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .gallery-card {
    height: clamp(480px, 55vh, 600px);
  }

  .gallery-card-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 0.8fr 1.2fr; /* Make text grid (second row) taller, image row smaller */
  }

  .gallery-card-image-column {
    order: 1;
    padding: var(--gap-small);
  }

  .gallery-image-wrapper {
    max-width: 100%;
  }

  .gallery-card-content-column {
    order: 2;
    padding: 0 var(--gap-medium); /* Remove vertical padding, keep horizontal */
  }

  .gallery-content-slide {
    max-width: 100%;
  }

  .gallery-content-slide-inner {
    padding: 0; /* Already 0, but ensure no vertical padding */
  }

  .gallery-nav-arrow-left {
    left: calc(var(--gap-xxsmall) - 16px);
  }

  .gallery-nav-arrow-right {
    right: calc(var(--gap-xxsmall) - 16px);
  }
}

@media (max-width: 768px) {
  .gallery-section {
    padding: var(--section-padding-small) var(--page-padding);
    /* Volledige background overschrijven zodat gradient weg is op mobiel */
    background: var(--color-background);
  }

  .gallery-section-container {
    gap: var(--gap-medium);
  }

  .gallery-card {
    height: clamp(440px, 50vh, 560px);
  }

  .gallery-card-image-column {
    padding: var(--gap-xxsmall);
  }

  .gallery-card-content-column {
    padding: 0 var(--gap-small); /* Remove vertical padding, keep horizontal */
  }

  .gallery-content-title {
    font-size: var(--heading-4);
  }

  .gallery-content-description {
    font-size: var(--text-regular);
  }

  .gallery-nav-arrow {
    width: 40px;
    height: 40px;
  }

  .gallery-nav-arrow-left {
    left: calc(var(--gap-xxsmall) - 16px);
  }

  .gallery-nav-arrow-right {
    right: calc(var(--gap-xxsmall) - 16px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gallery-image-track,
  .gallery-content-track {
    transition: none;
  }

  .gallery-nav-arrow:hover {
    transform: translateY(-50%);
  }
}


/* ===== components/sections/ResultSection/ResultSection.css ===== */
/* Result Section */
.result-section {
  width: 100%;
  padding: clamp(272px, calc(15vh + 152px), 352px) var(--page-padding);
  background-color: var(--color-background);
  position: relative;
  z-index: 1;
  min-height: 200px;
  display: flex;
  align-items: center;
}

.result-section-container {
  max-width: var(--container-large);
  margin: 0 auto;
  width: 100%;
}

.result-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(96px, 6vw, 128px);
  align-items: center;
  padding-left: 32px;
}

/* Left: Title */
.result-section-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}

.result-section-title {
  font-family: var(--font-primary);
  font-size: clamp(4rem, 3rem + 5vw, 7rem);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

/* Right: Content */
.result-section-right {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
}

.result-section-subtitle {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 0.5rem + 1.25vw, 1.625rem);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: 0;
  color: var(--color-neutral-darkest);
  margin: 0;
}

.result-section-description {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--color-neutral-darkest);
  opacity: 0.6;
  margin: 0;
}

.result-section-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xxsmall);
  margin-top: var(--gap-xsmall);
}

.result-section-actions .text-link {
  color: var(--color-neutral-darkest);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  transition: opacity 0.2s ease;
}

.result-section-actions .text-link:hover {
  opacity: 0.7;
}

/* GlassTagline styling */
.result-section-left .glass-tagline {
  background: rgba(0, 122, 255, 0.1);
  border: none;
}

.result-section-left .glass-tagline p,
.result-section-left .glass-tagline span {
  color: var(--color-blue-ribbon);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 1023px) {
  .result-section-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-large);
  }

  .result-section-left {
    text-align: center;
    align-items: center;
  }

  .result-section-right {
    text-align: center;
    align-items: center;
  }

  .result-section-actions {
    align-items: center;
  }
}

@media (max-width: 1023px) {
  .result-section {
    padding: clamp(232px, calc(12vh + 152px), 292px) var(--page-padding);
  }
}

@media (max-width: 768px) {
  .result-section {
    padding: clamp(216px, calc(10vh + 152px), 252px) var(--page-padding);
  }

  .result-section-grid {
    gap: var(--gap-medium);
    padding-left: 0; /* Neutralize desktop offset for perfect centering on mobile */
  }

  .result-section-subtitle {
    font-size: var(--heading-3);
  }

  .result-section-description {
    font-size: var(--text-subtext-size);
  }
}


/* ===== components/sections/TeamSection/TeamSection.css ===== */
/* Team Hero Section - Slider Layout */
.team-hero-section {
  width: 100vw;
  padding: var(--section-padding-large) 0 0 0;
  background-color: var(--color-background);
  position: relative;
  overflow: visible;
  z-index: 2;
  margin-bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.team-hero-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-large);
  padding: 0 var(--page-padding);
}

/* Header */
.team-hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xxsmall);
  text-align: center;
  max-width: var(--container-medium);
}

.team-hero-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.team-hero-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  margin: 0;
}

/* Ribbon Wrapper - Allows overflow for person image */
.team-hero-ribbon-wrapper {
  width: 100vw;
  position: relative;
  overflow: visible;
}

/* Blue Ribbon - Main container met circular gradient */
.team-hero-ribbon {
  position: relative;
  width: 100vw;
  min-height: 320px;
  height: 320px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(64, 156, 255, 0.95) 0%,
    var(--color-blue-ribbon) 45%,
    #004799 100%
  );
  border-radius: 0;
  box-shadow: inset 0 -20px 32px rgba(0, 0, 0, 0.25);
  overflow: visible;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Slide Container */
.team-hero-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  position: relative;
  min-height: 320px;
  padding: 0;
  max-width: var(--container-large);
  margin: 0 auto;
}

/* Person Image - Links, uitstekend boven ribbon */
.team-hero-person {
  position: absolute;
  left: var(--gap-medium);
  bottom: 0;
  height: 384px;
  display: flex;
  align-items: flex-end;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.team-hero-person-image {
  height: 384px;
  width: auto;
  max-width: 420px;
  object-fit: contain;
  object-position: bottom;
  transform: translateY(0);
  transform-origin: bottom center;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2));
}

.team-hero-person-image[src*="Reitze"] {
  transform: scale(1.15) translateY(0);
  transform-origin: bottom center;
}

.team-hero-person-image[src*="COLIN"],
.team-hero-person-image[src*="colin"] {
  transform: scale(1.25) translateY(0);
  transform-origin: bottom center;
}

.team-hero-person-image[src*="david"] {
  transform: scale(1.25) translateY(0);
  transform-origin: bottom center;
}

/* Content - Rechts op ribbon */
.team-hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 380px;
  padding-right: var(--gap-large);
  padding-top: var(--gap-medium);
  padding-bottom: var(--gap-medium);
  min-height: 320px;
  z-index: 1;
}

.team-hero-name {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-bold);
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 0 var(--gap-xxsmall) 0;
  letter-spacing: -0.02em;
}

.team-hero-role {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: var(--font-medium);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Link "Meer over ons" - onder de ribbon, 24px ruimte */
.team-hero-cta-wrapper {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.team-hero-cta-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-blue-ribbon);
  text-decoration: none;
  transition: opacity 0.2s ease;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  padding-bottom: 2px;
}

/* Lijn direct onder de button, sluit aan en wordt langer bij hover */
.team-hero-cta-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: width 0.35s ease;
}

.team-hero-cta-link:hover {
  opacity: 0.85;
}

.team-hero-cta-link:hover::after {
  width: calc(100% + 8px);
}

.team-hero-cta-arrow {
  display: inline-block;
  transition: transform 0.35s ease;
}

.team-hero-cta-link:hover .team-hero-cta-arrow {
  transform: translateX(6px);
}

/* Navigation Dots - in ribbon (onderaan blauwe strook) */
.team-hero-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
}

.team-hero-dots--in-ribbon {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* Dots op blauwe achtergrond → lichte kleur */
.team-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  outline: none;
}

.team-hero-dot:hover,
.team-hero-dot:focus {
  background-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.2);
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.team-hero-dot--active {
  background-color: rgba(255, 255, 255, 0.9);
  width: 24px;
  border-radius: 4px;
}


/* Responsive */
@media (max-width: 1024px) {
  .team-hero-ribbon {
    min-height: 280px;
    height: 280px;
  }

  .team-hero-slide {
    min-height: 280px;
    padding: 0 calc(var(--page-padding) / 2);
  }

  .team-hero-person {
    left: var(--gap-small);
    height: 344px;
  }

  .team-hero-person-image {
    max-width: 320px;
    height: 344px;
    transform: translateY(0);
    transform-origin: bottom center;
  }

  .team-hero-person-image[src*="Reitze"] {
    transform: scale(1.15) translateY(0);
    transform-origin: bottom center;
  }

  .team-hero-person-image[src*="COLIN"],
  .team-hero-person-image[src*="colin"] {
    transform: scale(1.25) translateY(0);
    transform-origin: bottom center;
  }

  .team-hero-person-image[src*="david"] {
    transform: scale(1.25) translateY(0);
    transform-origin: bottom center;
  }

  .team-hero-content {
    padding-left: 280px;
    padding-right: var(--gap-medium);
    min-height: 280px;
  }

  .team-hero-name {
    font-size: clamp(2rem, 4vw, 3rem);
  }
}

@media (max-width: 768px) {
  .team-hero-section {
    padding: var(--section-padding-medium) var(--page-padding);
  }

  .team-hero-ribbon {
    min-height: 280px;
    height: 280px;
    overflow: visible;
    display: flex;
    align-items: flex-end;
  }

  .team-hero-slide {
    min-height: 280px;
    height: 100%;
    padding: var(--gap-small) var(--gap-small) 0 var(--gap-small);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-small);
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }

  .team-hero-person {
    position: relative;
    left: auto;
    transform: none;
    bottom: 0;
    height: 100%;
    max-height: none;
    margin-bottom: 0;
    padding-bottom: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    align-self: stretch;
  }

  .team-hero-person-image {
    max-width: 100%;
    max-height: 390px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: bottom;
    transform: scale(1.5) translateY(0);
    transform-origin: bottom center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    display: block;
  }

  .team-hero-person-image[src*="Reitze"] {
    transform: scale(1.725) translateY(0);
    transform-origin: bottom center;
  }

  .team-hero-person-image[src*="COLIN"],
  .team-hero-person-image[src*="colin"] {
    transform: scale(2.25) translateY(0);
    transform-origin: bottom center;
  }

  .team-hero-person-image[src*="david"] {
    transform: scale(1.875) translateY(0);
    transform-origin: bottom center;
  }

  .team-hero-content {
    padding: var(--gap-small);
    align-items: flex-start;
    text-align: left;
    min-height: auto;
    width: 100%;
    z-index: 2;
    position: relative;
    justify-content: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: center;
  }

  .team-hero-name {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    text-align: left;
  }

  .team-hero-role {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    text-align: left;
  }

  .team-hero-cta-wrapper {
    margin-top: 24px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .team-hero-slide {
    transition: none;
  }

  .team-hero-name,
  .team-hero-role {
    transition: none;
  }
}












/* ===== components/sections/TrustSection/TrustSection.css ===== */
/* Trust Section - BEM Naming Convention */
.trust-section {
  position: relative;
  width: 100%;
  padding: var(--section-padding-large) var(--page-padding);
  background-color: var(--color-background);
  overflow: hidden;
}

/* Abstract Background Shapes - Removed */

/* Container */
.trust-section__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-large);
  margin: 0 auto;
  padding: 0 var(--gap-xsmall);
}

.trust-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-large);
  align-items: start;
}

/* Content Column */
.trust-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

.trust-section__content .glass-tagline {
  margin-bottom: calc(var(--gap-medium) / -2);
  align-self: flex-start;
}

.trust-section__title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.trust-section__title-highlight {
  position: relative;
  display: inline-block;
  color: var(--color-blue-ribbon);
}

.trust-section__title-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 10' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5 Q 50 10 100 5' stroke='%23e5f0ff' stroke-width='8' fill='none'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

.trust-section__description {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  margin: calc(var(--gap-medium) / -2) 0 0 0;
  max-width: 42rem;
}

/* Features Grid */
.trust-section__features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-xxsmall);
  margin-top: var(--gap-small);
}

/* Feature Card */
.trust-section__feature-card {
  padding: var(--space-md) var(--space-md);
  border-radius: var(--radius-medium);
  transition: all 0.3s ease;
  border: 1px solid transparent;
  background: var(--color-white);
  height: 100%;
  cursor: default;
}

.trust-section__feature-card:hover,
.trust-section__feature-card--hovered {
  background: var(--color-white);
  border-color: rgba(0, 112, 255, 0.15);
  box-shadow: 0 20px 25px -5px rgba(0, 112, 255, 0.05), 0 10px 10px -5px rgba(0, 112, 255, 0.02);
  transform: translateY(-4px);
}

.trust-section__feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trust-section__feature-icon-wrapper {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-small);
  transition: background-color 0.3s ease;
  background: transparent;
}

.trust-section__feature-card:hover .trust-section__feature-icon-wrapper,
.trust-section__feature-card--hovered .trust-section__feature-icon-wrapper {
  background: transparent;
}

.trust-section__feature-icon-wrapper svg {
  width: 24px;
  height: 24px;
  color: var(--color-blue-ribbon);
}

.trust-section__feature-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.trust-section__feature-title {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-bold);
  line-height: var(--line-normal);
  letter-spacing: 0;
  color: var(--color-neutral-darkest);
  margin: 0;
  transition: color 0.3s ease;
}

.trust-section__feature-card:hover .trust-section__feature-title,
.trust-section__feature-card--hovered .trust-section__feature-title {
  color: var(--color-neutral-darkest);
}

.trust-section__feature-description {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--text-subtext-color);
  margin: 0;
}

/* CTA */
.trust-section__cta {
  padding-top: var(--space-md);
}

.trust-section__cta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Visuals Column */
.trust-section__visuals {
  position: relative;
  margin-top: var(--gap-medium);
}

/* Main Image */
.trust-section__image-wrapper {
  position: relative;
  z-index: 10;
  border-radius: var(--radius-large);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-blue-ribbon);
  background-color: var(--color-white);
}

.trust-section__image {
  width: 100%;
  height: 650px;
  object-fit: cover;
  display: block;
}

/* Floating Cards */
.trust-section__floating-card {
  position: absolute;
  z-index: 20;
  background: var(--color-white);
  padding: var(--space-md);
  border-radius: var(--radius-medium);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  max-width: 220px;
  display: none;
}

.trust-section__floating-card--speed {
  left: -32px;
  bottom: 128px;
  animation: bounce-slow 4s infinite ease-in-out;
}

.trust-section__floating-card--guarantee {
  right: -32px;
  top: 48px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  padding: var(--space-sm);
  border: 1px solid rgba(0, 112, 255, 0.15);
  max-width: 240px;
  transform: rotate(3deg);
  transition: transform 0.3s ease;
  cursor: default;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.trust-section__floating-card--guarantee:hover {
  transform: rotate(0deg);
}

.trust-section__floating-card-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.trust-section__floating-card-icon {
  padding: var(--space-2xs);
  background: rgba(0, 112, 255, 0.1);
  border-radius: 50%;
  color: var(--color-blue-ribbon);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-section__floating-card-icon svg {
  width: 20px;
  height: 20px;
}

.trust-section__floating-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-section__floating-card-label {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
  color: var(--text-subtext-color);
  margin: 0;
}

.trust-section__floating-card-value {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-bold);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.trust-section__floating-card-icon-large {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 112, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-ribbon);
  flex-shrink: 0;
}

.trust-section__floating-card-icon-large svg {
  width: 24px;
  height: 24px;
}

.trust-section__floating-card-text-large {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-section__floating-card-label-large {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-bold);
  color: var(--color-blue-ribbon);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.trust-section__floating-card-value-large {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-darkest);
  margin: 0;
}

/* Decoration Dots */
.trust-section__decoration-dots {
  position: absolute;
  bottom: -40px;
  right: -40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xs);
  opacity: 0.2;
  pointer-events: none;
}

.trust-section__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neutral-darkest);
}

/* Bounce Animation */
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Responsive Breakpoints */

/* Tablet: 768px+ */
@media (min-width: 768px) {
  .trust-section__grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--gap-large);
  }

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

  .trust-section__visuals {
    margin-top: 0;
    position: sticky;
    top: var(--gap-small);
  }

  .trust-section__floating-card {
    display: block;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .trust-section {
    padding: var(--section-padding-large) var(--page-padding);
  }

  .trust-section__container {
    padding: 0 var(--gap-small);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .trust-section {
    padding: var(--section-padding-medium) var(--gap-xsmall);
  }

  .trust-section__container {
    padding: 0;
  }

  .trust-section__title {
    font-size: var(--heading-3);
  }

  .trust-section__visuals {
    display: none;
  }

  .trust-section__floating-card {
    display: none;
  }

  .trust-section__decoration-dots {
    display: none;
  }
}

/* Hover effects only on devices that support hover */
@media (hover: none) {
  .trust-section__feature-card:hover,
  .trust-section__feature-card--hovered {
    transform: none;
  }

  .trust-section__image-wrapper:hover {
    transform: rotate(-2deg);
  }
}


/* ===== components/sections/TestimonialSection/Testimonials.css ===== */
/* Testimonials Section - Premium, Trustworthy Design */
.testimonials-section {
  position: relative;
  width: 100%;
  padding: clamp(80px, 10vw, 140px) var(--page-padding) clamp(40px, 5vw, 60px) var(--page-padding);
  background-color: var(--color-background);
}

.testimonials-container {
  max-width: var(--container-large);
  margin: 0 auto;
}

/* Header */
.testimonials-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}

.testimonials-kicker {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
  color: var(--color-blue-ribbon);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.testimonials-title {
  font-family: var(--font-primary);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0 0 12px;
}

.testimonials-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  margin: 0;
}

/* Grid - Desktop default */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* Testimonial Card */
.testimonial-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  box-shadow: var(--shadow-xsmall);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

/* Inner stroke voor premium afwerking - alleen bij hover */
.testimonial-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid transparent;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 220ms ease, border-color 220ms ease;
}

/* Premium hover effect (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 122, 255, 0.32);
    border-bottom-color: var(--color-blue-ribbon);
    box-shadow: var(--shadow-medium);
  }

  .testimonial-card:hover::after {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.65);
  }
}

/* Rating Stars */
.testimonial-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
}

.testimonial-star {
  width: 16px;
  height: 16px;
  color: #FFB800;
  flex-shrink: 0;
}

/* Quote */
.testimonial-quote {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.75);
  margin: 0 0 22px;
  flex-grow: 1;
}

/* Mobile: Fixed height for consistent card sizing */
@media (max-width: 767px) {
  .testimonial-quote {
    min-height: 84px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Author Section */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.12);
  display: grid;
  place-items: center;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-blue-ribbon);
  flex-shrink: 0;
}

.testimonial-name {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-neutral-darkest);
  margin: 0 0 2px;
  line-height: 1.3;
}

.testimonial-role {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: var(--font-regular);
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
  line-height: 1.4;
}

/* Responsive Breakpoints */

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Mobile: 1 column with deck animation */
@media (max-width: 767px) {
  .testimonials-section {
    padding: var(--section-padding-medium) var(--page-padding) 40px var(--page-padding);
  }

  .testimonials-header {
    margin-bottom: 40px;
  }

  .testimonials-title {
    font-size: clamp(24px, 6vw, 32px);
    letter-spacing: 0;
  }

  .testimonials-subtitle {
    font-size: var(--text-subtitle-size);
  }

  .testimonials-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* Progress Indicator - Mobile Only */
  .testimonials-deck-indicator {
    --indicator-bar-width: 32px;
    --indicator-bar-height: 4px;
    --indicator-bar-radius: 2px;
    --indicator-bar-gap: 6px;
    --indicator-active-opacity: 1;
    --indicator-inactive-opacity: 0.3;
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--indicator-bar-gap);
    margin-bottom: var(--gap-small);
    padding: calc(var(--gap-xxsmall) / 2) 0;
    width: 100%;
  }

  .testimonials-indicator-bar {
    width: var(--indicator-bar-width);
    height: var(--indicator-bar-height);
    border-radius: var(--indicator-bar-radius);
    background-color: var(--color-blue-ribbon);
    opacity: var(--indicator-inactive-opacity);
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: scale(1);
    flex-shrink: 0;
  }

  .testimonials-indicator-bar--active {
    opacity: var(--indicator-active-opacity);
    transform: scale(1.1);
  }

  /* Deck Viewport */
  .testimonials-deck-viewport {
    width: 100%;
    padding: var(--gap-small) 0 60px 0;
    position: relative;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .testimonial-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    opacity: 1;
    padding: 24px;
    /* Ensure consistent card structure */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* Active card - simple slideshow */
  .testimonial-card--active {
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }

  .testimonial-rating {
    margin-bottom: 14px;
  }

  .testimonial-star {
    width: 14px;
    height: 14px;
  }

  .testimonial-quote {
    font-size: 14px;
    margin-bottom: 20px;
    /* Fixed height to ensure consistent card heights */
    min-height: 84px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .testimonial-avatar {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .testimonial-name {
    font-size: 13px;
  }

  .testimonial-role {
    font-size: 12px;
  }
}

/* Desktop/Tablet: Normal grid layout */
@media (min-width: 768px) {
  .testimonials-deck-indicator {
    display: none;
  }
  
  .testimonials-deck-viewport {
    display: contents;
  }
  
  .testimonial-card {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* CTA Section */
.testimonials-cta {
  margin-top: 80px;
  text-align: center;
  max-width: var(--container-large);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--page-padding);
}

.testimonials-cta-content {
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 22px;
  background: rgba(0, 122, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(0, 122, 255, 0.25);
}

.testimonials-cta-title {
  font-family: var(--font-primary);
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 600;
  line-height: var(--line-tight);
  letter-spacing: 0;
  color: var(--color-neutral-darkest);
  margin: 0 0 6px;
}

.testimonials-cta-text {
  font-family: var(--font-primary);
  font-size: 13px;
  line-height: var(--line-relaxed);
  color: rgba(0, 0, 0, 0.65);
  margin: 0 0 12px;
}

.testimonials-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-blue-ribbon);
  background: transparent;
  border: 1px solid rgba(0, 122, 255, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.testimonials-cta-button:hover {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  border-color: var(--color-blue-ribbon);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 112, 255, 0.4);
}

.testimonials-cta-button:active {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  transform: translateY(0);
  box-shadow: var(--shadow-small);
}

/* Responsive CTA */
@media (max-width: 767px) {
  .testimonials-cta {
    margin-top: 32px;
  }

  .testimonials-cta-content {
    padding: 16px 18px;
    max-width: 100%;
  }

  .testimonials-cta-title {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .testimonials-cta-text {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .testimonials-cta-button {
    padding: 6px 14px;
    font-size: 12px;
  }
}



/* ===== components/sections/WhatsAppSection/WhatsAppSection.css ===== */
/* WhatsApp Section - TeamSection Layout Style */
.whatsapp-section {
  width: 100vw;
  padding: var(--section-padding-large) 0 0 0;
  background-color: var(--color-background);
  position: relative;
  overflow: visible;
  z-index: 2;
  margin-bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.whatsapp-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-large);
  padding: 0 var(--page-padding);
}

/* Ribbon Wrapper - Allows overflow for person image */
.whatsapp-ribbon-wrapper {
  width: 100vw;
  position: relative;
  overflow: visible;
}

/* Blue Ribbon - Main container met circular gradient (zelfde als TeamSection) */
.whatsapp-ribbon {
  position: relative;
  width: 100vw;
  min-height: 320px;
  height: 320px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(64, 156, 255, 0.95) 0%,
    var(--color-blue-ribbon) 45%,
    #004799 100%
  );
  border-radius: 0;
  box-shadow: inset 0 -20px 32px rgba(0, 0, 0, 0.25);
  overflow: visible;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Content Container */
.whatsapp-ribbon-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  position: relative;
  min-height: 320px;
  padding: 0;
  max-width: var(--container-large);
  margin: 0 auto;
}

/* Person Image - Links, uitstekend boven ribbon */
.whatsapp-person {
  position: absolute;
  left: var(--gap-medium);
  bottom: 0;
  height: 384px;
  display: flex;
  align-items: flex-end;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.whatsapp-person-image {
  height: 384px;
  width: auto;
  max-width: 420px;
  object-fit: contain;
  object-position: bottom;
  transform: scale(1.25) translateY(0);
  transform-origin: bottom center;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2));
}

/* Content - Rechts op ribbon, gecentreerd verticaal */
.whatsapp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 500px;
  padding-right: var(--gap-large);
  padding-top: 32px;
  padding-bottom: 32px;
  min-height: 320px;
  z-index: 1;
  gap: 0;
}

.whatsapp-name {
  font-family: var(--font-secondary);
  font-size: var(--heading-4);
  font-weight: var(--font-semibold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h4);
  color: var(--color-white);
  margin: 0;
  margin-bottom: var(--gap-small);
}

.whatsapp-role {
  font-family: var(--font-primary);
  font-size: var(--text-subtext-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtext-line-height);
  color: var(--color-white);
  opacity: 0.85;
  margin: 0;
  margin-bottom: var(--gap-xxsmall);
}

.whatsapp-bulletpoint {
  display: flex;
  align-items: center;
  gap: var(--gap-xxsmall);
  margin: 0;
  margin-bottom: var(--gap-small);
}

.whatsapp-bulletpoint-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-green-haze);
}

.whatsapp-bulletpoint-text {
  font-family: var(--font-primary);
  font-size: var(--text-subtext-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtext-line-height);
  color: var(--color-white);
  opacity: 1;
  margin: 0;
}

.whatsapp-cta-button {
  margin-top: var(--gap-xxsmall);
  font-size: var(--text-regular);
  padding: 12px 32px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.whatsapp-cta-button:hover {
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1024px) {
  .whatsapp-ribbon {
    min-height: 280px;
    height: 280px;
  }

  .whatsapp-ribbon-content {
    min-height: 280px;
    padding: 0 calc(var(--page-padding) / 2);
  }

  .whatsapp-person {
    left: var(--gap-small);
    height: 344px;
  }

  .whatsapp-person-image {
    max-width: 320px;
    height: 344px;
    transform: scale(1.25) translateY(0);
    transform-origin: bottom center;
  }

  .whatsapp-content {
    padding-left: 400px;
    padding-right: var(--gap-medium);
    padding-top: 32px;
    padding-bottom: 32px;
    min-height: 280px;
  }

}

@media (max-width: 768px) {
  .whatsapp-section {
    padding: var(--section-padding-medium) var(--page-padding);
  }

  .whatsapp-ribbon {
    min-height: auto;
    height: auto;
    overflow: hidden;
    padding: var(--gap-medium) 0;
  }

  .whatsapp-ribbon-content {
    min-height: auto;
    padding: var(--gap-medium) var(--gap-small);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .whatsapp-person {
    display: none;
  }

  .whatsapp-content {
    padding: var(--gap-medium) var(--gap-small);
    align-items: flex-start;
    text-align: left;
    min-height: auto;
    width: 100%;
    z-index: 2;
    position: relative;
    justify-content: center;
    gap: var(--gap-small);
  }

  .whatsapp-name {
    text-align: left;
    margin-bottom: var(--gap-xxsmall);
  }

  .whatsapp-role {
    text-align: left;
    margin-bottom: var(--gap-xxsmall);
  }

  .whatsapp-bulletpoint {
    margin-bottom: var(--gap-small);
  }

  .whatsapp-cta-button {
    width: 100%;
    padding: 12px 24px;
    margin-top: 0;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-ribbon-content {
    transition: none;
  }

  .whatsapp-name,
  .whatsapp-role {
    transition: none;
  }
}


/* ===== components/sections/CTASection/CTASection.css ===== */
/* CTA Section - circular gradient (zelfde als TeamSection/GallerySection) */
.cta-section {
  width: 100%;
  padding: var(--page-padding) 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(64, 156, 255, 0.95) 0%,
    var(--color-blue-ribbon) 45%,
    #004799 100%
  );
  overflow: visible;
}

.cta-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: var(--container-large);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.cta-gradient-background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(173, 216, 255, 0.2) 0%, rgba(173, 216, 255, 0.08) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.cta-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-small);
  max-width: var(--container-medium);
  margin: 0 auto;
  padding: var(--page-padding);
  text-align: center;
  z-index: 1;
}

.cta-title {
  font-family: var(--font-primary);
  font-size: clamp(var(--heading-4), 2.5vw, var(--heading-2));
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-white);
}

.cta-description {
  font-family: var(--font-primary);
  font-size: var(--text-subtext-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtext-line-height);
  color: var(--color-white);
  opacity: 0.9;
}

.cta-content .btn-secondary {
  color: var(--color-white);
}

/* Responsive */
@media (max-width: 1024px) {
  .cta-container {
    padding: 0 var(--gap-medium);
  }

  .cta-gradient-background {
    width: 500px;
    height: 500px;
  }

  .cta-content {
    padding: var(--gap-large);
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .cta-section {
    padding: var(--section-padding-small) var(--gap-small);
  }

  .cta-container {
    padding: 0 var(--gap-small);
  }

  .cta-gradient-background {
    width: 400px;
    height: 400px;
  }

  .cta-content {
    padding: var(--gap-medium);
    gap: var(--gap-xxsmall);
  }

  .cta-title {
    font-size: clamp(var(--heading-4), 4vw, var(--heading-3));
    line-height: var(--line-tight);
  }

  .cta-description {
    font-size: var(--text-subtext-size);
    line-height: var(--text-subtext-line-height);
  }

  .cta-content .btn {
    width: 100%;
    max-width: 100%;
    padding: 12px 20px;
    font-size: var(--text-regular);
  }
}

@media (max-width: 480px) {
  .cta-section {
    padding: var(--gap-medium) var(--gap-xxsmall);
  }

  .cta-container {
    padding: 0 var(--gap-xxsmall);
  }

  .cta-gradient-background {
    width: 300px;
    height: 300px;
  }

  .cta-content {
    padding: var(--gap-small);
    gap: var(--gap-xxsmall);
  }

  .cta-title {
    font-size: var(--heading-4);
    margin-bottom: var(--gap-xxsmall);
    letter-spacing: -0.01em;
  }

  .cta-description {
    font-size: var(--text-small);
    margin-bottom: var(--gap-xxsmall);
  }

  .cta-content .btn {
    padding: 10px 16px;
    font-size: var(--text-small);
  }
}



/* ===== components/sections/FAQSection/FAQSection.css ===== */
/* FAQ Section */
.faq-section {
  width: 100%;
  padding: 128px var(--section-padding-medium) var(--section-padding-large);
  background-color: var(--color-background);
  border: none;
  outline: none;
}

/* Remove top padding on DienstenPage */
.faq-section--no-top-padding {
  padding-top: 0;
}

.faq-container {
  max-width: var(--container-large);
  margin: 0 auto;
  background-color: var(--color-blue-ribbon);
  border-radius: var(--radius-large);
  padding: var(--gap-medium);
  display: flex;
  flex-direction: column;
  gap: 0;
  border: none;
  outline: none;
  box-shadow: none;
}

/* Blue container for questions only */
.faq-list-wrapper {
  background-color: var(--color-blue-ribbon);
  border-radius: var(--radius-medium);
  padding: var(--gap-medium);
}

.faq-content {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: var(--gap-large);
  align-items: start;
}

.faq-list-wrapper {
  grid-column: 2;
  grid-row: 1 / -1;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap between items, using dividers instead */
}

.faq-cta {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  align-self: flex-end;
}

.faq-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-white);
  margin: 0;
}

.faq-cta-text {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-medium);
  line-height: 1.5;
  color: var(--color-white);
  margin: 0;
}

.faq-cta-button {
  align-self: flex-start;
  padding: 12px 20px;
  font-size: var(--text-regular);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.faq-cta-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.faq-item {
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transition: background-color 0.2s ease;
  position: relative;
}

/* Divider lines between items (not first, not last) */
.faq-item:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.5px;
  background-color: var(--color-white);
}

.faq-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.faq-item.open {
  background-color: transparent;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xsmall);
  width: 100%;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s ease;
  color: var(--color-white);
}

.faq-item.open .faq-question {
  color: var(--color-white);
}

.faq-question:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  border-radius: 4px;
}

.faq-question span {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-bold);
  line-height: 1.5;
  color: inherit;
  transition: color 0.2s ease;
}

.faq-icon {
  flex-shrink: 0;
  color: inherit;
  transition: transform 0.2s ease-out;
  transform-origin: center;
  will-change: transform;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.25s ease-out 0.05s, padding 0.3s ease-out;
  padding: 0;
}

.faq-item.open .faq-answer {
  max-height: 800px;
  opacity: 1;
  padding: 0 0 24px 0;
  transition: max-height 0.3s ease-out, opacity 0.25s ease-out, padding 0.3s ease-out;
}

.faq-answer p {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: 1.65;
  color: var(--color-white);
  margin: 0;
  max-width: 65ch;
}

.faq-answer-lead {
  font-weight: var(--font-semibold);
}

.faq-answer-rest {
  font-weight: var(--font-regular);
}

/* Responsive */
@media (max-width: 1024px) {
  .faq-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: var(--gap-medium);
  }

  .faq-list-wrapper {
    grid-column: 1;
    grid-row: 1;
  }

  .faq-cta {
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    text-align: center;
    align-self: center;
  }

  .faq-cta-button {
    align-self: center;
  }
}

@media (max-width: 768px) {
  .faq-section {
    padding: 64px var(--gap-xsmall) var(--section-padding-medium);
  }

  .faq-section--no-top-padding {
    padding-top: 0;
  }

  .faq-question {
    padding: 20px 0;
  }

  .faq-item.open .faq-answer {
    padding: 0 0 20px 0;
  }
}



/* ===== components/sections/ResourcesSection/ResourcesSection.css ===== */
/* Resources Section */
.resources-section {
  width: 100%;
  padding: calc(var(--page-padding) * 3) 0;
  background-color: var(--color-background);
}

.resources-section-container {
  position: relative;
  max-width: var(--container-large);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.resources-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: stretch;
}

/* Left Column */
.resources-section-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  text-align: left;
}

.resources-section-title {
  font-family: var(--font-primary);
  font-size: clamp(var(--heading-4), 2.5vw, var(--heading-2));
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.resources-section-description {
  font-family: var(--font-primary);
  font-size: var(--text-subtext-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtext-line-height);
  color: var(--text-subtext-color);
  margin: 0;
}

/* Right Column */
.resources-section-right {
  display: flex;
  flex-direction: column;
}

/* Resource Card Styling (from ResourcesPage) */
.resource-card {
  background: var(--color-white);
  border-radius: 18px;
  padding: 26px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.resource-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: var(--font-regular);
  color: var(--color-neutral-darkest);
  opacity: 0.6;
  margin-bottom: var(--gap-xxsmall);
}

.resource-card-title {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-semibold);
  line-height: var(--line-tight);
  letter-spacing: 0;
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-xxsmall) 0;
}

.resource-card-excerpt {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin: 0 0 var(--gap-xxsmall) 0;
  flex: 1;
}

.resource-card-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-blue-ribbon);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.resource-card-link:hover {
  color: var(--color-blue-ribbon-light);
}

.resources-section-cta {
  align-self: flex-start;
  margin-top: var(--gap-xxsmall);
}

/* Responsive */
@media (max-width: 1024px) {
  .resources-section-container {
    padding: 0 var(--gap-medium);
  }

  .resources-section-grid {
    gap: clamp(24px, 3vw, 48px);
  }
}

@media (max-width: 768px) {
  .resources-section {
    padding: calc(var(--section-padding-small) * 3) var(--gap-small);
  }

  .resources-section-container {
    padding: 0 var(--gap-small);
  }

  .resources-section-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
  }

  .resources-section-left {
    text-align: center;
  }

  .resources-section-title {
    font-size: clamp(var(--heading-4), 4vw, var(--heading-3));
    line-height: var(--line-tight);
  }

  .resources-section-description {
    font-size: var(--text-subtext-size);
    line-height: var(--text-subtext-line-height);
  }

  .resources-section-cta {
    width: 100%;
    max-width: 100%;
    padding: 12px 20px;
    font-size: var(--text-regular);
    align-self: stretch;
  }
}

@media (max-width: 480px) {
  .resources-section {
    padding: calc(var(--gap-medium) * 3) var(--gap-xxsmall);
  }

  .resources-section-container {
    padding: 0 var(--gap-xxsmall);
  }

  .resources-section-grid {
    gap: var(--gap-small);
  }

  .resources-section-title {
    font-size: var(--heading-4);
    margin-bottom: var(--gap-xxsmall);
    letter-spacing: -0.01em;
  }

  .resources-section-description {
    font-size: var(--text-small);
    margin-bottom: var(--gap-xxsmall);
  }

  .resource-card {
    padding: 20px;
  }

  .resources-section-cta {
    padding: 10px 16px;
    font-size: var(--text-small);
  }
}


/* ===== components/sections/FeaturesSection/FeaturesSection.css ===== */
/* Features Section - BEM Naming Convention */
.features-section {
  position: relative;
  width: 100%;
  padding: var(--section-padding-large) var(--page-padding);
  background-color: var(--color-background);
  overflow: visible;
  z-index: 1;
}

/* Brand Watermark */
.features-section__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  z-index: 0;
  pointer-events: none;
}

.features-section__watermark-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.15;
  user-select: none;
}

/* Content Container - Above Watermark */
.features-section__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.features-section__container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header */
.features-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xxsmall);
  text-align: center;
  max-width: var(--container-medium);
  margin-bottom: var(--gap-large);
  will-change: transform;
}

.features-section__header .glass-tagline {
  margin-bottom: var(--gap-xxsmall);
}

.features-section__title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.features-section__title-highlight {
  color: var(--color-blue-ribbon);
}

.features-section__subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  margin: 0;
  max-width: 600px;
}

/* Features Grid - Bento Layout */
.features-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  position: relative;
  z-index: 1;
  align-items: stretch;
}


/* Feature Card - Bento Grid Style */
.features-section__card {
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  
  background: #ffffff;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  
  box-shadow: var(--shadow-xsmall);
  
  transform: translateZ(0);
  will-change: transform;
  
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 148px;
}

/* Large card (Alles inbegrepen) - zelfde lengte als andere cards */
.features-section__card--large {
  min-height: auto;
}

/* Inner stroke voor premium afwerking - alleen bij hover */
.features-section__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid transparent;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 220ms ease, border-color 220ms ease;
}

/* Bottom accent bar verwijderd - nu via border-bottom op card zelf (zoals team cards) */

/* Premium hover: lift + licht "glow" zonder neon (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .features-section__card {
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  }

  .features-section__card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 122, 255, 0.32);
    border-bottom-color: var(--color-blue-ribbon);
    box-shadow: var(--shadow-medium);
  }

  .features-section__card:hover::after {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.65);
  }

  .features-section__card:hover .features-section__icon-wrapper {
    /* Geen shadow op hover - wrapper blijft onzichtbaar */
    box-shadow: none;
  }
}

/* Card Content Wrapper - Verticale layout */
.features-section__card-content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 0;
}

.features-section__card-text {
  flex: 1;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  order: 2;
}

/* Icon Wrapper - onzichtbaar, alleen icon zichtbaar */
.features-section__icon-wrapper {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  
  /* Wrapper onzichtbaar gemaakt - geen background, border of shadow */
  background: transparent;
  border: none;
  box-shadow: none;
  
  color: var(--color-blue-ribbon);
  flex-shrink: 0;
  margin-bottom: 0;
  position: relative;
  z-index: 3;
}

/* Card Image Area */
.features-section__card-image {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  order: 1;
}

.features-section__card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transform: scale(1.2);
}

.features-section__card-image img[src*="whatsapp"] {
  transform: scale(1.2);
}

.features-section__card:has(img[src*="whatsapp"]) .features-section__card-image {
  width: 280px;
}

.features-section__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.features-section__icon-wrapper svg {
  width: 20px;
  height: 20px;
}

/* Card Typography - titel iets groter, body rustiger, max breedte */
.features-section__card-title {
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: 0;
  color: var(--color-neutral-darkest);
  margin: 10px 0 10px;
  position: relative;
  z-index: 2;
}

.features-section__card-description {
  font-family: var(--font-primary);
  font-size: var(--text-subtext-size);
  line-height: var(--text-subtext-line-height);
  color: var(--text-subtext-color);
  margin: 0;
  max-width: 34ch;
  position: relative;
  z-index: 2;
}

/* CTA Section */
.features-section__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xsmall);
  margin-top: var(--gap-large);
  text-align: center;
  position: relative;
  z-index: 1;
}

.features-section__cta-text {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.features-section__cta-button {
  margin-top: var(--space-xs);
}

/* Responsive Breakpoints */

/* Tablet: 2 columns */
@media (min-width: 768px) {
  .features-section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .features-section__card {
    min-height: 188px;
    height: 188px;
  }

  .features-section__card-image {
    width: 188px;
  }

  .features-section__watermark {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Desktop: 4 columns horizontaal - verticale cards */
@media (min-width: 1024px) {
  .features-section__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .features-section__card {
    min-height: auto;
    height: 100%;
    flex-direction: column;
    display: flex;
  }

  .features-section__card--large {
    height: 100%;
  }

  .features-section__card-content-wrapper {
    flex-direction: column;
  }

  .features-section__card-image {
    width: 100%;
    height: 200px;
    order: 1;
  }

  .features-section__card-text {
    order: 2;
    padding: 16px 24px 24px 24px;
  }

  .features-section__card-image img {
    transform: scale(1);
    padding: 20px;
  }

  .features-section__card:has(img[src*="whatsapp"]) .features-section__card-image {
    width: 100%;
  }

  .features-section__watermark {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Large Desktop */
@media (min-width: 1440px) {
  .features-section__grid {
    gap: 28px;
  }

  .features-section__watermark {
    width: 700px;
    height: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .features-section {
    padding: var(--section-padding-medium) var(--gap-xsmall);
  }

  .features-section__watermark {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .features-section__grid {
    gap: 20px;
  }

  .features-section__card {
    min-height: 128px;
    height: 128px;
  }

  .features-section__card-text {
    padding: 20px;
  }

  .features-section__card-image {
    width: 96px;
    overflow: visible;
  }


  .features-section__icon-wrapper {
    width: 42px;
    height: 42px;
  }

  .features-section__icon-wrapper svg {
    width: 18px;
    height: 18px;
  }

  .features-section__card-title {
    font-size: 17px;
    margin: 8px 0 8px;
    font-weight: 700;
  }

  .features-section__card-description {
    font-size: 14px;
    line-height: 1.65;
  }

  .features-section__cta {
    margin-top: var(--gap-medium);
    gap: var(--gap-xxsmall);
  }

  .features-section__cta-text {
    font-size: var(--text-regular);
  }
}







/* ===== components/sections/AboutTeamInteractive/AboutTeamInteractive.css ===== */
/* About Team Interactive Section */
.about-team-interactive {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
  position: relative;
  /* Disable scroll anchoring to prevent page jumps */
  overflow-anchor: none;
}

.about-team-interactive-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

/* Header */
.about-team-interactive-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-xxsmall);
  max-width: var(--container-medium);
  margin: 0 auto;
}

.about-team-interactive-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.about-team-interactive-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  margin: 0;
  max-width: 440px;
}

/* Main Content: List + Detail */
.about-team-interactive-content {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--gap-medium);
  align-items: center;
  justify-items: start;
  /* Disable scroll anchoring */
  overflow-anchor: none;
}

/* Left: Compact List */
.about-team-interactive-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
  position: relative;
  /* Verticaal gecentreerd op hoogte van detail card */
  align-self: center;
  /* Disable scroll anchoring */
  overflow-anchor: none;
  /* Vaste positie om layout shifts te voorkomen */
  will-change: auto;
}

.about-team-interactive-list-item {
  display: flex;
  align-items: center;
  gap: var(--gap-xxsmall);
  padding: var(--gap-xsmall) var(--gap-small);
  margin: 0;
  background-color: var(--color-white);
  border: 2px solid transparent;
  border-radius: var(--radius-medium);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: left;
  font-family: inherit;
  position: relative;
  box-sizing: border-box;
  min-height: 64px;
  height: 64px;
  width: 100%;
  /* Prevent any layout shifts */
  transform: none !important;
  will-change: background-color, border-color, box-shadow;
  /* Lock all properties that could cause layout shift */
  line-height: 1.5;
  letter-spacing: normal;
  font-weight: var(--font-semibold);
  /* Reserve space for box-shadow to prevent shifts */
  box-shadow: 0 0 0 rgba(0, 112, 255, 0);
  /* Vaste positie - geen verticale verschuiving mogelijk */
  flex-shrink: 0;
}

.about-team-interactive-list-item:hover:not(.is-active) {
  background-color: var(--color-blue-ribbon-lightest);
  border-color: transparent;
  transform: none !important;
  /* Ensure no layout-affecting properties change */
  padding: var(--gap-xsmall) var(--gap-small);
  margin: 0;
  min-height: 64px;
  height: 64px;
  line-height: 1.5;
  letter-spacing: normal;
  font-weight: var(--font-semibold);
  box-shadow: 0 0 0 rgba(0, 112, 255, 0);
  /* Vaste positie behouden */
  position: relative;
  flex-shrink: 0;
}

.about-team-interactive-list-item:focus-visible:not(.is-active) {
  outline: 2px solid var(--color-blue-ribbon);
  outline-offset: 2px;
  transform: none !important;
  /* Ensure no layout-affecting properties change */
  padding: var(--gap-xsmall) var(--gap-small);
  margin: 0;
  min-height: 64px;
  height: 64px;
  line-height: 1.5;
  letter-spacing: normal;
  font-weight: var(--font-semibold);
  box-shadow: 0 0 0 rgba(0, 112, 255, 0);
  /* Vaste positie behouden */
  position: relative;
  flex-shrink: 0;
}

.about-team-interactive-list-item.is-active {
  background-color: var(--color-blue-ribbon-lightest);
  border-color: var(--color-blue-ribbon);
  box-shadow: 0 2px 8px rgba(0, 112, 255, 0.15);
  outline: none;
  transform: none !important;
  /* Ensure no layout-affecting properties change */
  padding: var(--gap-xsmall) var(--gap-small);
  margin: 0;
  min-height: 64px;
  height: 64px;
  line-height: 1.5;
  letter-spacing: normal;
  font-weight: var(--font-semibold);
  /* Vaste positie behouden */
  position: relative;
  flex-shrink: 0;
}

.list-item-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Lock size to prevent layout shifts */
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  margin: 0;
  padding: 0;
}

.list-item-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  /* Lock properties to prevent layout shifts */
  margin: 0;
  padding: 0;
}

.list-item-name {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
  /* Prevent font-weight changes on hover */
  transition: none;
  /* Lock properties to prevent reflow */
  letter-spacing: normal;
  margin: 0;
  padding: 0;
}

.about-team-interactive-list-item:hover .list-item-name,
.about-team-interactive-list-item:focus .list-item-name,
.about-team-interactive-list-item:focus-visible .list-item-name {
  font-weight: var(--font-semibold);
  line-height: 1.5;
  letter-spacing: normal;
  margin: 0;
  padding: 0;
}

.list-item-role {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
  opacity: 0.7;
  /* Prevent font-weight changes on hover */
  transition: none;
  /* Lock properties to prevent reflow */
  letter-spacing: normal;
  margin: 0;
  padding: 0;
}

.about-team-interactive-list-item:hover .list-item-role,
.about-team-interactive-list-item:focus .list-item-role,
.about-team-interactive-list-item:focus-visible .list-item-role {
  font-weight: var(--font-regular);
  line-height: 1.5;
  letter-spacing: normal;
  margin: 0;
  padding: 0;
}

/* Right: Detail Panel */
.about-team-interactive-detail {
  min-height: 500px;
  width: 100%;
  max-width: 600px;
}

.detail-card {
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-small);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 1;
}

.detail-card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gradient-blue);
  position: relative;
}

.detail-card-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 112, 255, 0.8) 0%, rgba(0, 67, 153, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  padding: var(--gap-medium);
  flex: 1;
}

.detail-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
}

.detail-card-name {
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  color: var(--color-blue-ribbon);
  margin: 0;
}

.detail-card-role {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
}

.detail-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  border-radius: var(--radius-button);
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  width: fit-content;
  margin-top: var(--gap-xxsmall);
}

.detail-card-description {
  font-family: var(--font-primary);
  font-size: var(--text-subtext-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtext-line-height);
  color: var(--text-subtext-color);
  margin: 0;
  flex: 1;
  max-width: 100%;
}

/* Override global button hover styles in this section */
.about-team-interactive .btn,
.about-team-interactive .btn:hover,
.about-team-interactive .btn:focus {
  transform: none !important;
  margin: 0;
  padding: 10px 24px;
  box-sizing: border-box;
}

.about-team-interactive .btn:hover {
  box-shadow: 0 6px 16px rgba(4, 171, 56, 0.4);
}

.detail-card-content .btn {
  align-self: flex-start;
  margin-top: var(--gap-xxsmall);
}

/* Tablet: Tabs above detail card */
@media (max-width: 900px) {
  .about-team-interactive-content {
    grid-template-columns: 1fr;
    gap: var(--gap-small);
  }

  .about-team-interactive-list {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--gap-xxsmall);
    gap: var(--gap-xxsmall);
    scrollbar-width: thin;
    scrollbar-color: var(--color-blue-ribbon-lightest) transparent;
    align-self: start;
  }

  .about-team-interactive-list::-webkit-scrollbar {
    height: 4px;
  }

  .about-team-interactive-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .about-team-interactive-list::-webkit-scrollbar-thumb {
    background-color: var(--color-blue-ribbon-lightest);
    border-radius: 2px;
  }

  .about-team-interactive-list-item {
    flex-shrink: 0;
    min-width: 200px;
    min-height: 56px;
    height: 56px;
    padding: var(--gap-xxsmall) var(--gap-xsmall);
    transform: none !important;
    /* Lock properties to prevent layout shift */
    margin: 0;
    line-height: 1.5;
    letter-spacing: normal;
    font-weight: var(--font-semibold);
    box-shadow: 0 0 0 rgba(0, 112, 255, 0);
    position: relative;
  }
  
  .about-team-interactive-list-item:hover:not(.is-active),
  .about-team-interactive-list-item:focus-visible:not(.is-active) {
    padding: var(--gap-xxsmall) var(--gap-xsmall);
    margin: 0;
    min-height: 56px;
    height: 56px;
    line-height: 1.5;
    letter-spacing: normal;
    font-weight: var(--font-semibold);
    box-shadow: 0 0 0 rgba(0, 112, 255, 0);
    position: relative;
  }
  
  .about-team-interactive-list-item.is-active {
    padding: var(--gap-xxsmall) var(--gap-xsmall);
    margin: 0;
    min-height: 56px;
    height: 56px;
    line-height: 1.5;
    letter-spacing: normal;
    font-weight: var(--font-semibold);
    position: relative;
  }

  .list-item-dot {
    width: 18px;
    height: 18px;
  }

  .list-item-dot svg {
    width: 18px;
    height: 18px;
  }

  .list-item-name {
    font-size: var(--text-regular);
  }

  .list-item-role {
    font-size: var(--text-small);
  }

  .about-team-interactive-detail {
    min-height: auto;
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .about-team-interactive {
    padding: var(--section-padding-small) var(--gap-xsmall);
  }

  .about-team-interactive-container {
    gap: var(--gap-small);
  }

  .about-team-interactive-header {
    gap: var(--gap-xxsmall);
  }

  .about-team-interactive-title {
    font-size: var(--heading-3);
  }

  .about-team-interactive-content {
    gap: var(--gap-small);
  }

  .about-team-interactive-list-item {
    min-width: 180px;
    min-height: 56px;
    height: 56px;
    padding: var(--gap-xxsmall) var(--gap-xsmall);
    transform: none !important;
    /* Lock properties to prevent layout shift */
    margin: 0;
    line-height: 1.5;
    letter-spacing: normal;
    font-weight: var(--font-semibold);
    box-shadow: 0 0 0 rgba(0, 112, 255, 0);
    position: relative;
  }
  
  .about-team-interactive-list-item:hover:not(.is-active),
  .about-team-interactive-list-item:focus-visible:not(.is-active) {
    padding: var(--gap-xxsmall) var(--gap-xsmall);
    margin: 0;
    min-height: 56px;
    height: 56px;
    line-height: 1.5;
    letter-spacing: normal;
    font-weight: var(--font-semibold);
    box-shadow: 0 0 0 rgba(0, 112, 255, 0);
    position: relative;
  }
  
  .about-team-interactive-list-item.is-active {
    padding: var(--gap-xxsmall) var(--gap-xsmall);
    margin: 0;
    min-height: 56px;
    height: 56px;
    line-height: 1.5;
    letter-spacing: normal;
    font-weight: var(--font-semibold);
    position: relative;
  }

  .detail-card-content {
    padding: var(--gap-small);
  }

  .detail-card-name {
    font-size: var(--heading-5);
  }
}

/* Prevent any text-link hover effects in this section */
.about-team-interactive .text-link,
.about-team-interactive .text-link:hover {
  transform: none !important;
  margin: 0;
  padding: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .about-team-interactive-list-item,
  .detail-card {
    transition: none;
  }
}



/* ===== components/sections/AboutTeamStable/AboutTeamStable.css ===== */
/* About Team Stable Section */
.about-team-stable {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
  position: relative;
  /* Disable scroll anchoring */
  overflow-anchor: none;
}

.about-team-stable-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
  background-color: var(--color-blue-ribbon);
  border-radius: var(--radius-large);
  padding: var(--section-padding-medium) var(--gap-medium);
}

/* Header */
.about-team-stable-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-xxsmall);
  max-width: var(--container-medium);
  margin: 0 auto;
}

.about-team-stable-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-white);
  margin: 0;
}

.about-team-stable-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  margin: 0;
  max-width: 440px;
}

/* Content: Small Cards + Detail */
.about-team-stable-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--gap-medium);
  align-items: stretch;
  width: 100%;
  /* Disable scroll anchoring */
  overflow-anchor: none;
}

/* Left: Small Cards */
.about-team-stable-cards {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  width: 100%;
  /* Disable scroll anchoring */
  overflow-anchor: none;
}

/* Small Team Card */
.about-team-stable-card {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-xxsmall);
  background-color: #f2f2f2;
  border: 2px solid transparent;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-xsmall);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  box-sizing: border-box;
  padding: var(--gap-small);
  margin: 0;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  /* Lock all layout-affecting properties */
  min-height: 120px;
  width: 100%;
  transform: none !important;
  will-change: box-shadow;
  /* Prevent any layout shifts */
  line-height: 1.5;
  letter-spacing: normal;
}

/* Hover: alleen subtiele shadow en transform, geen layout shift */
@media (hover: hover) and (pointer: fine) {
  .about-team-stable-card:hover {
    box-shadow: var(--shadow-soft-hover);
    transform: translateY(-2px) !important;
    /* Alle layout properties blijven hetzelfde */
    border: 2px solid transparent;
    padding: var(--gap-small);
    margin: 0;
    min-height: 120px;
    line-height: 1.5;
    letter-spacing: normal;
  }
}

.about-team-stable-card:focus-visible {
  outline: 2px solid var(--color-blue-ribbon);
  outline-offset: 2px;
  /* Alle layout properties blijven hetzelfde */
  border: 2px solid transparent;
  padding: var(--gap-small);
  margin: 0;
  min-height: 120px;
  line-height: 1.5;
  letter-spacing: normal;
}

/* Active state */
.about-team-stable-card.is-active {
  border-color: var(--color-blue-ribbon);
  box-shadow: 0 2px 8px rgba(0, 112, 255, 0.2);
  /* Alle layout properties blijven hetzelfde */
  padding: var(--gap-small);
  margin: 0;
  min-height: 120px;
  line-height: 1.5;
  letter-spacing: normal;
  transform: none !important;
}

/* Card Dot */
.team-card-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

/* Card Body */
.team-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  /* Lock properties */
  margin: 0;
  padding: 0;
  line-height: 1.5;
  letter-spacing: normal;
}

.team-card-name {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  color: var(--color-blue-ribbon);
  margin: 0;
  /* Lock properties */
  letter-spacing: normal;
  padding: 0;
}

.team-card-role {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
  line-height: 1.4;
  color: var(--color-neutral-darkest);
  margin: 0;
  /* Lock properties */
  letter-spacing: normal;
  padding: 0;
}

.team-card-description {
  font-family: var(--font-primary);
  font-size: var(--text-subtext-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtext-line-height);
  color: var(--text-subtext-color);
  margin: 0;
  /* Lock properties */
  letter-spacing: normal;
  padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Detail Panel */
.about-team-stable-detail {
  width: 100%;
  /* Disable scroll anchoring */
  overflow-anchor: none;
}

.team-detail-card {
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 600px;
  /* Lock properties */
  margin: 0;
  padding: 0;
}

.team-detail-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gradient-blue);
  position: relative;
  flex-shrink: 0;
}

.team-detail-media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.team-detail-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 112, 255, 0.8) 0%, rgba(0, 67, 153, 0.9) 100%);
}

.team-detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

.team-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
  padding: var(--gap-small) var(--gap-medium);
  flex: 1;
  min-height: 200px;
  /* Lock properties */
  margin: 0;
  line-height: 1.5;
  letter-spacing: normal;
}

.team-detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
  /* Lock properties */
  margin: 0;
  padding: 0;
}

.team-detail-name {
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  color: var(--color-blue-ribbon);
  margin: 0;
  /* Lock properties */
  letter-spacing: normal;
  padding: 0;
}

.team-detail-role {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
  margin: 0;
  /* Lock properties */
  letter-spacing: normal;
  padding: 0;
}

.team-detail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  border-radius: var(--radius-button);
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  line-height: 1.5;
  width: fit-content;
  margin-top: var(--gap-xxsmall);
  /* Lock properties */
  letter-spacing: normal;
}

.team-detail-description {
  font-family: var(--font-primary);
  font-size: var(--text-subtext-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtext-line-height);
  color: var(--text-subtext-color);
  margin: 0;
  flex: 1;
  max-width: 100%;
  /* Lock properties */
  letter-spacing: normal;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.team-detail-content .btn {
  align-self: flex-start;
  margin-top: var(--gap-xxsmall);
}

/* Override global button hover transform in this section */
.about-team-stable .btn,
.about-team-stable .btn:hover,
.about-team-stable .btn:focus {
  transform: none !important;
  margin-top: var(--gap-xxsmall);
  padding: 10px 24px;
  box-sizing: border-box;
}

.about-team-stable .btn:hover {
  box-shadow: 0 6px 16px rgba(4, 171, 56, 0.4);
}

/* Tablet: Stack layout */
@media (max-width: 1024px) {
  .about-team-stable-container {
    padding: var(--section-padding-small) var(--gap-small);
  }

  .about-team-stable-content {
    grid-template-columns: 240px 1fr;
    gap: var(--gap-small);
  }

  .about-team-stable-cards {
    gap: var(--gap-xxsmall);
  }

  .about-team-stable-card {
    min-height: 110px;
    padding: var(--gap-xxsmall) var(--gap-xsmall);
  }

  @media (hover: hover) and (pointer: fine) {
    .about-team-stable-card:hover {
      min-height: 110px;
      padding: var(--gap-xxsmall) var(--gap-xsmall);
    }
  }

  .about-team-stable-card:focus-visible {
    min-height: 110px;
    padding: var(--gap-xxsmall) var(--gap-xsmall);
  }

  .about-team-stable-card.is-active {
    min-height: 110px;
    padding: var(--gap-xxsmall) var(--gap-xsmall);
  }

  .team-card-dot {
    width: 18px;
    height: 18px;
  }

  .team-card-dot svg {
    width: 18px;
    height: 18px;
  }

  .team-detail-card {
    min-height: 380px;
    max-width: 100%;
  }

  .team-detail-content {
    min-height: 180px;
    padding: var(--gap-small) var(--gap-medium);
    gap: var(--gap-xxsmall);
  }
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
  .about-team-stable {
    padding: var(--section-padding-small) var(--gap-xsmall);
  }

  .about-team-stable-container {
    gap: var(--gap-medium);
    padding: var(--section-padding-small) var(--gap-small);
  }

  .about-team-stable-header {
    gap: var(--gap-xxsmall);
  }

  .about-team-stable-title {
    font-size: var(--heading-3);
  }

  .about-team-stable-content {
    grid-template-columns: 1fr;
    gap: var(--gap-small);
  }

  .about-team-stable-cards {
    gap: var(--gap-xxsmall);
  }

  .about-team-stable-card {
    min-height: 100px;
    padding: var(--gap-xxsmall) var(--gap-xsmall);
  }

  @media (hover: hover) and (pointer: fine) {
    .about-team-stable-card:hover {
      min-height: 100px;
      padding: var(--gap-xxsmall) var(--gap-xsmall);
      transform: translateY(-2px) !important;
    }
  }

  .about-team-stable-card:focus-visible {
    min-height: 100px;
    padding: var(--gap-xxsmall) var(--gap-xsmall);
  }

  .about-team-stable-card.is-active {
    min-height: 100px;
    padding: var(--gap-xxsmall) var(--gap-xsmall);
  }

  .team-card-dot {
    width: 18px;
    height: 18px;
  }

  .team-card-dot svg {
    width: 18px;
    height: 18px;
  }

  .team-detail-card {
    min-height: auto;
    max-width: 100%;
  }

  .team-detail-content {
    padding: var(--gap-small) var(--gap-medium);
    min-height: 180px;
    gap: var(--gap-xxsmall);
  }

  .team-detail-name {
    font-size: var(--heading-5);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .about-team-stable-card,
  .team-detail-card {
    transition: none;
  }

  .about-team-stable-card:hover {
    transform: none !important;
  }
}


/* ===== components/sections/Diensten/DienstenDetailsSection.css ===== */
/* DienstenDetailsSection - SVG Background Wrapper */
.diensten-details-wrapper {
  position: relative;
  width: 100%;
  overflow: visible; /* Allow SVG to be visible */
  min-height: 100px; /* Ensure container has height */
}

.diensten-details-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: 100%;
  min-height: 100%;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.35));
  opacity: 1;
  display: block; /* Ensure SVG is displayed */
}

.diensten-details-path {
  fill: none;
  stroke: var(--color-blue-ribbon);
  stroke-width: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: visible;
  opacity: 1;
}

.diensten-details-content-wrapper {
  position: relative;
  z-index: 1;
}

/* Hide SVG on mobile for better performance */
@media (max-width: 767px) {
  .diensten-details-svg {
    display: none;
  }
}


/* ===== components/sections/Diensten/DienstenSteps.css ===== */
/* Diensten Steps Section - circular gradient (zelfde als TeamSection/GallerySection) */
.diensten-steps-section {
  position: relative;
  width: 100%;
  padding: var(--gap-small) var(--page-padding) var(--section-padding-medium) var(--page-padding);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(64, 156, 255, 0.95) 0%,
    var(--color-blue-ribbon) 45%,
    #004799 100%
  );
}

.diensten-steps-section-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-small);
}

/* Header */
.diensten-steps-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-xxsmall);
  margin-top: var(--gap-small);
  margin-bottom: calc(var(--gap-xsmall) / 2);
}

.diensten-steps-section-label {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-semibold);
  line-height: var(--line-relaxed);
  color: var(--color-white);
  margin: 0;
}

.diensten-steps-section-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-white);
  text-align: center;
  margin: 0;
}

/* Timeline Wrapper */
.diensten-steps-section-timeline {
  position: relative;
  width: 100%;
  margin: var(--gap-xxsmall) 0;
}

/* Line Segments Container - positioned at bottom of grid, between description and CTA */
.diensten-steps-section-lines {
  position: absolute;
  bottom: calc(var(--gap-xxsmall) * -1); /* Position just below grid, accounting for timeline margin */
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 0;
  pointer-events: none;
}

/* Line Segments - positioned dynamically via JS */
.diensten-steps-section-line-segment {
  position: absolute;
  top: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  transform-origin: left center;
  transform: scaleX(0);
}

/* Steps Grid */
.diensten-steps-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-small);
  width: 100%;
  position: relative;
  z-index: 1;
}

.diensten-steps-section-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-xsmall);
  padding: var(--gap-small);
  position: relative;
}

/* Dot wrapper - positioned at bottom of step, at line height */
.diensten-steps-section-step-dot-wrapper {
  position: absolute;
  bottom: calc(var(--gap-xxsmall) * -1 - 6px); /* Match line position, 6px lower to align with line */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

/* Dot - positioned at line height, visible from start but inactive */
.diensten-steps-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%); /* Only vertical centering, wrapper handles horizontal */
}

.diensten-steps-section-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--gap-xxsmall);
}

.diensten-steps-section-icon svg {
  width: 100%;
  height: 100%;
}

.diensten-steps-section-icon svg path,
.diensten-steps-section-icon svg circle,
.diensten-steps-section-icon svg rect {
  stroke: var(--color-white);
}

.diensten-steps-section-step-title {
  font-family: var(--font-primary);
  font-size: var(--heading-5);
  font-weight: var(--font-bold);
  line-height: var(--line-normal);
  letter-spacing: var(--tracking-h5);
  color: var(--color-white);
  margin: 0;
}

.diensten-steps-section-step-description {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-white);
  margin: 0;
  opacity: 0.9;
}

/* CTAs */
.diensten-steps-section-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xsmall);
  margin-top: calc(var(--gap-xxsmall) / 2);
}

/* Responsive */
@media (max-width: 1024px) {
  .diensten-steps-section-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-medium);
  }
  
  .diensten-steps-section-lines,
  .diensten-steps-section-step-dot-wrapper {
    display: none; /* Hide line segments and dots on tablet/mobile as grid changes */
  }
}

@media (max-width: 768px) {
  .diensten-steps-section {
    padding: var(--section-padding-small) var(--page-padding);
  }

  .diensten-steps-section-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
  }

  .diensten-steps-section-ctas {
    flex-direction: column;
    width: 100%;
  }

  .diensten-steps-section-ctas .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .diensten-steps-section-container {
    gap: var(--gap-small);
  }

  .diensten-steps-section-header {
    margin-bottom: var(--gap-xsmall);
  }
}

/* Mobile: Ensure no animations or will-change to prevent scroll jank */
@media (max-width: 767px) {
  .diensten-steps-section [data-step-anim] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
    transition: none !important;
  }
}



/* ===== components/ui/MobileCardSlider/MobileCardSlider.css ===== */
/* Mobile Card Slider */
.mobile-card-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-card-slider__track {
  position: relative;
  width: 100%;
  min-height: inherit;
  overflow: hidden;
}

.mobile-card-slider__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Initial states */
.mobile-card-slider__slide--current {
  transform: translate3d(0, 0, 0);
  z-index: 2;
}

.mobile-card-slider__slide--next {
  transform: translate3d(-110%, 0, 0);
  z-index: 1;
}

/* Prevent horizontal scroll */
.mobile-card-slider,
.mobile-card-slider__track {
  overflow: hidden;
}

/* Ensure no layout shift */
.mobile-card-slider__slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}


/* ===== components/ui/PricingModal/PricingModal.css ===== */
/* Pricing Modal Styles */
.pricing-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--gap-small);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.pricing-modal {
  position: relative;
  background: var(--color-background);
  border-radius: var(--radius-large);
  box-shadow: 
    0px 20px 25px -5px rgba(0, 0, 0, 0.1),
    0px 10px 10px -5px rgba(0, 0, 0, 0.04),
    0px 0px 0px 1px rgba(0, 0, 0, 0.05);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
  position: relative;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-ribbon) transparent;
}

/* WebKit scrollbar styling (Chrome, Safari, Edge) */
.pricing-modal::-webkit-scrollbar {
  width: 6px;
}

.pricing-modal::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--radius-large);
}

.pricing-modal::-webkit-scrollbar-thumb {
  background-color: var(--color-blue-ribbon);
  border-radius: 3px;
  border: none;
}

.pricing-modal::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 112, 255, 0.8);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pricing-modal-close {
  position: absolute;
  top: var(--gap-xxsmall);
  right: var(--gap-xxsmall);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  color: var(--color-neutral-darkest);
  transition: all 0.2s ease;
  z-index: 10;
}

.pricing-modal-close:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-blue-ribbon);
}

.pricing-modal-close:active {
  transform: scale(0.95);
}

.pricing-modal-content {
  padding: var(--gap-medium) var(--gap-small);
}

.pricing-modal-title {
  font-family: var(--font-primary);
  font-size: var(--heading-3);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-small) 0;
  text-align: center;
}

.pricing-section {
  margin-bottom: var(--gap-medium);
}

.pricing-section:last-child {
  margin-bottom: 0;
}

.pricing-section-title {
  font-family: var(--font-primary);
  font-size: var(--heading-5);
  font-weight: var(--font-bold);
  line-height: var(--line-normal);
  color: var(--color-blue-ribbon);
  margin: 0 0 var(--gap-xxsmall) 0;
}

.pricing-section-minimum {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--text-subtext-color);
  margin: 0 0 var(--gap-small) 0;
}

.pricing-section-minimum strong {
  color: var(--color-neutral-darkest);
  font-weight: var(--font-semibold);
}

.pricing-table {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
  background: rgba(0, 112, 255, 0.03);
  border-radius: var(--radius-medium);
  padding: var(--gap-small);
  border: 1px solid rgba(0, 112, 255, 0.1);
}

.pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap-xxsmall) var(--gap-xxsmall);
  background: var(--color-background);
  border-radius: var(--radius-button);
  transition: all 0.2s ease;
}

.pricing-row:hover {
  background: rgba(0, 112, 255, 0.05);
  transform: translateX(4px);
}

.pricing-range {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  line-height: 1.5;
  color: var(--color-neutral-darkest);
}

.pricing-price {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-bold);
  line-height: 1.5;
  color: var(--color-blue-ribbon);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-unit {
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  color: var(--text-subtext-color);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .pricing-modal {
    max-width: 100%;
    border-radius: var(--radius-medium);
    max-height: 95vh;
  }

  .pricing-modal-content {
    padding: var(--gap-small) var(--gap-xxsmall);
  }

  .pricing-modal-title {
    font-size: var(--heading-4);
    margin-bottom: var(--gap-xxsmall);
  }

  .pricing-section-title {
    font-size: var(--heading-6);
  }

  .pricing-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .pricing-price {
    align-self: flex-end;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pricing-modal-backdrop,
  .pricing-modal,
  .pricing-row {
    animation: none;
    transition: none;
  }
}


/* ===== components/ui/CaseStudyModal/CaseStudyModal.css ===== */
/* Case Study Modal - Portal naar body voor full-page overlay */
.case-study-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--gap-medium);
}

.case-study-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.case-study-modal-content {
  position: relative;
  z-index: 1;
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  width: min(900px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-ribbon) transparent;
}

/* Webkit scrollbar (Chrome, Safari, Edge) - Minimalistisch blauw pilvormig balkje */
.case-study-modal-content::-webkit-scrollbar {
  width: 6px;
}

.case-study-modal-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.case-study-modal-content::-webkit-scrollbar-thumb {
  background-color: var(--color-blue-ribbon);
  border-radius: 10px;
  min-height: 40px;
}

.case-study-modal-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-blue-ribbon-light);
}

.case-study-modal-close {
  position: absolute;
  top: var(--gap-small);
  right: var(--gap-small);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-neutral-darkest);
}

.case-study-modal-close:hover {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  border-color: var(--color-blue-ribbon);
  transform: rotate(90deg);
}

.case-study-modal-header {
  width: 100%;
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  overflow: hidden;
  background-color: var(--color-background);
  flex-shrink: 0;
  position: relative;
}

.case-study-modal-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 400px;
  object-position: center;
}

.case-study-modal-body {
  padding: var(--gap-large);
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
}

.case-study-modal-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.case-study-modal-client {
  display: flex;
  align-items: center;
  gap: var(--gap-xxsmall);
  padding: var(--gap-small);
  background-color: var(--color-blue-ribbon-lightest);
  border-radius: var(--radius-medium);
  border-left: 3px solid var(--color-blue-ribbon);
}

.case-study-client-label {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-darkest);
}

.case-study-client-name {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-bold);
  color: var(--color-blue-ribbon);
}

.case-study-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
}

.case-study-section-title {
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.case-study-section-text {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0;
}

.case-study-testimonial {
  padding: var(--gap-medium);
  background: linear-gradient(180deg, rgba(0, 112, 255, 0.06), rgba(0, 0, 0, 0));
  border-radius: var(--radius-large);
  border-left: 3px solid var(--color-blue-ribbon);
  margin-top: var(--gap-small);
}

.case-study-testimonial-text {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  font-style: italic;
  margin: 0 0 var(--gap-xxsmall) 0;
}

.case-study-testimonial-author {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  color: var(--color-blue-ribbon);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .case-study-modal {
    padding: var(--gap-small);
  }

  .case-study-modal-content {
    max-height: 95vh;
    border-radius: var(--radius-medium);
  }

  .case-study-modal-header {
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  }

  .case-study-modal-body {
    padding: var(--gap-medium);
    gap: var(--gap-small);
  }

  .case-study-modal-title {
    font-size: var(--heading-3);
  }

  .case-study-section-title {
    font-size: var(--heading-5);
  }

  .case-study-testimonial {
    padding: var(--gap-small);
  }

  .case-study-testimonial-text {
    font-size: var(--text-regular);
  }
}



/* ===== components/ui/IntakeFunnel/IntakeFunnel.css ===== */
/* Intake Funnel Styles */
.intake-funnel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-padding);
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
  position: relative;
  z-index: 10;
}

/* Remove shadow and border-radius when used on full page */
.intake-page .intake-funnel {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  z-index: 10;
}

/* White container for all steps */
.funnel-step-content {
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  padding: var(--gap-large);
  box-shadow: var(--shadow-xsmall);
  position: relative;
}

/* Progress Indicator */
.funnel-progress {
  position: relative;
  margin-bottom: calc((var(--gap-small) + 64px) / 2);
  margin-top: calc((var(--gap-small) + 64px) / 2);
  height: 32px; /* Match circle height for proper alignment */
}

/* Horizontal lines - absolutely positioned and centered vertically */
.funnel-progress-line {
  position: absolute;
  top: 50%;
  left: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 2px;
}

.funnel-progress-line--background {
  width: 100%;
  background-color: var(--color-blue-ribbon-lightest);
  z-index: 0;
}

.funnel-progress-line--fill {
  background-color: var(--color-blue-ribbon);
  z-index: 1;
  transition: width 250ms ease-out;
}

/* Disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .funnel-progress-line--fill {
    transition: none;
  }
}

/* Step circles - flex row above the lines */
.funnel-progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2; /* Above the lines */
}

.funnel-progress-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-blue-ribbon-lightest);
  color: var(--color-neutral-darkest);
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-semibold);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  border: none;
  cursor: pointer;
  padding: 0;
}

.funnel-progress-step:hover:not(:disabled) {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px var(--color-blue-ribbon-lightest);
}

.funnel-progress-step:disabled {
  cursor: not-allowed;
  background-color: var(--color-blue-ribbon-lightest);
  color: var(--color-neutral-darkest);
}

.funnel-progress-step.active {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
}

.funnel-progress-step.current {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--color-blue-ribbon-lightest);
}

.funnel-progress-step-number {
  display: block;
}

/* Step Content */
.funnel-content {
  min-height: 400px;
  position: relative;
}

.funnel-step-container {
  position: relative;
  overflow: hidden;
}

.funnel-step {
  animation: slideIn 0.3s ease-out;
}

.funnel-step-container {
  position: relative;
}

.funnel-step {
  position: relative;
}

/* Slide animation for step transitions */
.funnel-step-enter {
  opacity: 0;
  transform: translateX(30px);
}

.funnel-step-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.funnel-step-exit {
  opacity: 1;
  transform: translateX(0);
}

.funnel-step-exit-active {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Subtle selection animation */
.funnel-option-card {
  position: relative;
  overflow: hidden;
}

.funnel-option-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transition: left 0.5s ease;
}

.funnel-option-card.selected::before {
  left: 100%;
}

.funnel-question {
  font-family: var(--font-primary);
  font-size: var(--heading-3);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  color: var(--color-neutral-darkest);
  margin-bottom: var(--gap-xxsmall);
  text-align: center;
}

.funnel-question-hint {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  color: var(--color-neutral-darkest);
  opacity: 0.6;
  text-align: center;
  margin-bottom: var(--gap-medium);
  line-height: var(--line-normal);
}

.funnel-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  color: var(--color-neutral-darkest);
  opacity: 0.7;
  text-align: center;
  margin-bottom: var(--gap-medium);
}

/* Options Groups */
.funnel-options-group {
  margin-bottom: var(--gap-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Options Grid */
.funnel-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-small);
}

.funnel-options-grid--step1 {
  grid-template-columns: repeat(4, 1fr);
}

.funnel-options-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

/* Option Cards */
.funnel-option-card {
  padding: var(--gap-small);
  background-color: var(--color-card-white);
  border: 2px solid transparent;
  border-radius: var(--radius-medium);
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-neutral-darkest);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.funnel-option-card:hover {
  border-color: var(--color-blue-ribbon);
  background-color: var(--color-blue-ribbon-lightest);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xsmall);
}

.funnel-option-card.selected {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  border-color: var(--color-blue-ribbon);
  box-shadow: var(--shadow-small);
}

.funnel-option-card--multi {
  text-align: left;
  justify-content: flex-start;
  padding-left: var(--gap-small);
  gap: var(--gap-xxsmall);
}

.funnel-option-card--compact {
  padding: var(--gap-xxsmall) var(--gap-small);
  min-height: 48px;
  font-size: var(--text-small);
}

.funnel-option-wrapper--starting {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.funnel-option-card--starting {
  opacity: 0.9;
  font-weight: var(--font-regular);
  width: 100%;
}

.funnel-option-card--starting:hover {
  opacity: 1;
}

.funnel-option-reassurance {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  color: var(--color-neutral-darkest);
  opacity: 0.5;
  text-align: center;
  margin-top: var(--gap-xxsmall);
  font-style: italic;
  width: 100%;
}

.funnel-option-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-blue-ribbon);
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.funnel-option-card.selected .funnel-option-checkbox {
  background-color: var(--color-white);
  color: var(--color-blue-ribbon);
}

/* Form Inputs */
.funnel-input-group {
  margin-bottom: var(--gap-xxsmall);
}

.funnel-input-group--first {
  margin-top: 32px;
}

/* Center align input groups in step 3 */
.funnel-step--step3 .funnel-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.funnel-step--step3 .funnel-input-group .funnel-label {
  text-align: center;
  width: 100%;
}

.funnel-step--step3 .funnel-options-grid--compact {
  justify-content: center;
}

/* Slider for desktop */
.funnel-slider-container {
  width: 100%;
  max-width: 500px;
  margin: var(--gap-medium) auto;
}

.funnel-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--color-blue-ribbon-lightest);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.funnel-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-blue-ribbon);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.funnel-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 112, 255, 0.4);
}

.funnel-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-blue-ribbon);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.funnel-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 112, 255, 0.4);
}

.funnel-slider-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--gap-xxsmall);
  font-family: var(--font-primary);
  font-size: var(--text-small);
  color: var(--color-neutral-darkest);
}

.funnel-slider-value {
  font-weight: var(--font-semibold);
  color: var(--color-blue-ribbon);
  font-size: var(--text-medium);
}

.funnel-slider-value-clickable {
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 4px;
}

.funnel-slider-value-clickable:hover {
  background-color: var(--color-blue-ribbon-lightest);
  transform: scale(1.05);
}

.funnel-slider-value-clickable:focus {
  outline: 2px solid var(--color-blue-ribbon);
  outline-offset: 2px;
}

.funnel-slider-value-input-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.funnel-slider-value-input {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  color: var(--color-blue-ribbon);
  border: 2px solid var(--color-blue-ribbon);
  border-radius: 4px;
  padding: 4px 8px;
  width: 120px;
  text-align: center;
  background-color: var(--color-white);
  outline: none;
}

.funnel-slider-value-input:focus {
  border-color: var(--color-blue-ribbon-light);
  box-shadow: 0 0 0 3px var(--color-blue-ribbon-lightest);
}

/* Slider responsive adjustments */
@media (max-width: 768px) {
  .funnel-slider-container {
    max-width: 100%;
    margin: var(--gap-small) auto;
  }
  
  .funnel-slider-labels {
    font-size: var(--text-xsmall);
  }
  
  .funnel-slider-value {
    font-size: var(--text-small);
  }
}

/* Add extra space between first and second input group in step 3 */
.funnel-step--step3 .funnel-input-group--first {
  margin-bottom: calc(var(--gap-xxsmall) + 32px);
}

.funnel-input-group--full {
  grid-column: 1 / -1;
}

/* Website URL and Submit button side by side on desktop */
@media (min-width: 769px) {
  .funnel-input-group--website {
    grid-column: 1 / 1.5;
  }

  .funnel-input-group--submit-desktop {
    grid-column: 1.5 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: var(--gap-small);
  }

  .funnel-label--hidden {
    visibility: hidden;
    height: 0;
    margin: 0;
  }

  .funnel-btn--submit-inline {
    width: 100%;
    margin: 0;
    height: fit-content;
  }

  .funnel-btn--submit-mobile {
    display: none;
  }
}

/* Mobile: website URL full width, hide desktop submit button */
@media (max-width: 768px) {
  .funnel-input-group--website {
    grid-column: 1 / -1;
  }

  .funnel-input-group--submit-desktop {
    display: none;
  }

  .funnel-btn--submit-mobile {
    display: block;
  }
}

.funnel-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-xxsmall);
}

.funnel-label {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-darkest);
  margin-bottom: var(--gap-xxsmall);
}

.funnel-label-optional {
  font-weight: var(--font-regular);
  opacity: 0.6;
}

.funnel-input,
.funnel-textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  color: var(--color-neutral-darkest);
  background-color: var(--color-card-white);
  border: 2px solid transparent;
  border-radius: var(--radius-medium);
  transition: all 0.2s ease;
}

.funnel-input:focus,
.funnel-textarea:focus {
  outline: none;
  border-color: var(--color-blue-ribbon);
  background-color: var(--color-white);
  box-shadow: 0 0 0 3px var(--color-blue-ribbon-lightest);
}

.funnel-input.error,
.funnel-textarea.error {
  border-color: var(--color-blaze-orange);
}

.funnel-textarea {
  resize: vertical;
  min-height: 100px;
}

.funnel-error,
.funnel-error-text {
  color: var(--color-blaze-orange);
  font-family: var(--font-primary);
  font-size: var(--text-small);
  margin-top: var(--gap-xxsmall);
}

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

/* Navigation */
.funnel-navigation {
  display: none; /* Hidden - navigation is now inside container */
}

/* Step navigation inside container */
.funnel-step-nav {
  display: none; /* Hidden by default, shown on desktop */
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-small);
  margin-top: var(--gap-large);
  padding-top: var(--gap-medium);
  border-top: 1px solid var(--color-border-light);
  width: 100%;
}

/* Show step nav on desktop */
@media (min-width: 769px) {
  .funnel-step-nav {
    display: flex;
  }
}

/* Hide mobile nav on desktop, show desktop step nav */
.funnel-mobile-nav {
  display: none;
}

@media (min-width: 769px) {
  .funnel-step-nav {
    display: flex;
  }
}

.funnel-btn {
  padding: 12px 24px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  border-radius: var(--radius-button);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  max-width: 200px;
}

.funnel-btn--primary {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  margin-left: auto;
}

.funnel-btn--primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-small);
}

.funnel-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.funnel-btn--secondary {
  background-color: var(--color-card-white);
  color: var(--color-neutral-darkest);
  border: 2px solid var(--color-border-light);
}

.funnel-btn--secondary:hover {
  background-color: var(--color-white);
  border-color: var(--color-blue-ribbon);
}

/* Arrow Navigation */
.funnel-arrow {
  position: absolute;
  top: var(--gap-medium);
  transform: translateY(0);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2px solid var(--color-blue-ribbon);
  color: var(--color-blue-ribbon);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 5;
  box-shadow: var(--shadow-small);
}

/* Align arrows with title on desktop */
@media (min-width: 769px) {
  .funnel-arrow {
    /* Align with title: match the top position of the title */
    /* Title starts at top padding (80px), center arrow (20px) with title center */
    top: calc(var(--gap-large) + 0.6rem);
  }
}

.funnel-arrow:hover:not(:disabled) {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  transform: scale(1.1);
  box-shadow: var(--shadow-medium);
}

.funnel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.funnel-arrow--left {
  left: var(--gap-medium);
}

.funnel-arrow--right {
  right: var(--gap-medium);
}

.funnel-arrow svg {
  width: 24px;
  height: 24px;
}

/* Tablet Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
  .funnel-arrow--left {
    left: var(--gap-small);
  }

  .funnel-arrow--right {
    right: var(--gap-small);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .intake-funnel {
    padding: var(--gap-xxsmall) var(--gap-xxsmall);
    border-radius: var(--radius-medium);
  }

  .funnel-arrow {
    display: none;
  }

  .funnel-question {
    font-size: var(--heading-4);
    margin-bottom: var(--gap-small);
  }

  .funnel-options-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-xxsmall);
  }

  /* On mobile, stack step 1 options vertically */
  .funnel-options-grid--step1 {
    grid-template-columns: 1fr;
    gap: var(--gap-xxsmall);
  }

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

  .funnel-options-group--starting {
    margin-top: calc(var(--gap-small) / 2);
  }

  .funnel-step-content {
    padding: var(--gap-small) var(--gap-xxsmall);
    padding-bottom: var(--gap-medium);
    display: flex;
    flex-direction: column;
  }

  .funnel-question-hint {
    font-size: var(--text-xsmall);
    margin-bottom: var(--gap-small);
  }


  .funnel-form-grid {
    grid-template-columns: 1fr;
  }

  .funnel-navigation {
    display: none;
  }

  /* Show "Volgende" button inside step content on mobile */
  .funnel-step-content::after {
    content: '';
    flex: 1;
    min-height: 0;
  }

  /* Mobile navigation buttons container - only visible on mobile */
  .funnel-mobile-nav {
    display: flex;
    gap: var(--gap-xxsmall);
    margin-top: var(--gap-medium);
    width: 100%;
  }

  /* Add mobile navigation button inside step content */
  .funnel-btn-mobile-next {
    flex: 1;
    padding: 12px 24px;
    font-family: var(--font-primary);
    font-size: var(--text-regular);
    font-weight: var(--font-medium);
    border-radius: var(--radius-button);
    border: none;
    background-color: var(--color-blue-ribbon);
    color: var(--color-white);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-small);
  }

  .funnel-btn-mobile-next:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 112, 255, 0.4);
  }

  .funnel-btn-mobile-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .funnel-btn-mobile-back {
    flex: 0 0 auto;
    padding: 12px 24px;
    font-family: var(--font-primary);
    font-size: var(--text-regular);
    font-weight: var(--font-medium);
    border-radius: var(--radius-button);
    border: 2px solid var(--color-border-light);
    background-color: var(--color-card-white);
    color: var(--color-neutral-darkest);
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .funnel-btn-mobile-back:hover {
    background-color: var(--color-white);
    border-color: var(--color-blue-ribbon);
  }

  .funnel-btn {
    width: 100%;
    max-width: none;
  }

  .funnel-btn--primary {
    margin-left: 0;
  }
}

/* Success State */
.funnel-success {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: var(--gap-large);
}

.funnel-success-content {
  text-align: center;
  max-width: 500px;
}

.funnel-success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--gap-medium);
  border-radius: 50%;
  background-color: rgba(4, 171, 56, 0.1);
  color: var(--color-green-haze);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: successScale 0.5s ease-out;
}

@keyframes successScale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.funnel-success-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  color: var(--color-neutral-darkest);
  margin-bottom: var(--gap-small);
}

.funnel-success-message {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-neutral-dark);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .funnel-success {
    min-height: 300px;
    padding: var(--gap-medium);
  }

  .funnel-success-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--gap-small);
  }

  .funnel-success-title {
    font-size: var(--heading-3);
  }

  .funnel-success-message {
    font-size: var(--text-small);
  }
}


/* ===== components/ui/IntakeFunnel/IntakeFunnelModal.css ===== */
/* Intake Funnel Modal Styles */
.intake-funnel-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(13, 6, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-small);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.intake-funnel-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-large);
  overflow-y: auto;
  animation: slideUp 0.3s ease-out;
  margin: auto;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intake-funnel-modal-close {
  position: absolute;
  top: var(--gap-small);
  right: var(--gap-small);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-card-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-neutral-darkest);
  transition: all 0.2s ease;
  z-index: 10;
}

.intake-funnel-modal-close:hover {
  background-color: var(--color-blue-ribbon-lightest);
  color: var(--color-blue-ribbon);
  transform: rotate(90deg);
}

.intake-funnel-modal .intake-funnel {
  box-shadow: none;
  padding: var(--gap-large) var(--gap-medium);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .intake-funnel-modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .intake-funnel-modal {
    max-height: 95vh;
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    animation: slideUpMobile 0.3s ease-out;
  }

  @keyframes slideUpMobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .intake-funnel-modal-close {
    top: var(--gap-xxsmall);
    right: var(--gap-xxsmall);
  }

  .intake-funnel-modal .intake-funnel {
    padding: var(--gap-medium) var(--gap-small);
  }
}


/* ===== pages/Home/HomePage.css ===== */
/* Homepage-specific TeamSection overrides */
/* Remove white container wrapper, reduce spacing, make CTA orange */

.home-team-section-wrapper {
  position: relative;
  padding-bottom: var(--gap-small);
}

/* Add circle gradient in center (same as CTASection) */
.app .page-content .team-section {
  position: relative;
}

.app .page-content .team-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(173, 216, 255, 0.2) 0%, rgba(173, 216, 255, 0.08) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.app .page-content .team-container {
  position: relative;
  z-index: 1;
}

/* Remove white container styling - keep only layout/centering */
.app .page-content .team-container {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 calc(var(--page-padding) / 2) !important;
  max-width: var(--container-large);
  margin: 0 auto;
}

/* Reduce vertical spacing */
.app .page-content .team-section {
  padding: var(--gap-medium) calc(var(--section-padding-small) / 2) !important;
  margin-bottom: 32px;
}

.app .page-content .team-container {
  gap: var(--gap-medium) !important; /* 64px - increased by 32px from var(--gap-small) */
}

.app .page-content .team-grid {
  padding-top: 0 !important; /* Remove padding-top to reduce gap */
}

.app .page-content .team-header {
  margin-bottom: 0 !important; /* Remove margin-bottom */
}

/* Make title and subtitle white on homepage */
.app .page-content .team-title {
  color: var(--color-white) !important;
}

.app .page-content .team-title .text-blue {
  color: var(--color-white) !important;
}

.app .page-content .team-subtitle {
  color: var(--color-white) !important;
  opacity: 0.9 !important;
}

/* Ensure tagline wrapper is visible and styled for blue background */
.app .page-content .team-header .glass-tagline {
  display: inline-flex !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
}

.app .page-content .team-header .glass-tagline p {
  color: var(--color-white) !important;
}

/* Make CTA button orange */
.app .page-content .team-cta-button {
  background-color: var(--color-blaze-orange) !important;
  color: var(--color-white) !important;
}

.app .page-content .team-cta-button:hover {
  background-color: #e65a00 !important;
  box-shadow: 0 6px 16px rgba(255, 111, 0, 0.4) !important;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
  .app .page-content .team-section::before {
    width: 500px;
    height: 500px;
  }
}

@media (max-width: 768px) {
  .app .page-content .team-section {
    padding: var(--gap-small) calc(var(--gap-xsmall) / 2) !important;
  }

  .app .page-content .team-container {
    padding: 0 calc(var(--gap-small) / 2) !important;
  }

  .app .page-content .team-section::before {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 480px) {
  .app .page-content .team-section::before {
    width: 300px;
    height: 300px;
  }
}


/* ===== pages/Diensten/DienstenPage.css ===== */
/* Diensten Page Styles */

/* Hero Section - Reusing hero layout pattern */
.diensten-hero {
  --navbar-height: 93px;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--navbar-height) + var(--gap-small)) var(--page-padding) var(--gap-small);
}

.diensten-hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(140px, 18vh, 260px);
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.008) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.006) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.007) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.005) 3px
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.012) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.010) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.diensten-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(140px, 18vh, 260px);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(250, 251, 255, 0.15) 25%,
    rgba(250, 251, 255, 0.35) 45%,
    rgba(250, 251, 255, 0.55) 60%,
    rgba(250, 251, 255, 0.72) 72%,
    rgba(250, 251, 255, 0.85) 82%,
    rgba(250, 251, 255, 0.93) 90%,
    rgba(250, 251, 255, 0.97) 95%,
    rgba(250, 251, 255, 0.99) 98%,
    var(--color-background) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.diensten-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-small);
  width: 100%;
  max-width: var(--container-large);
  padding: 0 var(--gap-xxsmall);
}

.diensten-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-sm);
  width: 100%;
  max-width: 600px;
}

.diensten-hero-text .glass-tagline {
  margin-bottom: var(--space-2xs);
}

.diensten-hero-title-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.diensten-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.7rem, 1.2rem + 3vw, 4.5rem);
  font-weight: var(--font-bold);
  line-height: var(--leading-heading);
  letter-spacing: clamp(-1.8px, -0.36vw, -3.6px);
  color: var(--color-neutral-darkest);
  margin: 0;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.diensten-hero-title .hero-letter {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .diensten-hero-title .hero-letter {
    will-change: auto;
  }
}

/* Mobile: prevent "nodig" from splitting across lines */
@media (max-width: 767px) {
  /* Keep "nodig" word together - prevent word from breaking */
  .diensten-hero-title .diensten-hero-word-nodig {
    white-space: nowrap;
    display: inline-block;
  }
  
  /* Prevent individual letters within "nodig" from breaking */
  .diensten-hero-title .diensten-hero-word-nodig .hero-letter {
    white-space: nowrap;
    display: inline-block;
  }
}

.diensten-hero-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-semibold);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  width: fit-content;
  max-width: 100%;
  opacity: 1;
  margin: 0;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

.diensten-hero-intro {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin: var(--space-md) 0 0;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

.diensten-hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xxsmall);
  margin-top: var(--space-md);
  width: 100%;
}

/* Initial hidden state for buttons - will be animated by GSAP in DienstenPage useLayoutEffect */
/* This prevents flash on navigation before JS sets initial state */
.diensten-hero-ctas button,
.diensten-hero-ctas a {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px) scale(0.95);
  will-change: transform, opacity;
}

/* Show buttons immediately if reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  .diensten-hero-ctas button,
  .diensten-hero-ctas a {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    will-change: auto;
  }
}

/* Section A: Services Overview - Premium Bento Grid */
.diensten-services {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding) var(--gap-medium) var(--page-padding);
  background-color: var(--color-background);
}

.diensten-services-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-xxsmall);
}

.diensten-services-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  text-align: center;
  margin: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.diensten-services-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-subtitle-size);
  font-weight: var(--font-regular);
  line-height: var(--text-subtitle-line-height);
  color: var(--text-subtitle-color);
  text-align: center;
  margin: 0;
}

/* CTA Button */
.diensten-services-cta {
  grid-area: cta;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}

/* Trigger wrapper - used for ScrollTrigger positioning */
.diensten-bento-trigger {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: var(--gap-medium);
}


.diensten-bento {
  width: 100%;
  max-width: var(--container-large);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(clamp(110px, 9vw, 150px), auto);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: stretch;
  grid-template-areas:
    "a a a a a a b b b b b b"
    "a a a a a a b b b b b b"
    "c c c c d d d d f f f f"
    ". . . . cta cta cta cta . . . .";
}

.diensten-card {
  background: #ffffff;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
  border: 1px solid var(--color-blue-ribbon);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  height: 100%;
  transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.diensten-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 30%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.7) 70%,
    transparent 100%
  );
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.diensten-card__button {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  font-family: inherit;
  color: inherit;
  position: relative;
  z-index: 2;
}

/* Remove transform transition from cards within bento to avoid double easing with GSAP */
.diensten-bento .diensten-card {
  transition: box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .diensten-card {
    transition: none;
  }
  
  .diensten-card::before {
    display: none;
  }
}

.diensten-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
  border-color: var(--color-blue-ribbon-light);
  background-color: var(--color-blue-ribbon-lightest);
}

.diensten-card:hover::before {
  left: 100%;
}

.diensten-card__button:hover {
  outline: none;
}

.diensten-card__button:focus-visible {
  outline: 3px solid rgba(0, 112, 255, 0.3);
  outline-offset: 3px;
  border-radius: var(--radius-large);
}

.diensten-card:focus-visible {
  outline: 3px solid rgba(0, 112, 255, 0.3);
  outline-offset: 3px;
}

/* Grid area mapping */
.diensten-card[data-area="a"] { grid-area: a; }
.diensten-card[data-area="b"] { grid-area: b; }
.diensten-card[data-area="c"] { grid-area: c; }
.diensten-card[data-area="d"] { grid-area: d; }
.diensten-card[data-area="e"] { grid-area: e; }
.diensten-card[data-area="f"] { 
  grid-area: f; 
  background-color: var(--color-blue-ribbon);
  border-color: var(--color-blue-ribbon);
}

.diensten-card[data-area="f"] .diensten-card__title,
.diensten-card[data-area="f"] .diensten-card__text,
.diensten-card[data-area="f"] .diensten-card__link {
  color: var(--color-white);
}

/* Remove hover effects for kennismaken card */
.diensten-card[data-area="f"]:hover {
  transform: none;
  box-shadow: var(--shadow-xsmall);
  background-color: var(--color-blue-ribbon);
  border-color: var(--color-blue-ribbon);
}

/* Remove shimmer effect on hover */
.diensten-card[data-area="f"]:hover::before {
  display: none;
}

/* Remove white fade gradient at bottom */
.diensten-card[data-area="f"] .diensten-card__body::after {
  display: none;
}

/* Ensure watermark doesn't interfere with blue card */
.diensten-card[data-area="f"] .bento-card-watermark {
  opacity: 0.1; /* Make watermark very subtle on blue background */
}

/* Card Media */
.diensten-card__media {
  border-radius: calc(var(--radius-large) - 6px);
  overflow: hidden;
  border: 1px solid rgba(13, 6, 0, 0.08);
  flex-shrink: 0;
  position: relative;
  background-color: rgba(13, 6, 0, 0.02);
}

.diensten-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Featured: beeld breder en rustiger */
.diensten-card--featured .diensten-card__media {
  height: clamp(110px, 9vw, 150px);
  margin-bottom: clamp(12px, 1.2vw, 16px);
}

/* Compact: beeld kleiner, meer UI-achtig */
.diensten-card--compact .diensten-card__media {
  height: clamp(80px, 7vw, 110px);
  margin-bottom: clamp(10px, 1vw, 14px);
  opacity: 0.9;
}

/* Card Body */
/* Premium Watermark System - Consistent placement by card type */

/* Base watermark styles */
.bento-card-watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--color-blue-ribbon);
  transition: opacity 180ms ease, filter 180ms ease;
  filter: blur(0.3px);
  opacity: 0.045;
}

/* Subtle radial gradient background for depth */
.bento-card-watermark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(
    circle at center,
    rgba(0, 112, 255, 0.03) 0%,
    rgba(0, 112, 255, 0.01) 50%,
    transparent 70%
  );
  border-radius: 50%;
  z-index: -1;
}

/* Featured cards (a, b) - Large, wide cards */
/* Position: top-right with safe inset */
.diensten-card--featured .bento-card-watermark {
  top: clamp(20px, 2vw, 28px);
  right: clamp(20px, 2vw, 28px);
  width: clamp(100px, 12vw, 140px);
  height: clamp(100px, 12vw, 140px);
  bottom: auto;
  left: auto;
  transform: none;
  opacity: 0.05;
}

/* Compact cards (c, d, e, f) - Smaller cards */
/* Position: top-right, smaller size */
.diensten-card--compact .bento-card-watermark {
  top: clamp(16px, 1.8vw, 24px);
  right: clamp(16px, 1.8vw, 24px);
  width: clamp(70px, 8vw, 100px);
  height: clamp(70px, 8vw, 100px);
  bottom: auto;
  left: auto;
  transform: none;
  opacity: 0.045;
}

/* Ensure watermarks never intersect divider - constrain to upper content area */
.diensten-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 10px);
  padding: clamp(16px, 1.8vw, 20px) clamp(20px, 2.2vw, 26px);
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  z-index: 1; /* Ensure content is above watermark */
}

/* Mask watermark before footer divider area */
.diensten-card__body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(clamp(10px, 0.8vw, 14px) + 16px + 40px); /* Footer padding + 16px safe + extra fade */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.5) 70%,
    rgba(255, 255, 255, 1) 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}

.diensten-card:hover .bento-card-watermark {
  opacity: 0.07;
  filter: blur(0.4px);
}

@media (max-width: 767px) {
  .bento-card-watermark {
    width: 60px;
    height: 60px;
    opacity: 0.035;
    filter: blur(0.2px);
  }

  .diensten-card--featured .bento-card-watermark,
  .diensten-card--compact .bento-card-watermark {
    top: 16px;
    right: 16px;
    width: 60px;
    height: 60px;
  }
  
  .diensten-card:hover .bento-card-watermark {
    opacity: 0.05;
  }
  
  .bento-card-watermark::before {
    width: 120%;
    height: 120%;
  }
}


.diensten-card__kicker {
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
  font-weight: var(--font-semibold);
  color: rgba(13, 6, 0, 0.6);
  letter-spacing: 0.02em;
  margin-bottom: clamp(8px, 1vw, 12px);
  text-transform: uppercase;
}

.diensten-card__title {
  font-family: var(--font-secondary);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h6);
  color: var(--color-neutral-darkest);
  margin: 0 0 clamp(8px, 1vw, 12px);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.diensten-card--featured .diensten-card__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.7rem);
  max-width: 100%;
}

.diensten-card--compact .diensten-card__title {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.5rem);
  max-width: 100%;
}

/* Verzending en Software cards - grotere titels */
.diensten-card--compact[data-area="c"] .diensten-card__title,
.diensten-card--compact[data-area="d"] .diensten-card__title {
  font-size: clamp(1.2rem, 1.08rem + 0.48vw, 1.8rem);
}

.diensten-card__text {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  color: rgba(13, 6, 0, 0.72);
  line-height: var(--line-relaxed);
  margin: 0;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.diensten-card__footer {
  margin-top: auto;
  padding-top: clamp(10px, 0.8vw, 14px);
  border-top: 1px solid rgba(0, 112, 255, 0.15);
}

.diensten-card__link {
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.5vw, 8px);
  font-family: var(--font-primary);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  font-weight: var(--font-semibold);
  color: var(--color-blue-ribbon);
  text-decoration: none;
  transition: gap 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .diensten-card__link {
    transition: none;
  }
}

.diensten-card__link span {
  display: inline-block;
  transition: transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .diensten-card__link span {
    transition: none;
  }
}

.diensten-card:hover .diensten-card__link span {
  transform: translateX(3px);
}


/* Section B: How it works together */
.diensten-how-it-works {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.diensten-how-it-works-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-medium);
}

.diensten-how-it-works-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  text-align: center;
}

.diensten-how-it-works-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  text-align: center;
  margin-bottom: var(--gap-small);
}

.diensten-how-it-works-flow {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  width: 100%;
  max-width: 800px;
}

.diensten-how-it-works-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  padding: var(--gap-small) var(--gap-medium);
  background-color: var(--color-card-white);
  border-radius: var(--radius-medium);
  border: 1px solid var(--color-border-light);
}

.diensten-how-it-works-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-blue-ribbon);
  border-radius: 50%;
  color: var(--color-white);
}

.diensten-how-it-works-icon svg {
  width: 20px;
  height: 20px;
}

.diensten-how-it-works-text {
  flex: 1;
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-medium);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.diensten-how-it-works-connector {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-background);
  border-radius: 50%;
  color: var(--color-blue-ribbon);
  z-index: 1;
}

.diensten-how-it-works-connector svg {
  width: 16px;
  height: 16px;
}

/* Section C: Featured Service */
.diensten-featured {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.diensten-featured-container {
  max-width: var(--container-large);
  margin: 0 auto;
}

.diensten-featured-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-large);
  align-items: center;
}

.diensten-featured-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}

.diensten-featured-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.diensten-featured-description {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0;
}

.diensten-featured-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
  margin: var(--gap-small) 0;
  list-style: none;
  padding: 0;
}

.diensten-featured-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-xxsmall);
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
}

.diensten-featured-bullet svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-green-haze);
  margin-top: 2px;
}

.diensten-featured-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
  margin-top: var(--gap-small);
}

.diensten-featured-media {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.diensten-featured-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background-color: var(--color-card-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
}

/* Section D: Step by step */
.diensten-steps {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.diensten-steps-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-medium);
}

.diensten-steps-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  text-align: center;
}

.diensten-steps-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  text-align: center;
  margin-bottom: var(--gap-small);
}

.diensten-steps-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-small);
  width: 100%;
  max-width: 900px;
}

.diensten-step-card {
  display: flex;
  gap: var(--gap-small);
  padding: var(--gap-medium) var(--gap-small);
  background-color: var(--color-card-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
  position: relative;
}

.diensten-step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--gradient-blue);
  border-radius: 50%;
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  color: var(--color-white);
  box-shadow: var(--shadow-small);
}

.diensten-step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
}

.diensten-step-title {
  font-family: var(--font-primary);
  font-size: var(--heading-5);
  font-weight: var(--font-bold);
  line-height: var(--line-normal);
  letter-spacing: var(--tracking-h5);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.diensten-step-description {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0;
}

.diensten-steps-cta {
  margin-top: var(--gap-small);
}

/* Section E: Service Details - Alternating layout blocks */
.diensten-details {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: transparent; /* Make transparent so SVG is visible behind */
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  margin: 0;
}

.diensten-details-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(96px, 8vw, 128px);
}

.diensten-detail-block {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(64px, 6vw, 96px);
  align-items: center;
  outline: none;
}

.diensten-detail-block:focus {
  outline: none;
}

.diensten-detail-block:focus-visible {
  outline: none;
}

.diensten-detail-block--reverse {
  grid-template-columns: 0.9fr 1.1fr;
}

.diensten-detail-block--reverse .diensten-detail-image-wrapper,
.diensten-detail-block--reverse .diensten-detail-media {
  order: 2;
}

.diensten-detail-block--reverse .diensten-detail-content {
  order: 1;
}

.diensten-detail-media {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  margin: 0 auto;
  background-color: var(--color-card-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
  border: 1px solid rgba(13, 6, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.diensten-detail-image-wrapper {
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius-large);
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
}

.diensten-detail-image-wrapper--half-size {
  width: 50%;
  max-width: 50%;
}

.diensten-detail-image-wrapper--half-size .diensten-detail-image {
  width: 100%;
  height: auto;
}

.diensten-detail-image-wrapper--scale-80 {
  width: 80%;
  max-width: 80%;
}

.diensten-detail-image-wrapper--scale-80 .diensten-detail-image {
  width: 100%;
  height: auto;
}

.diensten-detail-image-wrapper--scale-60 {
  width: 60%;
  max-width: 60%;
}

.diensten-detail-image-wrapper--scale-60 .diensten-detail-image {
  width: 100%;
  height: auto;
}

.diensten-detail-image {
  display: block;
  max-width: 100%;
  height: auto;
}

.diensten-detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}

.diensten-detail-label {
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
  font-weight: var(--font-semibold);
  color: rgba(13, 6, 0, 0.6);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--gap-xxsmall);
}

.diensten-detail-title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-xxsmall);
  word-break: normal;
  overflow-wrap: break-word;
}

.diensten-detail-description {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0 0 var(--gap-xxsmall);
}

/* Kleine gap tussen twee opeenvolgende alinea's, marge naar vinkjes blijft gelijk */
.diensten-detail-description:has(+ .diensten-detail-description) {
  margin-bottom: 0.25rem;
}

.diensten-detail-bullets-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0.25rem 0 var(--gap-xxsmall) 0;
}

.diensten-detail-bullets-block .diensten-detail-bullets {
  margin-bottom: 0;
}

.diensten-detail-bullets-label {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-semibold);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  margin: 0;
  padding: 0;
}

.diensten-detail-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
  margin: 0 0 var(--gap-xxsmall) 0;
  list-style: none;
  padding: 0;
}

.diensten-detail-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-xxsmall);
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
}

.diensten-detail-bullet svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-green-haze);
  margin-top: 2px;
}

.diensten-detail-media-mobile {
  display: none;
  width: 100%;
  margin: var(--gap-small) 0;
}

.diensten-detail-media-mobile .diensten-detail-image-wrapper {
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius-large);
  overflow: hidden;
  max-width: 100%;
}

.diensten-detail-media-mobile .diensten-detail-image {
  display: block;
  max-width: 100%;
  height: auto;
}

.diensten-detail-ctas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-small);
  margin-top: var(--gap-small);
  align-items: center;
}

.diensten-detail-link {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-neutral-darkest);
  text-decoration: none;
  transition: opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.diensten-detail-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.diensten-detail-link:focus-visible {
  outline: 2px solid rgba(0, 112, 255, 0.4);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Responsive Styles */

/* Tablet: 768px+ */
@media (min-width: 768px) and (max-width: 1023px) {
  .diensten-hero {
    padding: calc(var(--navbar-height) + var(--gap-medium)) var(--page-padding) var(--gap-medium);
  }

  .diensten-hero-content {
    gap: var(--gap-medium);
    padding: 0;
  }

  .diensten-hero-ctas {
    flex-direction: row;
    gap: var(--gap-small);
  }

  .diensten-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: none;
    grid-auto-rows: auto;
    gap: var(--gap-medium);
  }

  .diensten-card[data-area] {
    grid-area: unset;
  }

  .diensten-card--featured,
  .diensten-card--compact {
    min-height: auto;
  }

  .diensten-services-cta {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: var(--gap-small);
  }

  .diensten-card__body {
    padding: clamp(20px, 2vw, 32px);
  }

  .diensten-card--featured .diensten-card__title {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2.2rem);
  }

  .diensten-card--compact .diensten-card__title {
    font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.5rem);
  }

  .diensten-how-it-works-flow {
    gap: var(--gap-medium);
  }

  .diensten-how-it-works-item {
    padding: var(--gap-medium) var(--gap-large);
  }

  .diensten-featured-content {
    grid-template-columns: 1fr 1fr;
  }

  .diensten-featured-ctas {
    flex-direction: row;
    gap: var(--gap-small);
  }

  .diensten-detail-block {
    gap: var(--gap-medium);
  }


  .diensten-detail-media {
    max-width: 350px;
  }

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

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .diensten-hero {
    padding: calc(var(--navbar-height) + var(--page-padding)) var(--page-padding) var(--page-padding);
    justify-content: flex-start;
  }

  .diensten-hero-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-medium);
    padding: 0;
    max-width: var(--container-large);
    margin: 0 auto;
  }

  .diensten-hero-text {
    max-width: 600px;
  }

  /* Desktop bento grid - behoud originele layout */
  /* CTA-rij krijgt auto hoogte om witruimte onder grid te voorkomen */
  .diensten-bento {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(clamp(110px, 9vw, 150px), auto) minmax(clamp(110px, 9vw, 150px), auto) minmax(clamp(110px, 9vw, 150px), auto) auto;
    grid-template-areas:
      "a a a a a a b b b b b b"
      "a a a a a a b b b b b b"
      "c c c c d d d d f f f f"
      ". . . . cta cta cta cta . . . .";
    gap: clamp(12px, 1.4vw, 18px);
  }

  /* Grid areas worden automatisch toegepast via data-area attributen op desktop */
  .diensten-card[data-area="a"] { grid-area: a; }
  .diensten-card[data-area="b"] { grid-area: b; }
  .diensten-card[data-area="c"] { grid-area: c; }
  .diensten-card[data-area="d"] { grid-area: d; }
  .diensten-card[data-area="e"] { grid-area: e; }
  .diensten-card[data-area="f"] { grid-area: f; }
  .diensten-services-cta[data-area="cta"] { grid-area: cta; }

  .diensten-how-it-works-flow {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .diensten-how-it-works-item {
    flex: 0 1 calc(50% - var(--gap-small));
    position: relative;
  }

  .diensten-how-it-works-connector {
    display: none;
  }

  .diensten-featured-content {
    gap: var(--gap-large);
  }

  .diensten-card--featured .diensten-card__title {
    max-width: 18ch;
  }

  .diensten-card--compact .diensten-card__title {
    max-width: 22ch;
  }

  .diensten-card__text {
    max-width: 52ch;
  }


  .diensten-detail-block {
    gap: var(--gap-medium);
  }

  .diensten-detail-media {
    max-width: 400px;
  }

  .diensten-detail-ctas {
    flex-direction: row;
    gap: var(--gap-small);
  }
}

/* Small Mobile: < 768px */
@media (max-width: 767px) {
  .diensten-hero {
    /* MOBILE FIX: Use 100svh to fill full mobile viewport, accounting for browser UI */
    /* This ensures the second section is not visible on initial load */
    min-height: 100svh;
    padding-bottom: var(--gap-medium);
    padding-left: var(--gap-xsmall);
    padding-right: var(--gap-xsmall);
    justify-content: flex-start;
  }
  
  .diensten-hero-content {
    padding: 0;
  }

  .diensten-hero-text .glass-tagline {
    font-size: 0.75rem;
  }

  .diensten-services,
  .diensten-how-it-works,
  .diensten-featured,
  .diensten-steps,
  .diensten-details {
    padding: var(--section-padding-small) var(--gap-xsmall);
  }

  .diensten-details-container {
    gap: var(--gap-large);
  }

  .diensten-detail-block {
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
  }

  .diensten-detail-block--reverse {
    grid-template-columns: 1fr;
  }

  /* Alleen de desktop-afbeelding verbergen (direct kind van block), niet de afbeelding in .diensten-detail-media-mobile */
  .diensten-detail-block > .diensten-detail-media,
  .diensten-detail-block--reverse > .diensten-detail-media,
  .diensten-detail-block > .diensten-detail-image-wrapper,
  .diensten-detail-block--reverse > .diensten-detail-image-wrapper {
    display: none;
  }

  .diensten-detail-block .diensten-detail-content,
  .diensten-detail-block--reverse .diensten-detail-content {
    order: 1;
  }

  .diensten-detail-media-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: var(--gap-medium) 0;
  }

  .diensten-detail-ctas {
    flex-direction: column;
  }

  .diensten-detail-ctas .btn {
    width: 100%;
  }

  .diensten-bento {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-auto-rows: auto;
    gap: var(--gap-medium);
  }

  .diensten-card[data-area] {
    grid-area: unset;
  }

  .diensten-card--featured,
  .diensten-card--compact {
    min-height: auto;
  }

  .diensten-card__body {
    padding: clamp(18px, 4vw, 24px);
  }

  .diensten-services-cta {
    grid-column: 1;
    display: flex;
    justify-content: center;
    margin-top: var(--gap-large);
    width: 100%;
  }
  
  /* Zorg ervoor dat CTA altijd na alle cards komt in de grid */
  .diensten-bento > .diensten-services-cta {
    grid-row: auto;
  }

  .diensten-card__kicker {
    font-size: clamp(0.7rem, 0.75rem + 0.5vw, 0.875rem);
    margin-bottom: clamp(6px, 1.5vw, 10px);
  }

  .diensten-card--featured .diensten-card__title {
    font-size: clamp(1.375rem, 1.2rem + 1vw, 1.75rem);
    margin-bottom: clamp(8px, 1.5vw, 12px);
  }

  .diensten-card--compact .diensten-card__title {
    font-size: clamp(1.0625rem, 1rem + 0.8vw, 1.375rem);
    margin-bottom: clamp(8px, 1.5vw, 12px);
  }

  .diensten-card__text {
    font-size: clamp(0.875rem, 0.9rem + 0.5vw, 1rem);
    line-height: 1.6;
  }

  .diensten-card__footer {
    margin-top: clamp(12px, 2vw, 16px);
    padding-top: clamp(10px, 1.5vw, 14px);
  }

  .diensten-card__link {
    font-size: clamp(0.875rem, 0.9rem + 0.3vw, 0.9375rem);
  }

  .diensten-how-it-works-connector {
    display: none;
  }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .diensten-hero-content {
    gap: var(--gap-large);
  }

  .diensten-hero-text {
    max-width: 700px;
  }
}


/* ===== pages/About/AboutPage.css ===== */
/* About Page Styles */

/* Hero Section */
.about-hero {
  --navbar-height: 93px;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--navbar-height) + var(--gap-small)) var(--page-padding) var(--gap-small);
}

.about-hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(140px, 18vh, 260px);
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.008) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.006) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.007) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.005) 3px
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.012) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.010) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.about-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(140px, 18vh, 260px);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(250, 251, 255, 0.15) 25%,
    rgba(250, 251, 255, 0.35) 45%,
    rgba(250, 251, 255, 0.55) 60%,
    rgba(250, 251, 255, 0.72) 72%,
    rgba(250, 251, 255, 0.85) 82%,
    rgba(250, 251, 255, 0.93) 90%,
    rgba(250, 251, 255, 0.97) 95%,
    rgba(250, 251, 255, 0.99) 98%,
    var(--color-background) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.about-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-small);
  width: 100%;
  max-width: var(--container-large);
  padding: 0 var(--gap-xxsmall);
}

.about-hero-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-medium);
  width: 100%;
}

.about-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-sm);
  flex: 1;
  max-width: 600px;
}

.about-hero-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.about-hero-logo img {
  height: clamp(200px, 15vw + 120px, 350px);
  width: auto;
  object-fit: contain;
}

.about-hero-text .glass-tagline {
  margin-bottom: var(--space-2xs);
}

.about-hero-title-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.about-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.7rem, 1.2rem + 3vw, 4.5rem);
  font-weight: var(--font-bold);
  line-height: var(--leading-heading);
  letter-spacing: clamp(-1.8px, -0.36vw, -3.6px);
  color: var(--color-neutral-darkest);
  margin: 0;
}

/* About hero title letter-by-letter animation styling */
.about-hero-title .hero-letter {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-title .hero-letter {
    will-change: auto;
  }
}

.about-hero-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  width: fit-content;
  max-width: 100%;
  opacity: 0.8;
  margin: 0;
  text-align: left;
}

.about-hero-ctas {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-small);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

/* Initial hidden state for buttons - will be animated by GSAP in AboutPage useLayoutEffect */
/* This prevents flash on navigation before JS sets initial state */
.about-hero-ctas button,
.about-hero-ctas a {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px) scale(0.95);
  will-change: transform, opacity;
}

/* Show buttons immediately if reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
  .about-hero-ctas button,
  .about-hero-ctas a {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    will-change: auto;
  }
}

.about-hero-trust {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
  color: var(--color-neutral-darkest);
  opacity: 0.6;
  margin-top: var(--gap-small);
}

.about-hero-ctas .text-link {
  color: var(--color-neutral-darkest);
}

.about-hero-ctas .text-link:hover {
  opacity: 0.7;
}

/* Blue outline button for "Bekijk diensten" */
.btn-outline-blue {
  background: transparent;
  color: var(--color-blue-ribbon);
  border: 1px solid var(--color-blue-ribbon);
  padding: 10px 24px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  line-height: 1.5;
  border-radius: var(--radius-button);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-outline-blue:hover {
  background-color: var(--color-blue-ribbon);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 112, 255, 0.4);
}

/* Story Section */
.about-story {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.about-story-container {
  max-width: var(--container-large);
  margin: 0 auto;
}

.about-story-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-medium);
  align-items: center;
}

.about-story-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
}

.about-story-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin-bottom: var(--gap-xsmall);
}

.about-story-body {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
}

.about-story-body p {
  margin-bottom: var(--gap-xxsmall);
}

.about-story-body p:last-child {
  margin-bottom: 0;
}

.about-story-image {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.about-story-image .image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background-color: var(--color-card-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
}

/* Results Section */
.about-results {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.about-results-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-medium);
}

.about-results-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  text-align: center;
}

.about-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-small);
  width: 100%;
}

.about-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--gap-medium) var(--gap-small);
  background-color: #ffffff;
  border-radius: var(--radius-large);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
  gap: var(--gap-xxsmall);
  border: 1px solid var(--color-blue-ribbon);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.about-result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 112, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .about-result-card {
    transition: none;
  }
  .about-result-card:hover {
    transform: none;
  }
}

.result-number {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  font-weight: var(--font-bold);
  font-style: italic;
  line-height: var(--line-tight);
  color: var(--color-blue-ribbon);
  margin-bottom: var(--gap-xxsmall);
}

.result-label {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-semibold);
  line-height: var(--line-normal);
  color: var(--color-neutral-darkest);
  margin-bottom: var(--gap-xxsmall);
}

.result-description {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
}

/* Values Section - Premium Redesign */
.about-values {
  position: relative;
  width: 100%;
  padding: clamp(80px, 9vw, 130px) var(--page-padding);
  background: radial-gradient(circle at 20% 10%, rgba(0, 122, 255, 0.08), transparent 55%),
              radial-gradient(circle at 90% 70%, rgba(0, 122, 255, 0.06), transparent 45%);
}

.about-values::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 122, 255, 0.03) 60%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.9;
}

.about-values-container {
  position: relative;
  z-index: 1;
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.about-values-header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.about-values-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.10);
  border: 1px solid rgba(0, 122, 255, 0.14);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-blue-ribbon);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.about-values-title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: var(--font-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-neutral-darkest);
  margin: 0 0 12px;
}

.about-values-subtitle {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--font-regular);
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.62);
  margin: 0 auto;
  max-width: 58ch;
}

.about-values-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.about-value-item {
  position: relative;
  padding-left: 32px;
}

.about-value-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-blue-ribbon), rgba(0, 122, 255, 0.3));
  border-radius: 2px;
}

.about-value-heading {
  font-family: var(--font-primary);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--font-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-neutral-darkest);
  margin: 0 0 12px;
}

.about-value-description {
  font-family: var(--font-primary);
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: var(--font-regular);
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  max-width: 70ch;
}

@media (max-width: 900px) {
  .about-values {
    padding: clamp(60px, 8vw, 100px) var(--page-padding);
  }

  .about-values-content {
    gap: 40px;
  }

  .about-value-item {
    padding-left: 24px;
  }

  .about-value-item::before {
    width: 2px;
  }

  .about-values-header {
    margin-bottom: 40px;
  }
}

/* Culture Section - Premium Redesign */
.about-culture {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.about-culture-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: var(--gap-xlarge);
}

/* Grid Layout */
.culture-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-large);
  width: 100%;
}

/* Card Base Styles */
.culture-whatsapp-card,
.culture-feature-card,
.culture-proof-card {
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: var(--gap-large);
  transition: box-shadow 0.3s ease;
}

.culture-whatsapp-card:hover,
.culture-feature-card:hover,
.culture-proof-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* WhatsApp Preview */
.culture-whatsapp-preview {
  background-color: #f0f2f5;
  border-radius: var(--radius-medium);
  padding: var(--gap-medium);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.whatsapp-preview-header {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  margin-bottom: var(--gap-medium);
  padding-bottom: var(--gap-small);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.whatsapp-preview-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.whatsapp-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.whatsapp-preview-info {
  flex: 1;
}

.whatsapp-preview-name {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-darkest);
  margin-bottom: 2px;
}

.whatsapp-preview-status {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  color: #25d366;
  font-weight: var(--font-medium);
}

.whatsapp-preview-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.whatsapp-message {
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 75%;
  font-family: var(--font-primary);
  font-size: var(--text-small);
  line-height: 1.4;
}

.whatsapp-message-incoming {
  background-color: #ffffff;
  align-self: flex-start;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.whatsapp-message-outgoing {
  background-color: #dcf8c6;
  align-self: flex-end;
}

.whatsapp-message p {
  margin: 0;
  color: var(--color-neutral-darkest);
}

/* WhatsApp Card */
.culture-whatsapp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Feature Card */
.culture-feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.culture-trust-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  text-align: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.culture-trust-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.culture-trust-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.7;
  margin: 0;
  max-width: 600px;
}

.culture-trust-feature {
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  padding: var(--gap-large);
  background: linear-gradient(135deg, rgba(0, 112, 255, 0.03) 0%, rgba(0, 112, 255, 0.01) 100%);
  border-radius: var(--radius-medium);
  border: 1px solid rgba(0, 112, 255, 0.1);
}

.culture-feature-title {
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h4);
  color: var(--color-blue-ribbon);
  margin: 0;
}

.culture-feature-tagline {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-semibold);
  line-height: var(--line-normal);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.culture-feature-body {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0;
}

/* Trust Proof */
.culture-proof-card {
  padding: var(--gap-large);
}

.culture-trust-proof {
  display: flex;
  flex-direction: row;
  gap: var(--gap-large);
  justify-content: space-around;
  flex-wrap: wrap;
}

.trust-proof-item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-small);
}

.trust-proof-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 112, 255, 0.1) 0%, rgba(0, 112, 255, 0.05) 100%);
  border-radius: var(--radius-small);
  color: var(--color-blue-ribbon);
}

.trust-proof-icon svg {
  width: 20px;
  height: 20px;
}

.trust-proof-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.trust-proof-text strong {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  color: var(--color-neutral-darkest);
  line-height: 1.4;
}

.trust-proof-text span {
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--font-regular);
  color: var(--color-neutral-darkest);
  opacity: 0.7;
  line-height: 1.4;
}

/* CTA Wrapper */
.culture-cta-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--gap-medium);
}

.culture-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-semibold);
  background-color: #25d366;
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-medium);
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  max-width: 400px;
  width: 100%;
}

.culture-cta:hover {
  background-color: #20ba5a;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
  transform: translateY(-2px);
}

.culture-cta:active {
  transform: translateY(0);
}

.culture-cta svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Final CTA Section */
.about-final-cta {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.about-final-cta-container {
  max-width: var(--container-medium);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-small);
}

.about-final-cta-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
}

.about-final-cta-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin-bottom: var(--gap-small);
}

/* Responsive Styles */

/* Mobile: < 1024px - Verberg logo op mobiel en gebruikzelfde hoogte als homepage hero */
@media (max-width: 1023px) {
  .about-hero {
    /* Gebruik 100dvh voor stabiele viewport hoogte (gelijk aan homepage hero) */
    min-height: 100dvh;
    /* Grid voor exacte verticale centering (gelijk aan homepage hero) */
    display: grid;
    place-items: center;
    /* Padding-top verdubbeld: navbar + safe-area * 2 voor dubbele ruimte vanaf bovenkant */
    padding-top: calc((var(--navbar-height) + env(safe-area-inset-top, 0px)) * 2);
    padding-bottom: calc(var(--gap-large) + env(safe-area-inset-bottom, 0px));
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }
  
  .about-hero-content {
    /* Content wrapper is nu exact gecentreerd in beschikbare ruimte (100dvh - navbar - safe-areas) */
    width: 100%;
    max-width: var(--container-large);
    padding: 0 var(--gap-xxsmall);
  }
  
  .about-hero-logo {
    display: none;
  }
  
  /* Zorg dat tekst de volledige breedte gebruikt op mobiel */
  .about-hero-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .about-hero-text {
    max-width: 100%;
    width: 100%;
  }
}

/* Tablet: 768px - 1023px - Logo blijft verborgen, behoud 100dvh hoogte en grid centering */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-hero {
    /* Behoud 100dvh hoogte op tablet (mobile range) */
    min-height: 100dvh;
    /* Grid voor exacte verticale centering (gelijk aan homepage hero) */
    display: grid;
    place-items: center;
    /* Padding-top verdubbeld voor dubbele ruimte vanaf bovenkant */
    padding-top: calc((var(--navbar-height) + var(--gap-medium) + env(safe-area-inset-top, 0px)) * 2);
    padding-right: var(--page-padding);
    padding-bottom: calc(var(--gap-large) + env(safe-area-inset-bottom, 0px));
    padding-left: var(--page-padding);
  }
  
  .about-hero-content {
    /* Content wrapper is exact gecentreerd in beschikbare ruimte */
    width: 100%;
    max-width: var(--container-large);
    padding: 0;
  }

  .about-hero-content {
    gap: var(--gap-medium);
    padding: 0;
  }

  .about-hero-wrapper {
    gap: var(--gap-large);
    align-items: flex-start;
    flex-direction: column;
  }
  
  /* Logo blijft verborgen op tablet (mobile range) */
  .about-hero-logo {
    display: none;
  }

  .about-hero-text {
    max-width: 100%;
    width: 100%;
  }

  .about-hero-ctas {
    flex-direction: row;
    gap: var(--gap-small);
  }

  /* Match VideoSection document-top positie op tablet: VideoSection padding-top (160px) minus hero extra padding-bottom (80px) */
  .about-story {
    padding-top: calc(var(--page-padding) + 96px - var(--gap-large));
    padding-bottom: var(--section-padding-medium);
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }

}

/* Desktop: 1024px+ - Behoud originele flex layout */
@media (min-width: 1024px) {
  .about-hero {
    /* Desktop gebruikt flex i.p.v. grid (ongewijzigd) */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh; /* Desktop blijft 100vh gebruiken */
    /* Padding-top verdubbeld voor dubbele ruimte vanaf bovenkant */
    padding: calc((var(--navbar-height) + var(--gap-small)) * 2) var(--page-padding) var(--page-padding);
  }

  .about-hero-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-medium);
    padding: 0;
    max-width: var(--container-large);
    margin: 0 auto;
  }

  .about-hero-wrapper {
    gap: var(--gap-xlarge);
    align-items: center;
    justify-content: space-between;
  }

  .about-hero-text {
    align-items: flex-start;
    text-align: left;
    max-width: 600px;
    flex: 0 1 600px;
  }
  
  .about-hero-logo {
    flex: 0 0 auto;
  }
  
  .about-hero-logo img {
    height: clamp(250px, 18vw + 160px, 420px);
  }

  .culture-trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-large);
  }

  .culture-proof-card {
    grid-column: 1 / -1;
  }

  .culture-trust-proof {
    flex-direction: row;
    justify-content: space-around;
  }
}

@media (max-width: 1023px) {
  .culture-trust-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-large);
  }

  .culture-proof-card {
    grid-column: 1;
  }

  .culture-trust-proof {
    flex-direction: column;
    gap: var(--gap-medium);
  }

  .trust-proof-item {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .about-culture {
    padding: var(--section-padding-small) var(--page-padding);
  }

  .about-culture-container {
    padding: 0 var(--page-padding);
    gap: var(--gap-large);
  }

  .culture-trust-grid {
    gap: var(--gap-medium);
  }

  .culture-whatsapp-card,
  .culture-feature-card,
  .culture-proof-card {
    padding: var(--gap-medium);
  }

  .culture-trust-title {
    font-size: var(--heading-3);
  }

  .culture-trust-subtitle {
    font-size: var(--text-regular);
  }

  .culture-whatsapp-preview {
    padding: var(--gap-small);
  }

  .whatsapp-message {
    max-width: 85%;
  }

  .culture-cta {
    max-width: 100%;
  }
}

/* Small Mobile: < 768px */
@media (max-width: 767px) {
  .about-hero {
    /* MOBILE FIX: Use 100svh to fill full mobile viewport, accounting for browser UI */
    /* This ensures the second section is not visible on initial load */
    min-height: 100svh;
    padding-bottom: var(--gap-medium);
    padding-left: var(--gap-xsmall);
    padding-right: var(--gap-xsmall);
  }

  .about-hero-content {
    padding: 0;
  }

  .about-hero-wrapper {
    flex-direction: column;
    gap: var(--gap-small);
    align-items: flex-start;
  }

  .about-hero-logo {
    align-self: flex-start;
  }

  .about-hero-logo img {
    height: clamp(150px, 20vw, 200px);
  }

  .about-hero-text .glass-tagline {
    font-size: 0.75rem;
  }

  .about-hero-ctas {
    flex-direction: row;
    gap: var(--gap-xxsmall);
    flex-wrap: wrap;
  }
  
  .about-hero-ctas .btn {
    flex: 1 1 auto;
    min-width: 120px;
    font-size: 14px;
    padding: 8px 16px;
  }

  .about-story-content {
    grid-template-columns: 1fr;
    gap: var(--gap-small);
  }

  .about-results-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-small);
  }

  /* Match VideoSection document-top positie: VideoSection padding-top (128px) minus hero extra padding-bottom (80px) */
  .about-story {
    padding-top: calc(var(--section-padding-small) + 96px - var(--gap-large));
    padding-bottom: var(--section-padding-small);
    padding-left: var(--gap-xsmall);
    padding-right: var(--gap-xsmall);
  }

  .about-results,
  .about-culture,
  .about-final-cta {
    padding: var(--section-padding-small) var(--gap-xsmall);
  }

  .about-culture-header {
    align-items: flex-start;
    text-align: left;
  }

  .about-culture-card {
    padding: var(--gap-medium) var(--gap-small);
    grid-template-columns: 1fr;
  }

  .culture-card-image {
    min-height: 250px;
  }

  .culture-card-image .image-placeholder {
    min-height: 250px;
  }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
  .about-hero-content {
    gap: var(--gap-large);
  }

  .about-hero-text {
    max-width: 700px;
  }
}



/* ===== pages/Contact/ContactPage.css ===== */
/* Contact Page Styles */

/* Hero Section */
.contact-hero {
  --navbar-height: 93px;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background: var(--gradient-hero);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--navbar-height) + var(--gap-small)) var(--page-padding) var(--gap-small);
}

.contact-hero::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(140px, 18vh, 260px);
  background: 
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.008) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.006) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.007) 0px,
      transparent 1px,
      transparent 2px,
      rgba(255, 255, 255, 0.005) 3px
    ),
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.012) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.010) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.contact-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(140px, 18vh, 260px);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(250, 251, 255, 0.15) 25%,
    rgba(250, 251, 255, 0.35) 45%,
    rgba(250, 251, 255, 0.55) 60%,
    rgba(250, 251, 255, 0.72) 72%,
    rgba(250, 251, 255, 0.85) 82%,
    rgba(250, 251, 255, 0.93) 90%,
    rgba(250, 251, 255, 0.97) 95%,
    rgba(250, 251, 255, 0.99) 98%,
    var(--color-background) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.contact-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-small);
  width: 100%;
  max-width: var(--container-large);
  padding: 0 var(--gap-xxsmall);
}

.contact-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-sm);
  width: 100%;
  max-width: 600px;
}

.contact-hero-text .glass-tagline {
  margin-bottom: var(--space-2xs);
}

.contact-hero-title-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-hero-title {
  font-family: var(--font-primary);
  font-size: clamp(2.7rem, 1.2rem + 3vw, 4.5rem);
  font-weight: var(--font-bold);
  line-height: var(--leading-heading);
  letter-spacing: clamp(-1.8px, -0.36vw, -3.6px);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.contact-hero-title .hero-letter {
  display: inline-block;
  white-space: pre;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-title .hero-letter {
    will-change: auto;
  }
}

.contact-hero-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-semibold);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  width: fit-content;
  max-width: 100%;
  opacity: 1;
  margin: 0;
  text-align: left;
}

.contact-hero-intro {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin: var(--space-md) 0 0;
  text-align: left;
}

/* Contact Methods Section */
.contact-methods {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.contact-methods-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-medium);
}

.contact-methods-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  text-align: center;
  margin: 0;
}

.contact-methods-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  text-align: center;
  margin: 0;
}

.contact-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-medium);
  width: 100%;
  margin-top: var(--gap-small);
}

.contact-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--gap-large);
  background-color: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
  gap: var(--gap-small);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-method-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft-hover);
}

.contact-method-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-ribbon);
  margin-bottom: var(--gap-xxsmall);
}

.contact-method-title {
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h4);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.contact-method-description {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0;
  flex: 1;
}

.contact-method-card .btn {
  margin-top: var(--gap-xxsmall);
  width: 100%;
}

/* Contact Form Section */
.contact-form-section {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background: radial-gradient(circle at 20% 10%, rgba(0, 122, 255, 0.08), transparent 55%),
              radial-gradient(circle at 90% 70%, rgba(0, 122, 255, 0.06), transparent 45%);
}

.contact-form-container {
  max-width: var(--container-medium);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-large);
}

.contact-form-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
}

.contact-form-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.contact-form-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-medium);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-medium);
  background-color: var(--color-white);
  padding: var(--gap-large);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-xsmall);
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-medium);
}

.contact-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xxsmall);
}

.contact-form-label {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-semibold);
  line-height: var(--line-normal);
  color: var(--color-neutral-darkest);
}

.contact-form-input,
.contact-form-textarea {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-normal);
  color: var(--color-neutral-darkest);
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-medium);
  background-color: var(--color-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: var(--color-blue-ribbon);
  box-shadow: 0 0 0 3px rgba(0, 112, 255, 0.1);
}

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

.contact-form-success {
  padding: var(--gap-small);
  background-color: rgba(0, 200, 83, 0.1);
  border: 1px solid rgba(0, 200, 83, 0.3);
  border-radius: var(--radius-medium);
  color: var(--color-green-haze);
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
}

.contact-form-submit {
  align-self: flex-start;
  margin-top: var(--gap-xxsmall);
}

/* Contact Info Section */
.contact-info {
  width: 100%;
  padding: var(--section-padding-medium) var(--page-padding);
  background-color: var(--color-background);
}

.contact-info-container {
  max-width: var(--container-large);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-large);
}

.contact-info-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-h2);
  color: var(--color-neutral-darkest);
  text-align: center;
  margin: 0;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-large);
  width: 100%;
}

.contact-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--gap-small);
}

.contact-info-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-ribbon);
  background-color: rgba(0, 112, 255, 0.1);
  border-radius: 50%;
  margin-bottom: var(--gap-xxsmall);
}

.contact-info-label {
  font-family: var(--font-primary);
  font-size: var(--heading-5);
  font-weight: var(--font-bold);
  line-height: var(--line-normal);
  letter-spacing: var(--tracking-h5);
  color: var(--color-neutral-darkest);
  margin: 0;
}

.contact-info-value {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.8;
  margin: 0;
}

.contact-info-value a {
  color: var(--color-blue-ribbon);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-info-value a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 1023px) {
  .contact-hero {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding-top: calc((var(--navbar-height) + env(safe-area-inset-top, 0px)) * 2);
    padding-bottom: calc(var(--gap-large) + env(safe-area-inset-bottom, 0px));
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }
  
  .contact-hero-content {
    width: 100%;
    max-width: var(--container-large);
    padding: 0 var(--gap-xxsmall);
  }
  
  .contact-hero-text {
    max-width: 100%;
    width: 100%;
  }

  .contact-methods-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-medium);
  }
}

@media (max-width: 767px) {
  .contact-hero {
    min-height: 100svh;
    padding-bottom: var(--gap-medium);
    padding-left: var(--gap-xsmall);
    padding-right: var(--gap-xsmall);
  }

  .contact-hero-content {
    padding: 0;
  }

  .contact-hero-text .glass-tagline {
    font-size: 0.75rem;
  }

  .contact-methods,
  .contact-form-section,
  .contact-info {
    padding: var(--section-padding-small) var(--gap-xsmall);
  }

  .contact-method-card {
    padding: var(--gap-medium);
  }

  .contact-form {
    padding: var(--gap-medium);
  }
}

@media (min-width: 1024px) {
  .contact-hero {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: calc((var(--navbar-height) + var(--gap-small)) * 2) var(--page-padding) var(--page-padding);
  }

  .contact-hero-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--gap-medium);
    padding: 0;
    max-width: var(--container-large);
    margin: 0 auto;
  }

  .contact-hero-text {
    align-items: flex-start;
    text-align: left;
    max-width: 600px;
  }
}


/* ===== pages/Resources/ResourcesPage.css ===== */
/* Resources Page Styles */

.resources-page {
  width: 100%;
}

/* Hero Section */
.resources-hero {
  --navbar-height: 93px;
  position: relative;
  width: 100%;
  padding: calc(var(--navbar-height) + 40px) var(--page-padding) 40px;
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.06), rgba(0, 0, 0, 0));
}

.resources-hero-inner {
  max-width: var(--container-large);
  margin: 0 auto;
  text-align: center;
}

.resources-title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 1.2rem + 3vw, 4rem);
  font-weight: var(--font-bold);
  line-height: var(--leading-heading);
  letter-spacing: clamp(-1.8px, -0.36vw, -3.6px);
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-xxsmall) 0;
}

.resources-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin: 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Resources List Section */
.resources-list {
  width: 100%;
  padding: var(--gap-medium) var(--page-padding);
  background-color: var(--color-background);
}

.resources-grid {
  max-width: var(--container-large);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Resource Card */
.resource-card {
  background: var(--color-white);
  border-radius: 18px;
  padding: 26px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.resource-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: var(--font-regular);
  color: var(--color-neutral-darkest);
  opacity: 0.6;
  margin-bottom: var(--gap-xxsmall);
}

.resource-card-title {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-semibold);
  line-height: var(--line-tight);
  letter-spacing: 0;
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-xxsmall) 0;
}

.resource-card-excerpt {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin: 0 0 var(--gap-xxsmall) 0;
  flex: 1;
}

.resource-card-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-blue-ribbon);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.resource-card-link:hover {
  color: var(--color-blue-ribbon-light);
}

/* Tablet and smaller */
@media (max-width: 1024px) {
  .resources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .resources-hero {
    padding: calc(var(--navbar-height) + 32px) var(--gap-xxsmall) 32px;
  }

  .resources-list {
    padding: var(--gap-small) var(--gap-xxsmall);
  }

  .resources-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .resource-card {
    padding: 20px;
  }
}



/* ===== pages/Resources/BlogDetailPage.css ===== */
/* Blog Detail Page Styles */

.blog-detail-page {
  width: 100%;
  background-color: var(--color-background);
}

/* Blog Article Container */
.blog-article {
  max-width: 800px;
  margin: 0 auto;
  padding: calc(93px + var(--gap-medium)) var(--page-padding) var(--gap-large);
}

/* Breadcrumb */
.blog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: var(--text-small);
  color: var(--color-neutral-darkest);
  opacity: 0.6;
  margin-bottom: var(--gap-medium);
}

.blog-breadcrumb a {
  color: var(--color-blue-ribbon);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.blog-breadcrumb a:hover {
  opacity: 0.8;
}

.breadcrumb-separator {
  opacity: 0.4;
}

/* Blog Header */
.blog-header {
  margin-bottom: var(--gap-large);
}

.blog-title {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  line-height: var(--leading-heading);
  letter-spacing: 0;
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-xxsmall) 0;
}

.blog-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-large);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin: 0 0 var(--gap-small) 0;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  color: var(--color-neutral-darkest);
  opacity: 0.6;
}

.meta-separator {
  opacity: 0.4;
}

/* Blog Content */
.blog-content {
  font-family: var(--font-primary);
  color: var(--color-neutral-darkest);
  line-height: var(--line-relaxed);
}

/* Headings */
.blog-heading {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  color: var(--color-neutral-darkest);
  letter-spacing: 0;
  margin-top: var(--gap-large);
  margin-bottom: var(--gap-small);
}

.blog-heading-3 {
  font-size: var(--heading-4);
  line-height: var(--line-tight);
}

.blog-heading-4 {
  font-size: var(--heading-5);
  line-height: var(--line-tight);
  margin-top: var(--gap-medium);
}

/* Paragraphs */
.blog-paragraph {
  font-size: var(--text-regular);
  line-height: var(--line-relaxed);
  margin: 0 0 var(--gap-small) 0;
  color: var(--color-neutral-darkest);
}

/* Lists */
.blog-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gap-small) 0;
}

.blog-list-item {
  position: relative;
  padding-left: 24px;
  margin-bottom: var(--gap-xxsmall);
  font-size: var(--text-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
}

.blog-list-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-blue-ribbon);
  font-weight: var(--font-bold);
  font-size: 1.2em;
}

/* Blog CTA Inline */
.blog-cta-inline {
  margin: var(--gap-small) 0;
}

.blog-inline-link {
  color: var(--color-blue-ribbon);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.2s ease;
}

.blog-inline-link:hover {
  opacity: 0.8;
}

/* Blog CTA Block */
.blog-cta-block {
  margin: var(--gap-large) 0;
  padding: var(--gap-medium);
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.06), rgba(0, 0, 0, 0));
  border-radius: 18px;
  text-align: center;
}

.blog-cta-block-title {
  font-family: var(--font-primary);
  font-size: var(--heading-4);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-xxsmall) 0;
}

.blog-cta-block-text {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin: 0 0 var(--gap-small) 0;
}

.blog-cta-block .btn {
  margin-top: var(--gap-xxsmall);
}

/* Blog CTA Context Link */
.blog-context-link {
  color: var(--color-blue-ribbon);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: var(--font-medium);
  transition: opacity 0.2s ease;
}

.blog-context-link:hover {
  opacity: 0.8;
}

/* Blog CTA Primary */
.blog-cta-primary {
  margin: var(--gap-large) 0;
  padding: var(--gap-large);
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.08), rgba(0, 0, 0, 0));
  border-radius: 18px;
  text-align: center;
  border: 1px solid rgba(0, 112, 255, 0.1);
}

.blog-cta-primary-title {
  font-family: var(--font-primary);
  font-size: var(--heading-3);
  font-weight: var(--font-bold);
  line-height: var(--line-tight);
  color: var(--color-neutral-darkest);
  margin: 0 0 var(--gap-small) 0;
}

.blog-cta-primary-text {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-regular);
  line-height: var(--line-relaxed);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin: 0 0 var(--gap-medium) 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.blog-cta-primary-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xxsmall);
  flex-wrap: wrap;
}

/* Blog CTA Text Link */
.blog-text-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-blue-ribbon);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.blog-text-link:hover {
  opacity: 0.8;
}

/* Blog Footer */
.blog-footer {
  margin-top: var(--gap-large);
  padding-top: var(--gap-medium);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  font-weight: var(--font-medium);
  color: var(--color-blue-ribbon);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.blog-back-link:hover {
  opacity: 0.8;
}

/* Blog Not Found */
.blog-not-found {
  max-width: 600px;
  margin: calc(93px + var(--gap-large)) auto;
  padding: var(--gap-large) var(--page-padding);
  text-align: center;
}

.blog-not-found h1 {
  font-family: var(--font-primary);
  font-size: var(--heading-2);
  font-weight: var(--font-bold);
  color: var(--color-neutral-darkest);
  margin-bottom: var(--gap-small);
}

.blog-not-found p {
  font-family: var(--font-primary);
  font-size: var(--text-regular);
  color: var(--color-neutral-darkest);
  opacity: 0.75;
  margin-bottom: var(--gap-medium);
}

/* Mobile */
@media (max-width: 768px) {
  .blog-article {
    padding: calc(93px + var(--gap-small)) var(--gap-xxsmall) var(--gap-medium);
  }

  .blog-title {
    font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }

  .blog-heading-3 {
    font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
  }

  .blog-heading-4 {
    font-size: clamp(1.125rem, 0.85rem + 0.8vw, 1.5rem);
  }

  .blog-paragraph {
    font-size: var(--text-regular);
  }

  .blog-list-item {
    padding-left: 20px;
  }

  .blog-cta-block {
    padding: var(--gap-small);
    margin: var(--gap-medium) 0;
  }

  .blog-cta-block-title {
    font-size: var(--heading-5);
  }

  .blog-cta-primary {
    padding: var(--gap-medium);
    margin: var(--gap-medium) 0;
  }

  .blog-cta-primary-title {
    font-size: var(--heading-4);
  }

  .blog-cta-primary-buttons {
    flex-direction: column;
  }

  .blog-cta-primary-buttons .btn {
    width: 100%;
  }
}



/* ===== pages/Intake/IntakePage.css ===== */
/* Intake Page Styles */
.intake-page {
  min-height: 100vh;
  padding: calc(var(--gap-large) - 64px) var(--page-padding) 0 var(--page-padding);
  background-color: var(--color-background);
  position: relative;
  z-index: 10;
}

/* Ensure app container has full height background for intake page */
.app .intake-page {
  min-height: 100vh;
  padding-bottom: 0;
}

/* Ensure background extends beyond viewport if content is taller */
.app:has(.intake-page) {
  background-color: var(--color-background);
  min-height: 100vh;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .intake-page {
    padding: var(--gap-small) var(--gap-xxsmall);
    min-height: 100vh;
  }
}

/* Hide footer on all screen sizes for intake page */
.app .intake-page + footer.footer {
  display: none !important;
}


/* ===== DC overrides: animaties zichtbaar ===== */
[data-animate] { opacity: 1 !important; will-change: auto; }
[data-animate-title]:not(.hero-title), .hero-title-desktop, .hero-title-mobile, .hero-title,
.about-hero-title, .diensten-hero-title, .contact-hero-title { opacity: 1 !important; }
.page-content { pointer-events: auto; padding-bottom: 0 !important; }
.hero-cta,
.diensten-hero-ctas button, .diensten-hero-ctas a,
.about-hero-ctas button, .about-hero-ctas a {
  opacity: 1 !important; visibility: visible !important; transform: none !important; will-change: auto;
}
.step-image { opacity: 1 !important; transform: none !important; will-change: auto; }
.timeline-text, .timeline-media { opacity: 1 !important; transform: none !important; }
.footer { position: relative !important; bottom: auto !important; }