/* ============================================================================
   Top Feestzaal ads-lander (topfeestverhuur.nl)
   Skelet: pro-lander SpeedyService, hero-anker naar Feitsma/Excellent-model.
   Palet: thema 22-aug uit het kleurenlab, goedgekeurd door de klant en ingebakken
   25-aug: donkergroen #283618, sage #8FAA82, creme #FAF6EC, goud #C0A878, met
   Fredoka (koppen) en Nunito (tekst). Oud botanisch palet: git tot a0eee52.
   Contrast (WCAG, nagerekend 25-aug):
   - btn ink #283618 + wit label 12,87:1 (creme label #FAF6EC: 11,93:1)
   - btn accent #7C6A3C + wit label 5,27:1 (op creme als groot element 4,88:1)
   - sage-donker #5E7A52 + wit label 4,79:1 (alleen derde knop en accenten)
   - goud #C0A878 nooit als tekstdrager met wit (2,30:1), alleen decoratief;
     ink op goud (prijslokker) 5,59:1
   - koppen #283618 op creme 11,93:1, op sage-tint 10,91:1
   - muted #44503A op wit 8,56:1, op creme 7,93:1
   ========================================================================== */

/* ---------------- Fredoka (koppen) en Nunito (tekst), zelf gehost als variabele woff2 (latin + latin-ext);
   thema 22-aug, gekozen door de klant, ingebakken 25-aug ---------------- */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/fredoka-300-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/fredoka-300-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('../fonts/nunito-200-1000-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url('../fonts/nunito-200-1000-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Palet = thema 22-aug uit het kleurenlab, gekozen en goedgekeurd door de klant (ingebakken 25-aug).
   Het oorspronkelijke botanische palet (gemeten uit logo en foto's, #373D27/#BC8E69/#F7F4EE) staat
   in het kleurenlab als preset "Botanisch groen" en in git-historie tot a0eee52. */
:root{
  --groen-ink:#283618;   /* donkergroen: koppen, donkere secties, primaire CTA */
  --groen-diep:#1E290F;  /* hover en gradientpartner van de donkere vlakken */
  --sage:#8FAA82;        /* decoratie en kaders, geen lopende tekst */
  --sage-donker:#5E7A52; /* secundaire accenten en de Bezichtiging-knop */
  --sage-tint:#E7EFDD;   /* licht sage-sectievlak */
  --creme:#FAF6EC;       /* warm wit paginavlak */
  --paper:#FFFFFF;       /* kaarten en formulierpanelen */
  --goud:#C0A878;        /* warm accent: prijslokker, glow, em-streep; nooit tekst op licht */
  --goud-diep:#7C6A3C;   /* accent diep: knop op licht, ornamenten op licht vlak */
  --goud-licht:#D5C6A6;  /* lichtgoud: vinkjes op donker (goud + 34% wit) */
  --blush:#CFE0B8;       /* accenttekst op donkergroen, ornamenten op donker vlak */
  --conversie:#188841;   /* conversiegroen voor primaire knoppen (wit label 4,54:1) */
  --conversie-diep:#106B33;
  --muted:#44503A;       /* alineakleur op wit en creme */
  --line:#E4E7D8;
  --radius:18px;
  --radius-sm:12px;
  --btn-r:12px;
  --logo-h:44px;
  --logo-h-stuck:38px;
  --shadow-sm:0 2px 10px rgba(20,28,9,.07);
  --shadow:0 18px 50px -22px rgba(20,28,9,.35);
  --shadow-lg:0 40px 90px -40px rgba(20,28,9,.5);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:manipulation;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--groen-ink);
  background:var(--creme);
  font-size:clamp(15.5px,.4vw + 14.5px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-weight:600;line-height:1.14;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
picture{display:contents}
/* Dubbele ring: goud binnen, donkergroen buiten, zichtbaar op licht en donker. */
:focus-visible{outline:3px solid var(--goud);outline-offset:2px;box-shadow:0 0 0 6px rgba(40,54,24,.85);border-radius:4px}
.wrap{
  width:min(100% - 2.4rem,var(--maxw));margin-inline:auto;
  padding-left:max(0px,env(safe-area-inset-left));
  padding-right:max(0px,env(safe-area-inset-right));
}

/* Eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;
  color:var(--groen-ink);
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--goud);flex:none}
.op-donker .eyebrow{color:var(--blush)}
.op-donker .eyebrow::before{background:var(--goud)}

/* ---------------- Knoppen ----------------
   Bewuste afwijking van de donor: een knop is zo breed als zijn label
   (white-space normal), nooit nowrap. Knoprij-regels staan op EEN plek. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:var(--btn-r);border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.96rem;line-height:1.25;
  transition:transform .25s var(--ease),background .2s,box-shadow .25s var(--ease);
  white-space:normal;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn--ink{background:var(--groen-ink);color:var(--creme)}          /* 10,45:1 */
.btn--ink:hover{background:var(--groen-diep)}
.btn--accent{background:var(--conversie);color:#fff;box-shadow:0 12px 26px -12px rgba(16,107,51,.55)}  /* 4,54:1 */
.btn--accent:hover{background:var(--conversie-diep)}
.btn--wit{background:#fff;color:var(--groen-ink);box-shadow:0 10px 22px -12px rgba(20,28,9,.45)}    /* 11,29:1 */
.btn--wit:hover{background:var(--sage-tint)}
.btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.btn--ghost:hover{border-color:#fff}
/* Gedeelde knoprij-regel: label-breed op desktop, samen wrappend. */
.hero__actions,.intro__cta,.reasons__cta,.waarom__cta,.plattegrond__cta,.story__cta,.extras__cta,.werkwijze__cta,.faq__cta{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
}
/* Tekstlinks in een knoprij en in lopende tekst. */
.tlink{font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--groen-ink)}
.tlink:hover{background:var(--sage-tint)}
.op-donker .tlink,.hero .tlink{color:#fff}
.op-donker .tlink:hover,.hero .tlink:hover{background:rgba(255,255,255,.14)}

/* ---------------- Topbar ---------------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;isolation:isolate;
  padding:max(.8rem,env(safe-area-inset-top)) 0 .8rem;
  transition:background .25s ease,box-shadow .25s ease,padding .25s ease;
}
.topbar__in{display:flex;align-items:center;gap:1rem}
.topbar__logo{display:inline-flex;align-items:center;gap:.6rem;min-width:0}
.topbar__logo img{height:var(--logo-h);width:auto;transition:height .25s ease}
.topbar__logo .logo--stuck{display:none}
.topbar__naam{
  font-weight:700;font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;line-height:1.1;white-space:nowrap;
}
.topbar__spacer{flex:1}
.topbar__tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#fff;font-size:.98rem;white-space:nowrap}
.topbar__tel svg{width:17px;height:17px}
.topbar .btn{padding:.7rem 1.05rem;font-size:.9rem}
.topbar.is-stuck{
  background:rgba(250,246,236,.92);
  backdrop-filter:saturate(1.3) blur(12px);
  -webkit-backdrop-filter:saturate(1.3) blur(12px);
  box-shadow:var(--shadow-sm);
  padding:max(.5rem,env(safe-area-inset-top)) 0 .5rem;
}
.topbar.is-stuck .topbar__logo img{height:var(--logo-h-stuck)}
.topbar.is-stuck .logo--hero{display:none}
.topbar.is-stuck .logo--stuck{display:block}
.topbar.is-stuck .topbar__naam{color:var(--groen-ink)}
.topbar.is-stuck .topbar__tel{color:var(--groen-ink)}
.topbar.is-stuck .btn--wit{border:1px solid var(--line)}

/* ---------------- Hero: donkergroen vlak, tekstkolom links, figuur rechts ---- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:var(--groen-diep);
  background-image:
    linear-gradient(to right,rgba(20,28,9,.94) 0%,rgba(20,28,9,.88) 42%,rgba(20,28,9,.62) 75%,rgba(20,28,9,.5) 100%),
    linear-gradient(to bottom,rgba(20,28,9,.55) 0%,rgba(20,28,9,0) 30%,rgba(20,28,9,.25) 100%),
    image-set(url("../img/hero-achtergrond.webp?v=2") type("image/webp"),url("../img/hero-achtergrond.jpg?v=2") type("image/jpeg"));
  background-size:cover;background-position:center 40%;
  min-height:658px;
}
@media (max-width:768px){
  .hero{
    background-image:
      linear-gradient(to bottom,rgba(20,28,9,.92) 0%,rgba(20,28,9,.82) 55%,rgba(20,28,9,.6) 100%),
      image-set(url("../img/hero-achtergrond-960.webp?v=2") type("image/webp"),url("../img/hero-achtergrond.jpg?v=2") type("image/jpeg"));
  }
}
/* Zachte goud-glow rechtsboven (patroon rev-orb van de donor). */
.hero::before{
  content:"";position:absolute;right:-160px;top:-160px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,168,120,.16) 0%,transparent 65%);pointer-events:none;z-index:0;
}
/* Watermerk: alleen het ballon-merk, wit, groot rechtsboven.
   Bewuste afwijking van de 460px-richtwaarde: het merkdeel in de logobron is
   maar 67px breed (bron 372px). 230px is de grens waarop de opgeschaalde
   aquarel nog netjes oogt; grotere logobron opvragen staat in de README. */
.hero__mark{
  position:absolute;z-index:0;pointer-events:none;
  bottom:-70px;left:clamp(0px,1vw,1rem);
  width:min(340px,25vw);height:auto;opacity:.2;
}
.hero__inner{
  position:relative;z-index:1;max-width:1280px;margin:0 auto;
  padding:calc(108px + env(safe-area-inset-top)) clamp(16px,4vw,40px) 96px;
}
.hero__text{max-width:600px}
.hero__title{color:#fff;font-weight:800;font-size:clamp(2rem,3.5vw,3.05rem);letter-spacing:-.02em;line-height:1.08}
.hero__title em{font-style:normal;color:var(--blush)}   /* 6,69:1 op groen-diep */
.hero__sub{margin-top:1rem;color:rgba(247,244,238,.88);font-size:clamp(1rem,1.35vw,1.13rem);max-width:52ch}
.hero__actions{margin-top:1.5rem}
.hero__note{margin-top:1rem;font-size:.95rem;color:rgba(247,244,238,.82)}
.hero__note strong{color:var(--goud-licht);font-weight:800}

/* De figuur ankert op de offertebalk: zelfde plafond (1280px), zelfde
   sectiepadding, bottom = |negatieve marge van .of-wrap|.
   Wijzig je 1 getal, wijzig dan alle drie (zie ook .offerte-overlay/.of-wrap). */
.hero__pack{
  position:absolute;z-index:2;bottom:30px;
  right:max(clamp(16px,4vw,40px),calc((100% - 1280px) / 2));
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
/* Chips onder de herotekst (verzoek Shahab 18-aug): 2 kolommen op auto-breedte,
   zodat de tweede kolom uitlijnt (met flex-wrap liep die rafelig). Samen 579px,
   dus ze passen in de 600px-tekstkolom; onder 768px 1 kolom, want dan is 579px te breed. */
.hero__usps{margin-top:1.7rem;display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:11px 26px}
.hero__usps span{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:600;font-size:1.02rem;color:#fff;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
/* Vinkje = sprite #i-tick (Shutterstock Checkmark/TICK, keuze Shahab 18-aug): vierkant met los goud vinkje.
   Kleuren via variabelen: licht = donkergroen vlak + goud vinkje; op donker creme vlak + lichtgoud vinkje. */
.vink{
  width:22px;height:22px;color:var(--groen-ink);
  display:inline-grid;place-items:center;flex:none;
}
.vink svg{width:22px;height:22px;overflow:visible}
.op-donker .vink,.zegel{--tick-vlak:var(--creme);--tick-vink:var(--goud-licht)}
.zegel{width:25px;height:25px;flex:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
/* Vaste px-hoogtes per tier, nooit percentages, nooit display none. */
.hero__person{height:464px;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}

/* Prijslokker (klantfeedback 25-aug: "vanaf 495 euro, instapprijs voor de middag"): gouden sticker
   naast de hero-figuur. Absoluut in .hero__pack, dus geen invloed op de hero-hoogte en de vouwmarge.
   Ink op goud = 5,6:1. Onder 1100px (hero klapt om) hangt hij rechtsboven aan de figuur. */
.prijslokker{
  position:absolute;right:calc(100% + 22px);top:44px;z-index:3;
  width:150px;height:150px;border-radius:50%;padding:14px;
  display:grid;align-content:center;justify-items:center;gap:3px;text-align:center;
  background:var(--goud);color:var(--groen-ink);text-decoration:none;
  transform:rotate(-8deg);box-shadow:0 18px 32px -14px rgba(0,0,0,.6);
  transition:transform .25s var(--ease);
}
.prijslokker:hover{transform:rotate(-4deg) scale(1.04)}
.prijslokker__vanaf{font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.prijslokker__bedrag{font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.prijslokker__uitleg{font-size:.8rem;font-weight:700;line-height:1.15}
@media (max-width:1100px){
  .hero .hero__pack{position:relative}   /* wint van .hero__pack{position:static} in de breakpoints verderop */
  /* Figuur staat gecentreerd (align-self:center) op 340px hoog; zijn halve breedte is 170px x de
     beeldverhouding (--fig-ratio op .hero__pack per pagina). Zo hangt de sticker bij elke figuur
     14px links van de rand en niet over ballonnen of hoofden (met een vaste 118px botste hij
     bij de brede kinder- en duofiguur). */
  .prijslokker{right:calc(50% + 170px * var(--fig-ratio, .64) + 14px);top:18px;width:132px;height:132px}
  .prijslokker__bedrag{font-size:1.85rem}
}
@media (max-width:768px){
  /* Onder 768px staat de figuur gecentreerd op max 86% breed: naast de hoofden is geen plek voor de
     sticker (gemeten 01-09-2026: rechtsboven aan de figuur stond hij op 5 van de 6 pagina's over een
     hoofd). Hij hangt daarom rechts naast de USP-vinkjes, onderkant gelijk met de onderkant van die
     lijst: 34px = padding-bottom van .hero__inner in deze tier. De lijst houdt de kolom vrij
     (padding-right = sticker + marge) en mag afbreken. */
  .prijslokker{right:14px;top:auto;bottom:calc(100% + 34px);width:120px;height:120px;padding:10px}
  .prijslokker__bedrag{font-size:1.7rem}
  .prijslokker__vanaf{font-size:.7rem}
  .prijslokker__uitleg{font-size:.74rem}
  .hero__usps{padding-right:134px}
  .hero__usps span{white-space:normal}
}
@media (max-width:430px){
  .prijslokker{right:12px;width:104px;height:104px;padding:8px}
  .prijslokker__bedrag{font-size:1.5rem}
  .hero__usps{padding-right:116px}
}
/* Verjaardag: de kinderfiguur is op desktop 573px breed, dan past de sticker niet tussen tekst en
   figuur (botste op elke breedte met de intro en de Bel-knop). Daar hangt hij rechtsboven aan de
   figuur, boven de gouden ballon en naast het feesthoedje. Onder 1100px gelden de gewone regels. */
@media (min-width:1101px){
  .hero__pack--breed .prijslokker{right:-30px;top:-40px}
}

/* ---------------- Offerte-balk over de hero-rand ----------------
   flow-root verplicht: anders collapst de negatieve marge naar buiten. */
.offerte-overlay{position:relative;z-index:5;padding:0 clamp(16px,4vw,40px) 60px;background:var(--creme);display:flow-root}
#offerte{scroll-margin-top:88px}
#zaal,#professionals,#faq{scroll-margin-top:96px}
.of-wrap{position:relative;max-width:1280px;margin:-30px auto 0}
.of-box{
  position:relative;z-index:2;background:var(--paper);color:var(--groen-ink);
  border-radius:26px;padding:clamp(26px,3.2vw,40px) clamp(26px,3.8vw,48px);
  box-shadow:0 24px 60px -14px rgba(20,28,9,.3);border:1px solid var(--line);
}
.of-title{font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(22px,2.2vw,30px);margin:0 0 6px}
.of-sub{font-size:14.5px;color:var(--muted);margin:0 0 20px;font-weight:600}
.of-pill{
  display:grid;grid-template-columns:1.25fr 1px .85fr 1px .75fr auto;align-items:stretch;gap:0;
  background:var(--creme);border-radius:999px;padding:8px;border:1px solid var(--line);
}
.of-field{display:flex;flex-direction:column;justify-content:center;padding:8px 18px;min-width:0;cursor:text}
.of-field span{font-size:11px;font-weight:700;color:var(--groen-ink);letter-spacing:.04em;line-height:1;margin:0 0 4px;text-transform:uppercase;opacity:.78}
.of-field input,.of-field select{
  border:none;outline:none;background:none;font-family:inherit;font-size:16px;color:var(--groen-ink);
  width:100%;padding:0;line-height:1.4;-webkit-appearance:none;appearance:none;
}
.of-field select{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23373D27' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center;padding-right:16px}
.of-field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.2)}
.of-divider{background:var(--line);width:1px;align-self:center;height:38px}
.of-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--conversie);color:#fff;
  border:none;border-radius:999px;padding:14px 24px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;
  box-shadow:0 6px 16px -4px rgba(16,107,51,.45);transition:transform .2s var(--ease),background .2s;
}
.of-cta:hover{transform:translateY(-1px);background:var(--conversie-diep)}
.of-cta svg{width:16px;height:16px}
.of-avail{display:flex;align-items:center;gap:.5rem;margin-top:13px;font-size:12.5px;font-weight:600;color:var(--muted)}
.of-avail::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage-donker);flex:none}

/* ---------------- Sectie-basis ---------------- */
.sectie--tint{background:var(--sage-tint)}
.sectie__kop{max-width:62ch}
.sectie__kop h2,.reasons__body h2,.story__body h2,.plattegrond__body h2,.waarom__body h2{
  font-size:clamp(1.65rem,2.9vw,2.3rem);font-weight:700;margin-top:.7rem;
}
h2 em{font-style:normal;background:linear-gradient(180deg,transparent 62%,rgba(192,168,120,.45) 62%);padding-inline:.06em}
.op-donker h2 em{background:none;color:var(--blush)}

/* ---------------- Intro ---------------- */
.intro{padding:clamp(3rem,6vw,4.6rem) 0 clamp(2.6rem,5vw,3.6rem);background:var(--creme);overflow-x:clip}
.intro__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.intro__in p{margin-top:1rem;color:var(--muted)}
.intro__cta{margin-top:1.5rem}
/* Schuine blok achter de introfoto, zelfde familie als .reasons--alt (foto rechts): donkergroen, 5 graden */
.intro__media{position:relative;isolation:isolate}
.intro__media::before{
  content:"";position:absolute;inset:0;background:var(--groen-ink);
  border-radius:calc(var(--radius) + 14px);transform:rotate(5deg) translate(16px,16px);z-index:-1;
}
.intro__media img{width:100%;height:auto;border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow);transform:rotate(1deg)}
@media (max-width:880px){
  .intro__in{grid-template-columns:1fr}
  .intro__media{width:100%;max-width:30rem;margin-inline:auto}
  .intro__media::before{transform:rotate(3deg)}
}

/* ---------------- Reasons: foto naast tekst ----------------
   Foto exact even hoog als de tekstkolom: height 100 procent, geen aspect-ratio
   en geen max-height op desktop. overflow-x clip vanwege de gedraaide kaders. */
.reasons{padding:clamp(3.2rem,7vw,5.5rem) 0;overflow-x:clip}
/* Bewuste afwijking van de fotohoogte-huisregel op verzoek Shahab (18-aug):
   brede makelaars-foto's tonen op eigen 16:9-ratio, gecentreerd naast de tekst. */
.reasons__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.reasons__media{position:relative;isolation:isolate}
.reasons__media::before{
  content:"";position:absolute;inset:0;background:var(--sage);
  border-radius:calc(var(--radius) + 14px);transform:rotate(-5deg) translate(-16px,16px);z-index:-1;
}
.reasons__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;height:auto;box-shadow:var(--shadow);transform:rotate(1deg)}
.reasons__photo img{width:100%;height:auto}
.reasons__badge{
  position:absolute;right:-10px;bottom:-20px;background:var(--groen-ink);color:#fff;border-radius:14px;
  padding:.8rem 1.05rem;box-shadow:var(--shadow);line-height:1.3;font-size:.9rem;max-width:16rem;
}
.reasons__badge b{display:block;font-size:1.02rem;color:var(--blush)}
.reasons__body > p{margin-top:.85rem;color:var(--muted);max-width:56ch}
.reasons--alt .reasons__media{order:2}
.reasons--alt .reasons__media::before{background:var(--groen-ink);transform:rotate(5deg) translate(16px,16px)}
.reasons--alt .reasons__photo{transform:rotate(-1deg)}
.reasons--alt .reasons__badge{right:auto;left:-10px;background:var(--paper);color:var(--groen-ink)}
.reasons--alt .reasons__badge b{color:var(--goud-diep)}
/* Checklist met goudvinkjes, twee kolommen op desktop. */
.fl-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem}
/* Opsommingen onder het tekst-en-fotopaar, vol-breed in kolommen. */
.reasons__onder{margin-top:clamp(1.6rem,3vw,2.4rem)}
.reasons__onder .fl-list{grid-template-columns:repeat(3,1fr);gap:.7rem 2.2rem;margin-top:.8rem}
.waarom__onder{margin-top:clamp(1.6rem,3vw,2.4rem)}
.waarom__onder .waarom__list{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){
  .reasons__onder .fl-list,.waarom__onder .waarom__list{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .reasons__onder .fl-list,.waarom__onder .waarom__list{grid-template-columns:1fr}
}
.fl-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--muted)}
.fl-list .vink{margin-top:.2rem;width:20px;height:20px}
/* Contexticonen in een zacht badge-rondje (zelfde lijnstijl als de knop-iconen) */
.vink--icoon{
  width:34px;height:34px;border-radius:12px;
  background:var(--sage-tint);color:var(--groen-ink);
}
.vink--icoon svg{width:19px;height:19px}
.calplan__punten .vink--icoon{margin-top:-.25rem;width:34px;height:34px}
.calplan__punten .vink--icoon svg{width:19px;height:19px}
.fl-list .vink svg{width:20px;height:20px}
.reasons__stats{display:flex;gap:clamp(1.2rem,3vw,2.6rem);margin-top:1.5rem}
.reasons__stat b{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800}
.reasons__stat span{display:block;font-size:.8rem;color:var(--muted)}
.reasons__cta{margin-top:1.6rem}

/* ---------------- De zaal en faciliteiten: donkergroen vlak ---------------- */
.waarom{background:linear-gradient(150deg,var(--groen-ink) 0%,var(--groen-diep) 100%);color:#fff;padding:clamp(3.2rem,7vw,5.5rem) 0}
.waarom__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.waarom__media{position:relative;height:auto}
.waarom__media img{width:100%;height:auto;border-radius:22px}
.waarom__tag{
  position:absolute;left:18px;bottom:18px;background:var(--creme);color:var(--groen-ink);
  border-radius:999px;padding:.5rem .95rem;font-weight:700;font-size:.88rem;
}
.waarom__body > p{margin-top:.85rem;color:rgba(247,244,238,.8);max-width:52ch}
.waarom__list{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem 1.4rem;margin-top:1.5rem}
.wmini h3{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:700;color:#fff}
.wmini p{margin-top:.3rem;font-size:.88rem;color:rgba(247,244,238,.72)}
.waarom__cta{margin-top:1.8rem}

/* ---------------- Plattegrond ---------------- */
.plattegrond{padding:clamp(3.2rem,7vw,5.5rem) 0;background:var(--creme);overflow-x:clip}
.opstellingen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.opstellingen span{
  display:inline-flex;align-items:center;border:1px solid var(--sage);border-radius:999px;
  padding:.34rem .85rem;font-size:.88rem;font-weight:600;color:var(--groen-ink);background:var(--paper);
}
/* Interactieve opstellingen-viewer: kop vol-breed, 2x2 tegels naast grote weergave */
.plattegrond__kop{max-width:none}
.plattegrond__kop p{margin-top:.85rem;color:var(--muted);max-width:72ch}
.opstellingen svg{width:13px;height:13px;margin-right:.4rem;color:var(--goud-diep)}
.plattegrond__viewer{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:stretch;margin-top:1.6rem}
.plattegrond__mini{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-content:start}
.pmini{
  display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:8px 8px 0;box-shadow:var(--shadow-sm);cursor:pointer;font-family:inherit;text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.pmini:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pmini.is-actief{border-color:var(--conversie)}
.pmini img{width:100%;height:auto;border-radius:9px}
.pmini__label{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  font-size:.85rem;font-weight:700;color:var(--groen-ink);padding:.5rem 0 .6rem;
}
.pmini__vink{display:none;width:18px;height:18px}
.pmini__vink svg{width:18px;height:18px}
.pmini.is-actief .pmini__vink{display:inline-grid}
.plattegrond__media{display:flex;flex-direction:column}
.plattegrond__media a#pgLink{   /* alleen de grote kaart-link; de app-knop eronder mag geen witte kaart worden */
  flex:1;display:flex;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;box-shadow:var(--shadow);min-height:0;
}
.plattegrond__media img{width:100%;height:100%;object-fit:contain;border-radius:calc(var(--radius) - 6px)}
@media (max-width:880px){
  .plattegrond__viewer{grid-template-columns:1fr}
  .plattegrond__media a#pgLink{flex:none}
  .plattegrond__media img{height:auto}
}
.plattegrond__cta{margin-top:1.4rem}
.plattegrond__app{display:flex;justify-content:center;margin-top:1rem}
.plattegrond__hint{margin-top:1.4rem;font-size:.85rem;color:var(--muted);text-align:center;width:fit-content;margin-inline:auto;background:var(--creme);padding:.3rem .95rem;border-radius:999px}

/* ---------------- Sfeerband: de zaal in vol ornaat ---------------- */
.sfeer{position:relative;overflow:hidden;margin:0}
.sfeer img{width:100%;height:clamp(300px,42vw,560px);object-fit:cover}
.sfeer figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1rem 1.1rem;
  background:linear-gradient(transparent,rgba(20,28,9,.65));
  color:#fff;font-size:.9rem;font-weight:600;text-align:center;
}

/* ---------------- Locatie: kaart vol-breed, infokaart erover (makelaars-effect) ----------------
   De iframe ligt absoluut achter de .wrap; de wrap laat klikken door (pointer-events none), alleen de
   infokaart vangt ze. Onder 768px komt de kaart als blok onder de infokaart, dan blijft hij bedienbaar. */
.locatie{position:relative;isolation:isolate;background:var(--sage-tint);min-height:600px;display:flex;flex-direction:column}
.locatie__map{position:absolute;inset:0;z-index:0}
.locatie__map iframe{display:block;width:100%;height:100%;border:0}
.locatie__in{position:relative;z-index:1;display:flex;justify-content:flex-end;padding:clamp(2.6rem,5vw,4rem) 0;pointer-events:none}  /* kaart rechts: Google zet zijn eigen adreskaartje linksboven */
.locatie__kaart{
  pointer-events:auto;width:min(100%,470px);
  background:var(--paper);color:var(--groen-ink);border:1px solid var(--line);border-radius:26px;
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1.4rem,3vw,2.2rem);
  box-shadow:0 24px 60px -14px rgba(20,28,9,.35);
}
.locatie__kaart h2{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:700;margin-top:.6rem}
.locatie__adres{display:flex;align-items:flex-start;gap:.5rem;margin-top:.7rem;color:var(--muted);font-size:.95rem;font-weight:600}
.locatie__adres svg{width:18px;height:18px;flex:none;color:var(--goud-diep);margin-top:.15rem}
.locatie__punten{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.9rem}
.locatie__punten li{display:flex;align-items:flex-start;gap:.85rem;font-size:.92rem;line-height:1.5;color:var(--muted)}
.locatie__punten strong{display:block;color:var(--groen-ink);font-weight:700;font-size:.98rem}
.lpunt{
  width:40px;height:40px;flex:none;border-radius:50%;display:inline-grid;place-items:center;
  background:rgba(192,168,120,.16);border:1px solid rgba(192,168,120,.4);color:var(--goud-diep);
}
.lpunt svg{width:20px;height:20px}
.locatie__cta{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;margin-top:1.5rem}
@media (max-width:768px){
  .locatie{min-height:0}
  .locatie__map{position:static;order:2;height:340px}
  .locatie__in{padding-bottom:1.6rem}
  .locatie__kaart{width:100%;box-shadow:var(--shadow)}
}
@media (max-width:620px){
  .locatie__cta{max-width:23rem}
  .locatie__cta .btn{width:100%}
}

/* ---------------- Story: bezichtiging ---------------- */
.story{padding:clamp(3.2rem,7vw,5.5rem) 0;background:var(--sage-tint);overflow-x:clip}
.story__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.story__media{position:relative;isolation:isolate}
.story__media::before{
  content:"";position:absolute;inset:0;background:var(--groen-ink);
  border-radius:calc(var(--radius) + 14px);transform:rotate(-4deg) translate(-14px,14px);z-index:-1;
}
.story__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;height:auto;box-shadow:var(--shadow);transform:rotate(1deg)}
.story__photo img{width:100%;height:auto}
.story__badge{
  position:absolute;right:-10px;bottom:-18px;background:#fff;border-radius:12px;padding:.6rem .85rem;
  box-shadow:var(--shadow);font-size:.85rem;font-weight:700;
}
.story__body > p{margin-top:.85rem;color:var(--muted);max-width:46ch}
.story__cta{margin-top:1.4rem}

/* ---------------- Extra's ---------------- */
.extras{padding:clamp(2.8rem,6vw,4.2rem) 0;background:var(--creme)}
.extras__card{
  background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-sm);
  padding:clamp(1.6rem,3.2vw,2.6rem);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;
}
.extras__cta{margin-top:1.3rem}
.extras__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 38%;border-radius:18px}
.extras__card h2{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:700;margin-top:.6rem}
.extras__card p{margin-top:.7rem;color:var(--muted);max-width:60ch}
.extras__cta{justify-content:center}   /* gecentreerd op verzoek 18-aug */
.extras__cta .btn{padding:.7rem 1.1rem;font-size:.9rem}   /* compacter paar: offerte (donkergroen) + app (groen), verzoek 18-aug */

/* ---------------- Werkwijze: 3 stappen ---------------- */
/* Werkwijze = foto links (schuine blok) + genummerde stappenlijst rechts (keuze Shahab 18-aug, variant 3) */
.werkwijze{background:var(--paper);padding:clamp(3.2rem,7vw,5.5rem) 0;overflow-x:clip}
.werkwijze__row{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.werkwijze__media{position:relative;isolation:isolate}
.werkwijze__media::before{
  content:"";position:absolute;inset:0;background:var(--sage);
  border-radius:calc(var(--radius) + 14px);transform:rotate(-4deg) translate(-14px,14px);z-index:-1;
}
.werkwijze__foto{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow);transform:rotate(1deg)}
.werkwijze__intro{margin-top:.8rem;color:var(--muted)}
/* Stappenblok = grote omlijnde cijfers 01/02/03 (keuze Shahab 18-aug uit 4 uitwerkingen) */
.werkwijze__lijst{list-style:none;margin:clamp(1.2rem,2.5vw,1.6rem) 0 0;padding:0;display:grid;gap:1.5rem}
.werkwijze__lijst li{display:grid;grid-template-columns:4.2rem 1fr;gap:.6rem;align-items:start}
.werkwijze__nr{font-size:3rem;font-weight:800;line-height:.9;color:transparent;-webkit-text-stroke:1.6px var(--goud);letter-spacing:-.03em}
.werkwijze__lijst h3{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
.werkwijze__lijst h3 svg{width:20px;height:20px;color:var(--goud-diep);flex:none}
.werkwijze__lijst p{margin-top:.35rem;color:var(--muted);font-size:.93rem}
.werkwijze__tag{display:inline-block;margin-top:.5rem;font-size:.8rem;font-weight:700;color:var(--groen-ink);background:var(--sage-tint);padding:.28rem .75rem;border-radius:999px}
.werkwijze__cta{margin-top:1.8rem}

/* ---------------- FAQ ---------------- */
.faq{background:var(--sage-tint);padding:clamp(3.2rem,7vw,5.5rem) 0}
.faq__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3rem);margin-top:clamp(1.4rem,3vw,2rem);align-items:stretch}
.faq__media{display:flex;flex-direction:column;gap:1.1rem}
.faq__hulp{
  flex:1;background:var(--groen-ink);color:#fff;border-radius:20px;
  padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;justify-content:center;gap:.45rem;
}
.faq__hulp b{font-size:1.08rem}
.faq__hulp p{color:rgba(255,255,255,.87)}
.faq__hulpknoppen{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.7rem}
.faq__list{display:grid;gap:.7rem;align-content:space-between}
.faq__media .faq__photo img{aspect-ratio:16/9.5;object-fit:cover}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .2s ease}
.faq__item[open]{border-color:var(--groen-ink)}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.15rem;font-weight:700;font-size:.97rem;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";width:26px;height:26px;flex:none;border-radius:50%;background:var(--goud);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23373D27' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;transition:transform .2s var(--ease);
}
.faq__item[open] summary::after{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10' stroke='%23373D27' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq__item p{padding:0 1.15rem 1.1rem;color:var(--muted);font-size:.94rem}
/* Geen max-height: de foto volgt de kolomhoogte, ook met open items. */
.faq__photo{border-radius:20px;overflow:hidden;height:auto;background:var(--sage)}
.faq__photo img{width:100%;height:auto}

/* ---------------- Leadblock: het echte formulier ---------------- */
.leadblock{padding:clamp(3.2rem,7vw,5.5rem) 0;background:var(--creme)}
.leadblock__brug{max-width:60ch;margin:0 auto clamp(1.4rem,3vw,2rem);text-align:center;font-weight:600;color:var(--groen-ink);font-size:clamp(1rem,1.4vw,1.12rem)}
.leadblock__card{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);
}
.leadblock__media{position:relative;min-height:420px}
.leadblock__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.leadblock__panel{
  position:relative;color:#fff;padding:clamp(1.8rem,3.4vw,3rem);
  background:linear-gradient(140deg,#384929 0%,var(--groen-ink) 55%,var(--groen-diep) 100%);isolation:isolate;
}
.leadblock__panel::before{
  content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,168,120,.22) 0%,transparent 65%);z-index:-1;pointer-events:none;
}
.leadblock__panel h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;margin-top:.7rem}
.lead-p{margin-top:.7rem;color:rgba(247,244,238,.82);font-size:.96rem;max-width:52ch}

.lf{margin-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.lf__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start}
.lf__field{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.lf__field>span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,244,238,.92)}
.lf__field input:not([type=checkbox]),.lf__field select,.lf__field textarea{
  border:0;border-radius:var(--radius-sm);background:#fff;color:var(--groen-ink);
  font-family:inherit;font-size:16px;font-weight:600;padding:.72rem .85rem;width:100%;
  -webkit-appearance:none;appearance:none;
}
.lf__field textarea{resize:vertical;min-height:96px;font-weight:400}
.lf__field input:not([type=checkbox])::placeholder,.lf__field textarea::placeholder{color:#6b6b6b;font-weight:400}
.lf__field--sel{position:relative}
.lf__field--sel::after{
  content:"";position:absolute;right:.9rem;bottom:1.05rem;width:8px;height:8px;
  border-right:2px solid var(--groen-ink);border-bottom:2px solid var(--groen-ink);transform:rotate(45deg);pointer-events:none;
}
.lf__optie{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:rgba(247,244,238,.88);cursor:pointer;margin-top:.4rem}
.lf__optie input{accent-color:var(--goud);width:15px;height:15px;margin:0}
.lf__hint{font-size:.82rem;font-weight:400;color:rgba(247,244,238,.85);line-height:1.45}
.lf .btn{width:100%;padding:1rem 1.5rem;font-size:1.02rem}  /* formulier-conventie */
.lf__links{margin-top:.4rem;display:grid;gap:.35rem;font-size:.88rem;color:rgba(247,244,238,.82)}
.lf__links a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lf__fout{
  display:none;padding:1rem 1.1rem;border:1px solid var(--blush);border-radius:14px;
  background:rgba(207,224,184,.14);color:#fff;line-height:1.5;font-size:.94rem;
}
.lf__fout a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lf__fout.is-zichtbaar{display:block}
.lf__done{padding:1.5rem 1.3rem;background:rgba(250,246,236,.12);border:1px solid var(--goud);border-radius:16px;color:#fff;line-height:1.55}

/* ---------------- Footer (herbouw 18-aug) ----------------
   Opbouw: contactstrook (app + bel) / vier kolommen op een vaste as / juridische balk.
   Tekstkleuren zijn creme met alfa op de gradient; laagste stand (.62, balk) haalt 6,0:1
   op #283618, de kolomtekst (.84) 9,6:1. Knoppen = de sitepaar groen + wit. */
.foot{
  position:relative;color:#fff;padding:clamp(2.8rem,5.5vw,4rem) 0 1.5rem;isolation:isolate;
  background:linear-gradient(160deg,#1A240D 0%,var(--groen-ink) 70%);
}
.foot::after{
  content:"";position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,168,120,.14) 0%,transparent 65%);z-index:-1;pointer-events:none;
}
.foot__kop{font-size:.78rem;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:var(--blush);margin:0 0 1rem}
/* Contactstrook: tekst links, knoppen rechts, hairline eronder */
.foot__strook{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem 2.5rem;flex-wrap:wrap;
  padding-bottom:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.foot__strook h2{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:700;margin-top:.55rem;color:#fff}
.foot__strook p{margin-top:.5rem;color:rgba(247,244,238,.8);font-size:.95rem}
.foot__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
/* Vier kolommen */
.foot__grid{display:grid;grid-template-columns:1.15fr 1.05fr 1fr 1.15fr;gap:clamp(1.6rem,4vw,3rem)}
.foot__logo{width:170px;height:auto;opacity:.95}
.foot__brand > p{margin-top:1.1rem;color:rgba(247,244,238,.84);font-size:.94rem;max-width:32ch}
.foot__brand .foot__sub{margin-top:.5rem;color:rgba(247,244,238,.66);font-size:.88rem}
.foot__lijst{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.foot__lijst li{display:flex;align-items:flex-start;gap:.7rem;color:rgba(247,244,238,.84);font-size:.94rem;line-height:1.5}
.foot__lijst svg{width:16px;height:16px;flex:none;color:var(--goud);margin-top:.3rem}
.foot__nav{display:grid;gap:.65rem}
.foot__nav a{display:flex;align-items:center;gap:.6rem;color:rgba(247,244,238,.84);font-size:.94rem;transition:color .2s,transform .2s var(--ease)}
.foot__nav a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--goud);flex:none}
.foot__nav a:hover{color:#fff;transform:translateX(3px)}
.foot__chips{display:flex;flex-wrap:wrap;gap:.45rem}
.foot__chips span{
  font-size:.82rem;line-height:1.3;padding:.28rem .68rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:rgba(247,244,238,.88);
}
.foot__col > p{margin-top:.9rem;color:rgba(247,244,238,.72);font-size:.9rem}
.foot__strook p a,.foot__lijst a,.foot__bottom a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4);transition:color .2s}
.foot__strook p a:hover,.foot__lijst a:hover,.foot__bottom a:hover{color:#fff;text-decoration-color:#fff}
/* Juridische balk */
.foot__bottom{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;align-items:center;gap:.6rem 1.5rem;flex-wrap:wrap;
  font-size:.8rem;color:rgba(247,244,238,.62);
}

/* ---------------- Mobiele sticky CTA-balk ---------------- */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;
  padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 22px -8px rgba(20,28,9,.3);
}
.mcta a{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;
  border-radius:var(--btn-r);font-weight:700;font-size:.88rem;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.mcta a:active{filter:brightness(.92);transform:scale(.98)}
.mcta a svg{width:16px;height:16px;flex:none}
.mcta__call{background:var(--groen-ink);color:var(--creme)}   /* 10,45:1 */
.mcta__quote{background:var(--goud-diep);color:#fff}          /* 5,36:1 */
.mcta__visit{background:var(--sage-donker);color:#fff}        /* 4,56:1 */

/* ---------------- Scroll-reveal (scoped op html.js) ---------------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-zichtbaar{opacity:1;transform:none}

/* ---------------- Breakpoints ---------------- */
@media (max-width:1240px){
  .hero__person{height:420px}
}
@media (max-width:1100px){
  .hero__person{height:355px}
  .hero__text{max-width:47vw}
}
@media (max-width:940px){
  .hero__text{max-width:42vw}
  .hero__title{font-size:clamp(1.7rem,3.2vw,2.2rem)}
}
@media (max-width:980px){
  .waarom__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .waarom__media{height:auto}
  .waarom__media img{height:auto;min-height:0}
}
@media (max-width:900px){
  .of-pill{grid-template-columns:1fr;border-radius:18px;padding:8px;gap:6px}
  .of-divider{display:none}
  .of-field{padding:10px 16px;border-bottom:1px solid var(--line)}
  .of-field:last-of-type{border-bottom:0}
  .of-cta{justify-content:center;border-radius:14px;padding:14px 20px}
}
@media (max-width:880px){
  .reasons__grid{grid-template-columns:1fr}
  /* width expliciet: alleen margin-inline auto laat een grid-item naar zijn inhoud krimpen */
  .reasons__media{width:100%;max-width:30rem;margin-inline:auto}
  .reasons__media::before{transform:rotate(-3deg)}
  .reasons--alt .reasons__media::before{transform:rotate(3deg)}
  .reasons__photo{height:auto;min-height:0}
  .reasons__photo img{height:auto}
  .extras__card{grid-template-columns:1fr}
  .extras__cta{justify-content:flex-start}
}
@media (max-width:860px){
  .story__row,.faq__grid{grid-template-columns:1fr}
  .plattegrond__media::before{transform:rotate(3deg)}
  .story__media{width:100%;max-width:30rem;margin-inline:auto}
  .story__media::before{transform:rotate(-3deg)}
  .story__photo{height:auto;min-height:0}
  .story__photo img{height:auto}
  .faq__photo{display:none}
  .faq__media{margin-top:1.1rem}
  .werkwijze__row{grid-template-columns:1fr}
  .werkwijze__media{width:100%;max-width:30rem;margin-inline:auto;order:2}
  .werkwijze__media::before{transform:rotate(-3deg)}
}
@media (max-width:820px){
  .leadblock__card{grid-template-columns:1fr}
  .leadblock__media{min-height:0;aspect-ratio:16/10}
}
/* Hero klapt al om vanaf 1100px: op tablet en smalle desktop werd de tekstkolom
   naast de figuur te smal (feedback Shahab 18-aug). De chips lopen mee met de
   tekst, dus die hoeven hier niets extra's. */
@media (max-width:1100px){
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero__inner{padding-bottom:26px}
  .hero__text{max-width:none}
  .hero__pack{
    position:static;right:auto;bottom:auto;
    display:flex;flex-direction:column;align-items:flex-start;gap:14px;
    padding:0 clamp(16px,4vw,40px) 34px;
  }
  .hero__person{height:auto;max-height:340px;align-self:center}
}
/* Hero klapt om: tekst met chips boven, figuur eronder, formulier eroverheen. */
@media (max-width:768px){
  :root{--logo-h:40px;--logo-h-stuck:36px}
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero__inner{padding:calc(92px + env(safe-area-inset-top)) clamp(16px,4vw,40px) 34px}
  .hero__text{max-width:none}
  .hero__title{font-size:clamp(1.75rem,7.2vw,2.2rem)}
  .hero__pack{
    position:static;right:auto;bottom:auto;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    padding:0 14px 34px;
  }
  .hero__usps{grid-template-columns:1fr}
  .hero__person{height:auto;max-height:300px;max-width:86%;margin:0 auto}
  .of-wrap{margin-top:-40px}
}
@media (max-width:620px){
  .topbar__tel{display:none}
  .topbar__naam{display:none}
  .topbar .btn .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .topbar .btn{padding:.85rem 1rem}
  .hero__mark{display:none}   /* het watermerk mag weg, de figuur nooit */
  .mcta{display:flex}
  body:has(.mcta){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .hero__actions,.intro__cta,.reasons__cta,.waarom__cta,.plattegrond__cta,.story__cta,.extras__cta,.werkwijze__cta,.faq__cta{max-width:23rem}
  .intro__cta{margin-inline:auto}
  .hero__actions .btn,.intro__cta .btn,.reasons__cta .btn,.waarom__cta .btn,.plattegrond__cta .btn,.story__cta .btn,.extras__cta .btn,.werkwijze__cta .btn,.faq__cta .btn{width:100%}
  .plattegrond__app .btn{width:100%;max-width:23rem}
  .foot__knoppen{width:100%;max-width:23rem;flex-direction:column;align-items:stretch}
  .foot__knoppen .btn{width:100%}
  .fl-list{grid-template-columns:1fr}
  .lf__optie{padding:.5rem 0}
}
@media (max-width:560px){
  .waarom__list{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column;align-items:flex-start}
  .reasons__stats{flex-wrap:wrap}
}
@media (max-width:460px){
  .lf__row{grid-template-columns:1fr}
}

/* ---------------- Toegankelijkheid en print ---------------- */
/* ---------------- Ornamenten (TEST 18-aug): monochrome watermerken, keuze in _werk/galerij-ornamenten.html ----------------
   Zelfde patroon als .hero__mark: absoluut, z-index 0, geen pointer-events. De sectie krijgt .has-orn (relative + clip),
   de .wrap gaat op z-index 1 zodat tekst en foto's altijd boven het ornament liggen. Op breed scherm vallen ze in de
   buitenmarges naast de 1280px-content, op 1440px schuiven ze net achter de content. Onder 900px uit. */
.has-orn{position:relative;overflow:clip}
.has-orn > .wrap{position:relative;z-index:1}
.orn{position:absolute;z-index:0;pointer-events:none;user-select:none;height:auto}
.orn--intro-l{left:clamp(-40px,-2vw,-10px);top:-30px;width:clamp(180px,16vw,300px);opacity:.16}
.orn--intro-r{right:clamp(-20px,1vw,60px);bottom:-30px;width:clamp(180px,15vw,260px);opacity:.14}
.orn--pro{right:0;top:0;width:clamp(260px,24vw,400px);opacity:.12;transform:scale(-1,-1)}   /* waaier gespiegeld: rechte zijden boven en rechts */
.orn--zaal{right:2%;top:6%;width:clamp(200px,17vw,300px);opacity:.16}
.orn--cal{right:clamp(-60px,-2vw,20px);top:18%;width:clamp(240px,20vw,360px);opacity:.12}
.orn--werk{right:0;top:0;width:clamp(240px,22vw,420px);opacity:.13;transform:scale(-1,-1)}      /* confetti gespiegeld: zwaar rechtsboven */
.orn--plat{right:1%;bottom:2%;width:clamp(220px,18vw,300px);opacity:.11}                          /* gravure is dicht: lager; rechtsonder, weg achter de kinderen (verzoek 18-aug) */
.orn--story{right:2%;top:8%;width:clamp(160px,14vw,220px);opacity:.18}                            /* dunne lijn: iets hoger */
.orn--extras{left:1%;bottom:-30px;width:clamp(150px,13vw,200px);opacity:.14}
.orn--faq{right:2%;top:-1%;width:clamp(220px,18vw,320px);opacity:.12}
.orn--lead{left:0;top:-2%;width:100%;opacity:.12}                                                 /* slinger loopt achter het paneel door */
.orn--band{left:0;top:-24%;width:100%;opacity:.22}                                                /* alleen de onderste swags met lampjes in beeld */
.orn--foot{right:1%;top:33%;width:clamp(130px,9vw,190px);opacity:.16}                           /* rechtermarge naast de kolommen (footer-herbouw -4c) */
/* Ornamenten meekleuren: de png's zijn botanisch groene inkt uit het oude palet; de flood-filters
   #kl-orn-licht (goud-diep) en #kl-orn-donker (blush) staan in index.html. Een filter-url naar een
   ontbrekend id rendert het element helemaal niet, dus die twee horen bij elkaar. */
.orn,.hero__mark{filter:url(#kl-orn-licht)}
.op-donker .orn,.hero .orn,.hero__mark{filter:url(#kl-orn-donker)}

/* ---------------- Extra's V2 (18-aug, gekozen door Shahab): bento-mozaiek met een foto per dienst ----------------
   Kop links + CTA-paar rechts, daaronder 3 kolommen: grote tegel 2x2 + vijf kleine, titel op de foto. Alleen paletvariabelen. */
.extras{padding:clamp(3.2rem,7vw,5.5rem) 0;background:var(--creme)}
.extras__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap}
.extras__intro{margin-top:.8rem;color:var(--muted)}
.extras__kop .extras__cta{margin:0;display:flex;gap:.7rem;flex-wrap:wrap}
/* V2 bento */
.xbento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:215px;gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.xtile{position:relative;display:block;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:#fff;isolation:isolate}
.xtile--groot{grid-column:span 2;grid-row:span 2}
.xtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.xtile:hover img{transform:scale(1.04)}
.xtile__tekst{position:absolute;inset:auto 0 0 0;padding:2.6rem 1.1rem 1rem;background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;flex-direction:column;gap:.25rem}
.xtile__tekst b{font-size:1.05rem}
.xtile__tekst span{font-size:.85rem;opacity:.9;display:none}
.xtile--groot .xtile__tekst span{display:block}
@media (max-width:900px){.xbento{grid-template-columns:1fr 1fr;grid-auto-rows:200px}}
@media (max-width:560px){.xbento{grid-template-columns:1fr}.xtile--groot{grid-column:auto;grid-row:auto}}

/* ---------------- Reviews (18-aug): zes echte Google-reviews tussen intro en feesten ----------------
   Kaarten in het paper/line-patroon van de site, sterren in Google-geel, score-pill als in de offertebox. */
.reviews{padding:clamp(3.2rem,7vw,5.5rem) 0}
.reviews__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 2.5rem;flex-wrap:wrap}
.reviews__intro{margin-top:.8rem;color:var(--muted)}
.reviews__score{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--groen-ink);text-decoration:none;font-weight:800;font-size:17px;line-height:1;white-space:nowrap;box-shadow:0 6px 16px -10px rgba(20,28,9,.35)}
.reviews__score:hover{background:var(--creme)}
.reviews__g{width:26px;height:26px;flex:none}
.reviews__sterren{display:inline-flex;gap:1px}
.reviews__sterren svg,.review__sterren svg{width:16px;height:16px;fill:#FBBC05}
.reviews__aantal{font-weight:600;font-size:14px;color:var(--muted)}
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.review{margin:0;display:flex;flex-direction:column;gap:.7rem;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:1.4rem 1.4rem 1.2rem;box-shadow:var(--shadow)}
.review__sterren{display:inline-flex;gap:2px}
.review__tekst{margin:0}
.review__tekst p{font-size:.95rem;color:var(--muted);line-height:1.55}
.review__tekst p::before{content:"\201C"}
.review__tekst p::after{content:"\201D"}
.review__wie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.8rem;font-size:.86rem}
.review__wie b{font-weight:700;color:var(--groen-ink)}
.review__wie span{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-weight:600}
.review__wie svg{width:15px;height:15px}
@media (max-width:1000px){.reviews__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.reviews__grid{grid-template-columns:1fr}.reviews__score{font-size:15px;padding:10px 14px}}
.orn--reviews{right:1%;bottom:-40px;width:clamp(200px,17vw,280px);opacity:.12}

/* Google-beoordeling in de offertebox (18-aug): pill rechtsboven naast de kop, onder 820px in de flow boven het formulier. */
.of-google{position:absolute;right:clamp(26px,3.8vw,48px);top:clamp(26px,3.2vw,40px);display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--creme);color:var(--groen-ink);text-decoration:none;font-weight:800;font-size:15px;line-height:1;white-space:nowrap;box-shadow:0 6px 16px -10px rgba(20,28,9,.35)}
.of-google:hover{background:var(--sage-tint)}
.of-google__g{width:20px;height:20px;flex:none}
.of-google__stars{display:inline-flex;gap:1px}
.of-google__stars svg{width:15px;height:15px;fill:#FBBC05}
.of-google__count{font-weight:600;font-size:13px;color:var(--muted)}
@media (max-width:820px){.of-google{position:static;margin:0 0 14px;font-size:14px}}
/* Figuren (TEST 18-aug): uitgeknipte feestfiguren ACHTER foto/kaart die erbovenuit steken, patroon hero-gezin.
   Container = geisoleerde stacking context, figuur z-index -1 (onder foto/kaart, boven sectievlak en ornament);
   de sectie laat verticaal overlopen zodat het stel over de blokgrens naar het feesten-blok reikt. */
.reasons--alt.has-orn,.plattegrond.has-orn,.faq.has-orn{overflow-x:clip;overflow-y:visible}
.plattegrond__media,.faq__media{position:relative;isolation:isolate}
.fig{position:absolute;z-index:-1;height:auto;pointer-events:none;user-select:none}
.fig--stel{left:50%;transform:translateX(-50%);bottom:calc(100% - 44px);width:min(330px,25vw)}   /* knieen achter de fotorand; top blijft onder de laatste feesten-alinea */
.plattegrond__media img.fig--kids{right:5%;bottom:calc(100% - 40px);width:min(365px,26vw);height:auto;object-fit:fill;border-radius:0}   /* wint van .plattegrond__media img{width:100%;height:100%} */
.fig--duo{left:50%;transform:translateX(-50%);bottom:calc(100% - 40px);width:min(312px,22.8vw)}   /* boven de FAQ-foto, gecentreerd en 20% groter (verzoek 22:50) */
@media (max-width:900px){.fig{display:none}}
@media (max-width:1500px){.orn--foot{display:none}}                                                 /* footer heeft onder 1500px geen vrije marge: dan achter chip of onderbalk */
.foot.has-orn{overflow:visible}                                                                     /* de goud-glow (::after) mag blijven overlopen */
@media (max-width:900px){.orn{display:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  /* .js erbij: anders wint .js [data-reveal] op specificiteit en blijft de beginstand staan */
  .js [data-reveal]{opacity:1;transform:none}
}
@media print{
  .topbar,.mcta{display:none}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------------- Juridische subpagina's (nog te bouwen, stijl staat klaar) -- */
.juridisch{padding:clamp(2.6rem,5vw,4rem) clamp(16px,4vw,40px)}
.juridisch .wrap{max-width:860px;margin:0 auto}
.juridisch h2{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:800;margin:2.2rem 0 .7rem}
.juridisch .wrap > h2:first-child{margin-top:0}
.juridisch p,.juridisch li{color:var(--muted);line-height:1.65}
.juridisch p{margin:0 0 1rem}
.juridisch ul{margin:0 0 1rem;padding-left:1.2rem}
.juridisch li{margin:.35rem 0}
.juridisch a{color:var(--groen-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.juridisch a:hover{background:var(--sage-tint)}

/* focus-ring behouden op knoppen met eigen box-shadow (QA-finding) */
.btn:focus-visible,.of-cta:focus-visible{box-shadow:0 0 0 6px rgba(40,54,24,.85)}

/* ---------------- Bezichtiging plannen: Calendly inline ---------------- */
.calplan{padding:clamp(3.2rem,7vw,5.5rem) 0;background:var(--paper);scroll-margin-top:90px}
.calplan__grid{display:grid;grid-template-columns:.8fr 1.3fr;gap:clamp(2rem,4.5vw,4rem);align-items:stretch}
.calplan__info{display:flex;flex-direction:column}
.calplan__foto{flex:1;margin-top:1.3rem;min-height:180px}
.calplan__foto img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.calplan__info p{margin-top:.85rem;color:var(--muted)}
.calplan__info h2{margin-top:.7rem;font-size:clamp(1.55rem,2.6vw,2.15rem);font-weight:700}
.calplan__info h2 em{font-style:normal;color:var(--goud-diep)}
.calplan__punten{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.65rem}
.calplan__punten li{display:flex;gap:.6rem;align-items:flex-start;color:var(--muted)}
.calplan__punten .vink{margin-top:-.25rem;width:34px;height:34px;border-radius:12px;background:var(--sage-tint);color:var(--groen-ink)}
.calplan__punten .vink svg{width:19px;height:19px}
.calplan__bel{margin-top:1.3rem}
.cal-kaart{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-height:420px;
  max-width:760px;justify-self:end;width:100%;
}
.cal-kaart{min-height:0}
.cal-kaart .calendly-inline-widget{height:560px}
@media (max-width:900px){
  .calplan__grid{grid-template-columns:1fr}
}
.cal-kaart .calendly-inline-widget,.cal-kaart iframe{width:100%;height:700px;border:0;display:block}
.cal-fallback{margin-top:1rem;font-size:.85rem;color:var(--muted)}
.cal-fallback a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.cal-kaart .calendly-inline-widget,.cal-kaart iframe{height:1000px}}

/* ---------------- Parallax-band boven de footer (k1sports-effect) ---------------- */
.parallax{
  position:relative;color:#fff;text-align:center;
  padding:clamp(4.5rem,11vw,8rem) 0;
  background-image:
    linear-gradient(rgba(20,28,9,.6),rgba(20,28,9,.6)),
    image-set(url("../img/sfeer-zaal-breed.webp") type("image/webp"),url("../img/sfeer-zaal-breed.jpg") type("image/jpeg"));
  background-size:cover;background-position:center 32%;background-attachment:fixed;
}
.parallax h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;margin-top:.7rem}
.parallax h2 em{font-style:normal;color:var(--blush)}
.parallax p{margin-top:.7rem;color:rgba(255,255,255,.94)}
.parallax__in{display:flex;flex-direction:column;align-items:center}
.parallax__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.6rem}
@media (max-width:1024px){
  /* iOS en de meeste tablets renderen background-attachment:fixed niet; vaste foto alleen op desktop */
  .parallax{background-attachment:scroll}
}
@media (max-width:620px){
  .parallax__knoppen{width:100%;flex-direction:column;align-items:center}
  .parallax__knoppen .btn{width:100%;max-width:23rem}
}

/* ---------------- Zakelijke pagina (27-aug): eigen hero- en bandfoto ---------------- */
.hero--zakelijk{
  background-image:
    linear-gradient(to right,rgba(20,28,9,.94) 0%,rgba(20,28,9,.88) 42%,rgba(20,28,9,.62) 75%,rgba(20,28,9,.5) 100%),
    linear-gradient(to bottom,rgba(20,28,9,.55) 0%,rgba(20,28,9,0) 30%,rgba(20,28,9,.25) 100%),
    image-set(url("../img/zak-hero-achtergrond.webp") type("image/webp"),url("../img/zak-hero-achtergrond.jpg") type("image/jpeg"));
}
@media (max-width:768px){
  .hero--zakelijk{
    background-image:
      linear-gradient(to bottom,rgba(20,28,9,.92) 0%,rgba(20,28,9,.82) 55%,rgba(20,28,9,.6) 100%),
      image-set(url("../img/zak-hero-achtergrond-960.webp") type("image/webp"),url("../img/zak-hero-achtergrond.jpg") type("image/jpeg"));
  }
}
.parallax--zakelijk{
  background-image:
    linear-gradient(rgba(20,28,9,.6),rgba(20,28,9,.6)),
    image-set(url("../img/zak-sfeer-dans.webp") type("image/webp"),url("../img/zak-sfeer-dans.jpg") type("image/jpeg"));
}
/* Het zakelijke duo (663x1000) is smaller dan het feest-duo (817x1000); zelfde breedte zou hem
   ~90px hoger maken en over de knoppen van de sectie erboven duwen. Breedte zo dat de hoogte
   weer op ~385px uitkomt. */
img.fig--duo-zk{width:min(256px,18.7vw)}