/* ============================================================
   BACKPACK — gedeelde stijl
   Eén bestand voor de hele site. Wijzig hier, en het verandert
   op elke pagina. De variabelen hieronder zijn de knoppen waar
   je aan kunt draaien.
   ============================================================ */
:root{
  /* Kleuren */
  --forest:#24433A;        /* donkergroen uit het logo */
  --forest-deep:#182F28;
  --sage:#7C9A8B;
  --sage-light:#DCE5DE;
  --sand:#EDE4D6;
  --cream:#FAF7F2;
  --clay:#B5794F;
  --ink:#25302C;
  --muted:#5F6D66;
  --line:rgba(36,67,58,.14);

  /* Typografie — Work Sans, licht en luchtig */
  --font:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Ritme */
  --maxw:1180px;
  --gutter:clamp(20px,5vw,48px);
  --section:clamp(68px,9vw,124px);
  --radius:18px;
  --radius-lg:28px;

  /* Hoogte van het beeldmerk in de balk. Het staat naast de naam, dus
     compact. Hier bijstellen als het groter of kleiner moet. */
  --logo-h:34px;

  /* Grootte van de iconen bij Ons aanbod. Hier bijstellen. */
  --icoon:130px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.72;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Koppen: licht gewicht, strak gespatieerd. Koppen staan in de HTML
   met kleine letters geschreven; eigennamen houden hun hoofdletter. */
h1,h2,h3,h4{font-family:var(--font);font-weight:300;line-height:1.16;letter-spacing:-.022em;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4.1rem);letter-spacing:-.03em}
h2{font-size:clamp(1.85rem,3.6vw,2.75rem);letter-spacing:-.026em}
h3{font-size:clamp(1.15rem,1.8vw,1.42rem);letter-spacing:-.015em;line-height:1.3}
h4{font-size:1.05rem}
p{margin:0 0 1.1em}
strong,b{font-weight:500}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:830px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.eyebrow{font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage);margin:0 0 1.15rem}
.lead{font-size:clamp(1.03rem,1.5vw,1.18rem);color:var(--muted);max-width:64ch;font-weight:300}
.muted{color:var(--muted)}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-size:.92rem;font-weight:500;
  padding:.95em 1.7em;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;font-family:var(--font)}
.btn-primary{background:var(--forest);color:var(--cream)}
.btn-primary:hover{background:var(--forest-deep);transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(24,47,40,.55)}
.btn-ghost{border-color:var(--line);color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.btn-light{background:var(--cream);color:var(--forest)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(0,0,0,.4)}
.btn .arw{transition:transform .25s}
.btn:hover .arw{transform:translateX(3px)}
.tlink{display:inline-flex;align-items:center;gap:.5em;font-size:.9rem;font-weight:500;
  color:var(--forest);border-bottom:1px solid var(--line);padding-bottom:.35em;transition:.25s}
.tlink:hover{border-color:var(--forest);gap:.85em}
.sublink{font-size:.85rem;color:var(--muted);border-bottom:1px solid transparent;transition:.2s}
.sublink:hover{color:var(--forest);border-color:var(--sage)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}

/* ---------- Header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;padding-block:20px;
  transition:background .35s,box-shadow .35s,padding .35s}
.header.scrolled{background:rgba(250,247,242,.9);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);padding-block:12px}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-size:1.32rem;font-weight:400;
  white-space:nowrap;flex:0 0 auto;letter-spacing:-.02em;color:var(--forest)}
.brand img{height:var(--logo-h);width:auto;flex:0 0 auto}
.nav{display:flex;align-items:stretch;gap:2px}
.nav > li{position:relative;list-style:none}
.nav a,.nav .navbtn{display:flex;align-items:center;white-space:nowrap;
  font-size:.88rem;font-weight:400;color:var(--ink);line-height:1.25;
  padding:.6em .7em;border-radius:8px;transition:.2s;background:none;border:0;
  font-family:var(--font);cursor:pointer}
.nav a:hover,.nav .navbtn:hover,.nav a[aria-current]{color:var(--forest);background:rgba(124,154,139,.15)}
.navlist{display:flex;gap:0;margin:0;padding:0;align-items:stretch}
.navbtn::after{content:"";display:inline-block;width:5px;height:5px;margin-left:.5em;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
li:hover > .navbtn::after{transform:rotate(225deg) translateY(1px)}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:8px;margin:0;list-style:none;
  box-shadow:0 18px 40px -20px rgba(24,47,40,.35);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s}
li:hover > .submenu,li:focus-within > .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:.6em .8em;border-radius:9px;
  text-align:left;min-height:0;white-space:normal}
.submenu span{display:block;font-size:.77rem;color:var(--muted);font-weight:300;margin-top:1px}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;min-width:44px;min-height:44px}
.burger span{display:block;width:22px;height:1.6px;background:var(--forest);margin:4.5px 0;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero (homepage) ---------- */
.hero{position:relative;padding-top:clamp(134px,15vw,190px);padding-bottom:clamp(54px,7vw,82px);overflow:hidden}
.hero::before{content:"";position:absolute;top:-24%;right:-14%;width:62vw;height:62vw;
  max-width:820px;max-height:820px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(124,154,139,.28),rgba(124,154,139,0) 68%)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,5vw,64px);align-items:center;position:relative}
.hero h1 em{font-style:normal;color:var(--sage)}
.hero .lead{margin-top:1.5rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:2.1rem;font-size:.85rem;color:var(--muted)}
.hero-meta span{display:flex;align-items:center;gap:.5em}
.hero-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sage)}
.hero-img{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/4;background:var(--sand)}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* ---------- Paginakop (subpagina's) ---------- */
.pagehead{position:relative;padding-top:clamp(128px,14vw,178px);padding-bottom:clamp(28px,4vw,46px);overflow:hidden}
.pagehead::before{content:"";position:absolute;top:-30%;right:-10%;width:52vw;height:52vw;
  max-width:680px;max-height:680px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(124,154,139,.24),rgba(124,154,139,0) 68%)}
.pagehead > .wrap,.pagehead > .wrap-narrow{position:relative}
.pagehead .lead{margin-top:1.3rem}
.crumb{font-size:.83rem;color:var(--muted);margin:0 0 1rem}
.crumb a:hover{color:var(--forest)}
.crumb span{opacity:.5;margin:0 .45em}

/* ---------- Tekstblokken ---------- */
.prose h2{margin:2.3em 0 .7em;font-size:clamp(1.4rem,2.3vw,1.85rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:2em 0 .6em}
.prose p{color:var(--muted)}
.prose ul{color:var(--muted);padding-left:1.1em;margin:0 0 1.3em}
.prose li{margin-bottom:.4em}
.prose strong{color:var(--ink)}
/* Het vinkje staat absoluut geplaatst, en de tekst krijgt links ruimte.
   Eerder was elk item een flex-container. Dat gaat goed zolang er alleen
   tekst in staat, maar zodra er een link in een regel zit, wordt de tekst
   vóór de link, de link zelf en de tekst erna elk een aparte kolom - drie
   stroken naast elkaar. Op een breed scherm valt dat nauwelijks op, op een
   telefoon is het onleesbaar. Zo kan dat niet meer gebeuren, ongeacht wat
   er in een regel staat. */
.checks{list-style:none;padding:0;margin:1.5rem 0 0}
.checks li{position:relative;padding-left:30px;margin-bottom:11px;
  font-size:.97rem;color:var(--muted);break-inside:avoid}
.checks li:last-child{margin-bottom:0}
.checks svg{position:absolute;left:0;top:5px;width:18px;height:18px;color:var(--sage)}
.cols2{columns:2;column-gap:38px}
@media (max-width:640px){.cols2{columns:1}}

/* ---------- Kaarten ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3.2vw,36px);display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 24px 50px -28px rgba(24,47,40,.4);border-color:transparent}
/* Bovenkant van de aanbodkaart is gecentreerd; de tekst eronder blijft
   links uitgelijnd, want gecentreerde lopende tekst leest trager. */
.card-head{text-align:center;margin-bottom:1.5rem}
.card-icon{width:var(--icoon);height:var(--icoon);display:grid;place-items:center;margin:0 auto 1.4rem}
/* Getekende lijniconen verdragen de 130px van de geïllustreerde iconen niet -
   op die maat worden het lege omtrekken. Deze variant houdt ze klein. */
.card-icon.klein{width:54px;height:54px;margin-bottom:1.15rem}
.card-icon img,.card-icon svg{width:100%;height:100%;object-fit:contain}
.card-name{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin:0 0 .5rem}
.card-head h3{margin-bottom:0}
.card h3{margin-bottom:.6em}
.btn-sm{padding:.7em 1.2em;font-size:.85rem}
.card p{font-size:.94rem;color:var(--muted);flex:1;margin-bottom:1.4rem}
.card-foot{border-top:1px solid var(--line);padding-top:1.1rem;margin-top:auto}
.card-links{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
/* min(285px,100%) in plaats van 285px: op een smal scherm (320px) is er maar
   280px ruimte, en dan zou een kolom van 285px net buiten beeld vallen. */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr));gap:22px;margin-top:clamp(34px,4.5vw,50px)}
.who{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.who i{width:30px;height:30px;border-radius:50%;overflow:hidden;flex:0 0 30px;background:var(--sage-light);display:block}
.who i img{width:100%;height:100%;object-fit:cover}
.who b{display:block;font-weight:500;font-size:.88rem;color:var(--forest);font-style:normal}
.price{font-size:.85rem;color:var(--muted);margin-bottom:1rem}
.price strong{font-weight:500;color:var(--ink)}

/* ---------- Vlakken ---------- */
.panel{background:var(--sand);border-radius:var(--radius-lg);padding:clamp(38px,5.5vw,68px) clamp(26px,5vw,62px)}
.panel-light{background:var(--sage-light);border-radius:var(--radius-lg);padding:clamp(34px,5vw,58px) clamp(26px,5vw,58px)}
.panel-dark{background:var(--forest);color:var(--cream);border-radius:var(--radius-lg);
  padding:clamp(38px,5.5vw,68px) clamp(26px,5vw,62px)}
.panel-dark h2,.panel-dark h3{color:var(--cream)}
.panel-dark p{color:rgba(250,247,242,.78)}

/* ---------- Stappen ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(24px,3vw,38px);margin-top:clamp(30px,4vw,44px)}
.step{position:relative}
.step-no{display:block;font-size:2.1rem;font-weight:300;color:rgba(36,67,58,.28);
  line-height:1;letter-spacing:-.04em;margin-bottom:14px}
.step h3{font-size:1.13rem;margin-bottom:.5em;padding-top:22px;
  border-top:1px solid rgba(36,67,58,.22)}
.step p{font-size:.92rem;color:var(--muted);margin:0}

/* ---------- Werkwijze ---------- */
.method{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:clamp(38px,6.5vw,84px);align-items:start}
.method-sticky{position:sticky;top:118px}
.approach{padding:30px 0;border-bottom:1px solid var(--line)}
.approach:first-child{padding-top:0}
.approach:last-child{border-bottom:0}
.approach-no{font-size:.74rem;font-weight:500;letter-spacing:.16em;color:var(--sage)}
.approach h3{margin:0 0 .6em}
.approach-wie{display:inline-block;font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);background:var(--sage-light);
  padding:.35em .85em;border-radius:999px;vertical-align:middle;margin-left:.6em}
.approach p{font-size:.96rem;color:var(--muted);margin:0}

/* ---------- Beeld naast tekst ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5.5vw,74px);align-items:center}
.split-img{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/6}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img.wide{aspect-ratio:16/11}
.artikel-beeld{background:var(--sand);display:grid;place-items:center}
.artikel-beeld img{object-fit:contain}

/* ---------- Resultaten ---------- */
.results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:clamp(22px,2.6vw,34px)}
.result{border-top:1px solid var(--line);padding-top:20px}
.result-icon{display:block;color:var(--sage);margin-bottom:14px}
.result-icon svg{width:26px;height:26px}
.result strong{display:block;font-size:1.1rem;font-weight:400;line-height:1.3;
  color:var(--forest);margin-bottom:.4em;letter-spacing:-.015em}
.result p{font-size:.9rem;color:var(--muted);margin:0}

/* ---------- Quote ---------- */
.quote{background:var(--forest);color:var(--cream);border-radius:var(--radius-lg);
  padding:clamp(52px,7.5vw,96px) clamp(26px,6vw,74px);text-align:center}
.quote blockquote{margin:0 auto;font-weight:300;font-size:clamp(1.4rem,3vw,2.3rem);
  line-height:1.35;max-width:24ch;letter-spacing:-.025em}
.quote figcaption{margin-top:1.8rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}

/* ---------- Reviews ---------- */
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:20px;margin-bottom:clamp(28px,3.6vw,44px)}
/* Knoppen bij de reviews. Zonder deze pijltjes is niet zichtbaar dat je
   opzij kunt schuiven — en wat je niet ziet, bestaat niet. */
.rail-nav{display:flex;gap:8px}
.rail-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:none;color:var(--forest);font-size:1rem;cursor:pointer;
  display:grid;place-items:center;transition:.2s;font-family:var(--font)}
.rail-btn:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.rail-btn[disabled]{opacity:.3;cursor:default}
.rail-btn[disabled]:hover{background:none;color:var(--forest);border-color:var(--line)}
.rev-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;
  scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
.rev-rail::-webkit-scrollbar{height:5px}
.rev-rail::-webkit-scrollbar-thumb{background:var(--sage);border-radius:99px}
.rev{flex:0 0 min(350px,82vw);scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
.stars{display:flex;gap:2px;color:var(--clay);font-size:.9rem;margin-bottom:.9rem}
.rev p{font-size:.93rem;color:var(--muted);flex:1;margin-bottom:1.3rem}
.rev cite{font-style:normal;font-weight:500;font-size:.88rem;color:var(--forest)}
.rev cite span{display:block;font-weight:300;font-size:.79rem;color:var(--muted);margin-top:2px}

/* ---------- Blog ---------- */
.tabs{display:flex;gap:6px;margin-bottom:clamp(24px,3vw,34px);flex-wrap:wrap}
.tab{font-family:var(--font);font-size:.87rem;font-weight:500;padding:.6em 1.2em;border-radius:999px;
  border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;transition:.22s}
.tab:hover{color:var(--forest);border-color:var(--sage)}
.tab[aria-selected="true"]{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr));gap:24px}
.blog-grid[hidden]{display:none}
.post{display:flex;flex-direction:column}
.post-img{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;background:var(--sand);margin-bottom:1.1rem}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.post:hover .post-img img{transform:scale(1.05)}
.post-meta{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-bottom:.6rem}
.post h3{font-size:1.18rem;margin-bottom:.45em;transition:color .2s}
.post:hover h3{color:var(--forest)}
.post p{font-size:.92rem;color:var(--muted);margin:0}

/* ---------- Video ---------- */
.video{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;
  background:var(--forest);display:grid;place-items:center;cursor:pointer}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:.5s}
.video:hover img{opacity:.42;transform:scale(1.03)}
.play{position:relative;width:70px;height:70px;border-radius:50%;background:var(--cream);
  display:grid;place-items:center;transition:transform .3s}
.video:hover .play{transform:scale(1.08)}
.play::after{content:"";border-left:17px solid var(--forest);border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:5px}
.video-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;color:var(--cream);
  font-size:.87rem;background:linear-gradient(transparent,rgba(24,47,40,.75))}

/* ---------- Uitklapbare vragen ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.35em 2.4em 1.35em 0;position:relative;
  font-size:1.02rem;font-weight:400;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--forest)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.4px solid var(--sage);border-bottom:1.4px solid var(--sage);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .answer{padding:0 0 1.6em;color:var(--muted);font-size:.96rem;max-width:70ch}
.faq .answer p:last-child{margin-bottom:0}
.faq .answer h4{font-size:.9rem;font-weight:500;color:var(--forest);margin:1.3em 0 .4em}
.faq .answer h4:first-child{margin-top:0}
.faq .answer ul{padding-left:1.1em;margin:.3em 0 1em}

/* ---------- Tarieven ---------- */
.rate-table{width:100%;border-collapse:collapse;margin:1.3rem 0 0;font-size:.95rem}
.rate-table th{text-align:left;font-weight:500;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);padding:0 0 .8em;border-bottom:1px solid var(--line)}
.rate-table td{padding:.95em 0;border-bottom:1px solid var(--line);color:var(--muted)}
.rate-table td:last-child{text-align:right;color:var(--ink);font-weight:500;white-space:nowrap}

/* ---------- Praktisch blok ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,3vw,40px)}
.fact h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);
  font-weight:500;margin:0 0 .9em}
.fact ul{list-style:none;padding:0;margin:0;font-size:.93rem;color:var(--muted);display:grid;gap:.5em}
.fact p{font-size:.93rem;color:var(--muted);margin:0}

/* ---------- Formulier ---------- */
.form{display:grid;gap:18px;max-width:560px}
.field label{display:block;font-size:.83rem;font-weight:500;color:var(--forest);margin-bottom:.45em}
.field input,.field textarea,.field select{width:100%;font-family:var(--font);font-size:.97rem;
  font-weight:300;padding:.85em 1em;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(124,154,139,.18)}
.field textarea{min-height:140px;resize:vertical}

/* ---------- CTA ---------- */
.cta{background:var(--forest);color:var(--cream);border-radius:var(--radius-lg);
  padding:clamp(48px,6.5vw,88px) clamp(26px,6vw,66px);text-align:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;bottom:-45%;left:50%;transform:translateX(-50%);
  width:120%;height:110%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(124,154,139,.3),transparent 66%)}
.cta > *{position:relative}
.cta h2{color:var(--cream)}
.cta p{color:rgba(250,247,242,.78);max-width:52ch;margin:1.1rem auto 0}
.cta .btn{margin-top:1.9rem}

/* ---------- Footer ---------- */
.footer{background:var(--forest-deep);color:rgba(250,247,242,.72);
  padding-block:clamp(52px,6.5vw,78px) 30px;margin-top:var(--section)}
.footer a:hover{color:var(--cream)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer .brand{color:var(--cream)}
.footer .brand img{filter:brightness(0) invert(1);opacity:.9}
.foot-about{font-size:.9rem;margin-top:1.05rem;max-width:34ch}
.footer h4{font-size:.73rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sage);margin-bottom:1rem}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.9rem}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  margin-top:clamp(40px,5.5vw,58px);padding-top:24px;
  border-top:1px solid rgba(250,247,242,.14);font-size:.82rem}

/* ---------- Animatie ----------
   Alles is standaard zichtbaar. Het script zet de klasse js-anim op
   <html> en pas dán wordt er verborgen. Zo kan er nooit inhoud
   onzichtbaar blijven als het script niet draait of hapert. */
.reveal{opacity:1;transform:none}
.js-anim .reveal{opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.2,.6,.3,1),transform .8s cubic-bezier(.2,.6,.3,1)}
.js-anim .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
picture{display:contents}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .method{grid-template-columns:1fr}.method-sticky{position:static}
  .split{grid-template-columns:1fr}.split-img{order:-1;aspect-ratio:16/10}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* Het menu heeft zeven items plus een knop. Onder deze breedte botsten de
   menu-items op het logo — vandaar dat het hamburgermenu er nu eerder in komt. */
@media (max-width:1120px){
  .burger{display:block}
  .navlist{position:fixed;inset:0 0 auto 0;padding:92px var(--gutter) 34px;flex-direction:column;
    align-items:stretch;gap:0;background:var(--cream);box-shadow:0 20px 40px -24px rgba(0,0,0,.35);
    transform:translateY(-101%);transition:transform .4s cubic-bezier(.4,0,.2,1);
    max-height:100vh;overflow-y:auto}
  .navlist.open{transform:translateY(0)}
  .nav{gap:0}
  .nav > li{border-bottom:1px solid var(--line)}
  .nav a,.nav .navbtn{padding:.95em 0;font-size:1.04rem;width:100%;text-align:left}
  .nav a:hover,.nav .navbtn:hover{background:none}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-radius:0;padding:0 0 .8em 1em;background:none;display:none}
  .submenu.open{display:block}
  .header .btn-primary{display:none}
  .hero-grid{grid-template-columns:1fr}
  .hero-img{order:-1;aspect-ratio:16/11}
}
@media (max-width:560px){
  body{font-size:16px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .results-grid{grid-template-columns:1fr 1fr}
}

/* ---------- Sociale link ---------- */
.social{display:inline-flex;align-items:center;gap:10px;font-size:.93rem;color:var(--muted);
  padding:.55em .95em .55em .7em;border:1px solid var(--line);border-radius:999px;transition:.22s}
.social svg{width:20px;height:20px;flex:0 0 20px;color:var(--sage);transition:color .22s}
.social:hover{color:var(--forest);border-color:var(--sage);background:#fff}
.social:hover svg{color:var(--forest)}

/* ---------- Ronde 2 ---------- */
/* Merkregel tussen de blokken */
.tagline{text-align:center;font-size:clamp(1.3rem,2.6vw,2rem);font-weight:300;
  letter-spacing:.01em;color:var(--sage);margin:0}

/* Bovenbalk: logo links, menu gecentreerd, knop rechts */
.header-in{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:center;gap:clamp(12px,2vw,28px)}
.header-in nav{justify-self:center}
.nav{justify-content:center}

/* Aanbodkaarten: de omschrijving rekt op (flex:1), waardoor de lijn, foto,
   prijs en knoppen op alle drie de kaarten op dezelfde hoogte uitkomen.
   Eerder stond hier een vaste hoogte op de titel; bij een kop van één regel
   gaf dat een gat van bijna twee regels onder EXPLORE en UNPACK. */

/* Quote: uitspraak iets rustiger, ondertitel wat prominenter */
.quote blockquote{font-size:clamp(1.25rem,2.5vw,1.95rem)}
/* Korte merkregel: geen vlak, alleen tekst met ruimte eromheen */
.quote-kort{background:none;color:inherit;padding-block:clamp(30px,4.5vw,58px);padding-inline:0}
.quote-kort::after{content:none}
.quote-kort blockquote{max-width:none;color:var(--forest);
  font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.02em}
.quote figcaption{margin-top:2.1rem;font-size:1rem;letter-spacing:.12em;
  text-transform:none;color:var(--sage)}

@media (max-width:1120px){
  .header-in{display:flex}
}
.doclist{list-style:none;padding:0;margin:0;display:grid;gap:1.2rem}
.doclist li{border-bottom:1px solid var(--line);padding-bottom:1.2rem}
.doclist li:last-child{border-bottom:0}
/* Blogafbeeldingen volledig in beeld, gecentreerd */
.post-img{background:var(--sand);display:grid;place-items:center}
.post-img img{width:100%;height:100%;object-fit:contain;object-position:center}
.social svg{width:20px;height:20px}
.cta-direct{margin-top:1.6rem;font-size:.9rem;color:rgba(250,247,242,.7);
  max-width:none;text-wrap:balance}
@media (min-width:820px){.cta-direct{white-space:nowrap}}
.cta-direct a{border-bottom:1px solid rgba(250,247,242,.35);padding-bottom:1px;transition:.2s}
.cta-direct a:hover{color:var(--cream);border-color:var(--cream)}
.vers{font-size:1.05rem;line-height:2;color:var(--ink);margin-bottom:1.8em}

/* ---------- Mobiel: blokken met tekst plus knop ----------
   Deze blokken stonden vast op twee kolommen, waardoor de knop op een
   telefoon werd platgedrukt. Nu stapelen ze netjes onder elkaar. */
.panel-split{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3.5vw,36px);align-items:center}
@media (max-width:760px){
  .panel-split{grid-template-columns:1fr;gap:22px}
  .panel-split .btn{width:100%;justify-content:center}
  .btn-row .btn{flex:1 1 auto;justify-content:center}
  .rev{flex-basis:min(320px,86vw)}
  .head-row{align-items:flex-start}
  .quote blockquote{max-width:none}
}
@media (max-width:420px){
  /* min-height 44px: dat is de maat waarop een knop met een duim goed te
     raken is. Zonder die regel werd hij hier net iets te laag. */
  .btn{padding:.9em 1.35em;font-size:.88rem;min-height:44px}
}

/* Logohoogte staat als --logo-h bovenaan dit bestand (nu 34px). Op die maat
   is een aparte mobiele regel niet nodig. Zet je hem hoger, voeg hier dan
   een @media (max-width:700px) toe die --logo-h terugbrengt. */


/* ---------- IJsbergmetafoor (Onze werkwijze) ----------
   Dezelfde drie lagen als in de digitale check-up. Laag 3 ligt onder
   de waterlijn: dat is wat je niet ziet, maar wel meedraagt. */
.ijsberg{margin-top:clamp(30px,4vw,46px);border-radius:var(--radius);overflow:hidden}
.ijs-laag{display:flex;gap:18px;padding:20px 22px;background:var(--sage-light);
  border-bottom:1px solid rgba(36,67,58,.12)}
.ijs-laag:last-child{border-bottom:0}
.ijs-num{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--forest);font-size:.82rem;font-weight:500}
.ijs-laag strong{display:block;font-weight:400;font-size:1.02rem;color:var(--forest);
  margin-bottom:.25em;letter-spacing:-.01em}
.ijs-laag span{font-size:.92rem;color:var(--muted);line-height:1.6}
.ijs-water{position:relative;height:0;border-top:1px dashed var(--sage)}
.ijs-water span{position:absolute;top:-.75em;left:22px;background:var(--cream);
  padding:0 10px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.ijs-laag.onderwater{background:var(--forest);border-bottom:0}
.ijs-laag.onderwater .ijs-num{background:rgba(250,247,242,.16);color:var(--cream)}
.ijs-laag.onderwater strong{color:var(--cream)}
.ijs-laag.onderwater span{color:rgba(250,247,242,.75)}

/* IJsberg - momenteel NIET in gebruik op de site. Bewaard voor als
   we hem later alsnog willen tonen. */
.ijs-top{display:flex;gap:18px;padding:20px 22px;background:var(--cream);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0}
.ijs-top strong{display:block;font-weight:400;font-size:1.02rem;color:var(--forest);
  margin-bottom:.25em;letter-spacing:-.01em}
.ijs-top span{font-size:.92rem;color:var(--muted);line-height:1.6}
.ijs-tip{flex:0 0 28px;height:28px;display:block;
  background:linear-gradient(to bottom right,transparent 49%,var(--sage) 50%);
  clip-path:polygon(50% 0,100% 100%,0 100%)}
.ijsberg{border-radius:var(--radius)}

/* ---------- Silhouetband ----------
   Het beeldmerk staat niet meer in de bovenbalk maar hier, waar het de
   metafoor vertelt. Een breed liggend beeld verdient de volle breedte. */
.silhouet{margin-top:clamp(40px,6vw,76px);padding-bottom:clamp(20px,3vw,36px)}
.silhouet img{width:100%;height:auto;max-width:960px;margin-inline:auto;opacity:.9}
@media (max-width:700px){.silhouet{margin-top:clamp(28px,5vw,44px)}}

/* Silhouet onderaan de voettekst - VERWIJDERD op verzoek.
   De opmaak blijft staan voor het geval we hem terugwillen; het beeld zelf
   staat niet meer in build.py, dus je ziet er nu niets van. */
.foot-silhouet{margin-top:clamp(40px,5.5vw,64px)}
.foot-silhouet img{width:100%;max-width:760px;height:auto;margin-inline:auto;
  filter:brightness(0) invert(1);opacity:.22}
@media (max-width:700px){.foot-silhouet{margin-top:clamp(28px,5vw,44px)}}