/* Ontruimingshulp Haaglanden — opmaak
   Kleuren staan bovenaan in :root. De hoofdknop heeft eigen variabelen
   (--cta-vlak en --cta-tekst) met alternatieven als commentaar erbij. */
@font-face{
  font-family:"Newsreader";
  src:url("/fonts/newsreader-var.woff2") format("woff2-variations"),
      url("/fonts/newsreader-var.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("/fonts/newsreader-italic-var.woff2") format("woff2-variations"),
      url("/fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight:200 800;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("/fonts/manrope-var.woff2") format("woff2-variations"),
      url("/fonts/manrope-var.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Variant 2: zelfde familie, maar lichter en warmer.
     Minder plechtig, nog steeds onderscheidend van de blauw-witte concurrentie. */
  --ink:#332B38; --ink-2:#4A3F50; --soft:#5A5060;
  --bone:#F8F5F0; --bone-2:#FFFDFA; --card:#FFF;
  /* Vlak van de keuzeknoppen: wit. Een beige of bijna-witte vulling maakt er
     een oud formulierveld van. De vorm komt van de rand en de afronding, de
     kleur pas als je kiest. */
  --keuze:#FFFFFF;
  --line:#EAE3D9; --line-2:#D9CFC2;
  /* Rand van de keuzeknoppen en de invoervelden. Licht en neutraal, zoals in
     moderne formulierontwerpen. Let op: dit haalt 1,4:1 tegen de witte kaart
     en dus niet de norm van 3:1 voor bedienbare elementen. Binnen prima, in
     fel licht vallen de randen weg. Wil je dat oplossen, zet hem dan op
     #B4B1B7 (2,1:1) of #8D8992 (3,4:1). */
  --line-3:#DCD9DE;
  --brass:#8A6A2A; --brass-lt:#D6BC85; --brass-bg:#FBF4E7;
  --alert:#94402F; --r:16px;

  /* ---------------------------------------------------------------
     KLEUR VAN DE HOOFDKNOP — pas alleen deze twee regels aan.
     Nu: lichte knop op de donkere hero. Maximaal contrast, werkt
     boven elke foto, en introduceert geen extra kleur.

     Wil je liever een gekleurde knop, plak dan een van deze:
       diep groen   --cta-vlak:#2F6B4F;  --cta-tekst:#fff;
       roestrood    --cta-vlak:#A8452C;  --cta-tekst:#fff;
       donker inkt  --cta-vlak:#332B38;  --cta-tekst:#F8F5F0;
       messing      --cta-vlak:#AC8845;  --cta-tekst:#fff;
     --------------------------------------------------------------- */
  --cta-vlak:#F8F5F0; --cta-tekst:#332B38;
  --shadow:0 1px 2px rgba(51,43,56,.04), 0 26px 52px -32px rgba(51,43,56,.38);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bone); color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,sans-serif; font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Newsreader",Georgia,serif; font-weight:500; margin:0; letter-spacing:-.005em}
p{margin:0}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.eyebrow{font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--brass)}

/* ---------- masthead ---------- */
.masthead{position:sticky; top:0; z-index:60; background:rgba(244,241,235,.93); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between; gap:22px; height:74px}
.nav{display:none; gap:26px; margin-left:auto; margin-right:10px}
.nav a{text-decoration:none; font-size:15px; font-weight:600; color:var(--soft); padding:6px 0;
  border-bottom:1.5px solid transparent; transition:color .16s, border-color .16s}
.nav a:hover{color:var(--ink); border-color:var(--brass-lt)}
.nav a:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:3px}
@media(min-width:900px){ .nav{display:flex} }

/* ---------- mobiel menu ---------- */
.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px;
  padding:0 10px; background:none; border:1px solid var(--line-2); border-radius:6px; cursor:pointer; flex:none}
.burger span{display:block; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .22s, opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.burger:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
@media(min-width:900px){ .burger{display:none} }
@media(prefers-reduced-motion:reduce){ .burger span{transition:none} }

.mob{position:absolute; top:100%; left:0; right:0; background:var(--bone); border-bottom:1px solid var(--line);
  box-shadow:0 22px 34px -26px rgba(36,30,36,.6); padding:10px 24px 20px}
.mob[hidden]{display:none}
.mob a{display:block; text-decoration:none; font-size:17px; font-weight:600; color:var(--ink);
  padding:14px 0; border-bottom:1px solid var(--line)}
.mob a:last-of-type{border-bottom:0}
.mob a:focus-visible{outline:2px solid var(--brass); outline-offset:-2px}
.mob .cta{margin-top:14px; text-align:center; background:var(--ink); color:var(--bone); border-radius:6px; padding:14px; border:0}
@media(prefers-reduced-motion:no-preference){ .mob{animation:zak .2s ease-out} @keyframes zak{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}} }

.tel .kort{display:none}
@media(max-width:620px){
  .tel .lang{display:none}
  .tel .kort{display:inline}
}
/* precies de hoogte van de vaste balk, zodat de vorige sectie er niet
   onderuit piept bij het springen naar een anker */
section[id]{scroll-margin-top:74px}
/* Alleen voor het springen via een link. Het formulier scrolt zelf via
   JavaScript en wordt hier niet door beïnvloed. */
/* Zo veel lucht boven het kopje als bij een gewone sectie. Die landt met
   74px onder de balk van 75px en heeft daarna 66px eigen binnenruimte. De
   kaart heeft er zelf maar 24px, dus die 42px komt hier vandaan:
   74 + 42 = 116. */
#aanvraag{scroll-margin-top:116px}
.lockup{display:flex; align-items:center; gap:11px; text-decoration:none}
.lockup .name{font-family:"Newsreader",Georgia,serif; font-size:25px; font-weight:600; letter-spacing:-.015em; line-height:1}
.lockup .region{font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
  border:1px solid var(--brass-lt); background:var(--brass-bg); padding:5px 9px 4px; border-radius:4px;
  white-space:nowrap; line-height:1; position:relative; top:1px}
.lockup-merk{width:31px; height:26px; flex:none; color:var(--brass-lt); margin-right:-2px; position:relative; top:-2px}
.acties{display:flex; align-items:center; gap:8px; flex:none}
.tel{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:700; font-size:15px;
  padding:10px 18px; border-radius:6px; background:var(--ink); color:var(--bone); transition:background .18s}
.tel:hover{background:var(--ink-2)}
.tel svg{width:17px; height:17px; flex:none}
.wa{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border-radius:6px; border:1px solid var(--line-2); color:var(--ink); text-decoration:none; background:transparent;
  transition:border-color .18s, background .18s, color .18s}
.wa:hover{border-color:var(--ink); background:var(--ink); color:var(--bone)}
.wa svg{width:21px; height:21px}
.wa:focus-visible,.tel:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
@media(max-width:620px){
  .masthead .wrap{gap:10px}
  .lockup{flex-direction:column; align-items:flex-end; gap:2px}
  .lockup .name{font-size:20px}
  .lockup .region{font-size:8.5px; letter-spacing:.13em; padding:3px 6px 2px; top:0}
  .lockup-merk{display:none}
  .tel{width:44px; height:44px; padding:0; justify-content:center}
  .tel .nummer{display:none}
  .tel svg{width:19px; height:19px}
}

/* ---------- hero: foto bovenaan, tekst gecentreerd erop ---------- */
.hero{position:relative; display:grid; place-items:center; text-align:center; overflow:hidden;
  min-height:clamp(440px,62vh,640px);
  background:linear-gradient(158deg,#5A4A5E 0%,#3E3346 52%,#2A2230 100%)}
.hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero .scrim{position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(30,24,34,.42) 0%, rgba(30,24,34,0) 70%),
    linear-gradient(180deg, rgba(34,27,38,.48) 0%, rgba(34,27,38,.66) 52%, rgba(34,27,38,.82) 100%)}
.hero .inner{position:relative; width:100%; max-width:880px; margin:0 auto; padding:96px 24px 84px; color:#F6F3EE}
.hero .eyebrow{color:var(--brass-lt)}
.hero h1{font-size:clamp(33px,5.4vw,58px); line-height:1.1; max-width:26ch; margin:20px auto 0; color:#fff}
/* Op smalle schermen breekt de zin toch al; de vaste afbreking
   zou daar een losse regel opleveren. */
@media(max-width:520px){ .hero h1 br{display:none} }
.hero h1 em{font-style:italic; color:var(--brass-lt)}
.hero .rule{width:64px; height:1px; background:var(--brass-lt); margin:28px auto}
.hero .lede{max-width:56ch; margin:0 auto; font-size:19px; color:#E6DDE2}
.cta-rij{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:34px 0 0}
.cta{display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none;
  font-weight:700; font-size:16.5px; padding:16px 30px; border-radius:8px; border:1.5px solid transparent;
  transition:background .18s, border-color .18s, transform .12s}
.cta:active{transform:translateY(1px)}
.cta-1{background:var(--cta-vlak); color:var(--cta-tekst); padding:17px 34px; font-size:17px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.65)}
.cta-1:hover{filter:brightness(.94)}
/* Tweede keus: doorschijnende vulling met vervaging, zodat de knop leesbaar blijft op elk deel van de foto. */
.cta-2{background:rgba(20,16,24,.28); color:#fff; border-color:rgba(255,255,255,.75);
  border-width:2px; backdrop-filter:blur(3px); font-weight:600;
  box-shadow:0 4px 16px -6px rgba(0,0,0,.5)}
.cta-2:hover{background:rgba(255,255,255,.16); border-color:#fff}
.cta:focus-visible{outline:3px solid var(--brass-lt); outline-offset:3px}
.cta-sub{margin-top:14px; font-size:13.5px; color:rgba(255,255,255,.68)}
@media(max-width:620px){
  .cta-rij{flex-direction:column; gap:10px}
  .cta{width:100%; padding:17px 20px; font-size:17px}
}

.marks{display:flex; flex-wrap:wrap; justify-content:center; gap:13px 26px; margin:30px 0 0; padding:0; list-style:none}
.marks li{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:9px; color:#EFE8E6}
.marks li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--brass-lt); flex:none}
.hero.empty > img{display:none}
@media(max-width:620px){ .hero .inner{padding:72px 22px 64px} }

/* ---------- layout ---------- */
.columns{display:grid; grid-template-columns:1fr; gap:26px; padding:64px 0 80px; align-items:start}
@media(max-width:700px){ .columns{padding-top:40px} }
@media(min-width:980px){ .columns{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:40px} }
@media(max-width:979px){ .columns{padding-bottom:48px} }
/* Onder 560px lopen formulier en contactpaneel van rand tot rand. Dan is
   ruimte eromheen alleen nog een streep achtergrond, dus die halen we weg
   en sluiten de blokken aan op de hero en op elkaar. */
@media(max-width:560px){ .columns{padding-top:0; padding-bottom:0; gap:0} }

/* foutmelding onder een afzonderlijk veld */
.fielderr{display:none; margin-top:7px; font-size:13.5px; font-weight:600; color:var(--alert); line-height:1.45}
.fielderr.on{display:block}
.reqline{font-size:14px; color:var(--soft); margin-top:6px}

.sheet{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.sheet-head{padding:28px 34px 22px; border-bottom:1px solid var(--line)}
/* De kaart heeft geen eigen kop meer: de vraag is de kop. Hieronder staat
   alleen de stapteller met daaronder de geruststelling, klein. */
.sheet-head .sub{margin-top:7px; color:var(--soft); font-size:14px}
.sheet-body{padding:4px 34px 32px}
/* Op mobiel geen kaartje maar een schermvullend formulier: de omlijsting
   kost daar 90px aan breedte en levert niets op. De witte achtergrond en
   de lijn onder de kop blijven, zodat de structuur zichtbaar blijft. */
@media(max-width:560px){
  .sheet{border-left:0; border-right:0; border-bottom:0; border-radius:0; box-shadow:none;
    margin-left:-24px; margin-right:-24px}
  /* Op een telefoon is de vraag zelf de kop. Wat erboven staat is inleiding
     die je maar één keer leest, en 'Gratis en vrijblijvend' staat ook in de
     hero en bij de verzendknop. Blijft over: de stapteller en de resetknop. */
  .sheet-head{padding:16px 16px 14px}
  /* Nu de rand tussen formulier en contactpaneel weg is, tellen de
     onderruimte van het formulier en de bovenruimte van het paneel bij
     elkaar op. Daarom hier minder. */
  .sheet-body{padding:4px 16px 12px}
}

/* ---------- blokken ---------- */
.blk{border-bottom:1px solid var(--line)}
/* De openstaande vraag krijgt een accentlijn links langs het hele blok, dus
   inclusief de antwoorden. Dat is een plaatsaanduiding: je ziet in een
   oogopslag waar je bent, zonder te lezen. Beantwoorde vragen hebben hem
   niet, dus er is er altijd precies één.

   Langs alleen de kop werd het een los streepje naast een regel tekst,
   terwijl de knoppen eronder bij dezelfde vraag horen.

   De lijn zit binnen het blok, dus alle blokken schuiven 15px naar binnen.
   Buiten het blok plaatsen hangt af van de binnenruimte van de kaart, en die
   is op mobiel maar 16px; dan valt de lijn tegen de schermrand weg. */
.blk{padding-left:15px; position:relative}
.blk:not(.folded):not([hidden]):not([data-id="contact"])::before{content:''; position:absolute; left:0; top:18px; bottom:22px;
  width:2px; border-radius:2px; background:var(--brass)}
/* Op de laatste stap loopt de lijn alleen langs de kop en de regel eronder.
   Langs het hele blok zou hij honderden pixels langs negen velden, het
   voorbehoud, de akkoordregel en de knop lopen. De velden beginnen daaronder
   weer op de volle breedte, want daar is breedte het meest waard. */
.blk[data-id="contact"]{padding-left:0}
.kopmerk{position:relative; padding-left:15px}
.blk:not(.folded):not([hidden]) .kopmerk::before{content:''; position:absolute;
  left:0; top:2px; bottom:2px; width:2px; border-radius:2px; background:var(--brass)}
.blk:last-of-type{border-bottom:0}
/* app.js zet deze klasse op het onderste blok dat op dat moment zichtbaar is. */
.blk.laatst{border-bottom:0}
.blk[hidden]{display:none}

.blk-sum{display:none; width:100%; text-align:left; background:none; border:0; font:inherit;
  padding:15px 0; cursor:pointer; align-items:baseline; gap:16px; color:inherit}
.blk.folded .blk-sum{display:flex}
.blk-sum .lab{font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); flex:none; width:118px}
.blk-sum .ans{font-weight:600; font-size:15px; color:var(--soft); flex:1; line-height:1.45}
.blk-sum .pen{font-size:13px; font-weight:700; color:var(--soft); flex:none; opacity:0; transition:opacity .15s}
.blk-sum:hover .pen, .blk-sum:focus-visible .pen{opacity:1}
.blk-sum:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
/* Op mobiel het label en 'Wijzig' op dezelfde regel, het antwoord eronder.
   Dat scheelt een regel per beantwoorde stap, en bij zeven stappen is dat
   een flinke lap scrollen. */
@media(max-width:620px){
  .blk-sum{flex-wrap:wrap; gap:2px 12px}
  .blk-sum .lab{width:auto}
  .blk-sum .ans{order:1; flex:1 1 100%}
  .blk-sum .pen{opacity:1; margin-left:auto; font-size:12px; font-weight:600; color:var(--soft)}
}

.blk-body{padding:24px 0 30px}
.blk.folded .blk-body{display:none}
@media(prefers-reduced-motion:no-preference){
  .blk-body{animation:unfold .3s cubic-bezier(.2,.7,.3,1)}
  @keyframes unfold{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
}
/* De vragen in het formulier staan in de schreefloze letter. Het zijn geen
   koppen maar vragen die je beantwoordt, en dan leest zakelijk beter dan
   plechtig. De serif blijft voor de hero, de sectiekoppen en de bedragen,
   waar hij wel nadruk geeft. */
.blk-body h3{font-family:"Manrope",system-ui,sans-serif; font-size:20px; font-weight:700;
  letter-spacing:-.01em; margin-bottom:4px}
.blk-body .hint{font-size:14.5px; color:var(--soft); margin:4px 0 0}
/* Het aantal kolommen volgt de beschikbare breedte, niet die van het
   scherm. Zo krijgt het smalle terugbelpaneel in de zijbalk vanzelf
   minder kolommen dan de brede formulierkaart. */
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-top:17px}
.opts.stack{grid-template-columns:minmax(0,1fr)}
.opts.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Alleen op mobiel: bij een oneven aantal opties blijft de laatste alleen
   op zijn rij over, en die trekken we over de volle breedte. Op desktop
   niet, want daar wordt zo'n knop zo breed dat hij nadruk krijgt die de
   optie niet verdient. Bij een even aantal doet deze regel niets. */
@media(max-width:560px){
  .opts.twee .opt:last-child:nth-child(odd){grid-column:1 / -1}
}
/* Bij hele zinnen leest links uitlijnen prettiger dan centreren. */
.opts.stack .opt span{justify-content:flex-start; text-align:left}
.opt{position:relative; display:block; height:100%}
.opt input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.opt span{display:flex; align-items:center; justify-content:center; text-align:center; gap:11px;
  height:100%; padding:12px 16px; border:1px solid var(--line-3); border-radius:6px;
  font-size:16px; font-weight:500; background:var(--keuze);
  transition:border-color .16s, background .16s, color .16s, box-shadow .16s}
/* Op een telefoon staat het eerste blok onder elkaar. In twee kolommen
   lopen zes van de acht labels om, en dan is het een blok van acht vakken
   met wisselende hoogte. Onder elkaar past alles op één regel: 279px
   tekstruimte tegen 191px voor het langste label. Kost 148px hoogte, maar
   het leest rustiger en het sluit aan bij de andere blokken die al onder
   elkaar staan. Op desktop blijft het raster, daar zou een lijst van acht
   korte labels over 540px breedte zonde van de ruimte zijn. */
@media(max-width:560px){
  .opts.mobstack, .opts.twee.mobstack{grid-template-columns:minmax(0,1fr)}
  .opts.mobstack .opt span{justify-content:flex-start; text-align:left}
  /* Gelijke vakhoogte voor blokken waar labels nog wel omlopen. */
  #intake .opts.gelijk .opt span{min-height:calc(3.24em + 24px)}
  /* Binnenruimte per vraag was een desktopwaarde. */
  #intake .blk-body{padding:18px 0 22px}
}
/* Alleen een vierkantje waar je meerdere antwoorden mag kiezen. Bij één
   antwoord zegt de omgekleurde knop al genoeg. */
/* Alleen waar je meerdere antwoorden mag kiezen staat een vierkantje. */
.opt input[type="checkbox"] + span::before{content:''; flex:0 0 auto; width:17px; height:17px;
  border:1.5px solid var(--line-3); border-radius:4px; background:var(--card);
  transition:border-color .16s, background .16s}
/* Zweven trekt het vierkantje mee in dezelfde kleur als de rand eromheen.
   Alleen op apparaten met een muis, net als de knop zelf. */
@media(hover:hover){
  .opt input[type="checkbox"]:hover + span::before{border-color:var(--ink-2)}
}
.opt input[type="checkbox"]:checked + span::before{border-color:var(--bone); background-color:var(--bone);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23332B38' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.8 8.4l2.9 2.9L12.2 5.7'/%3E%3C/svg%3E");
  background-size:12px 12px; background-position:center; background-repeat:no-repeat}
/* Zweven: alleen op apparaten met een muis, anders blijft de knop op een
   telefoon in die staat hangen na het aantikken. */
@media(hover:hover){
  /* Zweven zet de gekozen kleur in de rand, gekozen vult het hele vlak.
     Een donkere vulling bij zweven zou te veel op gekozen lijken, en dan
     denkt iemand dat hij al iets heeft aangeklikt. */
  .opt input:hover + span{border-color:var(--ink-2); background:#FAF9FA}
  .opt input:checked:hover + span{border-color:var(--ink-2); background:var(--ink-2)}
}
/* Gekozen: donker, maar --ink-2 in plaats van --ink. Iets minder hard dan
   het diepste zwart van de site, en nog ruim leesbaar. */
.opt input:checked + span{border-color:var(--ink-2); background:var(--ink-2); color:var(--bone)}
.opt input:focus-visible + span{box-shadow:0 0 0 3px var(--brass-bg), 0 0 0 4px var(--brass)}

.grid2{display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px}
@media(min-width:580px){ .grid2{grid-template-columns:1fr 1fr} }
.span2{grid-column:1/-1}
/* Postcode en huisnummer horen bij elkaar en zijn kort, dus die blijven
   ook op een telefoon naast elkaar staan. */
.paar{display:grid; grid-template-columns:1.1fr .9fr; gap:16px}
/* De drie contactvoorkeuren staan altijd op één regel. */
.opts.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Icoontje bij de tekst in een keuzeknop; neemt de kleur van de knop over,
   dus hij kleurt mee om zodra de knop gekozen is. */
.opt span svg{width:16px; height:16px; flex:0 0 auto; margin-right:8px}
/* Op een telefoon is een derde van de breedte te smal voor icoon en tekst
   naast elkaar: 'WhatsApp' is 74px en er is er maar 55px. Daarom staat het
   icoon daar boven de tekst. */
@media(max-width:560px){
  .opts.drie .opt span{flex-direction:column; gap:5px; padding-left:11px; padding-right:11px}
  .opts.drie .opt span svg{margin-right:0}
}

/* Voorbehoud bij de prijs: wel te lezen, niet schreeuwen. */
.infobox{margin:20px 0 0; padding:12px 14px; background:var(--bone); border:1px solid var(--line);
  border-radius:6px; font-size:13.5px; line-height:1.55; color:var(--soft)}

/* Zolang er nog iets ontbreekt staat de verzendknop gedempt. Niet verder
   dan dit: bij grijs op grijs lijkt hij uitgeschakeld, terwijl je hem juist
   moet indrukken om te zien wat er mist. */
.go.nogniet{opacity:.78}
label.field{display:block; font-size:14px; font-weight:700; margin-bottom:7px}
label.field .tag{font-weight:500; color:var(--soft)}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%; font:inherit; font-size:16px; padding:13px 15px; border-radius:6px;
  border:1px solid var(--line-3); background:var(--bone-2); color:var(--ink); appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:42px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-bg)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--alert)}
textarea{min-height:96px; resize:vertical}

.go{margin-top:22px; font:inherit; font-weight:700; font-size:15.5px; cursor:pointer; border-radius:6px;
  padding:13px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--bone); transition:background .16s}
.go:hover{background:var(--ink-2)}
/* De verzendknop over de volle breedte. Aan de vorm zie je dat dit een
   ander soort actie is dan de Verder-knoppen ervoor, zonder dat er een
   kleur bij komt die nergens anders op de pagina voorkomt. */
.go.breed{display:block; width:100%; text-align:center}
/* Op het bedankscherm is WhatsApp de volgende stap, dus daar is het een
   knop en geen tekstlink. Het is wel een link, dus display moet erbij. */
.go.waknop{display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.go.waknop svg{width:18px; height:18px; flex:none}
/* Kenmerk als klein blokje: het label erboven, de code eronder en die mag
   nooit halverwege afbreken. */
.kenmerk{margin-top:22px; font-size:13px; color:var(--soft); line-height:1.5}
/* De twee manieren om foto's te sturen naast elkaar, en onder elkaar zodra
   ze niet meer naast elkaar passen. WhatsApp is de eerste keuze en dus
   gevuld, mailen staat er als tweede met alleen een rand. */
.knoprij{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.go.tweede{background:none; color:var(--ink); border-color:var(--line-2)}
.go.tweede:hover{background:var(--bone); border-color:var(--ink)}
.kenmerk strong{display:block; margin-top:2px; font-size:16px; color:var(--ink); white-space:nowrap}
.go:focus-visible{outline:3px solid var(--brass); outline-offset:2px}
.go:disabled{opacity:.55; cursor:progress}

.consent{display:flex; gap:12px; align-items:flex-start; margin-top:22px; font-size:14.5px; color:var(--soft); line-height:1.55}
.consent input{margin-top:3px; width:19px; height:19px; accent-color:var(--brass); flex:none}
.smallprint{margin-top:13px; font-size:13.5px; color:var(--soft)}
.error{display:none; margin-top:16px; padding:12px 15px; border-radius:6px; background:#FBEEEB; color:var(--alert);
  font-size:14.5px; font-weight:600; border:1px solid #E9CFC9}
.honey{position:absolute; left:-9999px}

/* ---------- dossier ---------- */
.aside{display:grid; gap:16px; position:sticky; top:96px}
@media(max-width:979px){ .aside{position:static} }
/* Onder 979px neemt de vaste onderbalk de prijsindicatie over, dus het
   samenvattingsblok eronder is daar dubbelop. De voorbehoudszin staat
   daarom ook bij de laatste stap van het formulier. */
@media(max-width:979px){ .dossier{display:none} }
/* De voorbehoudszin staat in het formulier én in het samenvattingsblok.
   Op desktop zijn ze samen in beeld, dus daar tonen we alleen die in de
   zijbalk. Onder 979px is het blok verborgen en neemt het formulier het over. */
@media(min-width:980px){ #intake .infobox{display:none} }
/* Heeft de balk onderaan een echte knop, dan is die op mobiel de enige
   plek waar je hem nodig hebt. De knop in het formulier zelf blijft in de
   code staan, want de balk klikt hem aan. */
@media(max-width:560px){
  body.balkactie #intake .go{display:none}
  /* De ruimte onderaan was er voor de knop die nu weg is. Die zit op drie
     plekken: onder het blok zelf, onder het formulier en boven het paneel. */
  body.balkactie #intake .blk-body{padding-bottom:6px}
  body.balkactie .sheet-body{padding-bottom:10px}
}
.dossier{background:var(--ink); color:#EFE9E6; border-radius:var(--r); padding:28px; box-shadow:var(--shadow)}
.dossier h3{font-size:21px; color:#fff; margin-top:10px}
.dossier .eyebrow{color:var(--brass-lt)}
.verhaal{margin-top:16px; font-size:15.5px; line-height:1.65; color:#E8E0E5}
.verhaal.leeg{color:#B4A7B4; font-style:italic}
.verhaal b{font-weight:600; color:#fff}
.quote{margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.15)}
.quote .lab{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--brass-lt)}
.quote .amt{font-family:"Newsreader",Georgia,serif; font-size:37px; line-height:1.2; margin-top:8px; color:#fff}
.quote .amt.idle{font-size:16.5px; color:#B4A7B4; font-family:"Manrope",sans-serif; font-style:normal}
.quote .note{font-size:12.5px; color:#B4A7B4; margin-top:11px; line-height:1.55}
.sheet-kop{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:28px}
/* voortgangsteller in de formulierkop */
.sheet-kop .eyebrow .teller{color:var(--soft); font-weight:700; letter-spacing:.08em}
.sheet-kop .eyebrow .teller[hidden]{display:none}
.reset{flex:none; white-space:nowrap; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--soft);
  background:none; border:1px solid var(--line-2); border-radius:5px; padding:8px 13px; transition:border-color .16s,color .16s}
.reset[hidden]{display:none}
.resetvraag{display:flex; align-items:center; gap:7px; flex:none}
.resetvraag[hidden]{display:none}
.resetvraag span{font-size:12.5px; font-weight:700; color:var(--soft); white-space:nowrap}
.mini{font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:6px 13px; border-radius:5px;
  border:1px solid var(--line-2); background:none; color:var(--ink); transition:background .16s, border-color .16s}
.mini:hover{border-color:var(--ink)}
.mini.ja{background:var(--alert); border-color:var(--alert); color:#fff}
.mini.ja:hover{background:#7C3527; border-color:#7C3527}
.mini:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.resetvraag .kort{display:none}
@media(max-width:430px){
  .resetvraag .lang{display:none}
  .resetvraag .kort{display:inline}
  .mini{padding:6px 11px}
}
.reset:hover{border-color:var(--ink); color:var(--ink)}
.reset:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
@media(max-width:520px){ .reset{font-size:11.5px; padding:6px 10px} }
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px}
.panel > .eyebrow + .link{margin-top:12px}
/* Op mobiel loopt ook dit paneel van rand tot rand, zodat het aansluit
   bij het formulier erboven. */
@media(max-width:560px){
  /* Op mobiel loopt het paneel tegen het formulier aan. Een lichte tint
     laat zien dat dit een ander aanbod is en geen staartje van de vragen.
     Bewust licht: het mag opvallen, niet de aandacht van het formulier
     wegnemen. */
  .panel{border-left:0; border-right:0; border-top:0; border-radius:0;
    background:var(--bone); margin-left:-24px; margin-right:-24px; padding:22px 16px 24px}
}
/* ---------- terugbelverzoek ---------- */
.uitklap{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  margin-top:20px; padding:13px 0 0; border:0; border-top:1px solid var(--line); background:none;
  font:inherit; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; text-align:left}
.uitklap svg{width:17px; height:17px; color:var(--brass); flex:none; transition:transform .22s}
.uitklap[aria-expanded="true"] svg{transform:rotate(180deg)}
.uitklap:hover{color:var(--brass)}
.uitklap:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
@media(prefers-reduced-motion:reduce){ .uitklap svg{transition:none} }

.terugbel[hidden],.tb-klaar[hidden]{display:none}
.terugbel{padding-top:6px}
@media(prefers-reduced-motion:no-preference){ .terugbel{animation:unfold .28s cubic-bezier(.2,.7,.3,1)} }
.tb-uitleg{margin:8px 0 16px; font-size:14.5px; color:var(--soft); line-height:1.55}
.tb-veld{margin-bottom:14px}
.tb-klein{margin-top:11px; font-size:12.5px; color:var(--soft); line-height:1.5}
.tb-klein a{color:var(--brass)}
.tb-klaar{margin-top:20px; padding:16px 18px; background:var(--brass-bg); border:1px solid var(--brass-lt); border-radius:10px}
.tb-klaar p:last-child{margin-top:6px; font-size:15px; color:var(--ink)}

.link{display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-weight:700; font-size:15px; color:var(--brass); text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- werkwijze-tijdlijn ---------- */
.tl{list-style:none; margin:38px 0 0; padding:0; display:grid; gap:26px; counter-reset:s}
@media(min-width:780px){ .tl{grid-template-columns:repeat(3,1fr); gap:34px} }
.tl li{counter-increment:s; padding-top:20px; border-top:1px solid var(--ink)}
.tl li::before{content:counter(s,decimal-leading-zero); font-family:"Newsreader",Georgia,serif; font-size:14px; color:var(--brass); display:block; margin-bottom:9px}
.tl h3{font-size:20px}
.tl p{margin-top:8px; font-size:15.5px; color:var(--soft)}
/* ---------- inhoudssecties ---------- */
.band{border-top:1px solid var(--line); padding:66px 0}
/* Op een telefoon stapelen de onderruimte van de ene sectie en de
   bovenruimte van de volgende: 66 + 66 is 132px leegte tussen twee stukken
   tekst. De scheidingslijn doet het werk al. */
@media(max-width:560px){ .band{padding:38px 0} }
.band.alt{background:var(--bone-2)}
/* De 13px erboven was de afstand tot het labeltje dat er niet meer staat.
   Staat de kop bovenaan, dan is de binnenruimte van de sectie genoeg. */
.band h2{font-size:clamp(26px,3.4vw,35px); max-width:30ch; margin-top:13px}
.band .wrap > h2:first-child{margin-top:0}
.band .intro{margin-top:18px; max-width:62ch; font-size:17px; color:var(--soft)}
.band .intro strong{color:var(--ink); font-weight:700}
/* Over ons: tekst met een foto ernaast */
.duo{display:grid; grid-template-columns:1fr; gap:30px; align-items:start}
@media(min-width:880px){ .duo{grid-template-columns:1.25fr .75fr; gap:52px} }
.portret{margin:0; border-radius:var(--r); overflow:hidden; position:relative; aspect-ratio:4/5;
  background:linear-gradient(155deg,#EFE9E1 0%,#E2D9CD 55%,#D4C8B8 100%); box-shadow:var(--shadow)}
@media(max-width:879px){ .portret{aspect-ratio:3/2; max-width:460px} }
.portret img{width:100%; height:100%; object-fit:cover; display:block}
.portret figcaption{position:absolute; inset:0; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center; padding:24px; color:#8A7C6B; font-size:13.5px}
.portret.leeg figcaption{display:flex}
.portret.leeg img{display:none}
.portret figcaption .eyebrow{color:#A3927D}

.tekst{margin-top:20px; max-width:64ch; display:grid; gap:16px}
.tekst p{font-size:17px; color:var(--soft); line-height:1.7}
.note-s{margin-top:16px; font-size:14px; color:var(--soft)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.tabel{margin-top:26px; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card)}
.tabel table{width:100%; border-collapse:collapse; font-size:15.5px; min-width:420px}
.tabel th,.tabel td{text-align:left; padding:14px 20px; border-bottom:1px solid var(--line)}
.tabel thead th{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:800; background:var(--bone-2)}
.tabel tbody th{font-weight:600}
.tabel tbody td{font-weight:700; white-space:nowrap}
.tabel tr:last-child th,.tabel tr:last-child td{border-bottom:0}

@media(max-width:560px){
  /* Tabel wordt een lijst: geen zijwaarts scrollen meer. */
  .tabel{overflow:visible; border:0; background:none; border-radius:0}
  .tabel table{display:block; min-width:0}
  .tabel tbody{display:block}
  .tabel thead{display:none}
  .tabel tr{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    background:var(--card); border:1px solid var(--line); border-radius:10px; padding:13px 16px; margin-bottom:8px}
  .tabel th,.tabel td{padding:0; border:0}
  .tabel tbody th{font-weight:600; text-align:left}
  .tabel tbody td{white-space:nowrap; color:var(--ink)}
  .tabel tr:last-child{margin-bottom:0}
}

.plaatsen{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:9px}
.plaatsen li{font-size:14.5px; font-weight:600; background:var(--card); border:1px solid var(--line); padding:8px 15px; border-radius:999px}

.vragen{display:grid; gap:16px; margin-top:34px}
@media(min-width:800px){ .vragen{grid-template-columns:1fr 1fr; gap:18px} }
.vragen > div{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px 26px;
  transition:border-color .18s, box-shadow .18s}
.vragen > div:hover{border-color:var(--line-2); box-shadow:0 12px 28px -22px rgba(36,30,36,.5)}
.vragen h3{font-size:18.5px; padding-left:16px; border-left:2px solid var(--brass-lt)}
.vragen p{margin-top:10px; font-size:15.5px; color:var(--soft)}

footer{border-top:1px solid var(--line); background:var(--ink); color:#C9BFC6; padding:56px 0 30px; font-size:14.5px}
.fgrid{display:grid; grid-template-columns:1fr; gap:34px}
@media(min-width:720px){ .fgrid{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .fgrid{grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px} }
.fcol.brand p{max-width:36ch; line-height:1.6}
.fname{font-family:"Newsreader",Georgia,serif; font-size:22px; color:#fff; margin-bottom:12px}
.fname span{color:var(--brass-lt)}
.fkop{font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-lt);
  font-family:"Manrope",sans-serif; margin-bottom:14px}
.fcol ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.fcol a{color:#D8CFD6; text-decoration:none; border-bottom:1px solid transparent; transition:color .16s,border-color .16s}
.fcol a:hover{color:#fff; border-color:var(--brass-lt)}
.fcol a:focus-visible{outline:2px solid var(--brass-lt); outline-offset:3px}
.fcol .plain,.fcol li.plain{color:#B4A7B4; line-height:1.55}
.fbar{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; font-size:13.5px; color:#B4A7B4}
.fbar a{color:#B4A7B4; text-decoration:underline; text-underline-offset:3px}
.fbar a:hover{color:#fff}

.mbar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; background:var(--ink); color:#fff;
  padding:11px 20px; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 -10px 28px -14px rgba(0,0,0,.55)}
.mbar .lab{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-lt); font-weight:800}
.mbar .val{font-family:"Newsreader",Georgia,serif; font-size:21px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.mbar .val.wacht{font-family:"Manrope",sans-serif; font-size:14.5px; font-weight:600; color:#D8CFD6}
.mbar-rij{display:flex; align-items:center; gap:12px; width:100%}
.mbar-info{flex:1; min-width:0}
.mbar-info .lab .mstap{color:var(--brass-lt); font-weight:800}
.mbar a{display:inline-flex; align-items:center; gap:7px; flex:none;
  background:var(--cta-vlak); color:var(--cta-tekst); text-decoration:none; font-weight:700; font-size:14px;
  padding:10px 14px; border-radius:4px; white-space:nowrap}
.mbar a svg{width:16px; height:16px; transition:transform .2s}
.mbar a.omhoog svg{transform:rotate(180deg)}
.mbar a .woord{display:none}
/* Doet de knop echt iets, dan staat het woord er altijd bij, ook op een
   smal scherm: een pijl alleen is geen verzendknop. Is hij alleen een
   sprong naar de vraag, dan blijft het bij de pijl. */
.mbar a.actie .woord{display:inline}
.mbar a.actie svg{display:none}
@media(prefers-reduced-motion:reduce){ .mbar a svg{transition:none} }
.mbar-wis{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none;
  background:none; border:1px solid rgba(255,255,255,.28); border-radius:4px; color:#D8CFD6; cursor:pointer;
  transition:border-color .16s, color .16s}
.mbar-wis svg{width:17px; height:17px}
.mbar-wis:hover{border-color:#fff; color:#fff}
.mbar-wis:focus-visible,.mbar a:focus-visible{outline:2px solid var(--brass-lt); outline-offset:2px}
/* Vraag links, de twee antwoorden naast elkaar rechts. Met
   space-between zouden Ja en Nee uit elkaar getrokken worden. */
.mbar-vraag{display:flex; align-items:center; gap:10px; width:100%}
.mbar-vraag[hidden]{display:none}
.mbar-vraag span{font-size:14px; font-weight:700; color:#fff; margin-right:auto}
.mbar-vraag .mini{border-color:rgba(255,255,255,.3); color:#fff}
.mbar-vraag .mini:hover{border-color:#fff}
.mbar.vraagt .mbar-rij{display:none}
/* Staat de openstaande vraag al in beeld, dan heeft de knop geen functie. */
/* Is de knop een sprong naar de vraag, dan verbergen we hem zodra je er al
   bent. Doet hij echt iets, dan blijft hij staan: dat is juist waarom hij
   daar staat, zodat hij bij een lange vraag niet uit beeld valt. */
.mbar.inbeeld a:not(.actie){display:none}
@media(max-width:979px){ .mbar.on{display:flex} body.bar{padding-bottom:78px} }

.done{display:none; padding:54px 34px 48px; text-align:center}
.done.on{display:block}
.done h2{font-size:30px; margin-top:14px}
.done p{margin-top:14px; color:var(--soft); max-width:46ch; margin-left:auto; margin-right:auto}