/* ============================================================================
   PRELOADER STYLES
   ============================================================================ */

/* DEFINIEER KLEUR PALET EN AFMETINGEN */
:root {
  --tree-color: #ffffff; /* Wit voor contrast tegen donkere achtergrond */
  --size: 22px;
  --orbit-radius: 32px;
  --duration: 3.5s; /* Totale duur van de lus */
  --num-trees: 5;
  --step-delay: calc(var(--duration) / var(--num-trees)); /* 0.7s per stap */
}
        
/* Preloader */
.preloader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  background: #1a2e1a;
  display: flex; /* Gebruik flexbox om kinderen te centreren */
  justify-content: center;
  align-items: center;
  z-index: 99999 !important;
  transform: none !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  overflow: hidden; /* Voorkom scrollen */
}

/* Verberg de preloader nadat de pagina geladen is */
.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Cirkelende kerstbomen animatie - VERWIJDERD fixed position, vertrouwt op parent flexbox */
.animated-loader {
  opacity: 1;
  z-index: 10001;
}

/* HOOFDCONTAINER (gecentreerd en functioneert als rotatie-as) */
.loader-container {
  /* De container moet groot genoeg zijn voor de hele baan */
  width: calc(2 * var(--orbit-radius) + var(--size));
  height: calc(2 * var(--orbit-radius) + var(--size));
  position: relative; 
  z-index: 10002;
}

/* De boom SVG's */
.tree-dot {
  width: var(--size) !important;
  height: var(--size) !important;
  position: absolute;
  top: 50%;
  left: 50%;
  /* Offset de boom zodat deze roteert rond zijn eigen midden */
  margin-top: calc(var(--size) / -2);
  margin-left: calc(var(--size) / -2); 
  
  will-change: transform;
  color: var(--tree-color);
  
  /* Animatie instellingen */
  animation-name: tree-swirl;
  animation-duration: var(--duration);
  animation-timing-function: linear; /* Constant tempo voor de rotatie */
  animation-iteration-count: infinite;
  
  /* Belangrijke verbetering: zorgt dat de negatieve delay de startpositie bepaalt. */
  animation-fill-mode: backwards; 
  
  /* Ankerpunt is het centrum voor alle transformaties */
  transform-origin: center center; 
}

/* Zorg ervoor dat SVG's binnen tree-dot de juiste grootte hebben */
.tree-dot svg {
  width: 100% !important;
  height: 100% !important;
  max-width: var(--size) !important;
  max-height: var(--size) !important;
}

/* KEYFRAMES: Orbitale rotatie en Pulsatie (GEEN ZELF-ROTATIE) */
@keyframes tree-swirl {
  0% { 
    /* Start: Boven (0 graden) */
    transform: 
      rotate(0deg) 
      translateY(calc(var(--orbit-radius) * -1)) 
      scale(1.0); 
  }
  50% { 
    /* Midden: Onder (180 graden) */
    transform: 
      rotate(180deg) 
      translateY(calc(var(--orbit-radius) * -1)) 
      scale(1.15); /* Adem in */
  }
  100% { 
    /* Einde: Terug naar boven (360 graden) */
    transform: 
      rotate(360deg) 
      translateY(calc(var(--orbit-radius) * -1)) 
      scale(1.0); /* Adem uit */
  }
}

/* START POSITIES EN STAGGERING (5 Bomen) */
/* Door 'animation-fill-mode: backwards' te gebruiken, verwijderen we de statische 'transform'
   omdat de negatieve delay de boom naar de juiste startpositie in de animatie brengt. */
   
/* Tree A: 0 deg, 0s delay */
.tree-A { 
  animation-delay: 0s; 
}

/* Tree B: -72 deg, -0.7s delay */
.tree-B { 
  animation-delay: calc(var(--step-delay) * -1); 
}

/* Tree C: -144 deg, -1.4s delay */
.tree-C { 
  animation-delay: calc(var(--step-delay) * -2); 
}

/* Tree D: -216 deg, -2.1s delay */
.tree-D { 
  animation-delay: calc(var(--step-delay) * -3); 
}

/* Tree E: -288 deg, -2.8s delay */
.tree-E { 
  animation-delay: calc(var(--step-delay) * -4); 
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .preloader {
    transition: none !important;
  }
  
  .preloader .animated-loader {
    animation: none !important;
  }
  
  .preloader .tree-dot {
    animation: none !important;
    /* Zorgt dat bomen op hun startpositie in de cirkel blijven staan */
    transform: 
        rotate(0deg) 
        translateY(calc(var(--orbit-radius) * -1)) 
        scale(1.0) !important; 
    opacity: 1 !important;
  }
}

/* Voorkom scrollen van body tijdens preloader */
body.preloader-active {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Ensure scroll works after preloader is removed */
body:not(.preloader-active) {
  overflow: auto !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* Emergency scroll restoration - force scroll to work */
body {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Additional safety for scroll restoration */
html {
  overflow-x: hidden;
  overflow-y: auto;
  /* Footer-groen als achterste laag: overscroll toont geen wit maar
     loopt door in de footer. overscroll-behavior dempt de bounce. */
  background-color: #1F3D2B;
  overscroll-behavior-y: none;
}

/* Force scroll restoration when preloader is not active */
body:not(.preloader-active) {
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
}
        
/* Visually hidden class voor schermlezers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media (min-width: 1101px) {
  .only-mobile { display: none !important; }
  .only-desktop { display: initial; }
}


/* App loader fade-in */
/* Removed soft loader for direct-first paint */

/* Defer sections start hidden and fade in when hydrated */
/* Defer sections: disabled for direct paint */

@media (max-width: 1100px) {
  .only-desktop { display: none !important; }
  .only-mobile { display: block !important; }
}
#klanten.clients { padding: 48px 0; }

.logos-track.duplicate { left: 100%; }

/* Marquee animation removed - using Locomotive Scroll instead */

.logo-img:hover, .logo-img:focus-visible { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 26px -12px rgba(31,61,43,.24), 0 0 0 2px rgba(200,169,81,.18) inset; filter: grayscale(0) saturate(120%); }

/* Hover pause removed - no more marquee animation */

:root {
  --green-900: #252D27;
  --green-800: #2A3A2E; /* ontbrak: gebruikt in cards/koppen door de hele site */
  --green-700: #536657;
  --green-600: #2D5A3A;
  --green-100: #F0F4F1;
  --green-50: #F8FAFC;
  --gold-700: #8F6B2E; /* ontbrak: donkerste goud-tint, o.a. tekst op licht */
  --gold-600: #B58A3E; /* ontbrak: gradient-/hover-tint naast --gold-500 */
  --gold-500: #CEA850;
  --gold-400: #DCC07E; /* ontbrak: lichte tint, o.a. actieve item mobiel menu */
  --red-700: #5B2333;
  --warm-50: #FAFAFF;
  --warm-100: #F5F5F5;
  --ink: #090B0A;
  --muted: #6B7280;
  --navy-900: #001B2E;
  --forest-progress: 0;
  --radius-xl: 6px;
  --radius-lg: 6px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);

  --shadow-md: 0 8px 24px rgba(0,0,0,.08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --container: 1100px;

  --woodgrain-1: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%231f3d2b' stroke-opacity='.03' stroke-width='1'><path d='M20 0 C 15 45, 25 135, 20 180'/><path d='M60 0 C 68 40, 52 140, 60 180'/><path d='M100 0 C 92 60, 108 120, 100 180'/><path d='M140 0 C 135 50, 145 130, 140 180'/></g></svg>");
  --woodgrain-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%231f3d2b' stroke-opacity='.025' stroke-width='1'><path d='M18 0 C 12 55, 26 125, 18 180'/><path d='M54 0 C 64 35, 50 145, 54 180'/><path d='M96 0 C 88 70, 110 110, 96 180'/><path d='M136 0 C 128 48, 144 132, 136 180'/></g></svg>");
  --woodgrain-3: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%231f3d2b' stroke-opacity='.02' stroke-width='1'><path d='M22 0 C 18 40, 24 140, 22 180'/><path d='M66 0 C 72 42, 58 138, 66 180'/><path d='M104 0 C 96 62, 112 118, 104 180'/><path d='M146 0 C 140 52, 150 128, 146 180'/></g></svg>");

  --pattern-wood-fine: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%231f3d2b' stroke-opacity='.045' stroke-width='.9'><path d='M14 0 C 12 28, 16 92, 14 120'/><path d='M38 0 C 42 26, 34 94, 38 120'/><path d='M62 0 C 58 30, 66 90, 62 120'/><path d='M86 0 C 84 24, 90 96, 86 120'/><path d='M110 0 C 108 26, 112 94, 110 120'/></g></svg>");

  --pattern-rings: url('assets/patterns/jaarringen.svg');

  --pattern-needles: url('assets/patterns/needles.svg');

  --section-pattern: none;
  --section-pattern-size: 72px auto;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: auto;
}

/* Page entry fade (always-on quick fade for cached/fast loads) */
html.entry-start body {
  opacity: 0;
}

html.entry-fade body {
  opacity: 1;
  transition: opacity 1.5s ease;
}

@keyframes spinSlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes converge {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}

@keyframes dissolve {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1) rotate(180deg);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(360deg);
    filter: blur(8px);
  }
}

@keyframes symbolAppear {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Modern Page Exit Overlay */

.page-exit-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Success indicator - removed */

/* Removed duplicate definitions - using original colors from first definition */

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

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Ensure all pages are at least viewport height and content doesn't go under header */
html, body {
  min-height: 100vh;
  scroll-behavior: auto;
}

/* For pages with footer, ensure header+content+footer = 100vh minimum */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Inter", "Inter Fallback", "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--warm-50);
  padding-bottom: 0;
}

/* Main content sections for content pages */
.main-content {
  flex: 1;
  margin-top: 120px; /* More space after header */
  min-height: calc(100vh - 120px - 200px); /* 100vh minus header margin (120px) minus footer (~200px) */
}

/* Homepage and contact page have their own viewport styling */
body.homepage main,
body.contact-page main {
  min-height: calc(100vh - 200px); /* Account for footer height */
}

/* Contactpagina: volledige hoogte met verticaal gecentreerde inhoud
   (voorheen inline in contact.php). */
body.contact-page main {
  padding-top: 80px; /* ruimte voor de vaste header */
}

body.homepage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Reveal-footer: content schuift over de sticky footer heen. De wrapper
   krijgt een dekkende achtergrond en een hogere z-index, zodat hij de
   footer bedekt tot je hem aan het einde onder de content vandaan
   scrolt. De footer zelf staat in de gewone flow (position: sticky). */
.page-reveal {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  background: var(--warm-50);
}

/* Adjust margin for different header states */
header.transparent + .main-content {
  margin-top: 120px;
}

header.glass + .main-content {
  margin-top: 120px;
}

header.solid + .main-content {
  margin-top: 120px;
}

/* Grid layouts */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

/* Service icons */
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--gold-500);
  border-radius: 50%;
  margin-bottom: 24px;
  color: var(--green-900);
  font-size: 24px;
}

/* Feature list */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 16px;
}

.feature-list i {
  color: var(--gold-500);
  font-size: 18px;
  flex-shrink: 0;
}


/* CTA content */
.cta-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* CTA Hero Section with Background Image */
.cta-hero {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  border-top: 3px solid var(--gold-500);
}

.cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.cta-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.8);
}

.cta-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(37, 45, 39, 0.8) 0%, rgba(45, 90, 58, 0.7) 50%, rgba(206, 168, 80, 0.6) 100%);
  z-index: 2;
}

.cta-hero .container {
  position: relative;
  z-index: 3;
}

.cta-hero .cta-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  color: #FAFAFF;
  padding: 40px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.cta-hero h2 {
  color: #FAFAFF;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 24px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.cta-hero .lead {
  color: rgba(250, 250, 255, 0.95);
  font-size: 20px;
  margin-bottom: 40px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  line-height: 1.6;
}

.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-hero .btn {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 6px;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.cta-hero .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* CTA Hero Button Styling - Same as Hero Buttons */
.cta-hero .btn-primary {
  background: var(--red-700);
  color: #FAFAFF;
  border-color: transparent;
  transform: translateY(-1px);
  filter: brightness(.98);
}

.cta-hero .btn-primary:hover {
  transform: translateY(1px);
  filter: brightness(1.03);
}

.cta-hero .btn-outline {
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
  color: #FAFAFF;
  border-color: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  backdrop-filter: blur(8px) saturate(110%);
}

.cta-hero .btn-outline:hover {
  filter: brightness(1.03);
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.15));
}

/* Stats Hero Section with Red Background - Compact */
.stats-hero {
  background: var(--red-700);
  padding: 40px 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.stats-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.stats-hero .container {
  position: relative;
  z-index: 2;
}

/* Compact stats grid - Always horizontal */
.stats-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-item-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stat-item-compact:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  flex-shrink: 0;
  transition: all 0.4s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.stat-icon i {
  font-size: 20px;
  color: #FAFAFF;
}

.stat-item-compact:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ========================================
   HOME PAGE - STATS HERO SECTION
   ======================================== */
.home-stats-hero-number {
  font-size: 28px;
  font-weight: 800;
  color: #FAFAFF;
  margin-bottom: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1;
}

.home-stats-hero-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-align: center;
}

/* Responsive adjustments for hero sections */
@media (max-width: 1024px) {
  .cta-hero h2 {
    font-size: 32px;
  }
  
  .cta-hero .lead {
    font-size: 16px;
  }
  
}

@media (max-width: 768px) {
  .cta-hero {
    padding: 60px 0;
  }
  
  .cta-hero h2 {
    font-size: 32px;
  }
  
  .cta-hero .cta-content {
    padding: 30px 20px;
    margin: 0 20px;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-hero .btn {
    width: 100%;
    max-width: 300px;
  }
  
  .cards {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 40px 0;
    padding: 0 20px;
  }
  
  .card {
    margin: 0;
  }
  
  .card-body {
    padding: 24px;
  }
  
  .card h2 {
    font-size: 1.5rem;
  }
  
}


.section-light {
  background: var(--warm-50);
  padding: 80px 0;
  overflow: visible;
}

/* Professional About Us Hero Section */
.section-light-alt {
  background: linear-gradient(135deg, #FEFCF8 0%, #F9F6F0 100%);
  padding: 50px 0;
  position: relative;
}

.section-light-alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/patterns/wood.svg');
  background-size: 100px 100px;
  background-repeat: repeat;
  background-position: 0 0;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.section-light-alt .container {
  position: relative;
  z-index: 2;
}

/* Professional About Hero */
.about-hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 0;
}

/* ========================================
   ABOUT US PAGE - HERO CONTENT
   ======================================== */
.about-hero-content {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
  min-height: 600px;
  padding-top: 0;
}

.about-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 60px;
}

.about-hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--green-800);
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.about-hero-subtitle {
  font-size: 1.4rem;
  color: #4B5563;
  margin-bottom: 32px;
  font-weight: 500;
  line-height: 1.5;
}


.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(206, 168, 80, 0.15);
}


.about-hero-description {
  margin-top: 0;
}

.about-hero-description p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 20px;
  max-width: 100%;
}

.about-hero-visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}

.about-hero-media {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 500px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.about-hero-media:hover {
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
}

.about-hero-media .media-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

/* Professional History Section */


.section-medium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(45, 90, 58, 0.02) 0%, rgba(206, 168, 80, 0.02) 100%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.section-medium .container {
  position: relative;
  z-index: 2;
}

.section-medium h2,
.section-medium h3,
.section-medium h4 {
  color: var(--green-900);
}

.section-medium p {
  color: var(--muted);
}

.section-medium .feature-icon {
  background: rgba(206, 168, 80, 0.2);
  border: 2px solid var(--gold-500);
}

.section-dark {
  background: var(--green-900);
  color: #FAFAFF;
  padding: 80px 0;
}

.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: #FAFAFF;
}

.section-dark p {
  color: rgba(250, 250, 255, 0.9);
}

/* Professional Values Section */
.section-warm {
  background: linear-gradient(135deg, var(--warm-100) 0%, var(--warm-50) 100%);
  padding: 100px 0;
  position: relative;
  border-top: 1px solid rgba(206, 168, 80, 0.2);
}

.section-warm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(206, 168, 80, 0.02) 0%, rgba(45, 90, 58, 0.02) 100%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.section-warm .container {
  position: relative;
  z-index: 2;
}

/* Professional Certifications Section */
.section-accent {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--warm-50) 50%, var(--warm-100) 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(206, 168, 80, 0.2);
}

.section-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(45, 90, 58, 0.02) 0%, rgba(206, 168, 80, 0.02) 100%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.section-accent .container {
  position: relative;
  z-index: 2;
}

/* Locomotive scroll effects removed - keeping only smooth scroll */

/* Locomotive scroll effects removed - keeping only smooth scroll */

/* Professional Team Section */
.section-rich {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
  color: #FFFFFF;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.section-rich::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(206, 168, 80, 0.1) 0%, rgba(206, 168, 80, 0.05) 100%);
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

.section-rich .container {
  position: relative;
  z-index: 2;
}

.section-rich h2,
.section-rich h3,
.section-rich h4 {
  color: #FAFAFF;
}

.section-rich p {
  color: rgba(250, 250, 255, 0.9);
}

.section-rich .feature-icon {
  background: rgba(206, 168, 80, 0.3);
  border: 2px solid var(--gold-500);
}

/* Professional Product Cards - Clean & Minimal */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  margin: 60px 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.card {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  position: relative;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-color: #d1d5db;
}

.card-media {
  height: 280px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.card-body {
  padding: 32px;
  position: relative;
}

.card h2,
.card h3 {
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--green-800);
  margin: 0 0 12px 0;
  line-height: 1.3;
  font-family: "Inter", "Inter Fallback", sans-serif;
}

/* Sectiekop met titel + lead, gecentreerd boven een kaartenrij */
.section-head {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
}
.section-head .lead-text { margin: 8px 0 0; }

.card .meta {
  color: #6b7280;
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 16px;
  text-transform: none;
  letter-spacing: 0;
}

.card p {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.badge {
  display: inline-block;
  background: #f3f4f6;
  color: #374151;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  position: absolute;
  top: 20px;
  right: 20px;
  border: 1px solid #e5e7eb;
}




/* Image Grid Styles */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin: 48px 0;
}

.image-grid-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-grid-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.image-grid-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-grid-item:hover img {
  transform: scale(1.05);
}

.image-grid-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #FAFAFF;
  padding: 24px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.image-grid-item:hover .image-grid-caption {
  transform: translateY(0);
}

/* Feature Icons */
.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.feature-icon i {
  font-size: 24px;
  color: #FAFAFF;
}

.feature-with-icon {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.feature-with-icon .feature-content {
  flex: 1;
}

/* Horizontal Scroll Gallery */

.gallery-scroll {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  gap: 24px;
  padding: 20px 0;
  cursor: grab;
}

.gallery-scroll::-webkit-scrollbar {
  display: none; /* WebKit */
}

.gallery-scroll:active {
  cursor: grabbing;
}

/* Gallery Hero Section */
.gallery-hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 0 40px 0;
}

.gallery-hero-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.gallery-hero-text {
  max-width: 800px;
}

.gallery-hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--green-800);
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}


/* Gallery Grid - Masonry Style */
.gallery-grid {
  columns: 4;
  column-gap: 32px;
  padding: 0 40px 60px 40px;
  max-width: 1600px;
  margin: 0 auto;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transition: all 0.4s ease;
  cursor: default;
  margin-bottom: 32px;
  break-inside: avoid;
  display: block;
}

.gallery-grid img:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

/* Video prominent bovenaan de galerij: hoofdvideo groot, daaronder twee
   korte clips naast elkaar (liggend + staand). */
.gallery-hero-lead {
  margin: 12px 0 0;
  font-size: 16.5px;
  color: var(--muted);
}

/* Gallery Responsive Styles */
@media (max-width: 1200px) {
  .gallery-grid {
    columns: 3;
    column-gap: 28px;
    padding: 0 30px 50px 30px;
  }
  
  .gallery-grid img {
    margin-bottom: 28px;
  }

  .gallery-hero-title {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    columns: 2;
    column-gap: 24px;
    padding: 0 20px 40px 20px;
  }
  
  .gallery-grid img {
    margin-bottom: 24px;
  }

  .gallery-hero {
    padding: 20px 0 30px 0;
  }
  
  .gallery-hero-content {
    text-align: center;
  }
  
  .gallery-hero-title {
    font-size: 2.5rem;
  }
  
}

@media (max-width: 480px) {
  .gallery-grid {
    columns: 1;
    column-gap: 20px;
    padding: 0 15px 30px 15px;
  }
  
  .gallery-grid img {
    margin-bottom: 20px;
  }

  .gallery-hero-content {
    text-align: center;
  }
  
  .gallery-hero-title {
    font-size: 2rem;
  }
  
}

/* Video Styles */
.video-wrapper {
  margin-top: 40px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

/* Old gallery styles removed */

/* Gallery styles updated for new layout */

/* Responsive adjustments for new sections */
@media (max-width: 1024px) {
  .section-light,
  .section-light-alt,
  .section-medium,
  .section-dark,
  .section-warm,
  .section-accent,
  .section-rich {
    padding: 60px 0;
  }
  
  .image-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
  }
  
  .feature-with-icon {
    flex-direction: column;
    text-align: center;
  }
  
  .feature-icon {
    margin: 0 auto 16px;
  }
  
  .gallery-item-horizontal {
    width: 300px;
    height: 350px;
  }
}

@media (max-width: 768px) {
  .section-light,
  .section-light-alt,
  .section-medium,
  .section-dark,
  .section-warm,
  .section-accent,
  .section-rich {
    padding: 50px 0;
  }
  
  .image-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .image-grid-item img {
    height: 200px;
  }
  
  .gallery-item-horizontal {
    width: 280px;
    height: 320px;
  }
  
  .gallery-scroll {
    gap: 16px;
  }
  
  .gallery-nav {
    gap: 12px;
  }
  
  .gallery-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .gallery-categories {
    gap: 8px;
  }
  
  .gallery-category-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* ========================================
   ABOUT US PAGE - TEAM MEMBER STYLES
   ======================================== */
.about-team-member {
  text-align: center;
  padding: 32px;
  background: var(--warm-50);
  border-radius: 6px;
  border: 1px solid rgba(200, 169, 81, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-team-member:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.team-avatar i {
  font-size: 40px;
  color: #FAFAFF;
}

.team-phone:hover {
  color: var(--gold-600);
}

.team-phone i {
  font-size: 14px;
}

/* About Us Page Styles */

.value-card {
  background: var(--warm-50);
  border-radius: 6px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(200, 169, 81, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.value-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.value-icon i {
  font-size: 24px;
  color: #FAFAFF;
}

.value-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: 16px;
}

.value-card p {
  color: #4B5563;
  line-height: 1.6;
}

/* ========================================
   VALUES SECTION - TEAM MEMBER STYLES
   ======================================== */
.values-team-member {
  background: var(--warm-50);
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(200, 169, 81, 0.2);
}

.values-team-member h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: 16px;
}

.values-team-member p {
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 16px;
}

.values-team-member a {
  color: var(--gold-600);
  text-decoration: none;
  font-weight: 600;
}

.values-team-member a:hover {
  color: var(--gold-700);
  text-decoration: underline;
}

.cert-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cert-list li {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(200, 169, 81, 0.2);
}

.cert-list li:last-child {
  border-bottom: none;
}

.cert-list i {
  color: var(--green-600);
  margin-right: 12px;
  font-size: 16px;
}

.cert-list span {
  color: #374151;
  font-weight: 500;
}

/* Professional About Us Components */

/* Simple History Header */
.history-header {
  text-align: center;
  margin-bottom: 60px;
}

.history-header .section-title {
  color: #FAFAFF;
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0;
}





/* Responsive adjustments for about us sections */
@media (max-width: 1024px) {
  .about-hero {
    padding: 40px 0;
  }
  
  .about-hero-content {
    grid-template-columns: 1fr;
    gap: 60px;
    min-height: auto;
  }
  
  .about-hero-text {
    padding-right: 0;
    text-align: center;
  }
  
  .about-hero-title {
    font-size: 3rem;
  }
  
  .about-hero-description p {
    max-width: 100%;
  }
  
  .about-hero-media {
    max-width: 400px;
    height: 400px;
  }
  
  
  
}

@media (max-width: 768px) {
  .about-hero {
    padding: 30px 0;
  }
  
  .about-hero-content {
    gap: 40px;
  }
  
  .about-hero-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }
  
  .about-hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 24px;
  }
  
  .about-hero-description p {
    font-size: 1rem;
    margin-bottom: 16px;
  }
  
  .about-hero-media {
    max-width: 100%;
    height: 300px;
  }
  }
  

  

@media (max-width: 768px) {
}



/* Gallery Page Styles */

.gallery-item {
  background: var(--warm-50);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(200, 169, 81, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.gallery-media .media {
  height: 100%;
  width: 100%;
}

.gallery-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: 12px;
}

.gallery-info p {
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
}

.product-showcase:nth-child(even) {
  direction: rtl;
}

.product-showcase:nth-child(even) > * {
  direction: ltr;
}

.showcase-media .media {
  height: 100%;
  width: 100%;
}

.showcase-info h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: 16px;
}

.showcase-info p {
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 20px;
}

.product-features li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(200, 169, 81, 0.2);
  color: #374151;
  position: relative;
  padding-left: 20px;
}

.product-features li:last-child {
  border-bottom: none;
}

.product-features li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold-500);
  font-weight: bold;
}

.location-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.location-media .media {
  height: 100%;
  width: 100%;
}

.location-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: 12px;
}

.location-info p {
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 16px;
}

.feature-tag {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: #FAFAFF;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.video-wrapper {
  height: 400px;
  overflow: hidden;
}

.video-wrapper video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.video-info h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: 12px;
}

.video-info p {
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
}

/* Responsive adjustments for gallery sections */
@media (max-width: 1024px) {

  .product-showcase:nth-child(even) {
    direction: ltr;
  }

}

@media (max-width: 768px) {

  .video-wrapper {
    height: 300px;
  }

  .gallery-info,
  .location-info,

  .gallery-info h3,
  .location-info h3,
  .video-info h3 {
    font-size: 18px;
  }
  
  .showcase-info h3 {
    font-size: 20px;
  }
}

/* FAQ Page Styles */
.faq-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  margin: 48px 0;
}

.faq-category {
  background: var(--warm-50);
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(200, 169, 81, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-category:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.category-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.category-icon i {
  font-size: 24px;
  color: #FAFAFF;
}

.faq-category h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: 12px;
}

.faq-category p {
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 20px;
}

.category-questions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-questions li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(200, 169, 81, 0.2);
  color: #374151;
  position: relative;
  padding-left: 20px;
  font-size: 14px;
}

.category-questions li:last-child {
  border-bottom: none;
}

.category-questions li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold-500);
  font-weight: bold;
}

/* Responsive adjustments for FAQ sections */
@media (max-width: 1024px) {
  .faq-categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
  }
  
  .faq-category {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .faq-categories-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .faq-category {
    padding: 20px;
  }
  
  .category-icon {
    width: 50px;
    height: 50px;
  }
  
  .category-icon i {
    font-size: 20px;
  }
  
  .faq-category h3 {
    font-size: 18px;
  }
}

@media (max-width: 768px) {

  
  .service-icon {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
}

/* Contact page grid layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 28px 0;
  align-items: start;
}

.contact-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 10px 30px -12px rgba(31, 61, 43, 0.18);
  border: 1px solid rgba(31, 61, 43, 0.06);
}

.contact-map {
  min-height: 440px;
  padding: 0;
  overflow: hidden;
}

.contact-map #map-container {
  width: 100%;
  height: 100%;
  min-height: 440px;
  border-radius: 12px;
}

.contact-info h2,
.contact-form h2 {
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--green-900);
  font-size: 24px;
  font-weight: 700;
}

.contact-info p {
  margin-bottom: 16px;
  line-height: 1.6;
}

.contact-info a {
  color: var(--green-900);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-info a:hover {
  color: var(--gold-500);
}

.business-info {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(200, 169, 81, 0.3);
}

.country-label {
  display: block;
  font-weight: 700;
  color: var(--green-900);
  margin-bottom: 8px;
  margin-top: 16px;
}

.country-label:first-child {
  margin-top: 0;
}

/* Eigen flow voor het contactformulier (overschrijft de globale form-grid). */
#contactForm {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--green-900);
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  padding: 13px 14px;
  border: 1px solid #D7DDD3;
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: #9AA39A; }

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(200, 169, 81, 0.18);
}

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

.contact-form .btn-primary {
  width: 100%;
  margin-top: 4px;
}

.form-status {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

/* Toelichting onder de verzendknop: het bericht opent in het eigen
   mailprogramma van de bezoeker (de site heeft geen server-backend). */
.form-note {
  margin: 10px 0 0;
  font-size: var(--fs-small);
  color: #6b7280;
  line-height: 1.5;
}

.form-status.success {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.form-status.error {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Responsive contact grid */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 32px 0;
  }
  
  .contact-map,
  .contact-map #map-container {
    min-height: 340px;
  }
}

@media (max-width: 768px) {
  .contact-card {
    padding: 24px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .contact-info h2,
  .contact-form h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .contact-map,
  .contact-map #map-container {
    min-height: 300px;
  }
}

header, section, footer { position: relative; z-index: 1; }

a {
  color: inherit;
}

a:not(.btn):not(.cta) {
  color: var(--green-700);
  text-decoration: none;
  font-weight: 600;
  transition: color .2s ease;
}

a:not(.btn):not(.cta):hover {
  color: var(--gold-500);
}

a:not(.btn):not(.cta):focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.container {
  max-width: min(1400px, 94vw);
  margin: 0 auto;
  /* max() met safe-area: content nooit achter de notch/afgeronde hoeken
     (viewport-fit=cover in de meta viewport), zonder de opmaak op
     gewone schermen te veranderen. */
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
  overflow: visible;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  color: #FAFAFF;
  background: var(--green-900);
  border-bottom: 6px solid var(--gold-500);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  transition: height 0.3s ease, padding 0.3s ease, border-bottom-width 0.3s ease;
  flex-shrink: 0;
  overflow: visible;
}

header::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, var(--green-900), var(--green-700));
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 0;
}

/* Headerstaten (transparent/glass/solid): kleur en achtergrond staan in de
   STAM-laag achteraan dit bestand; hoogtes komen uit .nav (basis) en de
   media-queries. Hier bewust geen per-staat hoogte- of randregels meer. */
header.solid::after { opacity: 0; }

header > * { position: relative; z-index: 1; }

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  height: 120px;
  min-height: 120px;
  transition: height 0.3s ease;
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  transform: none !important;
  flex-shrink: 0;
  position: relative;
  z-index: 51;
  min-height: 150px;
}

.brand-slogan {
  margin-left: 16px;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  white-space: normal;
}

.brand-logo-horizontal img {
  height: 100px;
  width: auto;
  min-height: 100px;
  display: block;
  filter: none;
  transform: none !important;
  object-fit: contain;
}

.brand-logo-horizontal {
  display: inline-flex;
  align-items: flex-end;
  padding: 20px 28px 28px 28px;
  margin-top: 0;
  background: #FAFAFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  transform: none !important;
}

/* Logo is now completely static - no hover effects */

/* Logo is now completely static - no scroll animations */
.i18n-animating .brand-logo-horizontal { transform: none; opacity: 1; }
.i18n-animating.i18n-phase-in .brand-logo-horizontal { transform: none; opacity: 1; }

.brand-logo-horizontal img { height: 100px; width: auto; min-height: 100px; display: block; filter: none; transform: none !important; object-fit: contain; }

/* Removed decorative ring effects for cleaner, professional look */

.brand:hover .brand-logo {
  border-color: rgba(206, 168, 80, 0.5);
  box-shadow: 0 0 0 3px rgba(206, 168, 80, 0.2) inset;
}

.brand-name {
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-weight: 600;
  letter-spacing: .2px;
  color: #FAFAFF;
  text-shadow: 0 2px 4px rgba(0,0,0,.35);
}

nav {
  display: flex;
  align-items: center;
  height: 100%;
}

nav ul {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}

/* Ensure desktop navigation stays horizontal */
@media (min-width: 1101px) {
  nav ul {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
  }
  
  /* Ensure nav-left maintains horizontal layout on desktop */
  .nav-left.only-desktop {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px;
    align-items: center;
  }
}

@media (min-width: 1101px) {
  /* Hide mobile menu on desktop */
  .mobile-menu { display: none !important; }
  .menu-toggle { display: none !important; }
  .nav-mobile-lang { display: none !important; }
  
  /* Desktopbalk: één simpele flex-rij. Logo links (hangt met flex-start
     onder de balk uit), daarnaast de links, taalkeuze rechts: alles
     verticaal gecentreerd in de balk. */
  .nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .brand {
    align-self: flex-start;
    transform: none !important;
  }
  
  /* Logo on white ribbon from top */
  .brand-logo-horizontal { 
    background: #FAFAFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: 20px 28px 28px 28px !important;
    margin-top: 0 !important;
  }
  
  .brand-logo-horizontal img {
    height: 100px !important;
    min-height: 100px !important;
    filter: none !important;
  }
  
  nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
  }
  
  .nav-left.only-desktop {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
  }
  
  .nav-left.only-desktop li {
    list-style: none;
    margin: 0;
  }
  
  .nav-left.only-desktop a {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 6px;
    text-decoration: none;
    color: #FAFAFF;
    font-weight: 500;
    font-size: 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  
  .nav-left.only-desktop a:hover {
    background-color: transparent;
  }
  
  .nav-left.only-desktop a.active {
    position: relative;
    color: #FAFAFF;
    font-weight: 600;
  }
  
  .nav-left.only-desktop a.active::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    border-radius: 6px;
    background: rgba(255,255,255,.9);
    transform: scaleX(1);
    opacity: 1;
  }
  
  .nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .nav-right .lang-dropdown { 
    position: static;
    align-self: center;
  }
  
  .nav-right a.btn-accent { 
    position: static;
    align-self: center;
  }
  
  .only-desktop { display: block; }
  .only-mobile { display: none; }
}

/* Narrower desktops - maintain same grid layout */
@media (max-width: 1500px) and (min-width: 1101px) {
  .nav { 
    gap: 0 24px;
  }
  
  nav {
    gap: 12px;
  }
  
  .nav-left.only-desktop { 
    gap: 12px;
  }
  
  .nav-right {
    gap: 12px;
  }
}

/* Logo positioning is now completely static - no scroll effects */

@media (max-width: 1100px) {
  .only-desktop { display: none !important; }
}

nav a {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 6px;
  text-decoration: none;
  color: #FAFAFF;
  font-weight: 500;
  font-size: 15px;
  position: relative;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.social-links {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-links a {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: inherit;
  transition: color .2s ease;
  align-items: center;
  justify-content: center;
}

.social-links i {
  font-size: 16px;
  line-height: 1;
}

.social-links svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

.social-links img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

header .social-links {
  margin-left: 20px;
}

header .social-links a {
  width: 20px;
  height: 20px;
}

header .social-links a:hover {
  color: var(--gold-500);
}

header .social-links img { filter: invert(1); }

header nav a:not(.btn):not(.cta),
header nav a:not(.btn):not(.cta):visited {
  color: #FAFAFF;
}
header nav a:not(.btn):not(.cta):hover,
header nav a:not(.btn):not(.cta):focus {
  color: #FAFAFF;
}

nav a:not(.cta):hover { 
  background: transparent; 
  color: #FAFAFF;
}

.cta {
  background: var(--red-700);
  color: #FAFAFF;
  border-radius: 6px;
  padding: 12px 20px;
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}

.cta:hover {
  background: var(--red-700);
  color: #FAFAFF;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

nav a:not(.cta):not(.btn)::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 6px;
  background: rgba(255,255,255,.9);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

nav a:not(.cta):hover::after,
nav a:not(.cta):focus-visible::after,
nav a:not(.cta).active::after,
nav a:not(.cta)[aria-current="true"]::after {
  transform: scaleX(1);
  opacity: 1;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-4);
  position: relative;
  z-index: 70;
}

      .lang-menu-mobile { display: none; }

.lang-toggle button,
.lang-current {
  background: none;
  border: 0;
  padding: 0;
  width: 24px;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

.lang-toggle button img,
.lang-current img {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(1) opacity(.8);
  transition: filter .2s ease, box-shadow .2s ease;
}

.lang-toggle button:hover img,
.lang-toggle button:focus-visible img,
.lang-toggle button.active img,
.lang-current:hover img,
.lang-current:focus-visible img {
  filter: none;
}

.lang-toggle button.active,
.lang-inline button.active { box-shadow: none; }

.lang-panel {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: #FAFAFF;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
  padding: 8px;
  display: none;
  gap: 6px;
  flex-direction: column;
}

.lang-toggle.is-open .lang-panel,
.lang-toggle:hover .lang-panel { display: none; }

.lang-toggle .lang-panel { display: none; }
.lang-toggle.is-open .lang-panel { display: none; }

.lang-toggle button[data-lang] { display: none; }
.lang-toggle .lang-current { display: none; }
.lang-toggle.is-open button[data-lang],
.lang-toggle:hover button[data-lang] { display: none; }

.lang-current img { filter: none !important; }
.lang-current { box-shadow: none; border-radius: 6px; }

/* Language Dropdown - Professional & Clean */
.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  width: 180px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #FAFAFF;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
}

.lang-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.lang-dropdown-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.lang-dropdown-trigger .lang-flag {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lang-dropdown-trigger .lang-label {
  display: inline-block;
  min-width: 80px;
  text-align: left;
}

.lang-dropdown-trigger .lang-arrow {
  margin-left: auto;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.lang-dropdown.open .lang-dropdown-trigger .lang-arrow {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 180px;
  background: #FAFAFF;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 100;
  overflow: hidden;
  box-sizing: border-box;
}

.lang-dropdown.open .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--green-900);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lang-dropdown-item img {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.lang-dropdown-item:hover {
  background: #F3F4F6;
}

.lang-dropdown-item:focus-visible {
  background: #E5E7EB;
  outline: none;
}

.lang-dropdown-item.active {
  background: linear-gradient(135deg, #F0F4F1 0%, #E8F5E8 100%);
  color: var(--green-600);
  font-weight: 600;
}

.lang-dropdown-item.active::after {
  content: '✓';
  margin-left: auto;
  color: var(--green-600);
  font-weight: 600;
}

.lang-inline { display: none; }
.lang-inline .lang-pop { display: none; }

@media (min-width: 1101px) {
  .lang-toggle { display: none !important; }
}

/* On wide desktop hide the popover entirely */
@media (min-width: 1226px) {
  .lang-inline .lang-pop { display: none !important; }
}

/* Compact language picker: only show active flag between 1101px and 1350px */
@media (max-width: 1350px) and (min-width: 1101px) {
  /* Hide desktop Contact button entirely to avoid clipping when space is tight */
  .nav-right a.btn-accent { display: none !important; }
}

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: #FAFAFF;
  font-size: 28px;
}

.menu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

/* Layout adjustments for medium screens - colors and design follow normal behavior */
@media (max-width: 1500px) and (min-width: 1101px) {
  /* Logo on white ribbon from top */
  .brand-logo-horizontal { 
    padding: 20px 28px 28px 28px !important;
    background: #FAFAFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-top: 0 !important;
  }
  .brand-logo-horizontal img { height: 100px !important; width: auto !important; min-height: 100px !important; filter: none !important; transform: none !important; object-fit: contain !important; }
  .brand { align-self: flex-start; }
}

@media (max-width: 1100px) {
  /* Mobiele header: géén balk. Alleen het hangende witte logolint links en
     een zwevende ronde hamburger rechts, los over de content. */
  header,
  header.transparent,
  header.glass,
  header.solid {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav {
    position: static;
    display: block;
    height: 0;
    min-height: 0;
    padding: 0;
  }

  /* Logolint: vast aan de bovenrand, hangt los over de pagina. */
  .nav .brand {
    position: absolute;
    top: 0;
    left: max(16px, env(safe-area-inset-left));
    transform: none !important;
    min-height: 0;
    z-index: 1;
  }
  .nav .brand-logo-horizontal {
    padding: 10px 16px 14px !important;
    /* iPhone-notch: lint doorlaten lopen tot de echte schermrand
       (viewport-fit=cover staat in de meta viewport). */
    padding-top: calc(10px + env(safe-area-inset-top)) !important;
    background: #FAFAFF !important;
    border: 0 !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 4px 14px rgba(9, 11, 10, 0.18) !important;
    margin: 0 !important;
    transform: none !important;
  }
  .nav .brand-logo-horizontal img {
    height: 76px !important;
    min-height: 0 !important;
    width: auto !important;
    filter: none !important;
    transform: none !important;
    object-fit: contain !important;
  }

  .nav > nav {
    display: contents;
  }

  /* Taalkeuze niet in beeld op mobiel (site is NL-only; krijgt bij de
     meertalige fase een plek in het menu zelf). */
  .nav-mobile-lang { display: none !important; }
}

@media (max-width: 600px) {
  /* Op smalle telefoons het hangende logolint iets compacter. */
  .nav .brand-logo-horizontal {
    padding: 8px 14px 12px !important;
    padding-top: calc(8px + env(safe-area-inset-top)) !important;
  }
  .nav .brand-logo-horizontal img {
    height: 64px !important;
    min-height: 0 !important;
  }
}

@media (max-width: 1100px) {
  /* Hide desktop navigation and language selector */
  .nav-left.only-desktop { display: none !important; }
  .nav-right.only-desktop { display: none !important; }
  
  /* Also hide any nav-left elements that might be showing */
  .nav-left { display: none !important; }
  .nav-right { display: none !important; }

  /* Mobiele taalkeuze: staat in de flex-rij rechts (naast de hamburger),
     niet meer absoluut gepositioneerd. */
  .nav-mobile-lang {
    position: relative;
    z-index: 10;
  }

  .nav-mobile-lang .lang-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    width: auto;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    backdrop-filter: blur(6px) saturate(140%);
    border-radius: 6px;
    color: #FAFAFF;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .nav-mobile-lang .lang-dropdown-trigger:hover {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .nav-mobile-lang .lang-flag {
    border-radius: 6px;
  }
  
  .nav-mobile-lang .lang-arrow {
    width: 8px;
    height: 6px;
    transition: transform 0.2s ease;
  }
  
  .nav-mobile-lang .lang-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--green-900);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1000;
    min-width: 140px;
  }
  
  .nav-mobile-lang .lang-dropdown.open .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .nav-mobile-lang .lang-dropdown.open .lang-arrow {
    transform: rotate(180deg);
  }
  
  .nav-mobile-lang .lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: #FAFAFF;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: left;
  }
  
  .nav-mobile-lang .lang-dropdown-item:hover {
    background: transparent;
  }
  
  .nav-mobile-lang .lang-dropdown-item:first-child {
    border-radius: 6px 6px 0 0;
  }
  
  .nav-mobile-lang .lang-dropdown-item:last-child {
    border-radius: 0 0 6px 6px;
  }

  /* Zwevende ronde hamburger, rechtsboven los over de content.
     display:flex met !important + dubbele klasse: wint van de generieke
     `.only-mobile { display:block !important }`, anders centreert het
     icoon niet in de cirkel. */
  .menu-toggle.only-mobile,
  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    background: rgba(20, 26, 21, 0.55);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(9, 11, 10, 0.22);
    color: #FAFAFF;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
  }

  /* In het geopende menu wordt de knop een kale X op het groene vlak. */
  .menu-open .menu-toggle {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 16px;
  }
  
  .hamburger .line {
    width: 100%;
    height: 2px;
    background: #FAFAFF;
    border-radius: 6px;
    transition: all 0.3s ease;
    transform-origin: center;
  }
  
  .menu-open .hamburger .line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  
  .menu-open .hamburger .line:nth-child(2) {
    opacity: 0;
  }
  
  .menu-open .hamburger .line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobiel off-canvas menu: rustig en vlak: effen donkergroen, geen
     gradiënten, glans-effecten of gloed. Actief item = goud, meer niet. */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    background: var(--green-900);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    overflow-y: auto;
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  .mobile-menu-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 76px 28px 28px;
    padding-top: calc(76px + env(safe-area-inset-top));
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  .mobile-menu-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mobile-logo img {
    height: 72px;
    width: auto;
    margin: 0 auto;
  }

  /* De drawer-<nav> erft de globale `nav { display:flex; height:100% }` -
     hier resetten zodat de lijst de volle breedte krijgt. */
  .mobile-nav {
    flex: 1;
    display: block;
    height: auto;
  }

  /* Verticale lijst (overschrijft de globale `nav ul { display:flex }` die
     de items anders naast elkaar zet). */
  .mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .mobile-nav-list li {
    margin: 0;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Ook :visited meenemen: interne links zijn altijd bezocht en Chrome
     schildert anders de oude :visited-kleur (zie worklog). */
  .mobile-menu .mobile-nav-list a,
  .mobile-menu .mobile-nav-list a:visited {
    display: block;
    width: 100%;
    padding: 16px 4px;
    color: #FAFAFF;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    border-radius: 0;
    transition: color 0.15s ease;
  }

  /* Geen inschuif-onderstreping in de drawer (die hoort bij de desktopbalk). */
  .mobile-menu .mobile-nav-list a::after {
    display: none;
  }

  .mobile-menu .mobile-nav-list a:hover,
  .mobile-menu .mobile-nav-list a:focus-visible {
    background: transparent;
    color: var(--gold-400);
  }

  .mobile-menu .mobile-nav-list a.active,
  .mobile-menu .mobile-nav-list a.active:visited {
    color: var(--gold-500);
    font-weight: 600;
  }

  .mobile-menu-footer {
    margin-top: auto;
    padding-top: 24px;
  }

  /* Taalkeuze in de drawer: rij vlakke chips, actieve taal in goud. */
  .mobile-menu-lang {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
  }
  .mobile-lang-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #FAFAFF;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .mobile-lang-item img { display: block; border-radius: 2px; }
  .mobile-lang-item:hover,
  .mobile-lang-item:focus-visible {
    background: rgba(255, 255, 255, 0.14);
  }
  .mobile-lang-item.active {
    border-color: var(--gold-500);
    color: var(--gold-400);
  }

  .mobile-social {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
  }
  
  .mobile-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
  }
  
  .mobile-social a:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
  }
  
  .mobile-social i {
    font-size: 20px;
    line-height: 1;
    color: #FAFAFF;
  }
  
  .mobile-social img {
    filter: brightness(0) invert(1);
    width: 20px;
    height: 20px;
  }
  
  .mobile-contact-info {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
  }
  
  .mobile-contact-info p {
    margin: 4px 0;
  }
  
  .mobile-contact-info a {
    color: #FAFAFF;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .mobile-contact-info a:hover {
    color: var(--gold-500);
  }

  /* Make header background solid green when mobile menu is open */
  .menu-open header {
    background: var(--green-900) !important;
    border-bottom: 0 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
  }
  .menu-open header::after {
    opacity: 0 !important;
  }

  .nav .brand { align-items: center; }
  /* Klikbaar logo (scroll-naar-boven) op mobiel. Logo-vormgeving zelf staat
     in het ≤1100px-blok hierboven: hier niet dupliceren. */
  a.brand { pointer-events: auto; }
  .brand-logo-horizontal::before { content: none; }
  .lang-menu-mobile .lang-options {
    display: flex;
    gap: 8px;
  }
  
  /* Menu content wrapper */
  .menu-content {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  /* Social media links in mobile menu */
  .social-links-mobile {
    margin-top: auto;
    padding: 16px 8px;
    border-top: 1px solid rgba(255,255,255,.22);
  }
  
  .social-links-mobile .social-links {
    display: flex;
    justify-content: center;
    gap: 32px;
  }
  
  .social-links-mobile .social-links a {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
  }
  
  .social-links-mobile .social-links a:hover,
  .social-links-mobile .social-links a:focus-visible {
    transform: scale(1.1);
    text-decoration: none !important;
  }
  
  .social-links-mobile .social-links a {
    text-decoration: none !important;
  }
  
  /* Override any general link hover styles for mobile menu social icons */
  .social-links-mobile .social-links a:hover,
  .social-links-mobile .social-links a:focus,
  .social-links-mobile .social-links a:focus-visible,
  .social-links-mobile .social-links a:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
  }
  
  /* Additional override for any potential inheritance issues */
  nav ul .social-links-mobile .social-links a,
  nav ul .social-links-mobile .social-links a:hover,
  nav ul .social-links-mobile .social-links a:focus,
  nav ul .social-links-mobile .social-links a:focus-visible,
  nav ul .social-links-mobile .social-links a:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
  }
  
  .social-links-mobile .social-links img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
  }
  
}

.hero { position: relative; height: 800px; min-height: 800px; margin-top: 120px; transition: padding 0.3s ease; overflow: hidden; display: flex; align-items: center; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-bg-img { 
  position: absolute; 
  top: -20%;
  left: 0;
  right: 0;
  bottom: -20%;
  width: 100%; 
  height: 140%; 
  object-fit: cover; 
  object-position: center center; 
  filter: brightness(0.9) contrast(1.1); 
  transform: none; 
  will-change: transform;
}

/* Mobile hero background image styling */
@media (max-width: 1100px) {
  .hero-bg-img {
    height: 140%;
    top: -20%;
    bottom: -20%;
    object-position: center center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: optimizeQuality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* Desktop hero background image styling */
@media (min-width: 1101px) {
  .hero-bg-img {
    height: 140%;
    top: -20%;
    bottom: -20%;
    object-position: center center;
  }
}
.hero-bg-img { content-visibility:auto; contain-intrinsic-size: 100vw 80vh; image-rendering: -webkit-optimize-contrast; image-rendering: optimizeQuality; }

/* Hero-slider (beheer > Hero): slides liggen op elkaar en faden over.
   Met één slide of zonder JavaScript blijft gewoon de eerste zichtbaar. */
[data-hero-slider] .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
[data-hero-slider] .hero-slide.is-actief { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-hero-slider] .hero-slide { transition: none; }
}
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.3)); pointer-events: none; z-index: 1; }

.hero .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; 
  z-index: 2;
  height: 100%;
  max-width: min(1400px, 94vw);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 1101px) {
  /* Ensure nav-right stays flex on desktop regardless of .only-desktop default */
  .nav-right.only-desktop { 
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  
  /* Desktop hero - fixed height */
  .hero { 
    height: 800px;
    min-height: 800px;
  }
}

/* ========================================
   HOME PAGE - HERO TEXT
   ======================================== */
.home-hero-text { 
  max-width: 100%; 
  padding-top: 16px; 
  text-align: left; 
  flex: 1; 
}
.hero-card {
  max-width: 320px;
  width: clamp(280px, 20vw, 320px);
  justify-self: start;
}

/* Desktop hero card: fine-tune heading spacing/size separately */
.hero-card-desktop h3 {
  font-size: 28px;
  margin: 0 0 10px;
}
.hero-card-desktop .hero-grid { margin-top: 12px; }
.hero-card-desktop .hero-chip strong { font-size: 17px; }

.eyebrow {
  font-weight: 700;
  color: #FAFAFF;
  background: rgba(200,169,81,.15);
  border: 1px solid rgba(200,169,81,.5);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.headline {
  font-family: "Inter", "Inter Fallback", sans-serif;
  color: #FAFAFF;
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.35;
  letter-spacing: -0.3px;
  margin: 0 0 24px;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  text-wrap: balance;
}

.headline .accent, .headline .accent::after { all: unset; }

.subhead {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 17px);
  max-width: 80ch;
  line-height: 1.65;
  margin: 0 0 28px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  text-wrap: balance;
}

.hero-cta {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  transform: none;
  filter: brightness(1.06);
}

.btn-primary {
  background: var(--gold-500);
  color: #FAFAFF;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.btn-primary:hover {
  transform: translateY(1px);
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(206, 168, 80, 0.2);
}

.btn-outline {
  background: #FAFAFF;
  color: var(--green-900);
  border-color: var(--green-900);
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.btn-outline:hover { filter: brightness(1.06); }

.hero .btn-primary {
  background: var(--red-700);
  color: #FAFAFF;
  border-color: transparent;

  transform: translateY(-1px);
  filter: brightness(.98);
}
.hero .btn-primary:hover {
  transform: translateY(1px);
  filter: brightness(1.06);
}
.hero .btn-outline {
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.14));
  color: #FAFAFF;
  border-color: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
.hero .btn-outline:hover {
  filter: brightness(1.06);
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.18));
}

section#contact .btn-primary {
  background: var(--gold-500);
  color: #FAFAFF;
  border-color: transparent;
  transform: translateY(-1px);
  filter: brightness(.98);
}
section#contact .btn-primary:hover,
section#contact .btn-primary:focus-visible {
  transform: translateY(1px);
  filter: brightness(1.06);
}

.btn-accent {
  background: var(--green-700);
  color: #FAFAFF;
  border-radius: 6px;
}

.btn-accent:hover { filter: brightness(1.06); transform: translateY(1px); }

header nav .btn-accent:hover {
  filter: brightness(1.06);
  transform: translateY(1px);
  color: #FAFAFF;
}

header nav .btn-accent {
  background: var(--green-700);
  color: #FAFAFF;
  border: 1px solid transparent;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  height: auto;
  transform: none;
  filter: brightness(.98);
  box-sizing: border-box;
}
header nav .btn-accent:hover,
header nav .btn-accent:focus-visible {
  background: var(--green-700);
  transform: none;
  filter: brightness(1.06);
  box-shadow: none;
}

.btn:focus-visible,
.cta:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(206, 168, 80, 0.25);
}

.hero-card {
  background: rgba(250, 250, 255, 0.98);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  padding: 32px;
  border: 1px solid rgba(37, 45, 39, 0.08);
  position: relative;
  font-size: 0.95rem;
}

.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold-500);
}

.hero-card h3 {
  font-family: "Inter", "Inter Fallback", sans-serif;
  margin: 0 0 20px;
  color: var(--green-900);
  font-size: 22px;
  text-align: left;
  font-weight: 600;
  letter-spacing: -0.1px;
  position: relative;
  white-space: nowrap;
  hyphens: none;
  display: block;
  width: 100%;
  text-wrap: nowrap;
}

.hero-card h3::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  transform: none;
  width: 32px;
  height: 2px;
  background: var(--gold-500);
  border-radius: 6px;
}

/* Ensure content sits clearly below the heading in hero cards */
.hero .hero-card .hero-grid { margin-top: 24px; }

.hero-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 16px 20px; 
  align-items: start; 
  --chip-label-col: max-content; 
}

.hero-chip { 
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 0; 
  background: none; 
  border: none; 
  text-align: left; 
  font-size: 14px; 
  line-height: 1.35; 
  color: var(--ink); 
  transition: all 0.3s ease; 
  position: relative; 
}

.hero-chip::before { display: none; }

.chip-label { 
  font-weight: 800; 
  color: var(--green-900); 
  white-space: normal;
  letter-spacing: .2px;
}

.chip-label::after { 
  content: ':'; 
  margin-left: 4px; 
  opacity: .6; 
}

.hero-chip strong {
  color: var(--green-700);
  font-weight: 700;
  font-size: 16px;
  white-space: normal; 
  word-break: break-word;
  overflow-wrap: break-word; 
  flex: 1;
  min-width: 0;
  margin-left: 0;
  padding-left: 16px;
  position: relative;
  line-height: 1.45;
}

.hero-chip strong::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-500);
  font-weight: 400;
  font-size: 14px;
}

.hero-chip:hover {
  transform: translateX(6px);
}

.hero-chip:hover::before { display: none; }

.hero-chip:hover strong {
  color: var(--green-800);
}

.hero-card a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}

@media (max-width: 1100px) {
  /* Mobiele hero: tekst verticaal gecentreerd, met ruimte bovenaan zodat hij
     nooit onder de vaste header valt. Hoogte = één schermhoogte. */
  .hero .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 88px;
    padding-bottom: 40px;
  }
  .hero {
    height: 100svh;
    min-height: 560px;
  }
  .home-hero-text { max-width: 100%; flex: 0 0 auto; }

  .hero-card {
    padding: clamp(24px, 4vw, 32px);
  }

  .hero-card h3 { font-size: 20px; margin-bottom: 16px; font-weight: 600; }

  .hero-grid { 
    grid-template-columns: 1fr; 
    gap: 16px; 
  }

  .hero-chip { font-size: 14px; }
  
  .chip-label { white-space: normal; font-size: 13px; color: var(--green-900); }
  .hero-chip strong { font-size: 15px; }

  /* When the card moves outside the hero on mobile, match other cards' full width */
  #kerngegevens .hero-card { max-width: none; width: 100%; margin: 0; }
  #kerngegevens .hero-grid { grid-template-columns: 1fr; }
  /* Reduce vertical spacing around the card in the mobile section */
  #kerngegevens.section-gold { padding-top: 48px; padding-bottom: 48px; }
}

/* Tablet styles */
@media (max-width: 1200px) and (min-width: 901px) {
  .hero-grid { 
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
    gap: 14px 20px; 
  }
  
  .hero-chip {
    font-size: 14px;
    padding: 6px 0;
  }
  
  .chip-label {
    font-size: 13px;
  }
  
  .hero-chip strong {
    font-size: 15px;
  }
}

/* Large screens: ensure optimal layout */
@media (min-width: 1201px) {
  .hero-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
  
  .hero-chip {
    gap: 2px;
  }
  
  .chip-label {
    min-width: fit-content;
  }
}

section {
  padding: 80px 0;
}

.section-alt {
  background:
    radial-gradient(1000px 420px at 100% 0, rgba(83, 102, 87, 0.06), rgba(83, 102, 87, 0) 60%),
    radial-gradient(900px 360px at 0 100%, rgba(206, 168, 80, 0.05), rgba(206, 168, 80, 0) 55%),
    linear-gradient(180deg, rgba(37, 45, 39, 0.04), rgba(37, 45, 39, 0) 60%),
    var(--section-pattern);
  background-size: auto, auto, auto, var(--section-pattern-size);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

#about.section-alt { --section-pattern: var(--pattern-wood-fine); }
#producten.section-alt {
  background: var(--warm-50);
  padding: 80px 0;
  position: relative;
}

#producten.section-alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('assets/patterns/needles.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

#producten.section-alt .container {
  position: relative;
  z-index: 2;
}
#media.section-alt {
  --section-pattern: var(--pattern-rings);
  --section-pattern-size: cover;

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 100% 0, 0 100%, 50% 0, 50% 50%;
}

#faq.section-alt {
  background:
    radial-gradient(1000px 420px at 100% 0, rgba(83, 102, 87, 0.08), rgba(83, 102, 87, 0) 60%),
    radial-gradient(900px 360px at 0 100%, rgba(206, 168, 80, 0.06), rgba(206, 168, 80, 0) 55%),
    linear-gradient(180deg, rgba(37, 45, 39, 0.06), rgba(37, 45, 39, 0) 60%) !important;
  background-size: auto, auto, auto !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: 100% 0, 0 100%, 50% 0 !important;
}

/* ========================================
   GENERIC SECTION TITLES
   ======================================== */
.section-title {
  font-family: "Inter", "Inter Fallback", sans-serif;
  color: var(--green-900);
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 20px;
  line-height: 1.2;
}

h1, h2 {
  position: relative;
  margin-bottom: 16px;
}

.card h1, .card h2,
.panel h1, .panel h2 {
  margin-bottom: 20px;
}

h1::after, h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 56px;
  height: 3px;
  background: var(--gold-500);
  border-radius: 6px;
  transform: scaleX(1);
  transform-origin: left;
  opacity: 1;
  transition: transform .28s ease, opacity .28s ease;
}

/* Center the line when text is centered */
.cta-content h1::after,
.cta-content h2::after,
.cta-hero h1::after,
.cta-hero h2::after,
.gallery-hero-title::after,
.section-head h1::after,
.section-head h2::after,
.shead h1::after,
.shead h2::after,
.page-header h1::after,
.page-header h2::after,
[style*="text-align: center"] h1::after,
[style*="text-align: center"] h2::after {
  left: 50%;
  transform: translateX(-50%) scaleX(1);
  transform-origin: center;
}

/* Also center for elements with text-align: center class or parent */
.text-center h1::after,
.text-center h2::after,
.gallery-hero-title::after {
  left: 50%;
  transform: translateX(-50%) scaleX(1);
  transform-origin: center;
}

/* Reveal effects removed - content now visible by default */

/* ========================================
   GENERIC COMPONENT STYLES
   ======================================== */

/* ========================================
   GENERIC BUTTON COMPONENT
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
  cursor: pointer;
  font-size: 16px;
  letter-spacing: 0.025em;
}

.btn:hover,
.btn:focus-visible {
  transform: none;
  filter: brightness(1.06);
}

.btn-primary {
  background: var(--gold-500);
  color: #FAFAFF;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.btn-primary:hover {
  transform: translateY(1px);
  filter: brightness(1.05);
  box-shadow: 0 2px 8px rgba(206, 168, 80, 0.2);
}

.btn-outline {
  background: #FAFAFF;
  color: var(--green-900);
  border-color: var(--green-900);
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.btn-outline:hover { 
  filter: brightness(1.06);
  transform: translateY(1px);
}

.btn-accent {
  background: var(--green-700);
  color: #FAFAFF;
  border-radius: 6px;
}

.btn-accent:hover { 
  filter: brightness(1.06); 
  transform: none; 
}

/* Button variants for different contexts */
.btn-hero {
  background: var(--red-700);
  color: #FAFAFF;
  border-color: transparent;
  transform: translateY(-1px);
  filter: brightness(.98);
}

.btn-hero:hover {
  transform: translateY(1px);
  filter: brightness(1.06);
}

.btn-hero-outline {
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.14));
  color: #FAFAFF;
  border-color: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

.btn-hero-outline:hover {
  filter: brightness(1.06);
  transform: translateY(1px);
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.18));
}

/* ========================================
   GENERIC SUBTITLE COMPONENT
   ======================================== */
.subtitle {
  font-size: 1.4rem;
  color: #4B5563;
  margin-bottom: 32px;
  font-weight: 500;
  line-height: 1.5;
}

.subtitle-hero {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 17px);
  max-width: 80ch;
  line-height: 1.65;
  margin: 0 0 28px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  text-wrap: balance;
}

.subtitle-dark {
  color: rgba(250, 250, 255, 0.8);
}

/* ========================================
   GENERIC LEAD TEXT COMPONENT
   ======================================== */
.lead-text {
  color: #1f2937;
  font-size: 18px;
  margin: 0 0 24px;
  line-height: 1.6;
}

.lead-text-hero {
  color: #FAFAFF;
  font-weight: 500;
  font-size: 17px;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  line-height: 1.6;
}

.lead-text-dark {
  color: rgba(250, 250, 255, 0.95);
  font-size: 20px;
  margin-bottom: 40px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  line-height: 1.6;
}

/* ========================================
   GENERIC MEDIA CARD COMPONENT
   ======================================== */
.media-card {
  background: #FAFAFF;
  border-radius: 6px;
  border: 1px solid #eef0ea;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .36s ease;
  will-change: transform, box-shadow;
  position: relative;
}

.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(31,61,43,.18);
}

.media-card-image {
  height: 360px;
  background: linear-gradient(180deg, rgba(31,61,43,.24), rgba(31,61,43,.10)),
              var(--photo, linear-gradient(120deg, #536657, #252D27));
  background-size: cover, cover;
  background-position: center, center;
  transition: transform .44s cubic-bezier(.22,1,.36,1), filter .44s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.media-card:hover .media-card-image {
  transform: scale(1.04);
}

.media-card-body {
  padding: var(--space-5);
  position: relative;
}

.media-card h2,
.media-card h3 {
  margin: 0 0 6px;
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-weight: 600;
  color: var(--green-700);
  line-height: 1.3;
}

.media-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-900);
}

.media-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green-700);
}

.media-card .meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px;
}

.media-card p {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.media-card .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(200,169,81,0.62) 0%, rgba(200,169,81,0.28) 100%);
  border: 1px solid rgba(200,169,81,0.55);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  color: var(--green-900);
  text-shadow: 0 1px 1px rgba(255,255,255,.35);
  box-shadow: 0 8px 22px -12px rgba(200,169,81,.35);
}

/* Media card variants */
.media-card-alt {
  background: #FAFAFF;
  border-radius: 6px;
  border: 1px solid #eef0ea;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .36s ease;
  will-change: transform, box-shadow;
  position: relative;
}

.media-card-alt:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgba(31,61,43,.18);
}

.media-card-alt .media-card-image {
  height: 360px;
  background: linear-gradient(180deg, rgba(31,61,43,.24), rgba(31,61,43,.10)),
              var(--photo, linear-gradient(120deg, #536657, #252D27));
  background-size: cover, cover;
  background-position: center, center;
  transition: transform .44s cubic-bezier(.22,1,.36,1), filter .44s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

.media-card-alt:hover .media-card-image {
  transform: scale(1.04);
}

.media-card-alt .media-card-body {
  padding: var(--space-5);
}

.handwritten {
  font-family: "Homemade Apple", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 1.15em;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.98);
  display: inline-block;
  line-height: 1.4;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.panel {
  background: #FAFAFF;
  border-radius: 6px;
  padding: var(--space-6);
  border: 1px solid #eef0ea;
  box-shadow: var(--shadow-sm);
  overflow: visible;
}

.panel-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--green-700) 100%);
}

.media {
  background: linear-gradient(135deg, #f2f4ea, #e9efdf);
  border: 1px solid #e1e7d6;
  border-radius: 6px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.media.media-photo {
  background:
    linear-gradient(180deg, rgba(31,61,43,.10), rgba(31,61,43,.06)),
    var(--photo, linear-gradient(135deg, #f2f4ea, #e9efdf));
  background-size: cover, cover;
  background-position: center, center;
  min-height: 320px;
  box-shadow: 0 12px 36px -18px rgba(31,61,43,.18);
}

/* Match gallery hover/transition on collage photos */
.collage-photo { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; will-change: transform, box-shadow; }
.collage-photo:hover { transform: scale(1.1); box-shadow: 0 18px 48px -14px rgba(31,61,43,.28); z-index: 2; }

/* Subtle hover for video wrapper to feel consistent */
.media-collage .video { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; will-change: transform, box-shadow; }
.media-collage .video:hover { transform: scale(1.02); box-shadow: 0 18px 48px -14px rgba(31,61,43,.28); }

@media (max-width: 1100px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-6);
}

.card {
  background: #FAFAFF;
  border-radius: 6px;
  border: 1px solid #eef0ea;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .36s cubic-bezier(.22,1,.36,1), box-shadow .36s ease;
  will-change: transform, box-shadow;
  position: relative;
}

.card-media {
  height: 360px;
  background:
    linear-gradient(180deg, rgba(31,61,43,.24), rgba(31,61,43,.10)),
    var(--photo, linear-gradient(120deg, #536657, #252D27));
  background-size: cover, cover;
  background-position: center, center;
  transition: transform .44s cubic-bezier(.22,1,.36,1), filter .44s ease;
  will-change: transform;
}

.card:hover .card-media,
.card:focus-within .card-media { transform: scale(1.04); }

.card:hover,
.card:focus-within { transform: translateY(-4px); box-shadow: 0 14px 30px -12px rgba(31,61,43,.18); }

.card:focus-within {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.card-body {
  padding: var(--space-5);
}

.card h3 {
  margin: 0 0 6px;
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-weight: 600;
  color: var(--green-700);
}

.meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(200,169,81,0.62) 0%, rgba(200,169,81,0.28) 100%);
  border: 1px solid rgba(200,169,81,0.55);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  color: var(--green-900);
  text-shadow: 0 1px 1px rgba(255,255,255,.35);
  box-shadow: 0 8px 22px -12px rgba(200,169,81,.35);
}

.card .badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.badge-accent {
  border-color: rgba(200,169,81,0.6);
}

@media (max-width: 1000px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-5);
}

.gallery .thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 18px 48px -14px rgba(31,61,43,.28);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .gallery 
  .gallery .thumb:hover { transform: none; }
}

.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e1e7d6;
  background: #090B0A;
  box-shadow: 0 12px 40px -18px rgba(31,61,43,.25);
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media collage: video left at fixed width, two photos stacked on the right */

.media-collage .video { width: 100%; }
.collage-photos { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space-5); }
.collage-photo { aspect-ratio: 4/3; position: relative; }
.collage-photo.tall { aspect-ratio: 3/4; transform: translateY(6px); }
.collage-photo.wide { aspect-ratio: 16/10; transform: translateY(-6px); }
@media (max-width: 1200px) { .collage-photo.tall, .collage-photo.wide { transform: none; } }
@media (max-width: 1200px) {
  
  .media-collage .video { width: 100%; }
}

@media (max-width: 1100px) {
  .gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.faq-item {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: var(--space-4);
  transition: border-color 0.2s ease;
}

.faq-item:hover { 
  border-color: var(--green-600);
}

.faq-question {
  padding: var(--space-5) var(--space-6);
  font-size: 16px;
  font-weight: 600;
  color: var(--green-800);
  margin: 0;
  border-bottom: 1px solid #f3f4f6;
}

.faq-answer {
  padding: var(--space-5) var(--space-6);
  color: #374151;
  background: #ffffff;
  line-height: 1.6;
}

.faq-answer p { margin: 10px 0; font-size: 16.5px; line-height: 1.65; white-space: pre-line; }
.faq-answer strong { color: var(--green-700); font-weight: 700; }

.faq-answer ul { margin: 8px 0 0 0; padding: 0 0 0 28px; }
.faq-answer ul li { margin: 6px 0; position: relative; list-style: none; }
.faq-answer ul li::before {
  content: '✓';
  position: absolute; left: -24px; top: 0; color: var(--green-700); font-weight: 800;
}

/* Sheen effect removed for cleaner, more professional look */

@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition: none !important; }
}

.faq-question:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

section#contact {
  position: relative;
  background: var(--green-100);
  padding: 56px 0 88px;
}

.contact-head {
  max-width: 640px;
  margin-bottom: 8px;
}
.contact-head .about-hero-title { margin-bottom: 12px; }
.contact-head .lead-text { margin: 0; color: #4B5563; }

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

form .full {
  grid-column: 1/-1;
}

label {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--green-900);
  margin-bottom: 6px;
}

input, textarea, select {
  width: 100%;
  padding: 15px 14px;
  border-radius: 6px;
  border: 1px solid #E6EAD9;
  background: #FCFAF4;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
  font-size: 16px;
}

/* Alleen de native styling resetten; uiterlijk komt van .form-group input. */
input[type="tel"] {
  appearance: none;
  -webkit-appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(200,169,81,.18);
  background: #FAFAFF;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

form > div { display: flex; flex-direction: column; }

/* Bevestig pas een geldige invoer nadat de gebruiker het veld heeft bewerkt;
   lege verplichte velden blijven neutraal i.p.v. direct gekleurd. */
.form-group input:user-valid,
.form-group textarea:user-valid { border-color: #3b7f54; }

section#contact .btn-primary { width: 100%; padding: 14px 18px; }
section#contact .btn-primary:hover { filter: brightness(1.06); transform: translateY(1px); }

#formStatus { margin-top: 6px; color: var(--muted); font-size: 14px; }

#map {
  grid-column: 1 / -1;
}

#map { padding: 0 !important; border: none !important; }
#map.panel { padding: 0; border: none; }
#map-container { width: 100%; height: 460px; border-radius: var(--radius-xl); background: transparent; border: 0; box-shadow: none; overflow: hidden; }

/* Minimal markers (no box), hover scale + light shadow */
.marker, .leaflet-marker-icon
.marker .marker-badge,
.leaflet-marker-icon .marker-badge {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  transform: translateY(0);
  transition: transform .22s ease, filter .22s ease;
}
.marker .marker-badge img,
.leaflet-marker-icon .marker-badge img { width: 20px; height: 20px; display: block; filter: none; transition: filter .22s ease; }
.leaflet-marker-icon.marker:hover .marker-badge { transform: translateY(-1px) scale(1.12); }
.leaflet-marker-icon.marker:hover .marker-badge img { filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }

/* Remove any decorative tints/rings */
.marker-tree .marker-badge::after, .marker-office .marker-badge::after { content: none; }

/* Hide separate shadow element; hover shadow handled via drop-shadow above */
.marker .shadow, .leaflet-marker-icon .shadow{ display: none; }

/* Disable persistent drop-shadows on icons */
.leaflet-marker-icon.tree-marker, .leaflet-marker-icon.office-marker { filter: none; }

/* Popups in glass style */

@media (max-width: 1100px) {
  #map-container {
    height: 300px;
  }
}

/* ============================== FOOTER ============================== */
footer {
  background: #1F3D2B;
  color: #F0EAD9;
  padding: 64px 0 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  font-size: 14px;
  /* Reveal-effect: sticky i.p.v. fixed. De footer blijft in de
     documentflow (pagina-hoogte klopt vanzelf, geen JS-marge nodig) en
     plakt aan de onderrand achter de content (.page-reveal, z-index 2)
     tot hij bij het uitscrollen tevoorschijn komt. Past de footer niet
     in de viewport, dan zet script.js no-reveal-footer (zie onder). */
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* :not(.btn):not(.cta) tilt de specificiteit boven de globale
   a:not(.btn):not(.cta), die de linkkleur anders groen maakt */
footer a:not(.btn):not(.cta) {
  color: #F0EAD9;
  text-decoration: none;
  transition: color .18s ease;
}
footer a:not(.btn):not(.cta):hover,
footer a:not(.btn):not(.cta):focus-visible { color: var(--gold-500); }

/* Bovenste rij: merkblok links, linkkolommen rechts */
.footer-top {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2.4fr;
  gap: 48px;
  padding-bottom: 40px;
}

.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-wordmark {
  margin: 0;
  font-family: "Raleway", "Inter", "Inter Fallback", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .01em;
  color: #fff;
}
.footer-brand-sub {
  margin: 0;
  max-width: 240px;
  font-size: 13px;
  line-height: 1.5;
  color: #BCB4A0;
}

/* Keurmerk-vermelding onder de tagline (logo volgt zodra het bestand er is) */
.footer-certifications {
  margin: 0;
  max-width: 240px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* Linkkolommen */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.footer-column h3 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column li { margin-bottom: 10px; }
footer .footer-column a:not(.btn):not(.cta),
footer .footer-column span {
  font-size: 14px;
  color: #E6DEC9;
  transition: color .18s ease;
}
footer .footer-column a:not(.btn):not(.cta):hover,
footer .footer-column a:not(.btn):not(.cta):focus-visible { color: #fff; }

footer .contact-info p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #E6DEC9;
}
footer .contact-info a:not(.btn) { color: #E6DEC9; }
footer .contact-info a:not(.btn):hover { color: #fff; text-decoration: underline; }

/* Social-icons */
.social-links {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  gap: 10px;
}
footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(233, 227, 210, 0.22);
  color: #E9E3D2;
  font-size: 15px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
footer .social-links a:hover {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #1F3D2B;
  transform: translateY(-2px);
}

/* Onderbalk: copyright + countdown */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(233, 227, 210, 0.14);
}
.footer-copyright {
  margin: 0;
  font-size: 13px;
  color: #BCB4A0;
}

/* Kerst-countdown, geïntegreerd in de footer */
.xmas-countdown {
  position: relative;
  display: flex;
  align-items: center;
}
.xmas-countdown .xc-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(206, 168, 80, 0.35);
}
.xmas-countdown .xc-tree {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--gold-500);
}
.xmas-countdown .xc-segs { display: flex; align-items: center; gap: 12px; }
.xmas-countdown .xc-seg {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  min-width: 30px;
}
.xmas-countdown .xc-num {
  font: 700 16px/1 "Inter", "Inter Fallback", sans-serif;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
/* Dagen kan 3 cijfers zijn; ruimte reserveren zodat de pill niet
   verspringt wanneer JS de placeholder "00" vervangt. */
.xmas-countdown #xcDays {
  min-width: 3ch;
  text-align: center;
}
.xmas-countdown .xc-lbl {
  margin-top: 3px;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.xmas-countdown .xc-sep { width: 1px; height: 22px; background: rgba(233, 227, 210, 0.18); }
.xmas-countdown .xc-spark { display: none !important; }

/* Responsief */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
}
@media (max-width: 768px) {
  footer { padding: 44px 0 24px; }
  .footer-top { padding-bottom: 28px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-column h3 { margin-bottom: 12px; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* Reveal-effect uit wanneer de footer hoger is dan de viewport (class
   gezet door script.js), anders blijft de bovenkant permanent buiten
   beeld. De footer gedraagt zich dan als gewone statische footer. */
.no-reveal-footer footer {
  position: static;
}

/* Mobiel: logolint en hamburger schuiven uit beeld bij omlaag scrollen
   en komen terug bij omhoog scrollen (class nav-hidden via script.js).
   Zo bedekken ze de content (met name de footer) niet permanent. */
@media (max-width: 1100px) {
  .nav .brand,
  .menu-toggle {
    transition: transform .3s ease, opacity .3s ease;
  }
  html.nav-hidden .nav .brand {
    transform: translateY(calc(-100% - 24px)) !important;
    opacity: 0;
    pointer-events: none;
  }
  html.nav-hidden body:not(.menu-open) .menu-toggle {
    transform: translateY(calc(-100% - 40px));
    opacity: 0;
    pointer-events: none;
  }
}

.panel { position: relative; z-index: 2; }

::selection {
  background: rgba(206, 168, 80, 0.28);
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-i18n] {
  transition: opacity .4s ease, transform .4s ease, filter .4s ease;
  will-change: opacity, transform, filter;
}

body.i18n-animating.i18n-phase-out [data-i18n] {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px) saturate(92%);
  transition-delay: var(--i18n-delay-out, 0ms);
}

body.i18n-animating.i18n-phase-in [data-i18n] {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: var(--i18n-delay-in, 0ms);
  transition-duration: .52s;
  transition-timing-function: cubic-bezier(.22,1,.36,1);
}

/* ========================================
   FAQ PAGE ENHANCED STYLING
   ======================================== */

/* FAQ Hero Section */
/* ========================================
   FAQ PAGE - HERO SECTION
   ======================================== */
.faq-hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 0;
}

/* ========================================
   FAQ PAGE - HERO CONTENT
   ======================================== */
.faq-hero-content {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
  min-height: 600px;
  padding-top: 0;
}

.faq-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 60px;
}

.faq-hero-visual {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}

.faq-hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--green-800);
  margin-bottom: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.faq-hero-subtitle {
  font-size: 1.4rem;
  color: #4B5563;
  margin-bottom: 32px;
  font-weight: 500;
  line-height: 1.5;
}

.faq-hero-description {
  margin-top: 0;
}

.faq-hero-description p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 20px;
  max-width: 100%;
}

/* ========================================
   FAQ SIMPLE LAYOUT
   ======================================== */
.faq-simple {
  max-width: 100%;
  margin: 40px 0 0;
  padding: 0;
}

.faq-simple p {
  margin-bottom: 16px;
  line-height: 1.6;
  color: #374151;
  font-size: 1rem;
}

.faq-simple p strong {
  color: var(--green-800);
  font-weight: 700;
  font-size: 1.2rem;
  display: block;
  margin-bottom: 12px;
  margin-top: 32px;
  line-height: 1.4;
}

.faq-simple p strong:first-child {
  margin-top: 0;
}

/* FAQ Categories Layout */
.faq-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 64px;
}

.faq-category {
  background: #FAFAFF;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(31, 61, 43, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-category:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.faq-category-header {
  background: linear-gradient(135deg, var(--green-800), var(--green-700));
  padding: 32px;
  color: #FAFAFF;
  display: flex;
  align-items: center;
  gap: 20px;
}

.faq-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(250, 250, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(250, 250, 255, 0.2);
}

.faq-category-icon i {
  font-size: 24px;
  color: #FAFAFF;
}

.faq-category-title {
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #FAFAFF;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.faq-category-items {
  padding: 0;
}

/* Enhanced FAQ Items */
.faq-item {
  background: #ffffff;
  border: none;
  border-bottom: 1px solid rgba(31, 61, 43, 0.1);
  margin: 0;
  transition: all 0.3s ease;
  position: relative;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item:hover {
  background: rgba(31, 61, 43, 0.02);
  border-color: var(--green-600);
}

.faq-question-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-question-wrapper:hover {
  background: rgba(31, 61, 43, 0.03);
}

.faq-question {
  font-family: "Inter", "Inter Fallback", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--green-800);
  margin: 0;
  flex: 1;
  line-height: 1.5;
}

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--green-100);
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.faq-icon i {
  font-size: 14px;
  color: var(--green-700);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  background: var(--green-600);
  transform: rotate(180deg);
}

.faq-item.active .faq-icon i {
  color: #FAFAFF;
}

.faq-answer p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-line;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer strong {
  color: var(--green-800);
  font-weight: 700;
}

.faq-answer ul {
  margin: 16px 0;
  padding: 0 0 0 24px;
}

.faq-answer ul li {
  margin: 8px 0;
  position: relative;
  list-style: none;
}

.faq-answer ul li::before {
  content: '✓';
  position: absolute;
  left: -24px;
  top: 0;
  color: var(--green-600);
  font-weight: 800;
  font-size: 14px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .faq-hero {
    padding: 40px 0;
  }
  
  .faq-hero-content {
    grid-template-columns: 1fr;
    gap: 60px;
    min-height: auto;
  }
  
  .faq-hero-text {
    padding-right: 0;
    text-align: center;
  }
  
  .faq-hero-title {
    font-size: 3rem;
  }
  
  .faq-hero-description p {
    max-width: 100%;
  }
  
  .faq-categories {
    gap: 32px;
    margin-top: 48px;
  }
  
  .faq-category-header {
    padding: 24px;
  }
  
  .faq-category-title {
    font-size: 24px;
  }
  
  .faq-question-wrapper {
    padding: 20px 24px;
  }
  
  .faq-question {
    font-size: 16px;
  }
  
  .faq-answer {
    padding: 0 24px 20px;
  }
  
  .faq-item.active .faq-answer {
    padding: 0 24px 20px;
  }
}

@media (max-width: 768px) {
  .faq-hero {
    padding: 30px 0;
  }
  
  .faq-hero-content {
    gap: 40px;
  }
  
  .faq-hero-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }
  
  .faq-hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 24px;
  }
  
  .faq-hero-description p {
    font-size: 1rem;
    margin-bottom: 16px;
  }
  
  .faq-categories {
    gap: 24px;
    margin-top: 32px;
  }
  
  .faq-category-header {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .faq-category-icon {
    width: 50px;
    height: 50px;
  }
  
  .faq-category-icon i {
    font-size: 20px;
  }
  
  .faq-category-title {
    font-size: 20px;
  }
  
  .faq-question-wrapper {
    padding: 16px 20px;
  }
  
  .faq-question {
    font-size: 15px;
  }
  
  .faq-answer {
    padding: 0 20px 16px;
  }
  
  .faq-item.active .faq-answer {
    padding: 0 20px 16px;
  }
}

/* Reveal animations removed */

@media (prefers-reduced-motion: reduce) {
  [data-i18n] { transition: none !important; filter: none !important; transform: none !important; }
  body.i18n-animating [data-i18n] { opacity: 1 !important; }
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reveal effects removed - content now visible by default */

/* Reveal animation delays removed - content now visible by default */

/* Reveal effects removed - content now visible by default */

/* ============================================================================
   LOGOS CAROUSEL - DESKTOP AND MOBILE LAYOUTS
   ============================================================================ */

/* Desktop carousel container */
.carousel-container.only-desktop {
  position: relative;
  width: 100vw;
  height: 160px;
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
  padding: 0 2rem;
}

/* Mobile carousel container */
.carousel-container.only-mobile {
  position: relative;
  width: 100vw;
  height: 280px; /* Higher for two rows */
  overflow: hidden;
  margin-left: calc(-50vw + 50%);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Side fade overlays for desktop */
.carousel-container.only-desktop::before,
.carousel-container.only-desktop::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

/* Mobile carousel rows */

.carousel-track:hover {
  animation-play-state: paused;
}

/* Different animation speeds for mobile rows */
.carousel-row.row-top 

.carousel-row.row-bottom 

.carousel-track img {
  height: 80px !important; /* Fixed height - 2x larger */
  width: auto !important; /* Auto width to maintain aspect ratio */
  object-fit: contain !important;
  filter: grayscale(100%) !important;
  opacity: 0.7 !important;
  transition: all 0.3s ease !important;
  max-width: 240px !important; /* Max width - 2x larger */
  mix-blend-mode: multiply !important;
}

.carousel-track img:hover {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
  transform: scale(1.5) !important;
  mix-blend-mode: normal !important;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .carousel-container.only-mobile {
    height: 240px; /* Adjusted height for mobile */
    padding: 0;
  }

  .carousel-track img {
    height: 60px !important; /* Smaller height on mobile */
    width: auto !important;
    filter: grayscale(100%) !important;
    max-width: 160px !important;
    mix-blend-mode: multiply !important;
  }

}

/* Country labels for business information */
.country-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6B7280;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  display: block;
}

.business-info {
  margin-top: 1.5rem;
}

.business-info p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
}

/* Logo item styling - no conflicting img rules */

/* ============================================================================
   MEDIA GRID - 3 COLUMNS WITH SQUARE PHOTOS AND LARGE VIDEO
   ============================================================================ */

.media-tile:hover {
  transform: scale(1.05);
}

.media-tile .media {
  border-radius: 6px;
  height: 100%;
  width: 100%;
  min-height: unset; /* Remove min-height to allow square aspect ratio */
  transition: box-shadow 0.3s ease;
}

.media-tile:hover .media {
  box-shadow: 0 20px 40px -10px rgba(37, 45, 39, 0.25);
}

/* Large video tile - spans 2 columns and has same height as photo cards */
.video-tile.video-large {
  grid-column: span 2;
  aspect-ratio: 2/1; /* Same as photo cards - square */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.video-tile.video-large:hover {
  transform: scale(1.05);
}

.video-tile.video-large .video {
  border-radius: 6px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  transition: box-shadow 0.3s ease;
}

.video-tile.video-large:hover .video {
  box-shadow: 0 20px 40px -10px rgba(37, 45, 39, 0.25);
}

.video-tile.video-large video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 1100px) {

  .video-tile.video-large {
    grid-column: span 2; /* Spans full width on mobile */
  }
}

@media (max-width: 480px) {

  .media-tile .media {
    border-radius: 6px;
  }
  
  .video-tile.video-large .video {
    border-radius: 6px;
  }
}

/* ============================================================================
   IMAGE LOADING STATES AND HOVER FIXES
   ============================================================================ */

/* Photo loading states - only for media strip photos */
.media-strip .media-photo {
  position: relative;
  background: linear-gradient(120deg, #f0f0f0, #e0e0e0);
  background-size: 200% 200%;
  animation: loading-shimmer 1.5s ease-in-out infinite;
}

.media-strip .media-photo.photo-loaded {
  animation: none;
  background: var(--photo, linear-gradient(120deg, #536657, #252D27));
  background-size: cover;
  background-position: center;
}

/* Offerings Hero variant: copy about-us background */
#producten-hero.section-light-alt {
  background: linear-gradient(135deg, #FEFCF8 0%, #F9F6F0 100%);
}

#producten-hero.section-light-alt::before {
  background-image: url('assets/patterns/jaarringen.svg');
  background-size: 120%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
}

/* Loading animation */
@keyframes loading-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Prevent hover flickering */

.media-tile:hover {
  transform: scale(1.05) translateZ(0);
}

/* Ensure images are stable during hover */
.media-tile .media {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Card media loading states */
.card-media {
  position: relative;
  background: linear-gradient(120deg, #f0f0f0, #e0e0e0);
  background-size: 200% 200%;
  animation: loading-shimmer 1.5s ease-in-out infinite;
}

.card-media.photo-loaded {
  animation: none;
  background: var(--photo, linear-gradient(120deg, #536657, #252D27));
  background-size: cover;
  background-position: center;
}

/* Prevent card hover flickering */
.card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.card:hover {
  transform: translateY(-4px) translateZ(0);
}

/* About section photo loading - more specific to avoid conflicts */
.media.media-photo[data-photo] {
  /* Keep original styling, no loading animation for about section */
  background: var(--photo, linear-gradient(135deg, #f2f4ea, #e9efdf));
  background-size: cover;
  background-position: center;
}

.media.media-photo[data-photo].photo-loaded {
  /* Same as above, no change needed */
  background: var(--photo, linear-gradient(135deg, #f2f4ea, #e9efdf));
  background-size: cover;
  background-position: center;
}

/* Offerings page - calm, professional cards (no hover or animations) */
#producten .card,
#producten .card-media {
  transition: none !important;
}

#producten .card {
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default;
}

#producten .card:hover,
#producten .card:focus-within {
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-color: #e5e7eb !important;
}

#producten .card-media {
  transform: none !important;
  animation: none !important;
  background: var(--photo, #e5e7eb);
  background-size: cover;
  background-position: center;
}

#producten .card:hover .card-media,
#producten .card:focus-within .card-media {
  transform: none !important;
}

#producten .badge {
  box-shadow: none;
}


/* =====================================================================
   STAM-REDESIGN (2026-07-19): ontwerplaag bovenop de bestaande stijlen.
   Alleen vormgeving; inhoud en markup blijven gelijk. Zie
   docs/identiteiten/6-stam.html voor het referentie-ontwerp en
   docs/worklog.md voor de context. Tokens: radius 6, schaduw sm/md,
   goud alleen als accent (active-state, kickers, footer-koppen).
   ===================================================================== */

/* ---------- HEADER ----------
   Altijd solid donkergroen (witte tekst, goede leesbaarheid); alléén
   bovenaan de homepage transparant over de hero. Geen gouden randlijn
   meer: goud alleen als active-onderstreping. */
header {
  background: var(--green-900);
  border-bottom: none;
  box-shadow: 0 1px 2px rgba(9,11,10,.18);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
header::after { display: none; }

/* Bovenaan de homepage: volledig transparant over de hero-foto.
   De hairline hoort alleen bij de desktopbalk (mobiel heeft geen balk). */
header.transparent {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
@media (min-width: 1101px) {
  header.transparent {
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
}
/* Bij scrollen (homepage): terug naar solid groen, met licht glas-gevoel */
header.glass {
  background: rgba(37,45,39,.92);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
header.solid {
  background: var(--green-900);
  border-bottom: none;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}

/* Active pagina: gouden onderstreping (hover blijft wit) */
header nav a:not(.cta):not(.btn).active::after,
header nav a:not(.cta):not(.btn)[aria-current="true"]::after {
  background: var(--gold-500);
}

/* Logopaneel: hangt over de hero; iets meer schaduw op de foto */
.brand-logo-horizontal {
  border: 0;
  box-shadow: 0 6px 20px rgba(9,11,10,.14);
}

/* Navbalk zelf slanker maken zonder het logo te verkleinen: het logolint
   (~150px, incl. padding) blijft ongewijzigd en hangt dus verder door onder
   een lagere balk: een groot "insigne" op een rustige, dunne balk in plaats
   van een hoge balk die om het logo heen is opgerekt. Alleen desktop; de
   mobiele nav heeft een eigen, al afgestemde logo-/hamburgerpositionering. */
@media (min-width: 1101px) {
  .nav,
  header.transparent .nav,
  header.glass .nav,
  header.solid .nav {
    height: 84px;
    min-height: 84px;
  }
}

/* ---------- HERO (homepage): viewport-vullend, onder de header door ---------- */
body.homepage .hero {
  margin-top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
}

/* Scroll-indicator onderin de hero: gecentreerd pijltje naar de content. */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(20, 26, 21, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 16px;
  transition: background 0.15s ease, transform 0.15s ease;
  animation: hero-scroll-nudge 2.4s ease-in-out infinite;
}
.hero-scroll:hover {
  background: rgba(20, 26, 21, 0.55);
  color: #fff;
}
@keyframes hero-scroll-nudge {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { animation: none; }
}
body.homepage .hero::before {
  /* Drie lagen, bewust licht gehouden zodat de foto vrolijk blijft ogen:
     - een zachte band bovenaan voor de leesbaarheid van de transparante header
     - een band onderaan die het verankerde tekstblok (zie .hero .inner) draagt
     - een subtiele links-naar-rechts gradiënt zodat lopende tekst goed leest */
  background:
    linear-gradient(180deg,
      rgba(20,26,21,.40) 0%,
      rgba(20,26,21,.18) 130px,
      rgba(20,26,21,0) 230px),
    linear-gradient(0deg,
      rgba(15,20,16,.60) 0%,
      rgba(15,20,16,.32) 32%,
      rgba(15,20,16,0) 62%),
    linear-gradient(90deg,
      rgba(20,26,21,.42) 0%,
      rgba(20,26,21,.22) 44%,
      rgba(20,26,21,.02) 72%);
}
/* Desktop: tekstblok onderin de hero verankeren (rij-layout, dus flex-end =
   onderkant). Op mobiel is de hero een kolom en wordt de tekst gecentreerd -
   zie het ≤1100px-blok hierboven. */
@media (min-width: 1101px) {
  body.homepage .hero .inner {
    align-items: flex-end;
  }
  body.homepage .home-hero-text {
    padding-top: 0;
    padding-bottom: clamp(56px, 9vh, 104px);
  }
}

/* Taalwisselaar: subtiel glaseffect zodra de header transparant over de
   hero-foto valt, zodat hij ook op lichte lucht/foto's goed afsteekt. */
header.transparent .lang-dropdown-trigger {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
}
header.transparent .lang-dropdown-trigger:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.55);
}
.home-hero-text { max-width: 880px; }
.headline {
  font-weight: 600;
  font-size: clamp(32px, 3.9vw, 50px);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.subhead {
  font-size: 17px;
  color: rgba(255,255,255,.88);
  max-width: 64ch;
}

/* ---------- KNOPPEN: kalmer, tokens (radius 6, milde hover) ---------- */
.btn, .cta {
  border-radius: 6px;
  letter-spacing: 0;
}
.cta-hero .btn,
.hero .btn {
  box-shadow: none;
  letter-spacing: 0;
  padding: 15px 32px;
  transition: filter .15s ease, transform .15s ease, background .15s ease, border-color .15s ease;
}
.cta-hero .btn:hover,
.hero .btn:hover {
  transform: translateY(-1px);
  box-shadow: none;
}
.cta-hero .btn-primary,
.hero .btn-primary {
  background: var(--red-700);
  color: #FAFAFF;
  transform: none;
  filter: none;
}
.cta-hero .btn-primary:hover,
.hero .btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.hero .btn-outline,
.cta-hero .btn-outline {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero .btn-outline:hover,
.cta-hero .btn-outline:hover {
  background: rgba(255,255,255,.16);
  border-color: #fff;
  transform: translateY(-1px);
  filter: none;
}

/* ---------- STATS-BAND: vlak met hairlines i.p.v. glazen tegels ----------
   Responsief: 3 kolommen -> 1 kolom (<=600px). Maten schalen mee via
   clamp(); de hairlines volgen de gridvorm per breakpoint. */
.stats-hero::before { display: none; }
.stats-grid-compact { gap: 0; }
.stat-item-compact {
  flex-direction: row;
  text-align: left;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  padding: clamp(22px, 3.4vw, 40px) clamp(14px, 2.6vw, 32px);
  min-width: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.18);
  border-radius: 0;
  box-shadow: none;
}
.stat-item-compact:first-child { border-left: 0; }
.stat-item-compact:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  border-color: rgba(255,255,255,.18);
}
.stat-icon {
  width: clamp(40px, 4.2vw, 48px);
  height: clamp(40px, 4.2vw, 48px);
  background: rgba(255,255,255,.12);
  border-radius: 6px;
  box-shadow: none;
}
.stat-icon i { font-size: clamp(16px, 1.8vw, 20px); }
.stat-item-compact:hover .stat-icon {
  transform: none;
  background: rgba(255,255,255,.12);
  box-shadow: none;
}
.stat-content { align-items: flex-start; min-width: 0; }
.home-stats-hero-number {
  text-shadow: none;
  font-size: clamp(24px, 2.3vw, 34px);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-stats-hero-label { text-align: left; letter-spacing: .1em; }

@media (max-width: 1024px) {
  .stats-hero { padding: 24px 0; }
  .home-stats-hero-label { font-size: 12px; }
}

@media (max-width: 600px) {
  .stats-hero { padding: 12px 0; }
  .stats-grid-compact { grid-template-columns: 1fr; }
  .stat-item-compact { border-left: 0; }
  .stat-item-compact + .stat-item-compact { border-top: 1px solid rgba(255,255,255,.18); }
  .stat-item-compact { padding: 16px 8px; }
  .home-stats-hero-number { font-size: 26px; }
}

/* ---------- FOOTER: wit logo ---------- */
.footer-logo-img {
  height: 120px;
  width: auto;
  display: block;
  align-self: flex-start; /* voorkomt oprekken in de flex-kolom (.footer-brand) */
}
@media (max-width: 768px) {
  .footer-logo-img { height: 88px; }
}

/* =====================================================================
   REVIEW-RONDE (2026-07-21): typografie-fundament & page-header.
   Eén vaste opbouw voor elke contentpagina en één consistente
   titelschaal, zodat alle pagina's als dezelfde website voelen.
   ===================================================================== */

/* Vaste titelschaal: pagina-titel > sectietitel > kaarttitel.
   Let op: de globale `header {}`-regels (vaste sitebalk) gelden voor elk
   <header>-element; hier expliciet neutraliseren voor de page-header. */
header.page-header {
  position: static;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
  z-index: auto;
  overflow: visible;
  transition: none;
}
.page-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px 40px;
  text-align: center;
}
.page-header h1 {
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--green-900);
  margin: 0 0 6px;
}
.page-header .page-lead {
  font-size: 16.5px;
  line-height: 1.65;
  color: #4B5563;
  margin: 22px 0 0;
}

/* Sectietitels overal gelijk (basis stond op 36px; herotitels op 3.5rem). */
.section-title {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 650;
}
.about-hero-title,
.gallery-hero-title,
.faq-hero-title {
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 700;
}

/* "In het kort": vier kaarten met een tekstlink onderaan. */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-4 { grid-template-columns: 1fr; } }

.grid-4 .panel {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.grid-4 .panel p { flex: 1; }

.panel-link,
.panel-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--green-600);
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
}
.panel-link i { font-size: 12px; transition: transform 0.18s ease; }
.panel-link:hover { color: var(--green-900); }
.panel-link:hover i { transform: translateX(4px); }

/* Kaarten (donkere stijl): legenda + markers passend op dark basemap. */
.map-legend {
  background: rgba(20, 26, 21, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-legend-item img {
  width: 16px;
  height: 16px;
  filter: invert(1);
}
.map-legend-blob {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle, rgba(127, 176, 105, 0.9) 0%, rgba(127, 176, 105, 0.15) 75%);
}

/* Office-badge op de donkere kaart: donker chip met licht icoon. */
#map-container .marker-office .marker-badge {
  background: rgba(20, 26, 21, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
#map-container .marker-office .marker-badge img {
  filter: invert(1);
}

/* Kwaliteitskaarten: badge in-flow + speclijst met vinkjes. */
.quality-cards .badge {
  position: static;
  display: inline-block;
  margin-bottom: 12px;
}
.quality-specs {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid #ECEEEA;
}
.quality-specs li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}
.quality-specs i {
  color: var(--green-600);
  font-size: 12px;
  margin-top: 4px;
}

/* Soorten-strip: compacte panelen. */
.species-panel h3 {
  margin-bottom: 2px;
  color: var(--green-800);
}
/* Botanische naam onder de soortkop: klein, cursief, ingetogen. */
.species-panel .species-latin {
  margin: 0 0 8px;
  font-style: italic;
  font-size: 13px;
  color: #6B7280;
}
.species-panel p {
  margin: 0;
  color: #4B5563;
  font-size: 14.5px;
}

/* Duurzaamheid: keurmerk-strip onder de blokken. */
.sustain-grid .panel { text-align: left; }
.cert-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid #ECEEEA;
}
.cert-strip-label {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #6B7280;
}
.cert-strip img {
  display: block;
  width: auto;
}
.cert-strip a:hover img { opacity: 0.85; }

/* Landingspagina "weghalen": rustige verticale stappen + fotokolom. */
.sell-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}
.steps-vertical {
  list-style: none;
  margin: 8px 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.steps-vertical li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.step-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-600);
  font-size: 17px;
}
.steps-vertical h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--green-800);
  margin: 4px 0 6px;
}
.steps-vertical p {
  margin: 0;
  font-size: 14.5px;
  color: #374151;
  line-height: 1.6;
}
.sell-photos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sell-photos img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(9, 11, 10, 0.12);
}
.sell-cta {
  max-width: 1060px;
  margin: 48px auto 0;
  text-align: center;
}
.sell-cta p { max-width: 52ch; margin: 0 auto 20px; color: #374151; }
@media (max-width: 900px) {
  .sell-grid { grid-template-columns: 1fr; }
  .sell-photos { flex-direction: row; }
  /* Naast elkaar: elk de halve breedte (width:100% per stuk zou samen
     200% zijn -> horizontale overflow) en gelijke hoogte via cover. */
  .sell-photos img {
    width: calc(50% - 10px);
    height: 240px;
    object-fit: cover;
  }
}

/* FAQ: gegroepeerde accordions op basis van <details>. */
.faq-groups {
  max-width: 860px;
  margin: 0 auto;
}
.faq-group { margin-bottom: 40px; }
.faq-group .section-title { margin-bottom: 18px; }

details.faq-item {
  background: #fff;
  border: 1px solid #E5E8E4;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
details.faq-item:hover { border-color: var(--green-600); }
details.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--green-800);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: -2px;
}
.faq-chevron {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--green-600);
  transition: transform 0.2s ease;
}
details.faq-item[open] .faq-chevron { transform: rotate(180deg); }
details.faq-item[open] summary { border-bottom: 1px solid #F0F2EF; }
details.faq-item .faq-answer {
  padding: 14px 20px 18px;
  font-size: 14.5px;
  color: #374151;
  line-height: 1.65;
}
details.faq-item .faq-answer p { margin: 0 0 10px; }
details.faq-item .faq-answer p:last-child { margin-bottom: 0; }
details.faq-item .faq-answer ul { margin: 8px 0; padding-left: 22px; }
details.faq-item .faq-answer li { margin: 4px 0; }
@media (prefers-reduced-motion: no-preference) {
  details.faq-item[open] .faq-answer {
    animation: faq-open 0.22s ease;
  }
  @keyframes faq-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Galerij met GLightbox: het masonry-item is nu de anchor om de foto. */
.gallery-grid a.glightbox {
  display: block;
  break-inside: avoid;
  margin-bottom: 32px;
  border-radius: 8px;
}
.gallery-grid a.glightbox img {
  margin-bottom: 0;
  break-inside: auto;
  cursor: zoom-in;
}
@media (max-width: 1200px) { .gallery-grid a.glightbox { margin-bottom: 28px; } }
@media (max-width: 768px)  { .gallery-grid a.glightbox { margin-bottom: 24px; } }
@media (max-width: 480px)  { .gallery-grid a.glightbox { margin-bottom: 20px; } }

/* Scroll-reveals: alleen actief als JS de klasse zet (geen verstopte
   content zonder JS); rustig infaden bij het in beeld komen. */
/* Reveals: script.js zet .reveal op alle doelen en .reveal-ready op <html>
   zodra de observer draait. Zonder JS blijft alles gewoon zichtbaar.
   Elementen animeren opnieuw bij terugscrollen (observer toggelt). */
.reveal-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}
.reveal-ready .reveal {
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   REVIEW-RONDE: footer-herindeling (Pagina's / Duurzaamheid / Gegevens)
   ============================================================ */

/* Keurmerk-logo's in de merk-kolom. Het Verband-logo is wit en kan direct
   op de donkere achtergrond; het MPS-logo is gekleurd en krijgt een wit chipje. */
.footer-certs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}
.footer-certs img { display: block; width: auto; }
.footer-certs a { opacity: .9; transition: opacity .18s ease; }
.footer-certs a:hover,
.footer-certs a:focus-visible { opacity: 1; }
.footer-cert-chip {
  background: #fff;
  border-radius: 8px;
  padding: 7px 10px;
}

/* Drie kolommen i.p.v. vier */
.footer-cols { grid-template-columns: 1.1fr 1.4fr 1.1fr; }
@media (max-width: 1024px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* Onderbalk: copyright, maker-credit en de ingang naar het webbeheer. */
.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}

.footer-credit {
  margin: 0;
  font-size: 13px;
  color: #BCB4A0;
}
.footer-credit a {
  color: #D6CFBC;
  text-decoration: none;
  border-bottom: 1px solid rgba(206, 168, 80, 0.45);
  padding-bottom: 1px;
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: #fff;
  border-bottom-color: var(--gold-500);
}
/* Het hartje in de merkkleur, met wat lucht eromheen. */
.footer-hart {
  margin: 0 4px;
  color: var(--gold-500);
  font-size: 11px;
  vertical-align: 1px;
}

/* Beheerknop: aanwezig maar bescheiden, met een slotje zodat duidelijk
   is dat er ingelogd moet worden. */
.footer-beheer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  min-height: 34px;
  border: 1px solid rgba(233, 227, 210, 0.22);
  border-radius: 999px;
  color: #BCB4A0;
  font-size: 12px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.footer-beheer i { font-size: 10px; opacity: 0.85; }
.footer-beheer:hover,
.footer-beheer:focus-visible {
  border-color: var(--gold-500);
  background: rgba(206, 168, 80, 0.1);
  color: #fff;
}

@media (max-width: 600px) {
  /* Op een telefoon onder elkaar; de knop mag niet naast de tekst
     geperst worden. */
  .footer-bottom-left { gap: 10px 16px; }
  .footer-beheer { min-height: 38px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-beheer { transition: none; }
}

/* ============================================================
   REVIEW-RONDE: social-hover (icoon moet zichtbaar blijven)
   De generieke footerregel `footer a:not(.btn):not(.cta):hover` kleurde
   het icoon goud terwijl de cirkel ook goud werd. Deze selector wint
   op specificiteit zodat het icoon donkergroen blijft op de gouden cirkel.
   ============================================================ */
footer .social-links a:not(.btn):not(.cta):hover,
footer .social-links a:not(.btn):not(.cta):focus-visible {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: #1F3D2B;
  transform: translateY(-2px);
}

/* ============================================================
   REVIEW-RONDE: contact-cards (gelijke hoogte + design)
   ============================================================ */
.contact-grid { align-items: stretch; }

.contact-card.contact-info {
  display: flex;
  flex-direction: column;
}

/* Gegevensregels met icoon-chips (zelfde vormtaal als .step-icon) */
.contact-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.contact-lines li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.6;
}
.contact-line-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(31, 61, 43, 0.07);
  color: var(--green-900);
  font-size: 15px;
}
.contact-lines a { font-weight: 600; }

/* Bedrijfsgegevens onderin de kaart, NL en BE naast elkaar */
.contact-card .business-info {
  margin-top: auto;
  padding-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-card .business-info .country-label {
  margin-top: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.contact-card .business-info p {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: #4B5563;
}
.contact-lines + .business-info { margin-top: auto; }
@media (max-width: 560px) {
  .contact-card .business-info { grid-template-columns: 1fr; }
}

/* ============================================================
   AUDIT-RONDE (2026-07-21): vaste typografie-schaal.
   Eén beperkte set maten via tokens; alle koppen en bodytekst
   verwijzen hiernaar. Zie docs/todos/audit-typografie-schaal.md.
   ============================================================ */
:root {
  --fs-hero: clamp(30px, 3.4vw, 42px);  /* home-hero H1 */
  --fs-h1: clamp(26px, 2.8vw, 32px);    /* paginatitels */
  --fs-h2: clamp(22px, 2.2vw, 26px);    /* sectiekoppen */
  --fs-h3: 19px;                        /* kaart-/subkoppen */
  --fs-h4: 20px;                        /* contact-/formulierkoppen */
  --fs-lead: 17px;                      /* leads onder koppen */
  --fs-body: 16px;                      /* bodytekst */
  --fs-small: 14px;                     /* captions, meta */
  --fs-label: 12px;                     /* eyebrows, kolomtitels */
}

/* Koppen */
.headline { font-size: var(--fs-hero); }
.page-header h1 { font-size: var(--fs-h1); }
.section-title,
.cta-hero h2,
#home-cta h2 { font-size: var(--fs-h2); }
.contact-info h2,
.contact-form h2 { font-size: var(--fs-h4); }

/* Kaart- en subkoppen: ook de tot nu toe ongestylede h3's */
.panel h3,
.card h3,
.species-panel h3 { font-size: var(--fs-h3); }
/* Kwaliteitsnamen (Standard/A1/Premium) zijn de hoofditems van hun sectie
   en mogen één stap groter dan gewone kaartkoppen */
.quality-cards .card h3 { font-size: var(--fs-h4); }

/* Bodytekst: de 1.1rem-uitzonderingen terug naar de basismaat */
.about-hero-description p,
.faq-hero-description p { font-size: var(--fs-body); line-height: 1.7; }
.lead-text { font-size: var(--fs-lead); }
.page-header .page-lead { font-size: var(--fs-lead); }
details.faq-item summary { font-size: var(--fs-body); }

/* ============================================================
   AUDIT-RONDE: video's op normaal formaat.
   Eén strip; alle video's delen dezelfde hoogte, portret houdt
   zijn eigen verhouding. Zie docs/todos/audit-videos-formaat.md.
   ============================================================ */
.gallery-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px 20px;
  max-width: 1100px;
  margin: 8px auto 56px;
  padding: 0 40px;
}
.gallery-video {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.gallery-video video {
  display: block;
  height: 360px;
  width: auto;
  max-width: 100%;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
}
.gallery-video figcaption {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--muted);
  text-align: center;
}
@media (max-width: 900px) {
  .gallery-videos { padding: 0 20px; gap: 20px 16px; }
  .gallery-video video { height: 300px; }
}
@media (max-width: 640px) {
  .gallery-videos { flex-direction: column; align-items: center; }
  /* Liggende video's vullen de breedte; portret blijft een slanke kolom */
  .gallery-video { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .gallery-video video { height: auto; width: 100%; max-height: 70vh; }
  .gallery-video video[height="848"] { width: auto; height: 420px; }
}

/* Keurmerk-logo's staan in de kolom Duurzaamheid (wens Kjeld 2026-07-21) */
.footer-column .footer-certs { margin-top: 18px; }

/* ============================================================
   AUDIT-RONDE: witruimte normaliseren.
   Zie docs/todos/audit-witruimte-secties.md.
   ============================================================ */
/* Over ons en aanbod: de intro (about-hero) volgt direct op de
   page-header; de dubbele lucht ertussen mag weg. */
.page-header + .about-hero { padding-top: 8px; }

/* Sectieritme op aanbod: gelijkmatig, geen extra sprongen */
#kwaliteiten { padding: 64px 0; }
#soorten, #duurzaamheid { padding: 56px 0; }

/* Gouden lijn centreren in gecentreerde CTA-panelen (sell-cta op FAQ,
   landing en over ons) */
.sell-cta h1::after,
.sell-cta h2::after {
  left: 50%;
  transform: translateX(-50%) scaleX(1);
  transform-origin: center;
}

/* ============================================================
   AUDIT-RONDE 2 (2026-07-22): verwerking feedback Kjeld.
   Zie docs/todos/audit-*.md voor de specs.
   ============================================================ */

/* --- Footer: vier blokken optisch gelijk verdeeld (alleen desktop;
   op kleinere schermen gelden de stapel-regels uit de media queries) --- */
@media (min-width: 1025px) {
  .footer-top { grid-template-columns: 1fr 3fr; gap: 40px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* --- Keurmerk-logo's footer: groter ---------------------------------- */
.footer-certs img { height: 76px; }
.footer-cert-chip { padding: 9px 14px; border-radius: 8px; }
.footer-cert-chip img { height: 40px; }

/* --- Hero: tekst verticaal gecentreerd in de viewport --------------- */
@media (min-width: 1101px) {
  body.homepage .hero .inner { align-items: center; }
  body.homepage .home-hero-text {
    padding-bottom: 0;
    /* Iets onder het midden (wens Kjeld): rustiger t.o.v. de foto en de
       vaste header, zonder terug te vallen naar de oude onderkant-anker */
    margin-top: 9vh;
  }
}

/* --- "In het kort": rustiger kaarttekst ----------------------------- */
.grid-4 .panel p {
  font-size: 15px;
  line-height: 1.65;
  color: #4B5563;
}

/* --- Taalselector: paneel recht onder de knop ----------------------- */
.nav-right .lang-dropdown { position: relative; }

/* --- Home-CTA: leesbaarheid op de nieuwe foto ----------------------- */
.cta-hero .cta-content,
.cta-hero .cta-content p,
.cta-hero .lead {
  color: #F5F2E9;
}
.cta-hero h2 { color: #fff; }

/* --- Knoppen: compacter en verfijnder ------------------------------- */
.btn {
  padding: 10px 22px;
  font-size: 15px;
  gap: 8px;
}
section#contact .btn-primary { width: auto; padding: 11px 30px; }
.about-hero-text > .btn { align-self: flex-start; }
.contact-form .form-group.full-width { display: flex; flex-direction: column; align-items: flex-start; }

/* --- Contact: geen restruimte onder de verzendknop ------------------ */
.form-status { margin-top: 12px; }
.form-status:empty { display: none; }

/* --- Terugbel-card (contact): paginabreed in tellerband-rood -------- */
.callback-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin: 28px 0;
  padding: 30px 36px;
  border-radius: 12px;
  background: var(--red-700);
  color: #fff;
}
.callback-text h2 {
  margin: 0 0 6px;
  font-size: var(--fs-h4);
  color: #fff;
}
.callback-text h2::after { display: none; }
.callback-text p {
  margin: 0;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.85);
}
.callback-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.callback-form input {
  min-width: 240px;
  padding: 11px 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
}
.callback-form input::placeholder { color: rgba(255, 255, 255, 0.65); }
.callback-form input:focus {
  outline: none;
  border-color: var(--gold-400);
  background: rgba(255, 255, 255, 0.18);
}
.callback-form .btn-primary { background: var(--gold-500); color: #2A1520; }
.callback-form .form-status { width: 100%; margin: 4px 0 0; padding: 0; text-align: left; color: #fff; }
@media (max-width: 700px) {
  .callback-card { flex-direction: column; align-items: stretch; text-align: center; padding: 26px 22px; }
  .callback-form { justify-content: center; }
  .callback-form input { flex: 1; }
  .callback-form .form-status { text-align: center; }
}

/* --- FAQ: minimalistische lijn-stijl (CodePen-referentie) ----------- */
details.faq-item {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  border-bottom: 1px solid #E2E0D8;
}
details.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--green-800);
  transition: color .2s ease;
}
details.faq-item summary:hover { color: var(--gold-700); }
details.faq-item[open] summary { color: var(--gold-700); }
details.faq-item[open] { border-bottom-color: var(--gold-500); }
.faq-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #CBC9C0;
  color: #8A887F;
  font-size: 11px;
  transition: transform .25s ease, color .2s ease, border-color .2s ease;
}
details.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  color: var(--gold-700);
  border-color: var(--gold-500);
}
details.faq-item .faq-answer {
  padding: 4px 2px 20px;
  color: #4B5563;
}
.faq-group { margin-bottom: 40px; }

/* --- Galerij: video's als posterbeeld met play-knop ------------------
   Het raster toont alleen de poster; de video zelf laadt pas als de
   bezoeker klikt en de lightbox opent. Zo downloadt niemand een film
   die hij niet wilde zien. */
.gallery-video-item {
  display: block;
  position: relative;
  break-inside: avoid;
  margin-bottom: 32px;
  cursor: pointer;
}
.gallery-video-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
/* Play-knop gecentreerd: maakt duidelijk dat dit een video is. */
.gallery-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(20, 32, 24, 0.66);
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 22px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
  pointer-events: none;
}
/* Het driehoekje optisch centreren in de cirkel. */
.gallery-video-play i { margin-left: 4px; }
.gallery-video-item:hover .gallery-video-play,
.gallery-video-item:focus-visible .gallery-video-play {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--green-900);
  transform: scale(1.08);
}
@media (max-width: 768px) {
  .gallery-video-play { width: 54px; height: 54px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-video-play { transition: none; }
  .gallery-video-item:hover .gallery-video-play { transform: none; }
}
/* Plyr (video in de lightbox) in de huisstijl: goud i.p.v. Plyr-blauw. */
.plyr {
  --plyr-color-main: var(--gold-500);
  --plyr-video-control-color-hover: var(--green-900);
}
.gslide-media.gvideo-container { max-height: 86vh; }
.gslide-media .gvideo-wrapper .plyr,
.gslide-media .gvideo-wrapper video {
  max-height: 86vh;
  border-radius: 10px;
}

/* --- Aanbod: rustiger stramien + grote keurmerk-logo's -------------- */
/* Alle sectiekoppen op aanbod gecentreerd via section-head. */
.cert-strip { gap: 20px 56px; margin-top: 52px; padding-top: 40px; }
.cert-strip img[alt^="Verband"] { height: 120px; }
.cert-strip img[alt^="MPS"] { height: 72px; }
.cert-strip-label { font-size: var(--fs-small); }

/* --- Nav-logo: witte rand kleiner ----------------------------------- */
.brand-logo-horizontal { padding: 10px 16px 16px 16px; }

/* Aanbod: intro zonder kunstmatige hoogte; tekst en foto netjes naast
   elkaar gecentreerd (was: min-height 600px + start-align, wat grote lege
   banden gaf) */
#producten-hero .about-hero-content {
  min-height: 0;
  align-items: center;
}
#producten-hero .about-hero-media { height: 420px; }

/* FAQ lijn-stijl: antwoord zonder eigen achtergrond (oude regel gaf een
   wit vlak op de crème pagina-achtergrond) */
details.faq-item .faq-answer { background: transparent; }

/* =====================================================================
   FOOTER-ACCORDIONS (mobiel): de linkkolommen zijn <details> die op
   desktop altijd open staan (summary niet klikbaar, geen pijltje) en op
   mobiel inklappen tot een rij per kop. Zo blijft de footer op een
   telefoon compact i.p.v. bijna twee schermen hoog.
   ===================================================================== */
.footer-column > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none; /* desktop: niet klikbaar */
}
.footer-column > summary::-webkit-details-marker { display: none; }
.footer-acc-icon {
  display: none;
  font-size: 12px;
  color: var(--gold-500);
  transition: transform .25s ease;
}

@media (max-width: 768px) {
  /* Accordion-gedrag */
  .footer-column { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .footer-column > summary {
    pointer-events: auto;
    cursor: pointer;
    padding: 15px 2px;
  }
  .footer-column > summary h3 { margin: 0; }
  .footer-acc-icon { display: block; }
  .footer-column[open] > summary .footer-acc-icon { transform: rotate(180deg); }
  .footer-column > ul,
  .footer-column > .contact-info { padding-bottom: 16px; }
  .footer-certs { margin-bottom: 16px; }

  /* Compacte footer */
  footer { padding-top: 32px; }
  .footer-logo-img { height: 72px; }
  .footer-top { gap: 18px; padding-bottom: 14px; }
  .footer-brand { gap: 10px; }
  .footer-cols { grid-template-columns: 1fr; gap: 0; }
  .footer-bottom { padding-top: 16px; gap: 12px; }
}

/* --- 404-pagina ------------------------------------------------------
   Sober: paginakop in de vaste stijl, twee knoppen en een rij tekstlinks
   naar de overige pagina's. */
.notfound-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.notfound-nav {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(31, 61, 43, 0.12);
}
.notfound-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.notfound-nav a {
  font-size: var(--fs-small);
  color: var(--green-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.notfound-nav a:hover,
.notfound-nav a:focus-visible {
  color: var(--green-900);
  border-bottom-color: var(--gold-500);
}

/* Honeypot: moet voor mensen onvindbaar zijn maar wel in het DOM staan.
   display:none zou door sommige bots herkend worden, daarom uit beeld. */
.veld-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}