/* ============================================================
   HuisGenius — one-pager

   Stijl volgt demo.huisgenius.nl: wit, groen #4ADE80, Inter Tight 900 in
   kapitalen, pilknoppen en ronde hoeken.

   Drie ladders dragen de pagina. Er staat geen los getal in dit bestand;
   wil je iets groter of ruimer, verzet dan de token en niet de regel.

     kleur    --ink is het merkgroen op 5% helderheid. Geen zwart, geen
              tweede accentkleur. Nadruk en prioriteit lopen via de sterkte
              van hetzelfde groen. Groen als tekst gaat op --groen-diep,
              want #4ADE80 haalt op wit maar 1,7 : 1.
     type     --f1 t/m --f8, gulden snede in halve stappen van 1,272.
     ruimte   --s1 t/m --s7, Fibonacci: 8 13 21 34 55 89 144.

   Kapitalen alleen op koppen tot ongeveer zes woorden. Langere zinnen staan
   in dezelfde snede en hetzelfde gewicht, maar in zinsvorm.
   ============================================================ */

:root{
  /* ---------- kleur ---------- */
  --ink:#071310;          /* het merkgroen op 5% helderheid, dit is onze zwart */
  --ink-2:#0E201A;        /* vlak binnen een donker vlak */
  --ink-3:#1B3329;        /* lijn op donker */
  --wit:#FFFFFF;
  --vlak:#F4F8F6;         /* tweede vlak, met een groenzweem */
  --vlak-2:#E9F0EC;
  --lijn:#DFE8E3;
  --lijn-zacht:#EDF3F0;

  --grijs:#4C5A54;        /* lopende tekst op wit, 6,8 : 1 */
  --stil:#62716A;         /* meta en bijschrift: 5,1 : 1 op wit, 4,7 : 1 op --vlak */
  --op-d:#B4C2BA;         /* lopende tekst op inkt, 9,1 : 1 */
  --op-d-2:#8B9A92;       /* meta op inkt, 6,0 : 1 */
  --op-d-3:#5E6E66;       /* alleen lijnen en zeer kleine bijschriften */

  --groen:#4ADE80;        /* vlakken, knoppen, badges */
  --groen-fel:#2BFF56;    /* de hoogste sterkte, alleen op inkt */
  --groen-diep:#0B7A42;   /* groen als tekst op wit */
  --groen-zacht:#E9FAF0;

  /* ---------- type ---------- */
  --f1:12.6px;                        /* label, bijschrift, knop, ketenlabel */
  --f2:16px;                          /* lopende tekst, lijstregel, gespreksregel */
  --f3:clamp(18px,1.4vw,20.4px);      /* lead, quote, kaarttitel, invoerveld */
  --f4:clamp(20.4px,1.9vw,25.9px);    /* uitspraak binnen een blok */
  --f5:clamp(24px,2.4vw,32.9px);      /* sectiekop */
  --f6:clamp(29px,3.1vw,41.9px);      /* dragende blokkop */
  --f7:clamp(34px,3.9vw,53.3px);      /* de kop van de pagina, één keer */
  --f8:clamp(38px,5vw,67.8px);        /* de kickervraag en de bewijscijfers */

  /* ---------- ruimte ---------- */
  --s1:8px; --s2:13px; --s3:21px; --s4:34px; --s5:55px; --s6:89px; --s7:144px;
  --pad:clamp(21px,4vw,55px);         /* zijmarge van de pagina */
  --gap:clamp(55px,7vw,144px);        /* ruimte boven en onder een sectie */
  --gap-kop:clamp(34px,4vw,55px);     /* van kopblok naar inhoud */
  --gap-kolom:clamp(34px,4.4vw,89px); /* tussen twee kolommen */
  --max:1320px;

  /* ---------- vorm ---------- */
  --r1:8px; --r2:13px; --r3:21px;   /* 34/21/13 was een stapel kussens; de demo zit op 16 */
  --ease:cubic-bezier(.19,1,.22,1);
  --display:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --tekst:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --schaduw:0 21px 55px -34px rgba(7,19,16,.45);
  --schaduw-hoog:0 34px 89px -34px rgba(7,19,16,.5);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--tekst);
  background:var(--wit);
  color:var(--ink);
  font-size:var(--f2);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* height:auto hoort erbij. De logo-SVG's dragen een height-attribuut van 191;
   zonder deze regel houdt de browser die hoogte aan en werd de vaste balk
   217px hoog in plaats van 70. */
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
::selection{background:var(--groen);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:var(--s6)}

/* ---------- typografie ---------- */
.d1,.d2,.d3,.d4{font-family:var(--display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.018em;line-height:.98;text-wrap:balance}
.d1{font-size:var(--f7)}
.d2{font-size:var(--f6)}
.d3{font-size:var(--f5)}
.d4{font-size:var(--f3);letter-spacing:-.005em;line-height:1.1;text-transform:none}
/* Zelfde snede en gewicht, maar in zinsvorm: voor zinnen die te lang zijn
   voor kapitalen. */
.verklaring{font-family:var(--display);font-weight:900;text-transform:none;
  letter-spacing:-.025em;line-height:1.08;text-wrap:balance}

.op{color:var(--groen-diep)}
/* Kapitalen zijn voor koppen en knoppen. Al het andere staat in zinsvorm:
   een bovenkopje, een naam, een adres of een eenheid hoeft niet te
   schreeuwen, en als alles schreeuwt hoort niemand de kop meer. */
.boven{font-family:var(--display);font-weight:700;font-size:var(--f2);
  color:var(--groen-diep);margin-bottom:var(--s2)}
.boven--licht{color:rgba(7,19,16,.55)}

.lead{font-size:var(--f3);line-height:1.5;color:var(--ink);font-weight:500;max-width:34ch}
.body{font-size:var(--f2);line-height:1.7;color:var(--grijs);max-width:62ch}
.klein{font-size:var(--f1);line-height:1.6;color:var(--stil);max-width:52ch}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- opbouw ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;
  padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding-block:var(--gap);position:relative}
.vlak{background:var(--vlak)}
.donker{background:var(--ink);color:#fff}
.donker .body{color:var(--op-d)}
.donker .klein{color:var(--op-d-2)}
.donker .boven{color:var(--groen)}

/* Elk kopblok werkt hetzelfde: bovenkopje, kop, eventueel een alinea, dan
   één vaste sprong naar de inhoud. */
.kop{margin-bottom:var(--gap-kop)}
.kop h2{max-width:30ch}
.kop .body{margin-top:var(--s3)}
.kop--breed{max-width:none}
.kop--breed .body{max-width:66ch}

/* ---------- balk ----------
   De binnenkant staat in .wrap, zodat het logo op dezelfde lijn staat als de
   koppen eronder. Daarvoor stond het op de rand van het venster, 240 px links
   van de inhoud op een breed scherm. Vaste hoogte in beide staten: een balk
   die bij scrollen krimpt, laat de pagina eronder verspringen. */
.balk{position:fixed;inset:0 0 auto 0;z-index:80;
  transition:background .3s ease,box-shadow .3s ease}
.balk.is-vast{background:rgba(255,255,255,.95);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--lijn)}
.balk__in{display:flex;align-items:center;gap:var(--s4);height:calc(var(--s5) + var(--s1))}
.balk__merk{flex:none}
.balk__merk img{width:142px}
/* Ankers in zinsvorm: kapitalen zijn voor koppen en knoppen. Waar je bent
   krijgt een streep in groen-diep (balk.js zet aria-current). */
.balk__nav{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
.balk__nav a{position:relative;padding-block:var(--s1);font-size:var(--f2);font-weight:500;
  color:var(--grijs);transition:color .25s ease}
.balk__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--groen-diep);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.balk__nav a:hover,.balk__nav a[aria-current]{color:var(--ink)}
.balk__nav a[aria-current]::after{transform:none}
.balk__acties{flex:none}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  padding:var(--s2) var(--s4);border-radius:999px;font-family:var(--display);
  font-weight:800;font-size:var(--f1);letter-spacing:.02em;text-transform:uppercase;
  white-space:nowrap;transition:transform .35s var(--ease),background .25s ease,
  box-shadow .25s ease,border-color .25s ease,color .25s ease}
.knop--vol{background:var(--groen);color:var(--ink);box-shadow:0 8px 21px -13px rgba(74,222,128,.9)}
.knop--vol:hover{background:#3ccd71;transform:translateY(-2px)}
.knop--rand{border:1.5px solid var(--lijn);background:var(--wit);color:var(--ink)}
.knop--rand:hover{border-color:var(--ink);transform:translateY(-2px)}
.knop--geest{border:1.5px solid var(--ink-3);color:#fff}
.knop--geest:hover{border-color:var(--groen);color:var(--groen)}
.knop--klein{padding:10px var(--s3)}
.knop--breed{width:100%;padding:var(--s3) var(--s4)}
.slot .knop--vol{background:var(--ink);color:#fff;box-shadow:none}
.slot .knop--vol:hover{background:#0F251E}

/* ---------- overslaan-link ----------
   Er stond een verborgen skiplink die ook bij focus verborgen bleef; dan is
   het geen skiplink maar dode opmaak. */
.overslaan{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:#fff;padding:var(--s2) var(--s3);border-bottom-right-radius:var(--r1);
  font-family:var(--display);font-weight:800;font-size:var(--f1);text-transform:uppercase}
.overslaan:focus{left:0}

/* ============================================================
   1 — hero
   ============================================================ */
.hero{padding-top:clamp(var(--s6),10vh,120px);padding-bottom:var(--gap);
  position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--gap-kolom);align-items:center}
.hero h1{max-width:15ch}
.hero__sub{margin-top:var(--s3)}
.hero__steun{margin-top:var(--s2);font-size:var(--f2);line-height:1.65;
  color:var(--grijs);max-width:52ch}
.hero__ctas{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2)}

/* Vier feiten als hairline-rij. Geen container, geen schaduw, geen pil:
   het zijn zinnen, geen cijfers, en zinnen in een pil worden een tabel die
   zich als knop verkleedt. */
.feiten{list-style:none;margin-top:var(--gap-kop);display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.feiten li{padding-top:var(--s2);border-top:1px solid var(--ink)}
.feiten b{display:block;font-family:var(--display);font-weight:800;font-size:var(--f2);
  letter-spacing:-.01em}
.feiten span{display:block;margin-top:4px;font-size:var(--f1);color:var(--stil);line-height:1.45}

/* ---------- het gesprek ----------
   Het enige dat vanzelf beweegt in beeld: een bezoeker komt binnen om te
   kópen en blijkt zelf een woning te moeten verkopen. */
.demo{border:1px solid var(--lijn);border-radius:var(--r3);background:var(--wit);
  box-shadow:var(--schaduw-hoog);overflow:hidden}
.demo__kop{display:flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--lijn-zacht)}
.demo__merk{display:flex;align-items:center;gap:var(--s1);font-family:var(--display);
  font-weight:800;font-size:var(--f2)}
.vink{width:26px;height:26px;border-radius:9px;background:var(--groen);flex:none;
  display:grid;place-items:center}
.vink svg{width:14px;height:14px;color:var(--ink)}
.demo__tijd{margin-left:auto;font-size:var(--f1);color:var(--stil)}

.gesprek{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
  height:352px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;
  background:var(--vlak)}
.gesprek::-webkit-scrollbar{display:none}
/* Met justify-content:flex-end zou het bovenste bericht bij overloop
   onbereikbaar worden; margin-top:auto op het eerste kind houdt het gesprek
   onderaan zonder die bijwerking. */
.gesprek > :first-child{margin-top:auto}

.regel{max-width:86%;padding:var(--s2) var(--s3);border-radius:var(--r2);
  font-size:var(--f2);line-height:1.5;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.regel.in{opacity:1;transform:none}
.gesprek.is-af .regel{opacity:1;transform:none;transition:none}
.regel--hg{align-self:flex-start;background:var(--groen-zacht);
  border:1px solid rgba(11,122,66,.16);border-bottom-left-radius:6px}
.regel--bz{align-self:flex-end;background:var(--wit);border:1px solid var(--lijn);
  border-bottom-right-radius:6px}
.tikker{align-self:flex-start;display:flex;gap:4px;padding:var(--s2) var(--s3);
  border-radius:var(--r2);border-bottom-left-radius:6px;background:var(--groen-zacht);
  border:1px solid rgba(11,122,66,.16)}
.tikker span{width:5px;height:5px;border-radius:50%;background:var(--groen-diep);
  animation:tik 1.25s infinite}
.tikker span:nth-child(2){animation-delay:.16s}
.tikker span:nth-child(3){animation-delay:.32s}
@keyframes tik{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.vangst{padding:var(--s3);background:var(--groen);color:var(--ink);
  opacity:0;transition:opacity .5s var(--ease)}
.vangst.in{opacity:1}
.vangst__kop{display:flex;align-items:center;gap:var(--s1);font-family:var(--display);
  font-weight:800;font-size:var(--f1)}
.vangst__kop svg{width:14px;height:14px}
.vangst__rij{margin-top:var(--s1);font-size:var(--f2);font-weight:700}
.vangst__na{margin-top:2px;font-size:var(--f1);color:rgba(7,19,16,.72)}

.meter{padding:var(--s2) var(--s3);border-top:1px solid var(--lijn-zacht);
  display:flex;align-items:center;gap:var(--s2);background:var(--wit)}
.meter__label{font-size:var(--f1);color:var(--stil);flex:none}
.meter__baan{flex:1;height:5px;border-radius:99px;background:var(--vlak-2);overflow:hidden}
.meter__vul{height:100%;width:0%;border-radius:99px;background:var(--stil);
  transition:width 1s var(--ease),background .7s ease}
.meter__stand{font-family:var(--display);font-weight:800;font-size:var(--f1);
  color:var(--stil);flex:none;
  min-width:60px;text-align:right;transition:color .7s ease}
/* De hoogste stand is niet amber maar het felste groen uit dezelfde tint. */
.demo.is-heet .meter__vul{background:linear-gradient(90deg,var(--groen),var(--groen-diep))}
.demo.is-heet .meter__stand{color:var(--groen-diep)}
.demo__onder{margin-top:var(--s2);display:flex;justify-content:center;align-items:center;
  gap:var(--s2);flex-wrap:wrap;font-size:var(--f1)}
.demo__opnieuw,.demo__echt{color:var(--stil);border-bottom:1px solid var(--lijn);
  padding-bottom:2px;font-size:var(--f1);transition:color .3s ease,border-color .3s ease}
.demo__opnieuw:hover,.demo__echt:hover{color:var(--ink);border-color:var(--ink)}
/* De enige link op de pagina naar iets dat vandaag al draait, dus die mag
   opvallen tussen de twee. */
.demo__echt{color:var(--groen-diep);border-color:rgba(11,122,66,.4);font-weight:600}
.demo__echt:hover{color:var(--groen-diep);border-color:var(--groen-diep)}


/* ============================================================
   2 — het probleem
   ============================================================ */
.prob__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.72fr);
  gap:var(--gap-kolom);align-items:center}
.prob h2{max-width:18ch}
.prob__copy{margin-top:var(--s3)}
.prob__slot{margin-top:var(--s4);font-size:var(--f4);line-height:1.2;max-width:22ch;
  font-family:var(--display);font-weight:900;letter-spacing:-.02em}

/* Het raster: 96 bezoekers, vier daarvan willen verkopen. Illustratie bij de
   tekst ernaast, geen bewering: daarom aria-hidden in de opmaak. */
.raster{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s1)}
.raster i{aspect-ratio:1;border-radius:6px;background:var(--vlak-2);display:block;
  transition:background .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease)}
.raster i.aan{background:var(--groen);box-shadow:0 8px 21px -8px rgba(74,222,128,.9);
  transform:scale(1.16)}
.raster__bij{margin-top:var(--s3);font-size:var(--f2);color:var(--grijs);max-width:44ch}
.raster__bij b{color:var(--ink);font-weight:700}

/* markthaak — optioneel blok; Victor beslist of het blijft staan */
.haak{margin-top:var(--gap-kop);padding-top:var(--s4);border-top:1px solid var(--lijn);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:baseline}
.haak__kop{font-family:var(--display);font-weight:700;font-size:var(--f2);
  color:var(--groen-diep);white-space:nowrap}
/* Eén kolom over de volle breedte, op tekstmaat. Dat wordt een lange regel
   (rond de 115 tekens); bewuste keuze, het blok is maar drie regels hoog en
   moet de band vullen. */
.haak p{font-size:var(--f2);line-height:1.7;color:var(--grijs);max-width:none}

/* ---------- logobalk ----------
   De makelaars waar HuisGenius al draait (Victor, 10-9). Grijs en gedempt:
   drie logo's in drie huisstijlen zouden elk een eigen accentkleur op de
   pagina zetten. Bij aanwijzen komen ze in kleur. */
.klanten{padding-block:var(--s5);border-top:1px solid var(--lijn)}
.klanten__in{display:flex;align-items:center;gap:var(--s4) var(--s5);flex-wrap:wrap}
.klanten__label{font-size:var(--f1);color:var(--stil);max-width:26ch;line-height:1.45}
.klanten__logos{list-style:none;display:flex;align-items:center;gap:var(--s4) var(--s6);
  flex-wrap:wrap;margin-left:auto}
/* Vaste hoogte: een SVG zonder width-attribuut valt in een flexrij anders
   terug op 0 px breed. object-fit houdt een te breed PNG in verhouding. */
.klanten__logos img{height:var(--s5);width:auto;max-width:170px;object-fit:contain;
  object-position:left center;filter:grayscale(1);
  opacity:.7;transition:filter .3s ease,opacity .3s ease}
.klanten__logos li:hover img{filter:none;opacity:1}

/* ---------- de kickervraag ----------
   Eén fotografisch moment op de hele pagina, precies waar de vraag valt: een
   straat vol woningen waarvan je niet weet wie er wil verkopen. Het beeld
   wordt gedempt met opacity op een inktvlak, niet met een laag eroverheen;
   een pseudo-element boven een absolute afbeelding gaf hier een leeg vlak.

   De woorden lichten op terwijl je door de band scrollt. Die begintoestand
   zet beweging.js, niet de CSS: laadt GSAP niet, dan staat de vraag gewoon
   in vol wit en mist er niets. */
.vraag{position:relative;overflow:hidden;color:#fff;background:var(--ink);
  padding-block:clamp(var(--s5),9vw,var(--s7));text-align:center}
.vraag__beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 64%;opacity:.5}
.vraag .wrap{position:relative;z-index:1}
.vraag__tekst{font-family:var(--display);font-weight:900;text-transform:none;
  letter-spacing:-.028em;line-height:1.06;font-size:var(--f8);
  max-width:26ch;margin:0 auto;text-wrap:balance}
.vraag .op{color:var(--groen)}
.vraag__tekst .w{will-change:opacity}

/* ============================================================
   3 — drie situaties
   De twee lichte situaties staan naast elkaar zonder kader, gescheiden door
   één verticale lijn. De derde, de differentiator, is de enige die een vlak
   krijgt. Zo verdient het vlak zijn plek in plaats van dat alles er een heeft.
   ============================================================ */
.sit__paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.situatie{display:flex;flex-direction:column;padding-right:var(--gap-kolom)}
.situatie + .situatie{padding-right:0;padding-left:var(--gap-kolom);border-left:1px solid var(--lijn)}
.quote{font-family:var(--display);font-weight:900;font-size:var(--f4);line-height:1.15;
  letter-spacing:-.02em;text-wrap:pretty}
.quote__wie{margin-top:var(--s2);font-size:var(--f1);color:var(--stil)}

/* Wat de assistent doet is een reeks, dus nummers. Vinkjes zeggen "klaar";
   dit zegt "eerst dit, dan dat". */
.reeks{list-style:none;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--lijn);
  display:flex;flex-direction:column;gap:var(--s2);flex:1}
.reeks li{display:flex;gap:var(--s2);font-size:var(--f2);line-height:1.5;color:var(--grijs)}
.reeks__nr{flex:none;font-family:var(--display);font-weight:800;font-size:var(--f1);
  color:var(--groen-diep);min-width:1.4em;padding-top:3px}
.uitkomst{margin-top:var(--s4);display:flex;align-items:baseline;gap:var(--s2);
  font-family:var(--display);font-weight:900;font-size:var(--f3);letter-spacing:-.015em;
  line-height:1.1;color:var(--groen-diep)}
.uitkomst span{flex:none;font-family:var(--tekst);font-weight:500;font-size:var(--f1);
  color:var(--stil);padding-right:var(--s2);border-right:1px solid var(--lijn);align-self:stretch}
.uitkomst--fel{color:var(--groen-fel)}
.uitkomst--fel span{color:var(--op-d-2);border-right-color:var(--ink-3)}

/* De differentiator krijgt het donkere vlak en de meeste ruimte. */
.kaart--groot{margin-top:var(--gap-kop);border-radius:var(--r3);background:var(--ink);color:#fff;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--gap-kolom);align-items:center;padding:clamp(var(--s4),3.4vw,var(--s5))}
.kaart--groot .quote{color:#fff;font-size:var(--f4);font-weight:700;line-height:1.2}
.kaart--groot .quote__wie{color:var(--op-d-2)}
.wissel{display:flex;flex-direction:column;gap:var(--s2)}
.wissel__regel{padding:var(--s2) var(--s3);border-radius:var(--r2);font-size:var(--f2);
  line-height:1.5}
.wissel__regel--bz{background:rgba(255,255,255,.07);color:#fff;align-self:flex-start;
  border-bottom-left-radius:6px;max-width:88%}
.wissel__regel--hg{background:var(--groen);color:var(--ink);align-self:flex-end;
  border-bottom-right-radius:6px;max-width:92%;font-weight:500}
.wissel__pijl{display:flex;align-items:center;gap:var(--s2);margin:var(--s1) 0;
  font-family:var(--display);font-weight:700;font-size:var(--f1);color:var(--groen)}
.wissel__pijl i{flex:1;height:1px;background:var(--ink-3)}

/* ============================================================
   4 — de keten
   Acht stappen als acht kolommen, elk met een groot nummer boven een streep.
   Dit is de kernbelofte van de pagina; bolletjes op een lijn maakten er een
   voortgangsbalk van. Op scroll lopen de nummers van gedempt naar inkt, de
   laatste naar groen.
   ============================================================ */
.spoorlijn{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:var(--s3)}
.stap{border-top:1px solid var(--lijn);padding-top:var(--s2);
  transition:border-color .45s var(--ease)}
.stap__nr{display:block;font-family:var(--display);font-weight:900;font-size:var(--f5);
  line-height:.9;letter-spacing:-.03em;color:var(--lijn);transition:color .45s var(--ease)}
.stap b{display:block;margin-top:var(--s2);font-size:var(--f1);font-weight:600;line-height:1.35;
  color:var(--stil);transition:color .45s var(--ease)}
.stap.aan{border-top-color:var(--ink)}
.stap.aan .stap__nr{color:var(--ink)}
.stap.aan b{color:var(--ink)}
.stap:last-child.aan{border-top-color:var(--groen-diep)}
.stap:last-child.aan .stap__nr,.stap:last-child.aan b{color:var(--groen-diep)}
.keten__meting{margin-top:var(--gap-kop);font-size:var(--f4);max-width:30ch}

/* ============================================================
   5 — leadscore

   De werklijst zoals een makelaar hem 's ochtends voor zich heeft: een wit
   blad met een kop, een datum en drie regels onder elkaar. Geen donker
   dashboard met gloed, puls en pillen; dat was de vorm van elk SaaS-product
   en niet die van een makelaarskantoor.

   Klasse .werkregel en niet .lead: .lead is de subkop in de hero.

   De prioriteit zit in het scorevak en in hoeveel een regel krijgt. A heeft
   een groen vak, kenmerken en twee knoppen. B een vak met een lijn. C een
   gedempt vak en gedempte tekst. De kop staat links en blijft staan terwijl
   de lijst voorbij scrolt. Geen foto: die voegde niets toe (Tufan, 15-9).
   ============================================================ */
.werk{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:var(--gap-kolom);align-items:start}
.werk__kop{margin-bottom:0;position:sticky;top:calc(var(--s6) + var(--s3))}

.lijst{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r2)}
.lijst__kop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  flex-wrap:wrap;padding:var(--s3) var(--s4);border-bottom:1.5px solid var(--ink)}
.lijst__titel{font-family:var(--display);font-weight:900;font-size:var(--f3);
  letter-spacing:-.015em;line-height:1.1}
.lijst__meta{font-size:var(--f1);color:var(--stil);font-variant-numeric:tabular-nums}

.leads{list-style:none}
.werkregel{display:grid;grid-template-columns:var(--s5) minmax(0,1fr);gap:var(--s3);
  padding:var(--s4);border-bottom:1px solid var(--lijn)}
.werkregel__score{width:var(--s5);height:var(--s5);display:grid;place-items:center;
  border-radius:var(--r1);font-family:var(--display);font-weight:900;font-size:var(--f5);
  line-height:1}
.werkregel--a .werkregel__score{background:var(--groen);color:var(--ink)}
.werkregel--b .werkregel__score{border:1.5px solid var(--ink);color:var(--ink)}
.werkregel--c .werkregel__score{border:1px solid var(--lijn);color:var(--stil)}

.werkregel__boven{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  flex-wrap:wrap;font-size:var(--f1)}
.werkregel__rang{font-weight:600;color:var(--ink)}
.werkregel--a .werkregel__rang{color:var(--groen-diep)}
.werkregel__tijd{color:var(--stil);font-variant-numeric:tabular-nums}
.werkregel__naam{margin-top:6px;font-family:var(--display);font-weight:800;font-size:var(--f3);
  letter-spacing:-.01em;line-height:1.15}
.werkregel__plaats{font-size:var(--f1);color:var(--stil)}
.werkregel__wie{margin-top:var(--s2);color:var(--grijs);line-height:1.55;max-width:56ch}
/* Kenmerken als één regel met middenpunten, zoals in een notitie. */
.werkregel__feiten{list-style:none;margin-top:var(--s2);display:flex;flex-wrap:wrap;
  font-size:var(--f1);font-weight:600;color:var(--ink)}
.werkregel__feiten li:not(:last-child)::after{content:"\00B7";margin:0 var(--s1);color:var(--stil);font-weight:400}
.werkregel__acties{margin-top:var(--s3);display:flex;gap:var(--s1);flex-wrap:wrap}
.werkregel__stap{margin-top:var(--s2);font-size:var(--f1);color:var(--grijs)}
.werkregel__stap b{font-weight:600;color:var(--ink)}
.werkregel--c .werkregel__naam,.werkregel--c .werkregel__wie{color:var(--stil)}
.lijst .let{display:block;margin:0;padding:var(--s2) var(--s4)}

/* ============================================================
   6 — rendement
   ============================================================ */
.roi__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--gap-kolom);align-items:center}
.roi__kop{max-width:14ch}
.roi__copy{margin-top:var(--s3)}
/* De sectie is licht en de kaart is donker. Donker op donker liet het
   object waar het om gaat verdrinken in zijn eigen achtergrond. */
.formule{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--lijn);
  display:flex;flex-direction:column;gap:var(--s1);font-size:var(--f2);color:var(--grijs)}
.formule span{color:var(--groen-diep);font-weight:700}

.reken{border-radius:var(--r3);background:var(--ink);color:#fff;overflow:hidden;
  box-shadow:var(--schaduw-hoog)}
.reken__in{padding:clamp(var(--s3),2.2vw,var(--s4));display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);
  border-bottom:1px solid var(--ink-3)}
.veld label{display:block;font-size:var(--f1);color:var(--op-d-2);margin-bottom:var(--s1)}
.veld__vak{display:flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s3);
  border-radius:var(--r1);background:rgba(255,255,255,.05);
  border:1.5px solid var(--ink-3);transition:border-color .25s ease}
.veld__vak:focus-within{border-color:var(--groen)}
.veld__vak span{color:var(--op-d-2);font-size:var(--f2);flex:none}
.veld input{width:100%;background:none;border:0;outline:0;font-family:var(--display);
  font-weight:800;font-size:var(--f3);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;min-width:0}
.veld input::-webkit-outer-spin-button,.veld input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.veld input[type=number]{-moz-appearance:textfield}

.reken__uit{padding:clamp(var(--s3),2.6vw,var(--s4))}
.reken__label{font-family:var(--display);font-weight:700;font-size:var(--f2);
  color:var(--groen);margin-bottom:var(--s2)}
.reken__groot{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.reken__eenheid{max-width:16ch}
.reken__cijfer{font-family:var(--display);font-weight:900;font-size:var(--f8);
  line-height:.82;letter-spacing:-.05em;color:var(--groen);font-variant-numeric:tabular-nums}
.reken__eenheid{font-family:var(--display);font-weight:800;font-size:var(--f3);
  line-height:1.15;letter-spacing:-.015em;color:#fff}
.reken__zin{margin-top:var(--s4);font-size:var(--f2);line-height:1.6;color:var(--op-d);
  max-width:44ch}
.reken__zin b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.reken__voet{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--ink-3);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;align-items:center}
.reken__jaar{font-size:var(--f1);color:var(--op-d-2)}
.reken__jaar b{color:var(--groen);font-weight:700;font-variant-numeric:tabular-nums}

/* ============================================================
   7 — voor wie
   Eén kolom. Vier voorwaarden als raster onder eigen strepen, dezelfde vorm
   als de bewijscijfers: dat zijn de twee blokken waar de makelaar zichzelf
   afvinkt. De kernzin is groot en groen op wit, geen groene band: de band
   was een kleurvlak dat de rol van hiërarchie overnam.
   ============================================================ */
.wie__kop{max-width:14ch}
.criteria{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4)}
.criteria li{padding-top:var(--s2);border-top:1px solid var(--ink);font-size:var(--f2);
  line-height:1.5;font-weight:500}
.wie__sturing{margin-top:var(--gap-kop);font-size:var(--f3);line-height:1.45;font-weight:500;
  max-width:46ch}
.wie__kern{margin-top:var(--gap-kop);padding-top:var(--gap-kop);border-top:1px solid var(--lijn);
  font-family:var(--display);font-weight:900;font-size:var(--f6);line-height:1.02;
  letter-spacing:-.025em;max-width:30ch;text-wrap:balance}

/* ============================================================
   6b — prijzen
   Zelfde vorm als de voorwaarden: elk pakket onder een eigen streep, geen
   kaarten. Het uitgelichte pakket krijgt een dikke groene streep en een
   label; het bedrag staat op kopmaat, de eenheid op labelmaat.
   ============================================================ */
.pakketten{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap-kolom);align-items:start}
.pakket{position:relative;padding-top:var(--s3);border-top:1px solid var(--ink)}
.pakket--op{border-top:var(--s1) solid var(--groen);padding-top:calc(var(--s3) - var(--s1) + 1px)}
.pakket__merk{font-family:var(--display);font-weight:700;font-size:var(--f1);
  color:var(--groen-diep);margin-bottom:var(--s1)}
.pakket__naam{margin-bottom:var(--s3)}
.pakket__prijs{display:flex;align-items:baseline;gap:var(--s1);flex-wrap:wrap}
.pakket__bedrag{font-family:var(--display);font-weight:900;font-size:var(--f7);
  line-height:1;letter-spacing:-.025em}
.pakket__eenheid{font-size:var(--f1);color:var(--stil)}
.pakket__voor{margin-top:var(--s2);font-size:var(--f2);line-height:1.5;font-weight:500}
.pakket__punten{list-style:none;margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--lijn)}
.pakket__punten li{font-size:var(--f2);line-height:1.5;color:var(--grijs)}
.pakket__punten li + li{margin-top:var(--s1)}
.prijzen__voet{margin-top:var(--gap-kop);display:flex;align-items:center;gap:var(--s4);
  flex-wrap:wrap}

/* ============================================================
   8 — bewijs
   Geen kaders meer. Vier cijfers op ware grootte, elk onder een eigen streep,
   met het label eronder op labelmaat. Het schaalverschil doet het werk.
   ============================================================ */
.bewijs__kop{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--gap-kop)}
.bewijs__kop .boven{margin-bottom:var(--s2)}
.bewijs__let{display:inline-flex;align-items:center;gap:var(--s1);
  font-size:var(--f1);color:var(--stil);white-space:nowrap}
.trap{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4)}
.trede{display:flex;flex-direction:column;gap:var(--s2);
  border-top:2px solid var(--ink);padding-top:var(--s3)}
.trede__cijfer{font-family:var(--display);font-weight:900;font-size:var(--f8);
  line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.trede__wat{font-size:var(--f1);line-height:1.45;color:var(--stil);max-width:20ch}
.trede--eind{border-top-color:var(--groen-diep)}
.trede--eind .trede__cijfer{color:var(--groen-diep)}
.trede--eind .trede__wat{color:var(--ink);font-weight:600}
.bewijs__intro{margin-top:var(--s2)}

/* Drie rijen cijfers (Victor, 15-9): volume, opbrengst, en de verhoudingen
   waar een makelaar zichzelf in kan rekenen. Elke rij heeft links een label;
   de laatste rij staat in groen, want daar gaat het om. */
.rij{display:grid;grid-template-columns:minmax(0,.24fr) minmax(0,1fr);gap:var(--gap-kolom);
  padding-block:var(--s4);border-top:1px solid var(--lijn)}
.rij__label{padding-top:var(--s3);font-family:var(--display);font-weight:700;font-size:var(--f2);
  line-height:1.3}
.rij .trap{grid-template-columns:repeat(4,minmax(0,1fr))}
.rij .trede__cijfer{font-size:var(--f7);white-space:nowrap}
.rij--nadruk .trede{border-top-color:var(--groen-diep)}
.rij--nadruk .trede__cijfer,.rij--nadruk .rij__label{color:var(--groen-diep)}
.rij--nadruk .trede__wat{color:var(--ink);font-weight:600}

.bewijs__na{margin-top:var(--gap-kop);font-size:var(--f1);color:var(--stil);max-width:66ch}
.bewijs__nu{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--lijn);
  font-size:var(--f2);line-height:1.6;color:var(--ink);max-width:66ch}
.bewijs__nu a{color:var(--groen-diep);font-weight:600;
  border-bottom:1px solid rgba(11,122,66,.4);transition:border-color .3s ease}
.bewijs__nu a:hover{border-bottom-color:var(--groen-diep)}

/* ============================================================
   9 — slot
   ============================================================ */
.slot{background:var(--groen);color:var(--ink)}
.slot__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:var(--gap-kolom);align-items:start}
.slot h2{max-width:none}
/* Op het groene vlak kan een nadrukwoord niet groen zijn. De streep doet
   hetzelfde werk zonder een tweede kleur te introduceren. */
.slot .op{color:var(--ink);text-decoration:underline;text-decoration-thickness:.055em;
  text-underline-offset:.14em}
.slot__belofte{margin-top:var(--s3);font-size:var(--f3);line-height:1.5;
  color:rgba(7,19,16,.78);max-width:38ch}
.slot__punten{list-style:none;margin-top:var(--s4);display:flex;flex-direction:column;
  gap:var(--s2)}
.slot__punten li{display:flex;gap:var(--s2);font-size:var(--f2);color:rgba(7,19,16,.82)}
.slot__punten svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--ink)}

.form{background:var(--wit);border-radius:var(--r3);padding:clamp(var(--s4),3vw,var(--s5));
  box-shadow:var(--schaduw-hoog)}
.form__titel{font-family:var(--display);font-weight:900;font-size:var(--f4);
  letter-spacing:-.02em;line-height:1}
.form__sub{margin-top:var(--s1);margin-bottom:var(--s4);font-size:var(--f1);color:var(--stil)}
.form__rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.form .veld{margin-bottom:var(--s2)}
.form .veld label{color:var(--stil);margin-bottom:6px}
.form .veld__vak{background:var(--vlak);border-color:var(--lijn);padding:var(--s2) var(--s3)}
.form .veld__vak:focus-within{border-color:var(--ink);background:var(--wit)}
.form input{font-family:var(--tekst);font-size:var(--f2);font-weight:500;letter-spacing:0}
.form input::placeholder{color:#A3B0A9}
.form button{margin-top:var(--s3)}
.form__na{margin-top:var(--s2);font-size:var(--f1);color:var(--stil);text-align:center}
/* Foutmelding staat onder het veld waar hij bij hoort, in tekst en niet
   alleen in een kleur: een rode rand alleen zegt niets tegen wie geen kleur
   ziet en niets tegen een schermlezer. */
.veld__fout{margin-top:6px;font-size:var(--f1);color:#B3261E;min-height:0}
.veld__fout:empty{display:none}
.form .veld__vak.is-fout{border-color:#B3261E;background:#FDF3F2}
.form__dank:focus{outline:none}
.form__dank{display:none;text-align:center;padding:var(--s4) 0}
.form__dank svg{width:36px;height:36px;color:var(--groen-diep);margin:0 auto var(--s3)}
.form__dank .klein{margin:var(--s2) auto 0}
.form.is-klaar .form__lijf{display:none}
.form.is-klaar .form__dank{display:block}

/* ---------- voet ----------
   Eén rij met drie kolommen, dezelfde opbouw als bij EV Proof: wie het is,
   waar je op deze pagina heen kunt en hoe je contact krijgt. Geen knop en
   geen beloften; die staan al in het slot erboven. */
.voet{background:var(--ink);color:#fff;padding-block:var(--s6) var(--s4)}
.voet__rij{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--gap-kolom)}
.voet__merk img{width:150px}
.voet__claim{margin-top:var(--s3);font-size:var(--f2);line-height:1.55;color:var(--op-d);
  max-width:34ch}
.voet__kop{font-family:var(--display);font-weight:700;font-size:var(--f1);color:var(--op-d-2);
  margin-bottom:var(--s2)}
.voet__links{list-style:none;display:flex;flex-direction:column;gap:var(--s1)}
.voet__links a{font-size:var(--f2);color:var(--op-d);transition:color .25s ease}
.voet__links a:hover{color:#fff}
.voet__onder{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--ink-3);
  display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;
  font-size:var(--f1);color:var(--op-d-2)}
.voet__onder a{color:var(--op-d)}
.voet__onder a:hover{color:#fff}

/* ============================================================
   toevoegingen uit de review van 3 september
   ============================================================ */

/* Kleine noot onder een mock of een illustratie. Overal dezelfde vorm, zodat
   duidelijk blijft welke getallen op de pagina echt zijn en welke niet. */
.let{font-size:var(--f1);color:var(--stil)}
.donker .let{color:var(--op-d-3)}

/* ---------- blok 2: de eigenaar en de volle rasterband ---------- */
figure{margin:0}
figcaption{margin-top:var(--s2);font-size:var(--f1);line-height:1.5;color:var(--stil)}
.prob__beeld img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r2)}
.prob__beeld figcaption{max-width:38ch}

.rasterband{margin-top:var(--gap-kop)}
.rasterband .raster{grid-template-columns:repeat(24,1fr)}
.rasterband__bij{margin-top:var(--s3);display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s4);flex-wrap:wrap}
.rasterband__bij .raster__bij{margin-top:0;max-width:70ch}
.haak__bron{margin-top:var(--s2);font-size:var(--f1);color:var(--stil)}

/* ---------- blok 3b: kopers ---------- */
.kopers__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.78fr);
  gap:var(--gap-kolom);align-items:start}
.kopers__copy{margin-top:var(--s3);max-width:46ch}
.kopers__lijst{list-style:none;margin-top:var(--s4)}
.kopers__lijst li{display:flex;gap:var(--s2);padding:var(--s2) 0;font-size:var(--f2);
  line-height:1.5;border-bottom:1px solid var(--lijn)}
.kopers__lijst li:last-child{border-bottom:0}
.kopers__lijst svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--groen-diep)}
/* De afsluiter buigt de koperskant terug naar de verkoperskant; die krijgt
   daarom kopgewicht en niet de maat van een alinea. */
.kopers__slot{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--lijn);
  font-family:var(--display);font-weight:900;font-size:var(--f4);line-height:1.18;
  letter-spacing:-.02em;max-width:36ch;text-wrap:pretty}
.kopers__slot em{font-style:italic}

/* De kaart zoals de assistent hem in het gesprek toont. Geen tweede afspelend
   gesprek: dat staat al in de hero. */
.aanbod{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r3);
  padding:var(--s3);box-shadow:var(--schaduw)}
.aanbod__vraag{margin-left:var(--s5);padding:var(--s2) var(--s3);border-radius:var(--r2);
  border-bottom-right-radius:6px;background:var(--vlak-2);font-size:var(--f2);line-height:1.5}
.woning{margin-top:var(--s2);border:1px solid var(--lijn);border-radius:var(--r2);
  overflow:hidden;background:var(--wit)}
.woning img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.woning__lijf{padding:var(--s3)}
.woning__adres{font-family:var(--display);font-weight:900;font-size:var(--f3);
  letter-spacing:-.015em;line-height:1}
.woning__plaats{margin-top:6px;font-size:var(--f1);color:var(--stil)}
.woning__prijs{margin-top:var(--s2);font-family:var(--display);font-weight:900;
  font-size:var(--f3);color:var(--groen-diep)}
.woning__specs{list-style:none;margin-top:var(--s2);padding-top:var(--s2);
  border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;font-size:var(--f1);
  color:var(--grijs)}
.woning__specs li + li::before{content:"·";margin:0 var(--s1);color:var(--stil)}
.aanbod .let{display:block;margin-top:var(--s3);text-align:center}

/* ---------- blok 7: waar HuisGenius op stuurt ---------- */
.wie__sturing{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--lijn);
  font-size:var(--f3);line-height:1.45;color:var(--ink);font-weight:500;max-width:44ch}

/* ---------- blok 9: de pilot ---------- */
.slot__pilot{margin-top:var(--s4);padding-top:var(--s3);
  border-top:1px solid rgba(7,19,16,.22);font-family:var(--display);font-weight:900;
  font-size:var(--f3);letter-spacing:-.015em}

/* ============================================================
   verschijnen
   ============================================================ */
.rv{opacity:0;transform:translateY(13px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
html:not(.js) .rv{opacity:1;transform:none}

/* ============================================================
   smaller
   ============================================================ */
@media (max-width:1080px){
  .hero__grid,.prob__grid,.roi__grid,.wie__grid,.slot__grid,.werk,
  .kopers__grid{grid-template-columns:minmax(0,1fr)}
  .werk__kop{position:static;margin-bottom:var(--gap-kop)}
  .voet__rij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voet__merkvak{grid-column:1/-1}
  .prob__beeld img{aspect-ratio:16/9}
  .rasterband .raster{grid-template-columns:repeat(16,1fr)}
  .hero__grid{gap:var(--s5)}
  .hero h1{max-width:16ch}
  .kaart--groot{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .spoorlijn{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--s4)}
  .feiten,.criteria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rij{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .rij .trap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wie__kop{max-width:14ch}
}
@media (max-width:980px){
  .balk__nav{display:none}
  .balk__acties{margin-left:auto}
}
@media (max-width:720px){
  .voet__rij{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .balk__merk img{width:118px}
  .hero{padding-top:calc(var(--s6) + var(--s3))}
  .hero__ctas{flex-direction:column;align-items:stretch}
  .hero__ctas .knop{width:100%}
  .sit__paar,.form__rij,.reken__in,.feiten,.criteria,.pakketten{grid-template-columns:minmax(0,1fr)}
  .pakketten{gap:var(--s5)}
  .situatie{padding-right:0}
  .situatie + .situatie{padding-left:0;border-left:0;margin-top:var(--s5);padding-top:var(--s5);
    border-top:1px solid var(--lijn)}
  .raster,.rasterband .raster{grid-template-columns:repeat(12,1fr)}
  .aanbod__vraag{margin-left:var(--s4)}
  .gesprek{height:308px}
  .regel{max-width:94%}
  .spoorlijn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .haak{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .werkregel{grid-template-columns:var(--s4) minmax(0,1fr);gap:var(--s2);padding:var(--s3)}
  .werkregel__score{width:var(--s4);height:var(--s4);font-size:var(--f3)}
  .lijst__kop,.lijst .let{padding-inline:var(--s3)}
  .werkregel__acties .knop{flex:1}
  .bewijs__kop{align-items:flex-start}
  .klanten__logos{margin-left:0;gap:var(--s4)}
  .klanten__logos img{height:var(--s4);max-width:120px}
}
@media (max-width:440px){
  .trap{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}