/* ──────────────────────────────────────────────────────────────────────
   Gevelrenovatie Den Haag — elke kleur komt uit palette.json
   ────────────────────────────────────────────────────────────────────── */

:root{
  --inkt:#0D0D0D;   --inkt-700:#232320; --inkt-500:#3B3B39; --inkt-300:#6E6E68;
  --kalk:#F4F4F2;   --kalk-50:#FBFBFA;  --kalk-200:#E9E8E3; --kalk-300:#DAD8D0;
  --baksteen:#B24A22; --baksteen-700:#8A3817; --baksteen-300:#D0764C;
  --zink:#5E625F;   --zink-600:#474B48; --zink-200:#9BA09C;
  --whatsapp:#25D366;
  --veldrand:#DAD8D0;

  --wrap:1200px;
  --gut:clamp(20px,4.4vw,48px);
  --sec:clamp(64px,8.4vw,132px);
  --kopbalk-h:84px;

  --display:'Unbounded',sans-serif;
  --tekst:'Instrument Sans',system-ui,sans-serif;
  --stempelfont:'Space Grotesk',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--kalk);color:var(--inkt);
  font:400 clamp(16px,1.08vw,17.5px)/1.62 var(--tekst);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--baksteen);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.vw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute;left:-9999px;top:0;z-index:90;background:var(--inkt);color:var(--kalk);padding:12px 18px}
.overslaan:focus{left:8px;top:8px}

/* ── het merk: het monogram en de naam als één object ───────────────── */
.lockup{--sq:86px;display:inline-block;text-decoration:none;color:inherit}
.lockup .mono{display:flex;gap:calc(var(--sq) * .093)}
.lockup .mono i{
  width:var(--sq);height:var(--sq);display:block;
  background:var(--inkt);color:var(--kalk);
  font:800 calc(var(--sq) * .465)/var(--sq) var(--display);
  font-style:normal;text-align:center;text-transform:uppercase;
}
.lockup .naam{
  display:block;margin:calc(var(--sq) * .186) 0 0 calc(var(--sq) * .035);
  font:800 max(11px,calc(var(--sq) * .256))/1 var(--display);
  text-transform:uppercase;letter-spacing:.015em;white-space:nowrap;
}

/* ── het vierkant met de ooievaar ───────────────────────────────────── */
/* De vogel is het merkteken zelf, uit zijn eigen beeldpunten getrokken; hij wordt
   als masker over de tegel gelegd zodat de tegelkleur per plek kan omkeren. */
.lockup .mono i.vogel{position:relative;background:var(--inkt)}
.lockup .mono i.vogel::before{
  content:'';position:absolute;inset:0;background:var(--kalk);
  -webkit-mask:url(ooievaar.svg) no-repeat center/contain;
          mask:url(ooievaar.svg) no-repeat center/contain;
}
/* in de voet staan de lettertegels licht op een donkere grond: de vogeltegel volgt */
.lockup-voet .mono i.vogel{background:var(--kalk)}
.lockup-voet .mono i.vogel::before{background:var(--inkt)}

/* ── de stempelregel ────────────────────────────────────────────────── */
.stempel{
  display:block;margin-bottom:14px;
  font:500 11px/1 var(--stempelfont);letter-spacing:.18em;
  text-transform:uppercase;color:var(--zink);
}
.stempel-kalk{color:var(--kalk-300)}

/* ── knoppen ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border:2px solid transparent;text-decoration:none;
  font:600 14px/1 var(--tekst);letter-spacing:.06em;text-transform:uppercase;
  transition:transform .12s ease,background-color .12s ease,color .12s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-ink{background:var(--inkt);color:var(--kalk);border-color:var(--inkt)}
.btn-ink:hover{background:var(--inkt-700)}
.btn-kalk{background:var(--kalk);color:var(--inkt);border-color:var(--kalk)}
.btn-kalk:hover{background:#fff}
.btn-breed{width:100%}
.wa{width:18px;height:18px;flex:none}

/* WhatsApp: gevuld op lichte grond, omgekeerd op de inktgrond ───────── */
.btn-wa{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff}
.btn-wa:hover{background:#1FBE5A;border-color:#1FBE5A}
/* op de inktgrond en op de foto: rand, beeldmerk en label groen */
.btn-wa-om{background:var(--inkt);border-color:var(--whatsapp);color:var(--whatsapp)}
.btn-wa-om:hover{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff}
.btn-wa-breed{width:100%}

/* ── de stille actie ────────────────────────────────────────────────── */
.stil{
  display:inline-block;text-decoration:none;
  font:600 14px/1 var(--tekst);letter-spacing:.04em;
  border-bottom:2px solid var(--inkt);padding-bottom:3px;
}
.stil:hover{color:var(--baksteen);border-color:var(--baksteen)}
.stil-om{color:var(--kalk);border-color:var(--kalk)}
.stil-om:hover{color:var(--kalk);border-color:var(--baksteen-300)}
.stil-vet{border-bottom-width:2px}

/* ── de kopbalk ─────────────────────────────────────────────────────── */
.kopbalk{
  position:sticky;top:0;z-index:60;
  background:var(--kalk);border-bottom:1px solid var(--inkt);
}
.kopbalk-in{display:flex;align-items:center;gap:clamp(16px,2.6vw,40px);min-height:84px}
.lockup-kop{--sq:32px;flex:none;margin-block:14px}
.nav{margin-left:auto}
.nav-lijst{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-lijst > li > a,.nav-knop{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:none;
  font:500 12px/1 var(--stempelfont);letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.nav-lijst > li > a:hover,.nav-knop:hover,.nav-knop[aria-expanded=true]{border-bottom-color:var(--inkt)}
.pijl{width:10px;height:6px;transition:transform .15s ease}
.nav-knop[aria-expanded=true] .pijl{transform:rotate(180deg)}

.heeft-uitklap{position:relative}
.uitklap{
  position:absolute;left:-18px;top:calc(100% + 14px);z-index:5;min-width:290px;
  background:var(--inkt);border:1px solid var(--inkt);padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.heeft-uitklap:hover .uitklap,.uitklap:focus-within,.nav-knop[aria-expanded=true] + .uitklap{
  opacity:1;visibility:visible;transform:none;
}
.uitklap a{
  display:block;padding:11px 24px;text-decoration:none;color:var(--kalk);
  font:500 14px/1.2 var(--tekst);
}
.uitklap a:hover{background:var(--kalk);color:var(--inkt)}

.kop-tel{flex:none;text-decoration:none;text-align:right}
.kop-tel-stempel{
  display:block;font:500 10px/1 var(--stempelfont);
  letter-spacing:.18em;text-transform:uppercase;color:var(--zink);margin-bottom:5px;
}
.kop-tel-nr{display:block;font:800 16px/1 var(--display);letter-spacing:-.01em}
.kop-tel:hover .kop-tel-nr{color:var(--baksteen)}

.menu-knop{display:none;width:44px;height:44px;background:var(--inkt);border:0;cursor:pointer;position:relative}
.menu-streep,.menu-streep::before,.menu-streep::after{
  position:absolute;left:11px;width:22px;height:2px;background:var(--kalk);content:'';
}
.menu-streep{top:21px}
.menu-streep::before{top:-7px;left:0}
.menu-streep::after{top:7px;left:0}

/* ── de vouw ────────────────────────────────────────────────────────── */
/* de vouw vult wat er ná de kopbalk nog van het beeldscherm over is,
   zodat de onderaan verankerde inhoud bij het laden zichtbaar is */
.vouw{position:relative;min-height:calc(100svh - var(--kopbalk-h));display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.vouw-beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vouw-sluier{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(13,13,13,.90) 0%,rgba(13,13,13,.74) 34%,rgba(13,13,13,.34) 66%,rgba(13,13,13,.46) 100%);
}
.vouw-in{padding-block:clamp(120px,17vh,190px) clamp(48px,6vh,80px);color:var(--kalk)}
.lockup-vouw{--sq:46px;margin-bottom:clamp(28px,4vh,52px)}
.lockup-vouw .mono i{background:var(--kalk);color:var(--inkt)}
.lockup-vouw .naam{color:var(--kalk)}

.vouw-kop{
  font:800 clamp(29px,6.3vw,88px)/1.3 var(--display);
  text-transform:uppercase;letter-spacing:-.015em;
}
.bar-om{
  display:inline;background:var(--inkt);color:var(--kalk);
  padding:.14em .28em .2em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.out{display:block;padding-left:.28em}
.vouw-sub{
  margin-top:clamp(20px,2.6vh,32px);max-width:56ch;
  font:400 clamp(16px,1.3vw,19px)/1.55 var(--tekst);color:var(--kalk-300);
}
.vouw-regel{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px 32px;margin-top:clamp(30px,4.4vh,54px);
  border-top:1px solid rgba(244,244,242,.3);padding-top:clamp(24px,3vh,34px);
}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* ── het Google-element: het echte beeldmerk van Google ─────────────── */
/* Het merk van Google, net als dat van WhatsApp: het wordt nooit in het palet
   bijgekleurd, en het staat er in beide gronden hetzelfde op. */
.google-cluster{display:inline-flex;align-items:center;gap:14px}
.g-merk{width:42px;height:42px;flex:none;display:block}
.g-merk-groot{width:58px;height:58px}
/* het merk op de losse beoordelingskaart */
.rev-g{width:19px;height:19px;flex:none;display:block;margin-left:auto}
.google-tekst{display:block}
.google-score{display:block;font:800 19px/1 var(--display);letter-spacing:-.01em}
.google-op{font-size:.62em;letter-spacing:.02em}
.sterren{display:block;margin:5px 0 4px;color:var(--baksteen);font-size:15px;letter-spacing:.14em;line-height:1}
.sterren-groot{font-size:19px}
.ster-uit{color:var(--zink-200)}
.google-aantal{display:block;font:500 11px/1 var(--stempelfont);letter-spacing:.12em;text-transform:uppercase;color:var(--zink)}

.google-cluster-vouw .google-score{color:var(--kalk)}
.google-cluster-vouw .sterren{color:var(--baksteen-300)}
.google-cluster-vouw .google-aantal{color:var(--kalk-300)}
.google-cluster-om .google-score{color:var(--kalk)}
.google-cluster-om .sterren{color:var(--baksteen-300)}
.google-cluster-om .google-aantal{color:var(--kalk-300)}

/* ── de twee feiten ─────────────────────────────────────────────────── */
/* twee open kaders naast elkaar; het label zit als een gevuld blok schrijlings
   op de bovenlijn van het kader, en de foto ligt achter de tekst in plaats van
   ernaast */
.feiten{background:var(--kalk-200);border-bottom:1px solid var(--inkt)}
.feiten-in{
  display:grid;grid-template-columns:minmax(230px,.74fr) minmax(0,1.26fr);
  gap:clamp(24px,3.4vw,54px);padding-block:clamp(46px,5.8vw,78px);align-items:stretch;
}
.kader{position:relative;border:2px solid var(--inkt);background:var(--kalk-50)}
.kader-ruiter{
  position:absolute;top:0;left:clamp(18px,3.4vw,40px);z-index:3;
  transform:translateY(-50%);
  background:var(--inkt);color:var(--kalk);padding:9px 15px 10px;
  font:500 11px/1 var(--stempelfont);letter-spacing:.18em;text-transform:uppercase;
}
.kader-jaar{
  padding:clamp(34px,3.8vw,48px) clamp(24px,2.8vw,36px) clamp(28px,3.2vw,38px);
  display:flex;flex-direction:column;justify-content:center;
}
.jaartal{
  display:block;font:800 clamp(46px,6.2vw,88px)/.88 var(--display);
  color:var(--baksteen);letter-spacing:-.035em;
}
.feit-regel{margin-top:16px;font:400 15px/1.5 var(--tekst);color:var(--inkt-500);max-width:32ch}
.kader-foto{min-height:clamp(250px,27vw,330px);display:flex;background:var(--inkt)}
.kader-achter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.kader-foto::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.76) 46%,rgba(13,13,13,.22) 100%);
}
.kader-op{position:relative;z-index:2;align-self:flex-end;padding:clamp(26px,3vw,40px);max-width:56ch}
.feit-groot{
  font:800 clamp(20px,2.3vw,31px)/1.18 var(--display);
  text-transform:uppercase;letter-spacing:-.015em;color:var(--kalk);
}
.kader-bijschrift{
  margin-top:12px;
  font:500 10.5px/1.45 var(--stempelfont);letter-spacing:.11em;text-transform:uppercase;color:var(--kalk-300);
}
.kader-op .stil{margin-top:20px}

/* ── beeld: het harde kader met de band eronder ─────────────────────── */
.beeldblok{position:relative;border:2px solid var(--inkt);background:var(--inkt)}
.beeldblok img{width:100%}
.beeld-stempel{
  display:block;padding:9px 14px 10px;background:var(--inkt);color:var(--kalk-300);
  font:500 10.5px/1.35 var(--stempelfont);letter-spacing:.11em;text-transform:uppercase;
}
.beeldblok-portret img{aspect-ratio:1122/1402;object-fit:cover;height:auto}

/* ── de sectie en haar aankondiging ─────────────────────────────────── */
.sectie{padding-block:var(--sec);scroll-margin-top:96px}
.sectie-kalk{background:var(--kalk-200)}
.sectie-ink{background:var(--inkt);color:var(--kalk)}
.sectie-smal{padding-block:clamp(48px,6vw,86px)}
.sectie-paar{padding-bottom:clamp(36px,4.6vw,64px)}
.sectie-paar-slot{padding-top:clamp(36px,4.6vw,64px)}
.sectie-paar-slot .wrap{border-top:1px solid var(--kalk-300);padding-top:clamp(36px,4.6vw,64px)}

.kop{
  font:800 clamp(26px,4.1vw,52px)/1.5 var(--display);
  text-transform:uppercase;letter-spacing:-.015em;
  margin-bottom:clamp(30px,4vw,54px);
}
.kop-klein{font-size:clamp(23px,3.1vw,38px)}
.kop a{text-decoration:none}
.kop a:hover .bar{background:var(--baksteen)}
.bar{
  display:inline;background:var(--inkt);color:var(--kalk);
  padding:.16em .3em .22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-color .14s ease;
}
.kop-om .bar,.sectie-ink .kop .bar{background:var(--kalk);color:var(--inkt)}
.sectie-ink .kop a:hover .bar{background:var(--baksteen);color:var(--kalk)}

/* ── de dienstkaart: één kader, alles erin ──────────────────────────── */
.dienstkaart{border:2px solid var(--inkt);background:var(--kalk-50)}
.dk-beeld{position:relative;border-bottom:2px solid var(--inkt)}
.dk-beeld img{width:100%;height:clamp(230px,30vw,400px);object-fit:cover}
.dk-lijf{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,4vw,60px);padding:clamp(26px,3.6vw,52px);
}
.dk-kolom > p + p{margin-top:14px}
/* de scheiding in het midden van de kaart */
.dk-zij{border-left:2px solid var(--kalk-300);padding-left:clamp(22px,2.8vw,38px)}
/* en de lijn tussen de lijst en de beoordeling eronder */
.dk-zij .google-cluster{margin-top:24px;padding-top:22px;border-top:2px solid var(--inkt);width:100%}
.dk-voet{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
  background:var(--inkt);padding:clamp(20px,2.4vw,28px) clamp(26px,3.6vw,52px);
}

/* ── prijzen: wat links, het bedrag rechts, onder een harde lijn ────── */
.prijzen{margin-top:clamp(22px,2.6vw,32px);border-top:2px solid var(--inkt)}
.prijs-rij{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--kalk-300);
}
.prijs-wat{font:400 15px/1.4 var(--tekst);color:var(--inkt-500)}
.prijs-bedrag{font:800 16px/1 var(--display);color:var(--baksteen-700);white-space:nowrap}
.sectie-ink .prijzen{border-top-color:var(--kalk)}
.sectie-ink .prijs-rij{border-bottom-color:var(--zink-600)}
.sectie-ink .prijs-wat{color:var(--kalk-300)}
.sectie-ink .prijs-bedrag{color:var(--baksteen-300)}

/* ── puntlijsten: het vierkant als opsommingsteken ──────────────────── */
.puntlijst li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--kalk-300)}
.puntlijst li::before{
  content:'';position:absolute;left:0;top:19px;width:10px;height:10px;background:var(--baksteen);
}
.puntlijst li:last-child{border-bottom:0}
.puntlijst-groot li{font:500 clamp(15px,1.25vw,17px)/1.45 var(--tekst);padding-block:15px}
.twee-tekst .puntlijst{margin-top:22px}
.twee-tekst .prijzen{max-width:none}

/* ── de banden ──────────────────────────────────────────────────────── */
.band{border-block:1px solid var(--inkt)}
.band + .band{border-top:0}
.band-in{padding-block:clamp(34px,4.4vw,56px)}
.band-in-rij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.band-in-rij > div{max-width:74ch}
.band-licht{background:var(--kalk-50)}
.band-ink{background:var(--inkt);color:var(--kalk);border-color:var(--inkt)}
.band-accent{background:var(--baksteen);color:var(--kalk);border-color:var(--baksteen-700)}
.band-accent .stempel{color:var(--kalk-300)}
.band-regel{font:400 clamp(16px,1.35vw,19px)/1.55 var(--tekst);max-width:74ch}
.band-groot{
  font:800 clamp(22px,2.9vw,38px)/1.16 var(--display);
  text-transform:uppercase;letter-spacing:-.02em;margin-bottom:14px;
}
.band-licht .stil{margin-top:18px}
.band-opname .band-regel{color:var(--inkt-500)}

.lint-regel{display:flex;flex-wrap:wrap;gap:10px 8px}
.lint-regel span{
  font:800 clamp(14px,1.5vw,21px)/1 var(--display);
  text-transform:uppercase;letter-spacing:.02em;
  border:1px solid rgba(244,244,242,.42);padding:11px 15px 13px;
}
.lint-regel span:first-child{background:var(--kalk);color:var(--inkt);border-color:var(--kalk)}

/* ── twee kolommen ──────────────────────────────────────────────────── */
.twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:start}
.twee-om .twee-tekst{order:2}
.twee-om .beeldblok{order:1}
.twee-portret{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.twee-tekst > p + p{margin-top:14px}
.twee .beeldblok img{width:100%}
.twee:not(.twee-portret) .beeldblok img{height:clamp(260px,34vw,460px);object-fit:cover}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:30px}
.acties-mid{margin-top:40px}

/* ── de twee deuren ─────────────────────────────────────────────────── */
.deuren{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:2px solid var(--inkt)}
.deur{padding:clamp(24px,3vw,40px)}
.deur + .deur{border-left:2px solid var(--inkt)}
.deur-kop{
  font:800 clamp(18px,1.9vw,25px)/1.2 var(--display);
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:14px;
}
.deur-kop a{text-decoration:none;border-bottom:3px solid var(--inkt);padding-bottom:2px}
.deur-kop a:hover{color:var(--baksteen);border-color:var(--baksteen)}
.deur-prijs{
  margin-top:16px;font:800 15px/1.4 var(--display);letter-spacing:-.01em;
}
.deur-acties{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:22px}

/* ── de pakketten ───────────────────────────────────────────────────── */
.pakketten{border:2px solid var(--inkt);background:var(--kalk-50)}
.pk-beeld{border-bottom:2px solid var(--inkt)}
.pk-beeld img{width:100%;height:clamp(180px,22vw,300px);object-fit:cover}
.pk-lijf{padding:clamp(26px,3.6vw,52px)}
.pk-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.pk{border:1px solid var(--kalk-300);background:var(--kalk);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column}
.pk-aanbevolen{border:2px solid var(--baksteen);background:#fff;padding-top:0}
.pk-vlag{
  margin:0 calc(-1 * clamp(20px,2.2vw,28px)) clamp(18px,2vw,24px);
  background:var(--baksteen);color:var(--kalk);text-align:center;padding:9px 10px 10px;
  font:500 10.5px/1 var(--stempelfont);letter-spacing:.2em;text-transform:uppercase;
}
.pk-kop{font:800 clamp(15px,1.4vw,19px)/1.24 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:12px}
.pk-uitleg{font:400 14.5px/1.55 var(--tekst);color:var(--inkt-500);flex:1}
.pk-prijs{display:flex;align-items:baseline;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid var(--kalk-300)}
.pk-prijs b{font:800 clamp(22px,2.2vw,30px)/1 var(--display);letter-spacing:-.025em}
.pk-prijs span{font:400 13px/1 var(--tekst);color:var(--zink)}
.pk-aanbevolen .pk-prijs b{color:var(--baksteen-700)}
.pk-noot{margin-top:24px;font:400 14.5px/1.55 var(--tekst);color:var(--inkt-500);max-width:70ch}
.pk-voet{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:28px}

/* ── de eigenaar ────────────────────────────────────────────────────── */
.eig{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:start}
.citaat{margin-bottom:26px;border-left:6px solid var(--inkt);padding-left:clamp(18px,2vw,28px)}
.citaat p{
  font:400 clamp(19px,2.1vw,28px)/1.38 var(--display);letter-spacing:-.02em;
}
.citaat footer{
  margin-top:16px;font:500 11px/1 var(--stempelfont);
  letter-spacing:.16em;text-transform:uppercase;color:var(--zink);
}
.eig-tekst > p + p{margin-top:14px}

/* ── over ons: het beeldpaar ────────────────────────────────────────── */
.beeldpaar{display:grid;gap:clamp(16px,2vw,24px)}
.beeldpaar .beeldblok img{height:clamp(160px,19vw,240px);width:100%;object-fit:cover}

/* ── werkgebied ─────────────────────────────────────────────────────── */
.geb{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.geb-kaart{border:2px solid var(--inkt);background:var(--kalk)}
.kaart{height:clamp(300px,38vw,460px);width:100%;background:var(--kalk-200);font-family:var(--tekst)}
.kaart .leaflet-tile-pane{filter:grayscale(1) contrast(1.06) brightness(1.05) sepia(.08)}
.kaart .leaflet-control-attribution{background:rgba(244,244,242,.9);color:var(--zink);font-size:10px}
.kaart .leaflet-control-attribution a{color:var(--zink-600)}
.kaart .leaflet-bar a{background:var(--kalk);color:var(--inkt);border-bottom-color:var(--kalk-300)}
.speld{display:block;width:15px;height:15px;background:var(--inkt);border:2px solid var(--kalk);box-shadow:0 0 0 1px var(--inkt)}
.speld-eerst{background:var(--baksteen)}
.kaart .leaflet-tooltip{
  background:var(--inkt);color:var(--kalk);border:0;border-radius:0;box-shadow:none;
  font:500 10.5px/1 var(--stempelfont);letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;
}
.kaart .leaflet-tooltip::before{display:none}
.geb-lijst{
  display:flex;flex-wrap:wrap;gap:0;border-top:2px solid var(--inkt);
}
.geb-lijst li{
  display:flex;align-items:center;gap:9px;padding:12px 16px;
  font:500 11.5px/1 var(--stempelfont);letter-spacing:.1em;text-transform:uppercase;
  border-right:1px solid var(--kalk-300);
}
.geb-blok{width:9px;height:9px;background:var(--inkt);flex:none}
.geb-lijst li:first-child .geb-blok{background:var(--baksteen)}
.geb-zij .beeldblok img{height:clamp(180px,20vw,250px);width:100%;object-fit:cover}
.geb-zij > p{margin-top:22px}

/* ── vragen ─────────────────────────────────────────────────────────── */
.vragen{border-top:2px solid var(--inkt);max-width:92ch}
.vraag{border-bottom:1px solid var(--kalk-300)}
.vraag summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font:800 clamp(15px,1.45vw,19px)/1.35 var(--display);letter-spacing:-.01em;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{
  content:'';position:absolute;right:6px;top:50%;width:14px;height:14px;
  margin-top:-7px;background:var(--inkt);transition:transform .16s ease;
}
.vraag[open] summary::after{transform:rotate(45deg) scale(.8);background:var(--baksteen)}
.vraag summary:hover{color:var(--baksteen)}
.antwoord{padding:0 44px 24px 0;max-width:72ch}
.antwoord p{color:var(--inkt-500)}
.antwoord em{font-style:normal;font-weight:600;color:var(--inkt)}

/* ── beoordelingen ──────────────────────────────────────────────────── */
.rev-rooster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.rev{background:var(--kalk);color:var(--inkt);padding:clamp(22px,2.6vw,34px);border:2px solid var(--kalk)}
.rev-kop{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.rev-cirkel{
  width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--inkt);color:var(--kalk);font:800 17px/1 var(--display);
}
.rev-wie{display:block;flex:1}
.rev-wie b{display:block;font:800 15px/1.2 var(--display);letter-spacing:-.01em}
.rev-wie span{display:block;margin-top:3px;font:500 10.5px/1 var(--stempelfont);letter-spacing:.14em;text-transform:uppercase;color:var(--zink)}
.rev-tekst{margin-top:12px;font:400 15px/1.6 var(--tekst);color:var(--inkt-500)}
.rev-datum{margin-top:16px;font:500 10.5px/1 var(--stempelfont);letter-spacing:.14em;text-transform:uppercase;color:var(--zink)}
.rev-onder{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;
  margin-top:clamp(30px,3.6vw,48px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid rgba(244,244,242,.28);
}

/* ── contact ────────────────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.contact-bel{
  display:block;background:var(--inkt);color:var(--kalk);
  padding:clamp(22px,2.6vw,32px);text-decoration:none;margin-bottom:14px;
}
.contact-bel .stempel{color:var(--kalk-300);margin-bottom:10px}
.contact-nr{display:block;font:800 clamp(26px,3.3vw,44px)/1 var(--display);letter-spacing:-.03em}
.contact-bel:hover .contact-nr{color:var(--baksteen-300)}
.gegevens{margin-top:30px;border-top:1px solid var(--kalk-300)}
.gegevens > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid var(--kalk-300)}
.gegevens dt{font:500 10.5px/1.5 var(--stempelfont);letter-spacing:.14em;text-transform:uppercase;color:var(--zink)}
.gegevens dd{font:400 15px/1.5 var(--tekst)}

.formulier{border:2px solid var(--inkt);padding:clamp(24px,3vw,40px);background:var(--kalk-50)}
.form-intro{margin-bottom:24px;font:400 15px/1.55 var(--tekst);color:var(--inkt-500)}
.veld{margin-bottom:18px}
.veld label{
  display:block;margin-bottom:8px;
  font:500 10.5px/1 var(--stempelfont);letter-spacing:.14em;text-transform:uppercase;color:var(--zink);
}
.veld-bij{letter-spacing:.06em;text-transform:none}
.veld input,.veld textarea{
  width:100%;padding:14px 15px;background:var(--kalk);color:var(--inkt);
  border:1px solid var(--veldrand);border-radius:0;
  font:400 16px/1.5 var(--tekst);
}
.veld textarea{resize:vertical}
.veld input:focus,.veld textarea:focus{outline:0;border-color:var(--baksteen);box-shadow:inset 0 0 0 1px var(--baksteen)}
.veld input::placeholder,.veld textarea::placeholder{color:var(--zink-200)}
.vangveld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-noot{margin-top:16px;font:400 13px/1.5 var(--tekst);color:var(--zink)}

/* ── voettekst ──────────────────────────────────────────────────────── */
.voet{background:var(--inkt);color:var(--kalk);padding-top:clamp(52px,6vw,84px)}
.voet-in{
  display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,52px);padding-bottom:clamp(40px,5vw,68px);
}
.lockup-voet{--sq:38px}
.lockup-voet .mono i{background:var(--kalk);color:var(--inkt)}
.voet-regel{margin-top:22px;font:400 14.5px/1.6 var(--tekst);color:var(--kalk-300);max-width:30ch}
.voet-kolom ul li{padding:6px 0}
.voet-kolom a{text-decoration:none;font:400 14.5px/1.5 var(--tekst);color:var(--kalk-300)}
.voet-kolom a:hover{color:var(--kalk);text-decoration:underline;text-underline-offset:3px}
.voet-contact li:first-child a{font:800 19px/1.2 var(--display);color:var(--kalk);letter-spacing:-.01em}
.voet-wa{
  display:inline-flex;align-items:center;gap:9px;margin-top:8px;
  border:2px solid var(--whatsapp);color:var(--whatsapp);padding:10px 16px;
  font:600 13px/1 var(--tekst);letter-spacing:.06em;text-transform:uppercase;
}
.voet-wa:hover{color:var(--whatsapp);background:rgba(37,211,102,.12);text-decoration:none}
.voet-adres{margin-top:16px;font:400 14.5px/1.6 var(--tekst);color:var(--kalk-300)}
.voet-gebied{font:400 14.5px/1.8 var(--tekst);color:var(--kalk-300)}
.voet-onder{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;
  padding-block:22px;border-top:1px solid rgba(244,244,242,.2);
  font:500 10.5px/1 var(--stempelfont);letter-spacing:.14em;text-transform:uppercase;color:var(--kalk-300);
}
.voet-onder a{text-decoration:none}
.voet-onder a:hover{color:var(--kalk)}

/* ── de vaste balk op de telefoon ───────────────────────────────────── */
.plakbalk{display:none}
.plak-bel,.plak-wa{
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 10px;text-decoration:none;
  font:600 14px/1 var(--tekst);letter-spacing:.05em;text-transform:uppercase;
}
.plak-bel{background:var(--inkt);color:var(--kalk)}
.plak-wa{background:var(--whatsapp);color:#fff;flex:0 0 46%}

/* ══ responsief ═══════════════════════════════════════════════════════ */
/* Wat alleen op de telefoon bestaat, bestaat op het bureau niet: de belknop in de
   vouw, het veld om een veegrij met zijn aanwijzing en loper. */
.vouw-bel{display:none}
.kaartveld{display:contents}
.veegcue,.rijspoor{display:none}
/* de zachte afbreekstreepjes in vier koppen zijn voor de telefoon; op het bureau
   mogen ze geen afbreekpunt maken dat daar nooit bestond */
.kop,.deur-kop{hyphens:none;-webkit-hyphens:none}

@media (max-width:1080px){
  .feiten-in{grid-template-columns:1fr}
  .dk-lijf{grid-template-columns:1fr}
  .dk-zij{border-left:0;padding-left:0;border-top:2px solid var(--kalk-300);padding-top:26px}
  .geb{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .voet-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .pk-rij{grid-template-columns:1fr}
  .pk-aanbevolen{order:-1}
  .eig{grid-template-columns:1fr}
  .eig .beeldblok-portret{max-width:340px}
  .twee,.twee-portret{grid-template-columns:1fr}
  .twee-om .twee-tekst,.twee-om .beeldblok{order:0}
  .twee .beeldblok-portret{max-width:420px}
}

@media (max-width:780px){
  /* ── de ladder: de lucht van de telefoon, vijf treden, hier één keer ──
     r-1 binnen een regelgroep · r-2 binnen een groep · r-3 tussen groepen ·
     r-4 tussen blokken · r-5 de binnenlucht van een sectie. Elke afstand die
     een telefoonregel hieronder zet, is een van deze treden. */
  :root{--kopbalk-h:70px;--plak-h:48px;--r-1:8px;--r-2:16px;--r-3:24px;--r-4:40px;--r-5:56px}

  .menu-knop{display:block;order:2;margin-left:auto}
  .kop-tel{display:none}
  .nav{order:3;margin-left:0;width:100%}
  .nav-lijst{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    margin-top:12px;padding-bottom:var(--r-2);border-top:1px solid var(--kalk-300);
  }
  .nav-lijst.open{display:flex}
  .nav-lijst > li{border-bottom:1px solid var(--kalk-300)}
  .nav-lijst > li > a,.nav-knop{width:100%;justify-content:space-between;padding:16px 0;border-bottom:0}
  .uitklap{
    position:static;opacity:1;visibility:visible;transform:none;
    display:none;min-width:0;margin-bottom:var(--r-2);
  }
  /* de regels van het uitklapmenu worden 44px hoog */
  .uitklap a{padding-block:14px}
  .heeft-uitklap:hover .uitklap{display:none}
  .nav-knop[aria-expanded=true] + .uitklap{display:block}
  /* geen rijafstand naar de ingeklapte menurij: die liet 16px lege kop staan */
  .kopbalk-in{flex-wrap:wrap;min-height:0;padding-block:12px;row-gap:0}
  .lockup-kop{--sq:28px;order:1;margin-block:0}

  .rev-rooster{grid-template-columns:1fr}
  .deuren{grid-template-columns:1fr}
  .deur + .deur{border-left:0;border-top:2px solid var(--inkt)}
  .voet-in{grid-template-columns:1fr}
  .gegevens > div{grid-template-columns:1fr;gap:var(--r-1)}

  /* ── de vaste balk: bellen en WhatsApp, elk een eigen helft, 8px uit
     elkaar op de inktgrond, boven de veilige zone onderaan ─────────────── */
  .plakbalk{
    display:flex;gap:var(--r-1);position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--inkt);border-top:1px solid var(--inkt);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .plak-bel,.plak-wa{min-height:var(--plak-h)}
  body{padding-bottom:calc(var(--plak-h) + env(safe-area-inset-bottom,0px))}
  /* een veld dat getypt wordt gaat altijd voor: de balk gaat weg (script.js) */
  body.is-typing .plakbalk{display:none}

  /* op een pagina waarvan de kopbalk blijft staan, telt die mee voor de vouw */
  .vouw{min-height:calc(100svh - var(--kopbalk-h) - var(--plak-h))}
  .vouw-in{padding-block:var(--r-4)}
  .lockup-vouw{--sq:38px;margin-bottom:var(--r-3)}

  /* ── de lucht van de pagina op de ladder ─────────────────────────────── */
  .sectie,.sectie-smal{padding-block:var(--r-5)}
  .sectie-paar{padding-bottom:var(--r-4)}
  .sectie-paar-slot{padding-top:0}
  .sectie-paar-slot .wrap{padding-top:var(--r-4)}
  .stempel{margin-bottom:var(--r-2)}
  .kop{margin-bottom:var(--r-4)}
  .kop,.deur-kop{hyphens:manual;-webkit-hyphens:manual}
  .band-in{padding-block:var(--r-4)}
  .band-in-rij{gap:var(--r-3)}
  .band-groot{margin-bottom:var(--r-2)}
  .band-licht .stil{margin-top:var(--r-3)}
  .twee,.eig{gap:var(--r-3)}
  .twee-tekst > p + p,.dk-kolom > p + p,.eig-tekst > p + p{margin-top:var(--r-2)}
  .twee-tekst .puntlijst{margin-top:var(--r-3)}
  .prijzen{margin-top:var(--r-3)}
  .acties{margin-top:var(--r-3);gap:var(--r-3)}
  .acties-mid{margin-top:var(--r-4)}
  /* elke knop is op de telefoon even breed: de hele kolom, zoals in de vouw (gekozen op
     2026-09-22). Een stille link eronder blijft een link. */
  .acties .btn,.dk-voet .btn,.rev-onder .btn,.band-in-rij .btn{width:100%}
  .dk-lijf{gap:var(--r-3)}
  .dk-zij{padding-top:var(--r-2)}
  .dk-zij .google-cluster{margin-top:var(--r-3);padding-top:var(--r-2)}
  .dk-voet{gap:var(--r-3)}
  .deur-kop{margin-bottom:var(--r-2)}
  .deur-prijs{margin-top:var(--r-2)}
  /* twee stille links onder elkaar: hun raakvlakken van 44px blijven 8px uit elkaar */
  .deur-acties{margin-top:var(--r-3);flex-direction:column;align-items:flex-start;gap:var(--r-4)}
  .citaat{margin-bottom:var(--r-3)}
  .citaat footer{margin-top:var(--r-2)}
  .geb{gap:var(--r-4)}
  .geb-zij > p{margin-top:var(--r-3)}
  .rev-rooster{gap:var(--r-3)}
  .rev-onder{margin-top:var(--r-3);padding-top:var(--r-2);gap:var(--r-3)}
  .contact{gap:var(--r-4)}
  .contact-bel{margin-bottom:var(--r-1)}
  .gegevens{margin-top:var(--r-3)}
  .form-intro{margin-bottom:var(--r-3)}
  .veld{margin-bottom:var(--r-2)}
  .veld label{margin-bottom:var(--r-1)}
  .form-noot{margin-top:var(--r-2)}
  .voet{padding-top:var(--r-5)}
  .voet-in{gap:var(--r-4);padding-bottom:var(--r-5)}
  .voet-regel{margin-top:var(--r-3)}
  .voet-kolom ul{display:flex;flex-direction:column;align-items:flex-start;gap:var(--r-1)}
  .voet-kolom ul li{padding:0}
  .voet-wa{margin-top:0}
  .voet-adres{margin-top:var(--r-1)}
  .voet-onder{padding-block:var(--r-3);gap:var(--r-2)}

  /* ── lopende tekst is 16px: ook prijsregels, recensies, het formulier en de voet.
     Stempels, bijschriften, data, plaatsen en de juridische regel houden hun maat. */
  .puntlijst-groot li,.prijs-wat,.deur-prijs,.rev-tekst,.gegevens dd,
  .form-intro,.form-noot,.voet-regel,.voet-kolom a,.voet-adres,.voet-gebied{font-size:16px}

  /* ── raakvlakken van 44px ─────────────────────────────────────────────
     De stille link is een onderstreept woord van 19px hoog; zijn streep is het
     apparaat, dus het raakvlak groeit (een doorzichtig ::before) en niet de doos. */
  .stil{position:relative}
  .stil::before{content:'';position:absolute;inset:-14px 0}
  .deur-kop a{display:inline-block;position:relative}
  .deur-kop a::before{content:'';position:absolute;inset:-10px 0}
  .voet-kolom a{display:inline-flex;align-items:center;min-height:44px}
  .voet-onder a{position:relative}
  .voet-onder a::before{content:'';position:absolute;inset:-17px 0}
  /* de zoomknoppen van de kaart: 44px, 8px uit elkaar, in de inkt van de pagina */
  .kaart .leaflet-control-zoom.leaflet-bar{display:flex;flex-direction:column;gap:var(--r-1);border:0;background:none;box-shadow:none}
  .kaart .leaflet-control-zoom.leaflet-bar a{
    width:44px;height:44px;line-height:40px;font-size:22px;
    border:2px solid var(--inkt);border-radius:0;background:var(--kalk);color:var(--inkt);
  }
  /* de bronvermelding blijft een smalle strook; haar ene link krijgt een raakvlak
     dat omhoog de kaart in loopt (omlaag knipt de kaart het af) */
  .kaart .leaflet-control-attribution a{position:relative}
  .kaart .leaflet-control-attribution a::before{content:'';position:absolute;inset:-32px -6px 0}

  /* ── het werkgebied: de rij plaatsen blijft een band, kleiner gezet ──── */
  .lint-regel{gap:var(--r-1)}
  .lint-regel span{font-size:12px;padding:8px 8px 9px}

  /* ═══ alleen de homepage (<html class="thuis">) ═══════════════════════ */

  /* ── de kopbalk is bij het landen weg: de vouw draagt het merk, en twee
     merken delen nooit het eerste scherm. Vast in plaats van plakkend, dus hij
     houdt geen hoogte in de pagina; script.js zet .is-neer zodra het merk van
     de vouw het scherm uit is, en haalt het weer weg op de terugweg. */
  .thuis .kopbalk{
    position:fixed;top:0;left:0;right:0;
    padding-top:env(safe-area-inset-top,0px);
    transform:translateY(-101%);transition:transform .24s ease;
  }
  .thuis .kopbalk.is-neer{transform:none}
  .thuis .nav-lijst.open{max-height:calc(100dvh - var(--kopbalk-h));overflow-y:auto;overscroll-behavior:contain}

  /* ── de vaste balk is bij het landen omlaag en komt op zodra de knoppen
     van de vouw het scherm uit zijn (script.js: .is-op) ─────────────────── */
  .thuis .plakbalk{transform:translateY(110%);transition:transform .2s ease}
  .thuis .plakbalk.is-op{transform:none}

  /* ── de vouw op de telefoon: eerst de basis, dan versie c ─────────────
     Merk, kop, kopij, het bewijs en de knoppen onder elkaar — de volgorde die op
     de telefoon gekozen is. De belknop staat daarmee op 360 onder het eerste
     scherm; zo is het gekozen. */
  .thuis .vouw{display:block;min-height:100svh;background:var(--inkt);padding-top:env(safe-area-inset-top,0px)}
  .thuis .vouw-beeld,.thuis .vouw-sluier{display:none}
  .thuis .vouw-in{display:flex;flex-direction:column;padding-block:var(--r-3) var(--r-5)}
  /* het merk op telefoonmaat: de tegels 60vw breed, gecentreerd — tenzij het
     scherm zo laag is dat de belknop eruit zou vallen; dan stapt het merk terug */
  .thuis .lockup-vouw{order:1;align-self:center;--sq:min(14vw,8.8svh);margin:0}
  /* de kop in drie regels op 360: hij stapt terug tot "en schoorsteen" past */
  .thuis .vouw-kop{order:2;margin-top:var(--r-3);font-size:min(7.4vw,4.75svh)}
  .thuis .vouw-regel{order:5;flex-direction:column;align-items:stretch;gap:var(--r-3);margin-top:var(--r-3);padding-top:var(--r-2)}
  .thuis .google-cluster-vouw{order:-1}
  .thuis .knoppen{flex-direction:column;gap:var(--r-1)}
  .thuis .knoppen .btn{flex:none;width:100%}
  .thuis .vouw-bel{display:inline-flex}
  .thuis .knoppen a[href="#contact"]{order:1}
  .thuis .vouw-sub{order:4;margin-top:var(--r-3);max-width:none;font-size:20px;line-height:1.5}

  /* ── de vouw, versie c, gekozen op 2026-09-22: de foto draagt de vouw ─
     De foto is de grond van het hele eerste scherm, zo gelegd dat de
     man op de hoogwerker in een open venster tussen de kop en de kopij staat.
     De sluier geeft de woorden wat ze nodig hebben — half boven merk en kop,
     bijna niets in het venster, en naar onderen dicht tot vlakke inkt. De foto
     op 30%: de man die de gevel spuit links, de lege lucht grotendeels weg. De
     kopij staat in kalk op het donkere deel van de sluier (gekozen op 2026-09-22). */
  :root.thuis .vouw-beeld,:root.thuis .vouw-sluier{display:block;bottom:auto;height:214vw}
  :root.thuis .vouw-beeld{object-position:30% 0}
  :root.thuis .vouw-sluier{
    background:linear-gradient(to bottom,
      rgba(13,13,13,.56) 0%,rgba(13,13,13,.52) 26%,rgba(13,13,13,.12) 33%,
      rgba(13,13,13,.12) 47%,rgba(13,13,13,.8) 55%,rgba(13,13,13,.92) 64%,rgba(13,13,13,1) 100%);
  }
  :root.thuis .vouw-sub{margin-top:62vw;color:var(--kalk)}

  /* de knoppen omgekeerd en kleiner (gekozen op 2026-09-22): omlijnd in kalk, WhatsApp in
     zijn eigen groen, 44px hoog */
  :root.thuis .vouw .knoppen .btn{min-height:44px;padding:0 var(--r-2);font-size:13px}
  :root.thuis .vouw .knoppen .btn-kalk{background:transparent;color:var(--kalk);border-color:var(--kalk)}
  :root.thuis .vouw .knoppen .btn-kalk:hover{background:var(--kalk);color:var(--inkt)}
  :root.thuis .vouw .knoppen .btn-wa-om{background:transparent}

  /* ── de twee feiten op de naad van de vouw ───────────────────────────
     Eén kolom, het getal boven zijn zin en de zin over de hele kaart. De foto
     van het tweede kader is op de telefoon een band boven de tekst in plaats
     van een grond erachter. */
  .thuis .feiten-in{gap:var(--r-4);padding-block:var(--r-5)}
  .thuis .feit-regel{margin-top:var(--r-2);max-width:none;font-size:16px}
  .thuis .kader-foto{flex-direction:column;min-height:0}
  .thuis .kader-foto::after{display:none}
  .thuis .kader-achter{position:relative;inset:auto;height:40vw}
  .thuis .kader-op{align-self:stretch}
  .thuis .kader-bijschrift{margin-top:var(--r-1)}
  .thuis .kader-op .stil{margin-top:var(--r-3)}

  /* ── de zakelijke band: de foto is een band onder de stempel, de zin staat
     op de vlakke inkt ─────────────────────────────────────────────────── */
  .thuis .band-zakelijk{background-image:none}
  .thuis .band-zakelijk .band-in{display:flex;flex-direction:column;align-items:flex-start;padding-block:var(--r-4)}
  .thuis .band-zakelijk .band-in::before{
    content:'';order:2;align-self:stretch;height:40vw;
    margin:0 calc(-1 * var(--gut)) var(--r-3);
    background:url(gevel-schoon-2.jpg) 62% 46% / cover no-repeat;
  }
  .thuis .band-zakelijk .stempel{order:1}
  .thuis .band-zakelijk .band-regel{order:3}
  .thuis .band-zakelijk .stil{order:4;margin-top:var(--r-3)}

  /* ── kop, foto, tekst: in elke sectie die op een foto leunt staat de foto
     onder de kop en boven de woorden, nooit onderaan ───────────────────── */
  .thuis .twee > .beeldblok,.thuis .twee > .beeldpaar{order:-1}
  .thuis .herstel-beeld{margin-bottom:var(--r-4)}

  /* ── de twee deuren: een veegrij ──────────────────────────────────────
     Het veld is één gridcel waarin de rij en de aanwijzing over elkaar liggen;
     de rij loopt van rand tot rand en begint 30px voorbij de goot, zodat de
     tweede kaart rechts meegluurt; een loper van 2px zegt waar je bent. */
  .thuis .kaartveld{--goot:var(--gut);display:grid;grid-template-columns:minmax(0,1fr)}
  .thuis .kaartveld > *{grid-area:1 / 1}
  .thuis .rij{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(68vw,300px);
    gap:var(--r-2);border:0;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * var(--goot));
    padding:2px var(--goot);padding-left:calc(var(--goot) + 30px);
    scroll-padding-left:calc(var(--goot) + 30px);
  }
  .thuis .rij::-webkit-scrollbar{display:none}
  .thuis .rij > *{scroll-snap-align:start}
  .thuis .rij .deur,.thuis .rij .deur + .deur{border:2px solid var(--inkt);padding:20px}
  .thuis .rijspoor{display:block;height:2px;margin-top:var(--r-2);background:var(--kalk-300);overflow:hidden}
  .thuis .rijloper{
    display:block;height:2px;width:34%;background:var(--baksteen);
    transform:translateX(calc(var(--loper, 0) * 194%));transition:transform .18s ease;
  }
  /* de aanwijzing: de streep in het accent in de lucht links, en rechtsboven
     VEEG met de pijl van de pagina */
  .thuis .kaartveld::before{
    content:'';grid-area:1 / 1;justify-self:start;align-self:center;
    width:2px;height:56%;margin-left:calc(14px - var(--goot));
    background:var(--baksteen);z-index:3;pointer-events:none;
  }
  .thuis .veegcue{
    display:inline-flex;align-items:center;justify-self:end;align-self:start;
    margin-top:calc(-1 * var(--r-3));
    font:500 11px/1 var(--stempelfont);letter-spacing:.18em;text-transform:uppercase;color:var(--zink);
    pointer-events:none;z-index:3;
  }
  .thuis .veegcue-pijl{display:inline-block;margin-left:.3em;letter-spacing:0;color:var(--baksteen)}
  .thuis .kaartveld.is-inbeeld .veegcue-pijl{animation:veeg-glij 1.05s ease-in-out 2}
  .thuis .kaartveld.is-geveegd .veegcue,.thuis .kaartveld.is-geveegd::before{
    opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;
  }
  /* is er niets te vegen (een breder scherm), dan geen aanwijzing en geen loper */
  .thuis .kaartveld.geen-veeg .veegcue,.thuis .kaartveld.geen-veeg::before,
  .thuis .kaartveld.geen-veeg + .rijspoor{display:none}
}

@media (max-width:520px){
  .lockup .naam{white-space:normal}
  .vouw-regel{align-items:flex-start;flex-direction:column}
  .knoppen{width:100%}
  .knoppen .btn{flex:1;min-width:180px}
  .band-in-rij .btn{width:100%}
  .geb-lijst li{flex:1 1 50%;border-right:0}
  .prijs-rij{flex-direction:column;align-items:flex-start;gap:var(--r-1)}
  /* onder elkaar mag een lang bedrag ("per strekkende meter") afbreken */
  .prijs-bedrag{white-space:normal}
  .kader-ruiter{left:14px}
}

/* de pijl van de veegaanwijzing glijdt twee keer heen en weer */
@keyframes veeg-glij{
  0%  {transform:translateX(-3px);opacity:.4}
  45% {transform:translateX(8px);opacity:1}
  100%{transform:translateX(-3px);opacity:.4}
}
@media (prefers-reduced-motion:reduce){
  .thuis .kopbalk,.thuis .plakbalk,.rijloper{transition:none}
  .veegcue-pijl{animation:none !important}
  .thuis .kaartveld.is-geveegd .veegcue,.thuis .kaartveld.is-geveegd::before{opacity:1;visibility:visible;transition:none}
}