/* ===== Raleway (local) ===== */
@font-face{
  font-family: "Raleway Local";
  src:
    url("../../assets/fonts/Raleway/Raleway-VariableFont_wght.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-Regular.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-Medium.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-SemiBold.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-Bold.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-ExtraBold.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-Black.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-Light.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-ExtraLight.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-Thin.ttf") format("truetype");
  font-weight: 100 900; /* full range */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Raleway Local";
  src:
    url("../../assets/fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-Italic.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-MediumItalic.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-SemiBoldItalic.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-BoldItalic.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-ExtraBoldItalic.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-BlackItalic.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-LightItalic.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-ExtraLightItalic.ttf") format("truetype"),
    url("../../assets/fonts/Raleway/Raleway-ThinItalic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ===== Theme tokens ===== */
:root{
  /* Colors */
  --bg: #FFFEF9;
  --bg-white: #FFFEF9;
  --bg-light:#F7F7F2;
  --bg-grey:#6E706B;
  --bg-green:#4E5747;
  --bg-bone:#EAE9E1;
  --bg-lightgrey:#D1D1C9;
  --bone-rgb:234,233,225;
  --bg-orange:#D79177;
  
  
  --text: #445048;
  --text-weak:#6A746D;
  --ring:#44504833;
  --line:#44504855;
  --accent:#445048;
  --btn-bg:#ECECE5;
  --btn-border:#44504880;
  --focus: 2px solid #3a5d50;
  --primary-green: #4E5747;

  /* Fonts */
  --font-sans: "Raleway Local", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;

  /* Page widths */
  --container-max: min(88vw, 1500px);  /* desktop page width */
  --container-max-wide: 1400px;         /* optioneel voor brede secties */
  --gutter: clamp(16px, 4vw, 32px);     /* responsieve zij-padding */
  --prose-max: 90ch;                    /* ideale leesbreedte voor tekst */
}

/* ===== Global ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.4;
}

/* Standaard page container */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Brede variant (bijv. hero, gallery) */
.container--wide{
  max-width: var(--container-max-wide);
}

/* Tekstkolom met prettige regelbreedte, gecentreerd binnen de container */
.prose{
  max-width: var(--prose-max);
  /* margin-inline: auto; */
}

.section-pad{
  padding-block: clamp(60px, 6vw, 80px);
}

/* Volle breedte (breekt uit de container) */
.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Background colors */
/* Achtergrond + automatische tekstkleur via CSS-variabele */
.background-white{ background-color: var(--bg-white) !important; --text: #445048; }
.background-light{ background-color: var(--bg-light)  !important; --text: #445048; }
.background-bone { background-color: var(--bg-bone)  !important; --text: #445048; }
.background-lightgrey { background-color: var(--bg-lightgrey)  !important; --text: #445048; }

.background-grey { background-color: var(--bg-grey)  !important; --text: #FFFFFF; }
.background-green{ background-color: var(--bg-green) !important; --text: #FFFFFF; }
.background-red  { background-color: #D79177          !important; --text: #FFFFFF; }

/* Zorg dat alle tekst binnen zo'n sectie de var gebruikt */
.background-white, .background-light, .background-bone,
.background-grey, .background-green, .background-red {
  color: var(--text);
}
.background-grey a, .background-green a, .background-red a { color: var(--text); }

.background-media {
  position: relative;
  background-image: url("../../assets/images/header-bg.webp"); /* jouw foto */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate; /* zodat overlay correct werkt */
}

.background-media .background-overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--bone-rgb),0.6); /* zachte donkere overlay */
  z-index: -1; /* achter de content */
}

/* Utilities */
.font-raleway{ font-family: var(--font-sans) !important; }
.w-100{font-weight:100!important}.w-200{font-weight:200!important}
.w-300{font-weight:300!important}.w-400{font-weight:400!important}
.w-500{font-weight:500!important}.w-600{font-weight:600!important}
.w-700{font-weight:700!important}.w-800{font-weight:800!important}
.w-900{font-weight:900!important}
.tracking-tight{ letter-spacing:-.01em !important; }
.tracking-wide{ letter-spacing:.02em !important; }

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

/* ===== Header ===== */
/* ===== Header (perfect aligned met container) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(6px);
}

/* Alleen layout binnen de container regelen */
.nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(10px, 1.4vw, 18px);
}

/* Branding */
.brand{
  display:flex; align-items:center; gap:.6rem; min-width:0;
}
.brand img{
  width:40px; height:40px; object-fit:contain; display:block;
}
.brand-name{
  font-size: clamp(1rem, 1.2rem + .2vw, 1.35rem);
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  font-weight:400;
  text-decoration:none !important;
  color:var(--primary-green);
  text-decoration-color: transparent;
}
/* Kill underline & default link colors for the brand link (logo + naam) */
.brand,
.brand:link,
.brand:visited,
.brand:hover,
.brand:focus,
.brand:active {
  text-decoration: none !important;
  color: var(--primary-green) !important;
}

/* ===== Desktop nav ===== */
.nav-links{
  display:flex; align-items:center; justify-content:center;
  gap: clamp(16px, 3.2vw, 48px);
  list-style:none; padding:0; margin:0;
}
.nav-links a{
  position:relative; display:inline-block;
  text-decoration:none; color:var(--primary-green);
  padding: .25rem 0;
  font-size: clamp(.98rem, .95rem + .1vw, 1.05rem);
  font-weight:500;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition: transform .25s ease;
}
.nav-links a:hover::after{ transform:scaleX(.7)}
.nav-links a[aria-current="page"]::after{ transform:scaleX(1)}

/* ===== CTA button (desktop) ===== */
.cta{ justify-self:end; }
.btn {
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-size: clamp(.95rem, .92rem + .1vw, 1rem);
  color: var(--primary-green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 0 0 0 var(--ring);
  font-weight: 600;
  /* 🔥 all transitions here */
  transition:
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    transform .2s ease;
}

.btn:hover {
  border-color: var(--primary-green);
  background-color: var(--primary-green);
  color: #ECECE5;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.btn:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}

.btn-orange{
  background-color: var(--bg-orange);
  border-color: var(--bg-orange);
  color: var(--bg-white);
}

.btn-green{
  background-color: var(--primary-green);
  border-color: var(--primary-green);
  color: var(--bg-white);
}
.btn-green:hover{
  background-color: var(--bg-orange);
  border-color: var(--bg-orange);
  color: var(--bg-white);
}

/* ===== Mobile ===== */
.menu-toggle{
  display:none; justify-self:end;
  width:48px; height:48px; border-radius:999px;
  border:1px solid var(--btn-border);
  background:var(--btn-bg); cursor:pointer;
  align-items:center; justify-content:center;
}
/* Zorg dat de toggle-knop altijd boven de mobile-sheet zit */
.menu-toggle{
  position: relative;   /* nodig voor z-index */
  z-index: 10000;       /* net boven .mobile-sheet (9999) */
}
.menu-toggle:focus-visible{ outline: var(--focus) }
.menu-icon, .menu-icon::before, .menu-icon::after{
  content:""; display:block; width:20px; height:2px; background:var(--primary-green);
  position:relative; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}
.menu-icon::before{ position:absolute; top:-6px }
.menu-icon::after{ position:absolute; top:6px }
.menu-toggle[aria-expanded="true"] .menu-icon{ transform:rotate(45deg) }
.menu-toggle[aria-expanded="true"] .menu-icon::before{ transform:rotate(90deg); top:0 }
.menu-toggle[aria-expanded="true"] .menu-icon::after{ opacity:0 }

/* Off-canvas mobile menu */
.mobile-sheet{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 111;           /* ⬅️ belangrijk: boven álles */
}

.mobile-sheet.open{ display:block; }

.mobile-sheet .overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
  opacity:0;
  transition: opacity .25s ease;
  z-index: 0;              /* onder het panel, boven de pagina */
}
.mobile-sheet.open .overlay{ opacity:1; }

.mobile-panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(86vw, 360px);
  background:var(--bg);
  border-left:1px solid var(--line);
  padding:18px;
  display:flex; flex-direction:column; gap:8px;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -12px 0 24px rgba(0,0,0,.08);
  z-index: 1;              /* binnen de sheet, boven de overlay */
}
.mobile-sheet.open .mobile-panel{ transform: translateX(0); }
.mobile-sheet.open .mobile-panel{ transform: translateX(0) }
.mobile-nav{
  list-style:none; padding:8px 0; margin:0; display:flex; flex-direction:column; gap:2px;
}
.mobile-nav a{
  display:block; padding:14px 10px; border-radius:12px;
  color:var(--primary-green); text-decoration:none; font-size:1.05rem; font-weight:500;
}
.mobile-nav a[aria-current="page"]{ background:#ffffff60 }
.mobile-footer{ margin-top:auto }
.btn-block{ width:100%; text-align:center; padding:14px 16px }

/* ===== Breakpoints ===== */
@media (max-width: 900px){
  .nav-bar{ grid-template-columns: 1fr auto }
  .nav-links, .cta{ display:none }
  .menu-toggle{ display:inline-flex }
  .brand-name{ font-size:1.1rem }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .nav-links a::after,
  .menu-icon, .menu-icon::before, .menu-icon::after,
  .mobile-panel, .overlay { transition: none }
}

.header-title{
  font-size: clamp(2.2rem, 2.7rem + 1.2vw, 3.7rem);
  font-weight: 600;
  line-height: 1.1;
}

.text-header-thin{
  font-weight: 400;
  /* italic */
  font-style: italic;
}

.high-btn{
  padding: 1rem 1.5rem;
}

.text-description{
  margin-top: 1rem;
  font-size: clamp(0.9rem, 1rem + .1vw, 1.15rem);
  color: var(--text-weak);
  line-height: 1.5;
}

/* ===== Diensten sectie ===== */
.services-title{
  font-size: clamp(1.7rem, 2rem + 1vw, 2.9rem);
  line-height:1.15;
  margin: 0;
}
.text-container-diensten {
  text-align: center;           /* tekst centreren binnen de div */
  max-width: 700px;             /* vaste breedte */
  margin-inline: auto;          /* ⬅️ centreren binnen de container */
}
.services-title .strong{ font-weight:700; color: var(--primary-green); }
.services-title .weak{ font-weight:600; color: var(--primary-green); }
.services-title .brand-italic{
  font-style: italic;
  font-weight: 400;
  color: var(--primary-green);
}

.section-lead{
  margin: .6rem auto 2rem;
  color: var(--text-weak);
}

/* Grid */
.services-grid{
  display:grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: 1fr;           /* mobiel */
  margin-top: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(22px, 4vw, 40px);
}
@media (min-width: 640px){
  .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 960px){
  .services-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Card */
.service-card{
  background: #EAE9E1; /* licht bone zoals in design onderzijde */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* Bovenste media-blok (placeholder of beeld) */
.card-media{
  aspect-ratio: 16 / 10;
  background-color: #D6D5CE; /* fallback kleur */
  background-size: cover;     /* vult de ruimte */
  background-position: center;
  background-repeat: no-repeat;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Content */
.card-body{
  padding: clamp(14px, 2.4vw, 20px);
}
.card-title{
  margin: 0 0 10px 0;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: var(--primary-green);
  font-weight: 600;
}
.card-divider{
  height:1px; border:0; margin: 0 0 12px 0;
  background: #FFFFFF;
}

/* Meta + button op één lijn */
.card-meta{
  display:flex; align-items:center; gap:12px;
  justify-content: space-between;
  margin-bottom: 8px;
}
.meta-label{
  font-size: .9rem;
  color: var(--text-weak);
}
.card-desc{
  margin: 0;
  font-size: .95rem;
}

/* Kleinere button voor binnen kaarten */
.btn.btn-sm{
  padding: .5rem .9rem;
  font-size: .9rem;
  border-radius: 999px;
}

/* Sectie CTA */
.services-cta{
  display:flex; justify-content:center; margin-top: clamp(10px, 2vw, 24px);
}

/* ===== Intro Video Section ===== */
.intro-video-section{
  background-color: var(--bg-grey);
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

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

.intro-title{
  font-size: clamp(3rem, 2.8rem + 2.8vw, 4rem);
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.intro-accent{
  font-weight: 700;
  color: #fff;
}

.intro-italic{
  font-style: italic;
  font-weight: 400;
  color: #fff;
}

/* ===== Button for video ===== */
.btn-light{
  background: #fff;
  color: var(--primary-green) !important;
  border: 1px solid #fff;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: 999px;
  font-weight: 500;
  transition: all .25s ease;
}

.btn-light:hover{
  background: var(--bg-green);
  color: var(--bg-white) !important;
  border-color: var(--bg-green);
}

.btn-play{
  transition:
  background-color .3s ease,
  color .3s ease,
  border-color .3s ease,
  box-shadow .3s ease,
  transform .2s ease;
}

.btn-play .icon{
  flex-shrink: 0;
}

.btn-play-padding {
  padding: 1rem 1.8rem;
  font-size: clamp(1rem, 1.05rem + .2vw, 1.05rem);
}

/* ===== Why Us Section ===== */
.why-grid{
  display: grid;
  gap: clamp(74px, 4vw, 48px);
  grid-template-columns: 1fr; /* mobiel */
  align-items: start;
}
@media (min-width: 960px){
  .why-grid{
    grid-template-columns: 0.75fr 1.25fr; /* links tekst, rechts features */
  }
}

.why-left p{ margin-top: .6rem; color: var(--text-weak); }

.why-title{
  font-size: clamp(3rem, 2.4rem + 3.4vw, 3.8rem);
  line-height: 1.15;
  font-weight: 600;
  color: var(--primary-green);
  margin: 0 0 .6rem 0;
}
.why-title em{
  font-style: italic;
  font-weight: 400;
}
.text-why-us{
  color: var(--text-weak);
  font-size: clamp(1rem, .95rem + .2vw, 1.15rem);
  line-height: 1.5;
}

/* Rechterkolom grid met 2 kolommen op >=700px */
.why-right{
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .why-right{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.why-item{
  background: transparent;
  padding: 0;
  border-radius: 14px;
}
.why-item h3{
  margin: .5rem 0 .3rem 0;
  font-size: clamp(1.3rem, 1.2rem + .4vw, 1.45rem);
  color: var(--primary-green);
  font-weight: 600;
}
.why-item p{
  margin: 0;
  color: var(--text-weak);
  font-size: clamp(1rem, .95rem + .2vw, 1.15rem);
  line-height: 1.5;
}

/* Icon badge */
.why-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--primary-green);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Kleinere lichte knop voor linkerkolom */
.btn.btn-sm{
  padding: .55rem 1rem;
  font-size: .92rem;
  border-radius: 999px;
}

.btn-green-outline{
  background: transparent;
  border: 1px solid var(--primary-green);
  color: var(--primary-green);
}

/* ===== CTA Banner ===== */
.cta-card{
  background: var(--bg-bone);         /* zachte panelkleur */
  border-radius: 14px;
  padding: clamp(20px, 4vw, 178px);
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
  color: var(--primary-green);
}

.cta-title{
  font-size: clamp(1.9rem, 1.5rem + 2.5vw, 2.7rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 .6rem 0;
}

.cta-italic{
  font-style: italic;
  font-weight: 400;
}

.nowrap{ white-space: nowrap; }

.cta-sub{
  margin: 0 0 1.25rem 0;
  color: var(--text-weak);
  font-size: .98rem;
}

.cta-btn{
  padding: .9rem 1.4rem;          /* iets groter dan standaard */
  font-weight: 600;
  border-radius: 999px;
}

/* ==== Testimonials ==== */
.t-grid{
  display:grid;
  gap: clamp(18px, 3vw, 36px);
  grid-template-columns: 1fr;
  align-items:center;
}
@media (min-width: 800px){
  .t-grid{ grid-template-columns: 400px 1fr; }
}

.t-media {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--bg-light); /* fallback kleur */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  aspect-ratio: 1 / 1;
  
  /* Achtergrondafbeelding (wanneer gebruikt als background) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

.t-content{
  position:relative;
  /* background: rgba(255,255,255,.06); */
  border-radius: 10px;
  padding: clamp(16px, 3vw, 28px);
  color:#fff;
}

.t-quote{
  margin:0 0 .9rem 0;
  font-size: clamp(1.85rem, 1.7rem + 1.6vw, 2.1rem);
  line-height:1.5;
  font-weight: 300;
}

.t-meta {
  display: flex;
  flex-direction: column;  /* ⬅️ onder elkaar i.p.v. naast elkaar */
  align-items: flex-start; /* uitlijnen aan de linkerkant */
  gap: 4px;                /* kleine ruimte tussen naam en sterren */
  color: #ffffffd9;
  font-size: .95rem;
}
.t-name{ 
  font-weight:300; 
  font-size:1.3rem;
}

.t-stars{
  display:inline-flex; gap:4px;
}
.t-stars svg{
  width:22px; height:22px;
  fill:#ffffffd9; /* je kunt desgewenst een gele tint gebruiken */
}

/* Pijltjes */
.t-controls{
  position:absolute; right:12px; bottom:12px;
  display:flex; gap:8px;
}
.t-btn{
  width:48px; height:48px; border-radius:999px;
  border:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--primary-green);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.t-btn:hover{ 
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  background: #f0f0f0;
 }
.t-btn:focus-visible{ 
  outline: var(--focus); outline-offset:3px; 
}

.t-btn-outline{
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}
.t-btn-outline:hover{
  background: #ffffff20;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Donkere achtergrond van de sectie gebruikt jouw helper classes */
#testimonials.background-green{ color:#fff; }

/* ===== Inzichten & Inspiratie ===== */
.insights-head{
  display:grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: clamp(18px, 3vw, 28px);
}
@media (min-width: 900px){
  .insights-head{
    grid-template-columns: 1fr 1fr;
    align-items:end;
  }
}

.insights-title{
  margin:0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(2.4rem, 2.2rem + 3vw, 3.2rem);
  line-height: 1.15;
}
.insights-title .i-italic{
  font-style: italic;
  font-weight: 400;
}
.insights-kicker{
  margin: 0;
  color: var(--text-weak);
  font-size: .95rem;
  max-width: 46ch;
}

/* Grid met 2x2 artikelen; 1 kolom op mobiel */
.insights-grid{
  display:grid;
  gap: clamp(16px, 2.8vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .insights-grid{ grid-template-columns: 1fr 1fr; }
}

/* Klikbare post-kaart */
.post{
  display:grid;
  grid-template-columns: 116px 1fr;
  gap: 16px;
  align-items:start;
  padding: clamp(10px, 1.2vw, 14px);
  border-radius: 12px;
  text-decoration:none;
  color: inherit;
  background: transparent;
  transition: background-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.post:hover{
  background: rgba(0,0,0,.03);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.post:focus-visible{
  outline: var(--focus);
  outline-offset: 3px;
}

/* Thumbnail placeholder (vervang later door echte <img>) */
.post-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: #D8D9D1;
}

/* Content */
.post-body{ min-width: 0; }
.post-meta{
  display:flex; align-items:center; gap:8px;
  color: var(--text-weak);
  font-size: .82rem;
  margin-bottom: .25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-meta .dot{ opacity:.6; }
.post-title{
  margin: 0 0 .45rem 0;
  font-size: clamp(1.2rem, 1.15rem + .35vw, 1.35rem);
  font-weight: 600;
  color: var(--primary-green);
  line-height: 1.35;
}
.post-link{
  display:inline-block;
  font-size: .9rem;
  color: var(--primary-green);
  opacity:.9;
  transition: opacity .2s ease, transform .2s ease;
}

@media (min-width: 900px) {
  .insights-kicker {
    justify-self: end;     /* ⬅️ verplaats de kicker naar de rechterkant */
    text-align: left;      /* ⬅️ tekst blijft links uitgelijnd */
  }
}

/* Compacter op hele kleine schermen */
@media (max-width: 420px){
  .post{ grid-template-columns: 92px 1fr; gap: 12px; }
}

/* ===== FAQ ===== */
.faq-head{ margin-bottom: clamp(16px, 3vw, 24px); }
.faq-title{
  margin:0;
  color: var(--primary-green);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem);
}
.faq-title .i-italic{ font-style: italic; font-weight: 400; }

.faq-list{ display:grid; gap: clamp(10px, 1.6vw, 14px); }

.faq-item{
  background: #ECEDE7; /* licht paneel */
  border-radius: 12px;
  overflow: hidden;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.faq-item.is-open{ background: var(--primary-green); color: #fff; }

.faq-q{ margin:0; }

.faq-toggle{
  appearance:none; -webkit-appearance:none;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding: clamp(14px, 2.2vw, 18px) clamp(16px, 2.4vw, 22px);
  font: inherit;
  color: inherit;
  display:flex; align-items:center; gap: 16px;
  position:relative;
  cursor:pointer;
}
.faq-toggle:focus-visible{ outline: var(--focus); outline-offset: 3px; }

.faq-icon{
  margin-left:auto;
  width:28px; height:28px;
  border-radius:999px;
  border:1px solid currentColor;
  display:grid; place-items:center;
  position:relative;
}
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; background: currentColor; border-radius:1px;
}
.faq-icon::before{ width:12px; height:2px; }
.faq-icon::after{ width:2px; height:12px; transition: transform .2s ease, opacity .2s ease; }

/* Minus bij open state */
.faq-item.is-open .faq-icon::after{ transform: rotate(90deg); opacity:0; }

/* Antwoord (collapsible) */
.faq-a{
  padding: 0 clamp(16px, 2.4vw, 22px);
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  color: inherit;
}
.faq-item.is-open .faq-a{
  padding-bottom: clamp(12px, 2vw, 16px);
}

/* Tekst in open (donkere achtergrond → maak iets lichter) */
.faq-item.is-open .faq-a p{
  color: #F4F5F1;
  opacity: .95;
}

/* Kleine schaduw bij hover */
.faq-item:hover{ box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.faq-item.is-open:hover{ box-shadow: 0 2px 10px rgba(0,0,0,.08); }





/* ===== Footer ===== */
.site-footer{
  color:var(--bg-bone);
  padding-block: clamp(100px, 5vw, 186px);
}
.site-footer a{ 
  color:var(--bg-bone);
  text-decoration: none; 
  font-weight:500;
  font-size: clamp(1.05rem, 1rem + .20vw, 1.2rem);
}
.site-footer a:hover{ 
  color:var(--bg-orange);
}

/* layout */
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 2fr; /* links / rechts */
  gap: clamp(24px, 5vw, 64px);
  align-items:start;
}
.footer-logo {
  display: inline-flex;
  align-items: center; /* verticaal centreren */
  gap: 0.6rem;         /* ruimte tussen logo en tekst */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.9rem, 0.8rem + 0.6vw, 1.1rem);
  color: #EDEDE7; /* wit of licht, afhankelijk van achtergrond */
}

.footer-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.footer-name {
  line-height: 1;             /* mooi gecentreerd naast het logo */
  font-size: clamp(1.3rem, 1.5rem + .3vw, 1.65rem);
  letter-spacing:.02em;
  font-weight:400;
  color:var(--bg-bone);
}
.footer-brand .footer-logo{
  font-weight:600;
  letter-spacing:.06em;
  font-size: clamp(.9rem, .8rem + .6vw, 1.1rem);
  text-transform: uppercase;
}
.footer-kicker{
  margin: 10px 0 16px;
  font-size: clamp(.95rem, .9rem + .2vw, 1.1rem);
  opacity:.9;
}

/* newsletter pill */
.newsletter .nl-field{
  display:flex; align-items:center;
  background: transparent;
  border:1px solid var(--bg-bone);
  border-radius: 999px;
  overflow:hidden;
  width: min(460px, 100%);
}
.newsletter input{
  flex:1;
  padding:.7rem 1rem;
  background: transparent;
  border:0;
  color:var(--bg-bone);
  outline:none;
  font: inherit;

  margin: 0;
  padding: 0;
  padding-left: 1.5rem;
}
.newsletter input::placeholder{ color:#EDEDE7; opacity:.8; }
.newsletter input:focus-visible{ outline: none; }

.btn-subscribe{
  background: var(--bg-bone);
  color: var(--primary-green);
  border:0;
  padding:.62rem 1.1rem;
  border-radius:999px;
  font-weight:500;
  cursor:pointer;
  height:100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  font-size: clamp(1rem, .98rem + .15vw, 1.1rem);
}
.btn-subscribe:hover{ 
  box-shadow:0 2px 10px rgba(0,0,0,.15); 
  background: var(--bg-orange);
  color: var(--bg-white);
}
.btn-subscribe:focus-visible{ outline: var(--focus); outline-offset:3px; }

/* link columns */
.footer-links{
  display:grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: clamp(16px, 3vw, 40px);
}
.link-col{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.link-col li{ font-size: .92rem; }

/* responsive */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-links{ grid-template-columns: repeat(2, minmax(120px,1fr)); }
}
@media (max-width: 560px){
  .footer-links{ grid-template-columns: 1fr; }
}

/* Margin tops */
.mt-1{ margin-top: clamp(12px, 2.2vw, 24px) !important; }
.mt-2{ margin-top: clamp(20px, 3.5vw, 36px) !important; }
.mt-3{ margin-top: clamp(28px, 5vw, 48px) !important; }
.mt-4{ margin-top: clamp(36px, 6.5vw, 60px) !important; }
.mt-5{ margin-top: clamp(44px, 8vw, 72px) !important; }
.mt-6{ margin-top: clamp(52px, 9.5vw, 84px) !important; }
.mt-7{ margin-top: clamp(60px, 11vw, 96px) !important; }
.mt-8{ margin-top: clamp(68px, 12.5vw, 108px) !important; }
.mt-9{ margin-top: clamp(76px, 14vw, 120px) !important; }
.mt-10{ margin-top: clamp(84px, 15.5vw, 132px) !important; }

/* Margin bottoms */
.mb-1{ margin-bottom: clamp(12px, 2.2vw, 24px) !important; }
.mb-2{ margin-bottom: clamp(20px, 3.5vw, 36px) !important; }
.mb-3{ margin-bottom: clamp(28px, 5vw, 48px) !important; }
.mb-4{ margin-bottom: clamp(36px, 6.5vw, 60px) !important; }
.mb-5{ margin-bottom: clamp(44px, 8vw, 72px) !important; }
.mb-6{ margin-bottom: clamp(52px, 9.5vw, 84px) !important; }
.mb-7{ margin-bottom: clamp(60px, 11vw, 96px) !important; }
.mb-8{ margin-bottom: clamp(68px, 12.5vw, 108px) !important; }
.mb-9{ margin-bottom: clamp(76px, 14vw, 120px) !important; }
.mb-10{ margin-bottom: clamp(84px, 15.5vw, 132px) !important; }

/* Padding tops */
.pt-1{ padding-top: clamp(12px, 2.2vw, 24px) !important; }
.pt-2{ padding-top: clamp(20px, 3.5vw, 36px) !important; }
.pt-3{ padding-top: clamp(28px, 5vw, 48px) !important; }
.pt-4{ padding-top: clamp(36px, 6.5vw, 60px) !important; }
.pt-5{ padding-top: clamp(44px, 8vw, 72px) !important; }
.pt-6{ padding-top: clamp(52px, 9.5vw, 84px) !important; }
.pt-7{ padding-top: clamp(60px, 11vw, 96px) !important; }
.pt-8{ padding-top: clamp(68px, 12.5vw, 108px) !important; }
.pt-9{ padding-top: clamp(76px, 14vw, 120px) !important; }
.pt-10{ padding-top: clamp(84px, 15.5vw, 132px) !important; }

/* Padding bottoms */
.pb-1{ padding-bottom: clamp(12px, 2.2vw, 24px) !important; }
.pb-2{ padding-bottom: clamp(20px, 3.5vw, 36px) !important; }
.pb-3{ padding-bottom: clamp(28px, 5vw, 48px) !important; }
.pb-4{ padding-bottom: clamp(36px, 6.5vw, 60px) !important; }
.pb-5{ padding-bottom: clamp(44px, 8vw, 72px) !important; }
.pb-6{ padding-bottom: clamp(52px, 9.5vw, 84px) !important; }
.pb-7{ padding-bottom: clamp(60px, 11vw, 96px) !important; }
.pb-8{ padding-bottom: clamp(68px, 12.5vw, 108px) !important; }
.pb-9{ padding-bottom: clamp(76px, 14vw, 120px) !important; }
.pb-10{ padding-bottom: clamp(84px, 15.5vw, 132px) !important; }

.max-width-66{
  max-width: 66% !important;
}
.max-width-50{
  max-width: 50% !important;
}
.max-width-33{
  max-width: 33% !important;
}

/* mobile-full-width */
@media (max-width: 640px){
  .mobile-max-width-100{
    max-width: 100% !important;
  }
}

/* ===== Scroll reveal effect ===== */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s ease-out,
    transform .7s ease-out;
  will-change: opacity, transform;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === Over sectie === */
.about-top{
  padding-block: clamp(28px, 6vw, 84px);
}

.about-head{
  display: grid;
  gap: clamp(10px, 2vw, 18px);
  grid-template-columns: 1fr;           /* mobiel */
  /* align-items: end; */
}
@media (min-width: 960px){
  .about-head{
    grid-template-columns: 1.1fr 1fr;   /* links titel, rechts kicker */
  }
}

.about-title{
  margin: 0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.2rem);
  line-height: 1.15;
}
.about-title .brand-italic{ font-style: italic; font-weight: 400; }

.about-kicker{
  margin: 0;
  color: var(--text-weak);
  max-width: 48ch;
  justify-self: end;     /* rechts in de grid */
  text-align: left;      /* maar tekst blijft links uitgelijnd */
  font-size: clamp(.92rem, .9rem + .2vw, 1rem);
}

/* Full-bleed afbeelding onder de bone strook */
.about-media{
  margin: 0;             /* figure default margins verwijderen */
  line-height: 0;        /* geen extra witruimte */
}
.about-media img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;           /* voorkom te grote afbeeldingen */
  aspect-ratio: 16 / 7;        /* mooie brede uitsnede */
  object-fit: cover;
  object-position: center;     /* toon het midden van de afbeelding */
}

/* === Over mij, Dorien === */
.aboutme-grid{
  display:grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: 1fr;          /* mobiel */
  align-items: start;
}
@media (min-width: 980px){
  .aboutme-grid{
    grid-template-columns: 1.2fr 0.8fr; /* tekst | foto */
    align-items: center;
  }
}

.aboutme-title{
  margin: 0 0 .8rem 0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3rem);
  line-height: 1.1;
}
.aboutme-title em{
  font-style: italic;
  font-weight: 400;
}
.aboutme-name{
  display:inline-block;
}

.aboutme-lead{
  margin: 0;
  color: var(--text-weak);
  font-size: clamp(.96rem, .92rem + .2vw, 1.02rem);
  max-width: 64ch;
}

/* Foto-kaart rechts */
.aboutme-photo{
  margin:0;
  border-radius: 14px;
  background: #E9E8E2;
  overflow:hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  width: 100%;
  max-width: 380px;                 /* ~ zoals in design */
  justify-self: center;             /* mooi in de grid */
}
.aboutme-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 4 / 5;              /* portretvorm */
  object-fit: cover;
  border-radius: 14px;
}

/* === Mijn Doel === */
.goal-grid{
  display:grid;
  gap: clamp(20px, 4vw, 48px);
  grid-template-columns: 1fr;           /* mobiel */
  align-items:start;
}
@media (min-width: 980px){
  .goal-grid{ grid-template-columns: 0.7fr 2.3fr; } /* links smal, rechts breed */
}

.goal-heading{
  margin:0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3rem);
  line-height:1.1;
}
.goal-heading em{
  font-style: italic;
  font-weight: 400;
}

.goal-cards{
  display:grid;
  gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: 1fr;           /* stapelt op mobiel */
  padding: clamp(14px, 2vw, 18px) 0;
  border-radius: 14px;
}
@media (min-width: 980px){
  .goal-cards{ grid-template-columns: 1fr 1fr; } /* twee naast elkaar */
}

.goal-item{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items:start;
  padding: clamp(14px, 2vw, 18px);
}

.goal-icon{
  display:inline-grid; place-items:center;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--primary-green);
  color: #fff;
  flex-shrink:0;
}

.goal-subtitle{
  margin:.2rem 0 .35rem 0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem);
}
.goal-text{
  margin:0;
  color: var(--text-weak);
  font-size: .98rem;
  line-height: 1.6;
}

/* === CTA Sectie === */
.cta-grid{
  display:grid;
  gap: clamp(20px, 4vw, 40px);
  grid-template-columns: 1fr;           /* mobiel */
  align-items: stretch;
}
@media (min-width: 960px){
  .cta-grid{
    grid-template-columns: 1.4fr 1.6fr;  /* tekst | beelden */
  }
}

.cta-text{
  background: #E9E8E2;
  border-radius: 14px;
  padding: clamp(28px, 5vw, 56px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: clamp(14px, 2vw, 22px);
}

.cta-title{
  margin: 0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(2rem, 1.6rem + 2.6vw, 3rem);
  line-height: 1.1;
}
.cta-title em{
  font-style: italic;
  font-weight: 400;
}

.cta-lead{
  margin: 0;
  color: var(--text-weak);
  font-size: clamp(.94rem, .9rem + .2vw, 1rem);
}

/* Rechterafbeeldingen */
.cta-images {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr; /* eerste breder dan tweede */
  gap: clamp(12px, 1.6vw, 20px);
  align-items: stretch;
}
.cta-img{
  margin:0;
  border-radius: 12px;
  overflow:hidden;
  background:#D6D5CE;
  line-height:0;
}
.cta-img img{
  width:100%;
  height:100%;
  max-height:400px;
  object-fit:cover;
  display:block;
  aspect-ratio: 3 / 4;
  transition: transform .4s ease;
}

.cta-text .btn {
  align-self: flex-start;  /* ⬅️ stopt het strekken */
}

.text-white{
  color: var(--bg-white) !important;
}
.opacity-85{
  opacity: .85 !important;
}

/* ===== Services Rows ===== */
.sr-list{
  display: grid;
  gap: clamp(18px, 3vw, 24px);
}

.sr-row{
  display: grid;
  grid-template-columns: 1fr minmax(240px, 360px); /* tekst | beeld */
  align-items: stretch;
  /* gap: clamp(14px, 2vw, 18px); */
  --row-h: clamp(160px, 26vw, 210px); /* hoogte van de rij */
}

.sr-row:hover{
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Linkerpaneel (tekst) */
.sr-copy{
  background: #E9E8E2;
  border-radius: 14px 0 0 14px;
  padding: clamp(18px, 2.6vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--row-h);
}

.sr-row-link{
  text-decoration: none;
}

.sr-title{
  margin: 0 0 .4rem 0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.1rem);
  line-height: 1.2;
}
.sr-text{
  margin: 0;
  color: var(--text-weak);
  font-size: clamp(.92rem, .88rem + .2vw, 1rem);
  line-height: 1.6;
}

/* Rechterpaneel (beeld) */
.sr-media{
  margin: 0;
  border-radius: 0 14px 14px 0;
  background: #D6D5CE;                 /* placeholder */
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: var(--row-h);
}

/* Responsief: stacken op mobiel */
@media (max-width: 880px){
  .sr-row{
    grid-template-columns: 1fr;
  }
  .sr-media{
    order: 2;                 /* afbeelding onder de tekst */
    min-height: clamp(160px, 46vw, 260px);
  }
  .sr-copy{
    order: 1;
  }
}

/* ===== Benefits Section ===== */
.benefits-head {
  text-align: center;
  margin-bottom: clamp(28px, 6vw, 64px);
}

.benefits-title {
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.4rem + 2.6vw, 2.6rem);
  line-height: 1.2;
}
.benefits-title em {
  font-style: italic;
  font-weight: 400;
}

/* Grid layout */
.benefits-grid {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  text-align: center;
}

/* Individual items */
.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vw, 16px);
  padding: 10px;
  transition: transform .25s ease, opacity .25s ease;
}

/* Icons */
.benefit-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #E9E8E2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-green);
  transition: background-color .3s ease, transform .3s ease;
}
.benefit-item:hover .benefit-icon {
  background: var(--primary-green);
  color: #fff;
}
.benefit-icon svg {
  width: 30px;
  height: 30px;
}

/* Text */
.benefit-title {
  margin: 0;
  font-weight: 600;
  color: var(--primary-green);
  font-size: clamp(1.05rem, 1rem + .2vw, 1.2rem);
}

.benefit-text {
  margin: 0;
  color: var(--text-weak);
  line-height: 1.6;
  font-size: clamp(.9rem, .88rem + .2vw, 1rem);
  max-width: 38ch;
}

/* ===== Intake Section ===== */
.intake-title{
  margin: 0 0 .6rem 0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.1rem);
  line-height: 1.2;
}
.intake-lead{
  margin: 0 0 clamp(28px, 6vw, 60px) 0;
  color: var(--text-weak);
  font-size: clamp(.95rem, .92rem + .2vw, 1rem);
  line-height: 1.75;
  /* optioneel: iets breder dan standaard prose */
  max-width: 80ch;
}

.intake-subtitle{
  margin: 0 0 .8rem 0;
  color: var(--primary-green);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.6rem);
}

/* Checklist */
.checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(10px, 1.6vw, 14px);
  max-width: 80ch;
}
.check-item{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  line-height: 1.6;
  font-size: clamp(.95rem, .92rem + .2vw, 1rem);
}
.check-badge{
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E9E8E2;         /* zachte badge */
  color: var(--primary-green);  /* check */
}

.mouse-over{
  cursor: pointer;
}

/* Verwijder na controle */
/* .container{ outline:1px dashed #4E5747; }
.nav-bar{ outline:1px dashed #c49c55; } */