/* st2 — de opmerkingen van de operator op bak1 arm 2 r03, verwerkt en vastgezet.
   Gerepareerd: de rechte linkerrand op de specialisme-foto, de weggehaalde straatfoto
   bij het werkgebied, de leesbaarheid in de donkere schilderwerksectie, de rechthoekige
   foto's in voegwerk en dakwerk.
   Gekozen uit st1: prijsweergave 1 (regels met een lijn) en beeld 2 (de detailfoto als
   inzet over de linkeronderhoek). De andere varianten en de schakelaar zijn eruit. */

/* ───────── de linkerrand recht ───────── */
.feit--spec img{clip-path:none}

/* ───────── leesbaarheid in de donkere sectie ─────────
   .lead zette color:var(--lei-900) — bijna zwart op donkergroen. */
.sec--donker .lead,
.sec--donker p:not(.eyeb):not(.acties__note):not(.prijs):not(.band__line):not(.prijsblok__kop){
  color:var(--kalk-100);
}
.sec--donker .lead{font-size:clamp(1.12rem,1.4vw,1.24rem);line-height:1.68;max-width:46ch}
.sec--donker .scope--licht li{opacity:1;color:var(--kalk-100);line-height:1.6}
.sec--donker .scope--licht li::before{background:var(--groen-300)}
.sec--donker .acties__note--licht{color:var(--kalk-100);opacity:.92}
.sec--donker .foto--detail figcaption{color:var(--kalk-100);opacity:.85}

/* ───────── de twee beeldparen rechthoekig ───────── */
.sec--beeldpaar .foto--cut img,
.sec--beeldpaar .foto--detail>img,
.sec--beeldpaar .foto img{clip-path:none}

/* ═════════ de prijsweergave — regels met een lijn ═════════ */
.prijsblok{
  margin:1.9rem 0 0;background:var(--kalk-000);
  border-left:4px solid var(--bak-600);padding:1.15rem 1.35rem 1.25rem;
}
.sec--donker .prijsblok{background:rgba(255,255,255,.07);border-left-color:var(--groen-300)}
.prijsblok__kop{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--groen-600);margin:0 0 .85rem;
}
.sec--donker .prijsblok__kop{color:var(--groen-300)}
.prijsblok .prijzen{margin:0;display:block}
.prijs{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.9rem;
  padding:.62rem 0;border-bottom:1px solid var(--kalk-300);
}
.sec--donker .prijs{border-bottom-color:rgba(255,255,255,.16)}
.prijzen .prijs:last-child{border-bottom:0;padding-bottom:0}
.prijs::before{display:none}
.prijs__wat{font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:inherit;line-height:1.35}
.prijs__row{justify-content:flex-end;white-space:nowrap}
.prijs__fig{font-size:clamp(1.5rem,2vw,1.85rem)}
.prijs__eenheid{font-size:.8rem}

/* ═════════ de twee foto's — de detailfoto als inzet over de hoek ═════════ */
.sec--beeldpaar .sec__col--media{display:block;position:relative;padding-bottom:4.5rem}
.sec--beeldpaar .foto--cut{width:100%}
.sec--beeldpaar .foto--detail{
  position:absolute;left:0;bottom:0;width:52%;z-index:3;
  background:var(--kalk-000);padding:.55rem .55rem .1rem;
  box-shadow:0 8px 26px rgba(23,29,38,.22);
}
.sec--beeldpaar .foto--detail>img{aspect-ratio:16/9}
.sec--beeldpaar .foto--detail figcaption{margin:.45rem .2rem .5rem}
.sec--beeldpaar .projectlijn{bottom:auto;top:1.2rem}

@media (max-width:820px){
  .sec--beeldpaar .sec__col--media{padding-bottom:0}
  .sec--beeldpaar .foto--detail{position:static;width:100%;box-shadow:none;padding:0}
  .sec--beeldpaar .projectlijn{bottom:1.4rem;top:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   st4 — twee linten erbij, in de gekozen vorm. Het probleemlint als tegels,
   de stem van de eigenaar als kaart met aanhaling. De feiten staan nu vóór het
   probleemlint. Schakelaar en niet-gekozen varianten zijn eruit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── het probleemlint — tegels ───────── */
.band--probleem{background:var(--kalk-200);border-top:1px solid var(--kalk-300);border-bottom:1px solid var(--kalk-300);padding:clamp(1.5rem,2.8vw,2.2rem) 0}
.band__in--probleem{display:block}
.band--probleem .eyeb{margin:0 0 1rem}
.probleem{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.7rem}
.probleem a{
  text-decoration:none;color:inherit;display:block;height:100%;
  background:var(--kalk-000);border:1px solid var(--kalk-300);padding:.85rem .95rem .95rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .8rem),calc(100% - .8rem) 100%,0 100%);
}
.probleem a:hover{border-color:var(--bak-400)}
.probleem__wat{display:block;font-size:.98rem;font-weight:600;line-height:1.35;margin-bottom:.45rem}
.probleem__dienst{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--groen-600);overflow-wrap:anywhere;
}
.probleem__na{margin:1.1rem 0 0;font-size:.9rem;color:var(--lei-600)}
.probleem__na .link-arrow{margin-left:.3rem}

/* ───────── de stem van de eigenaar — kaart met aanhaling ───────── */
.band--stem{background:var(--kalk-100);padding:clamp(1.8rem,3.2vw,2.8rem) 0;padding-top:0}
/* De kaart staat binnen de tekstkolom: haar rand begint waar elke kop en alinea
   begint, niet bij de rand van de container. Het aanhalingsteken hangt daarbinnen. */
.band__in--stem{display:block}
.stem__kaart{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem 2rem;
  background:var(--kalk-000);border-left:4px solid var(--bak-600);
  padding:1.5rem 1.7rem 1.4rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.2rem),calc(100% - 1.2rem) 100%,0 100%);
}
.stem__foto{display:none}
.stem__quote{margin:0;position:relative;padding-left:2.6rem}
.stem__quote::before{
  content:"”";position:absolute;left:0;top:-.28em;font-family:var(--serif);font-size:4.2rem;line-height:1;
  color:var(--bak-400);
}
.stem__line{margin:0;font-family:var(--serif);line-height:1.32;font-size:clamp(1.08rem,1.7vw,1.4rem);max-width:46ch}
.stem__wie{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;margin-top:.7rem}
.stem__naam{font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.stem__rol{font-size:.84rem;font-style:italic;opacity:.8}

@media (max-width:820px){
  .stem__kaart{grid-template-columns:1fr}
  .probleem{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
  .probleem__wat{font-size:.92rem;overflow-wrap:anywhere}
  .probleem__dienst{letter-spacing:.09em}
}

/* ═══════════════════════════════════════════════════════════════════════════
   st10 — het merk zoals het bord het zet, zijn keuze vastgezet.

   Het bord heeft twee lockups. De hoofdlockup: de tekening bóven de naam, met
   niets ernaast — die staat in de fold en in de voettekst. En in het paneel
   LOGO VARIATIES een liggende variant, de vogel links van de naam — die staat
   in de kopregel, waar de hoofdlockup de balk 7px hoger zou maken.

   De maten van de hoofdlockup staan bij .merkblok in style.css; hier staat
   alleen wat per zetel afwijkt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── de kopregel ─────────────────────────────────────────────────────────
   De liggende variant van het bord: de vogel links, de naam ernaast, DEN HAAG
   eronder. De hoofdlockup past hier niet — die maakt de balk 7px hoger. */
.hdr__name .merkblok{flex-direction:row;align-items:center;gap:.6em}
.hdr__name .merkblok__vogel{
  height:calc(var(--merk-kap) * 2.05em);margin-bottom:0;transform:none;
}
.hdr__name .merkblok__tekst{align-items:flex-start}
.hdr__name .merkblok__plaats{width:100%}

/* ── de voettekst: het merk op een kalkplaat ──────────────────────────────
   De groenen van de tekening liggen vast. Op de voetgrond (groen-900, #252C18)
   haalt de vogel (#414931) 1,53:1, de skyline (#645B3B) 2,14:1 en de poten
   (#724D33) 1,95:1 — de tekening verdwijnt daar. Op kalk-000 (#FBFBF8) wordt
   dat 9,12:1 · 6,53:1 · 7,17:1. Dus de grond wijkt, niet de tekening. De plaat
   heeft de afgesneden hoek van de pagina. */
.voet__lockup{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--kalk-000);padding:1.25rem 1.6rem 1.15rem;max-width:100%;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%);
}
.voet__merk .microlabels--voet{margin-top:1.1rem}
.voet__merk{container-type:inline-size}
/* de eerste voetkolom is smal (267px bij 1100); het merk krimpt mee in plaats
   van eruit te lopen */
.merkblok--voet{font-size:clamp(1rem,7.2cqw,1.45rem)}


/* ═══════════════════════════════════════════════════════════════════════════
   st11 — de drie keuzes van de operator op st10, vastgezet.

   1 · de pakketten bij Impregneren dragen hun eigen foto, als stil patroon
       achter de tekst — grijs teruggebracht naar één aardkleur, zodat hij de
       prijs niet aanvalt.
   2 · de foto bij Schilderwerk zweefde in het donkere vlak. Er is nu geen
       losse foto meer: de sectie zélf is het beeld, de tekst staat erop in
       één kolom en de projectregel staat als aanhaling onderaan.
   3 · naast elke belknop staat een appknop — in de kopbalk, in de fold, bij
       elke dienst, in de voet en in de balk onderaan.

   De niet-gekozen standen en de schakelaar zijn eruit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═════════ de pakketten — het beeld als stil patroon ═════════ */
.pak{--pak-pad:clamp(1.2rem,2.2vw,1.8rem);padding:var(--pak-pad);position:relative;overflow:hidden}
.pak__beeld{
  display:block;position:absolute;right:-14%;bottom:-6%;width:82%;height:auto;margin:0;
  opacity:.19;pointer-events:none;max-width:none;
  filter:grayscale(1) sepia(1) hue-rotate(38deg) saturate(1.4) contrast(1.05);
  /* zonder masker snijden de randen van de foto harde lijnen door de kaart; de
     wassing dooft vanaf de hoek rechtsonder naar alle kanten uit */
  -webkit-mask-image:radial-gradient(130% 130% at 100% 100%,#000 44%,transparent 96%);
  mask-image:radial-gradient(130% 130% at 100% 100%,#000 44%,transparent 96%);
}
.pak>*:not(.pak__beeld){position:relative;z-index:1}

/* ═════════ WhatsApp — naast elke belknop ═════════
   De knop staat in het groen van de pagina, niet in het groen van WhatsApp:
   #25D366 vecht met de terracotta en het Haagsgroen. Het pictogram draagt de
   herkenning. */
.btn--wa{background:var(--groen-700);color:var(--kalk-000);border-color:var(--groen-700)}
.btn--wa:hover{background:var(--groen-800);border-color:var(--groen-800)}
.btn--wa-licht{background:var(--kalk-000);color:var(--groen-800);border-color:var(--kalk-000)}
.btn--wa-licht:hover{background:var(--kalk-200);border-color:var(--kalk-200)}

/* In de kopbalk past het woord er niet bij: met "WhatsApp" erop wringt het menu
   zich tussen 1041 en 1120 px op twee regels en wordt de kop 17px hoger. Daar
   staat dus alleen het pictogram. */
.hdr__wa{padding-inline:.72rem}
.hdr__wa-woord{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* de balk onderaan op de telefoon: bellen, appen, mailen */
.sticky__wa{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--groen-700);color:var(--kalk-000);text-decoration:none;
  font-weight:600;font-size:.92rem;padding:.9rem .8rem;flex:0 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════════════════════
   st16 — de pagina is herwogen rond gevelrenovatie, en deze keuzes verhuizen mee.
   Twee van de vier staan er nog zoals ze waren: het probleemlint als pillen op baksteen
   en de twee deuren met twee bewijsfoto's onder de tekst, elk met een stempel.
   De kaart op drie gronden staat nu op Gevelrenovatie in plaats van op Gevelreiniging.
   De vierde, de sectie Voegwerk op de foto van het voegen onder een sluier, is eruit:
   die sectie staat niet meer op de pagina. Om dezelfde reden zijn ook de regels van de
   donkere sectie Schilderwerk hierboven weg — dat id draagt nu een deur.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ───────── het probleemlint: pillen op baksteen, één regel per klacht ───────── */
.band--probleem{
  background:var(--bak-700);border-top-color:var(--bak-800);border-bottom-color:var(--bak-800);
  color:var(--kalk-000);padding:clamp(1.5rem,2.8vw,2.2rem) 0;
}
.band--probleem .eyeb{color:var(--bak-100)}
.band--probleem .eyeb::after{background:var(--bak-100)}
.probleem{display:flex;flex-wrap:wrap;gap:.5rem .55rem}
.probleem a{
  display:inline-flex;align-items:baseline;gap:.6rem;height:auto;
  background:var(--bak-800);border:1px solid var(--bak-600);color:var(--kalk-000);
  padding:.5rem 1rem .54rem .95rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%);
}
.probleem a:hover{background:var(--bak-600);border-color:var(--bak-400)}
.probleem__wat{margin:0;font-size:.92rem;font-weight:500;line-height:1.3}
.probleem__dienst{font-size:.6rem;letter-spacing:.12em;color:var(--bak-100);overflow-wrap:normal}
.probleem__dienst::before{content:"·";margin-right:.6rem;color:var(--bak-400)}
.probleem__na{color:var(--kalk-000);opacity:.9}
.probleem__na .link-arrow{color:var(--kalk-000);border-color:var(--bak-400)}
.probleem__na .link-arrow:hover{border-color:var(--kalk-000)}

/* ───────── de kaart Gevelrenovatie: drie gronden — tekst op wit, lijst op papier,
   knoppen op een inktvoet ───────── */
#gevelrenovatie .kaart__body{row-gap:0}
#gevelrenovatie .kaart__left{padding-bottom:1.8rem}
#gevelrenovatie .kaart__right{
  background:var(--kalk-200);
  padding:clamp(1.5rem,2.8vw,2.4rem) clamp(1.4rem,2.6vw,2.2rem);
  margin:calc(-1 * clamp(1.8rem,3.4vw,3rem)) calc(-1 * clamp(1.6rem,3vw,2.8rem)) 0 0;
}
#gevelrenovatie .kaart__foot{
  background:var(--groen-800);color:var(--kalk-100);border-top:0;
  margin:0 calc(-1 * clamp(1.6rem,3vw,2.8rem)) calc(-1 * clamp(1.8rem,3vw,2.6rem));
  padding:clamp(1.3rem,2.4vw,1.9rem) clamp(1.6rem,3vw,2.8rem);
}
#gevelrenovatie .kaart__foot .btn--ghost{color:var(--kalk-100);border-color:var(--groen-500)}
#gevelrenovatie .kaart__foot .btn--ghost:hover{border-color:var(--kalk-100);background:transparent;color:var(--kalk-000)}
#gevelrenovatie .kaart__foot .btn--wa{background:var(--kalk-000);color:var(--groen-800);border-color:var(--kalk-000)}
#gevelrenovatie .kaart__foot .btn--wa:hover{background:var(--kalk-200);border-color:var(--kalk-200)}
#gevelrenovatie .kaart__foot .acties__note{color:var(--groen-300)}
#gevelrenovatie .kaart__foot .tel-inline{color:var(--kalk-100)}

/* ───────── de twee deuren: twee bewijsfoto's onder de tekst, elk met een stempel ───────── */
.d3-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:.9rem 0 .3rem}
.d3-paar figure{margin:0;position:relative}
.d3-paar img{width:100%;aspect-ratio:4/3;object-fit:cover}
.d3-paar figcaption{
  position:absolute;left:0;bottom:0;background:var(--kalk-000);color:var(--lei-900);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.32rem .75rem .3rem .6rem;border-left:3px solid var(--bak-600);
  clip-path:polygon(0 0,100% 0,calc(100% - .5rem) 100%,0 100%);
}

@media (max-width:1040px){
  #gevelrenovatie .kaart__right{margin:0 calc(-1 * clamp(1.6rem,3vw,2.8rem))}
}
@media (max-width:820px){
  .probleem__wat{font-size:.92rem}
  .probleem{display:flex;gap:.45rem .5rem}
  .probleem a{padding:.42rem .85rem .46rem .8rem}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════
   st18 — de opmerkingen op st17 beantwoord en gekozen.
   Gekozen uit st17: de dienstenstrook als één regel met de kop links vastgeprikt als
   bakstenen tab · de zakelijke passage als een sectie op inkt met een kop in de kopletter.
   Gekozen uit de drie prijsregels daarna: de prijslijst — regel per regel, bedrag rechts.
   De andere standen en de schakelaar zijn eruit: `fix.css`, `fix.js` en de twee regels
   in `index.html` bestaan niet meer.
   Wat erbij komt. De strook loopt nu vanzelf: de rij staat in een rail met een tweede,
   identieke rij erachter (opmaak in `index.html`), en schuift met een animatie precies
   één rij op, zodat de lus naadloos is. Hij staat stil onder de muis, zolang er iets in
   scherp staat, zodra er een vinger of muis op ligt, en helemaal onder "beperk beweging"
   — dan valt de kopie ook weg. De tweede deur is Gevelreiniging geworden, vóór
   Schilderwerk. En de twee deuren delen hun rijen, zodat de prijstabellen even hoog zijn
   en de foto's en knoppen in beide deuren op dezelfde hoogte staan.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ───────── de dienstenstrook: één regel van rand tot rand ─────────
   Links staat de kop als een bakstenen plaatje vastgeprikt; ernaast schuiven de tien
   klachten door, in de kopletter, met de dienst er in kapitaaltjes achteraan. De slotregel
   loopt in dezelfde regel mee, dus er gaat niets verloren. De rechterrand verloopt naar de
   grond zodat te zien is dat er meer staat. Schuiven gaat met een vinger, met het wiel,
   met de muis en met de toetsen. ───────── */
.band--probleem{
  background:var(--groen-900);border-top-color:var(--groen-800);border-bottom-color:var(--groen-800);
  color:var(--kalk-100);padding:0;
}
.band--probleem::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:4.5rem;z-index:3;
  background:linear-gradient(90deg,rgba(37,44,24,0),var(--groen-900));
  pointer-events:none;
}
.band__in--probleem{
  max-width:none;padding-inline:0;
  display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;
  overflow:hidden;
}

.band--probleem .eyeb{
  flex:none;display:flex;align-items:center;
  margin:0;padding:.85rem 1.7rem .85rem var(--pad);
  background:var(--bak-700);color:var(--kalk-000);
  clip-path:polygon(0 0,100% 0,calc(100% - .9rem) 100%,0 100%);
}
.band--probleem .eyeb::after{display:none}

/* de rail: wat erbuiten valt is weg, en wie hem zelf wil verschuiven kan dat */
.strook{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:stretch;   /* het spoor moet zo hoog worden als de kop ernaast,
                                         anders hangen de tegels op de telefoon bovenin */
  overflow-x:auto;overflow-y:hidden;cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
.strook::-webkit-scrollbar{display:none}
.strook.is-sleep{cursor:grabbing;-webkit-user-select:none;user-select:none}

/* het spoor: rij, slotregel, en daarachter dezelfde twee nog een keer. Eén slag schuift
   precies de helft op, dus de tweede helft staat op het punt waar de eerste begon. */
.strook__spoor{
  display:flex;flex-wrap:nowrap;align-items:stretch;width:max-content;
  animation:strook-loop 76s linear infinite;
}
.strook:hover .strook__spoor,
.strook:focus-within .strook__spoor,
.strook.is-vast .strook__spoor{animation-play-state:paused}
@keyframes strook-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.probleem{display:flex;flex-wrap:nowrap;align-items:stretch;flex:none;gap:0}
.probleem__i{flex:none;display:flex;align-items:center;position:relative}
.probleem__i+.probleem__i::before{
  content:"";position:absolute;left:0;top:50%;width:1px;height:1.1rem;
  margin-top:-.55rem;background:var(--groen-700);transform:skewX(-14deg);
}
.probleem a{
  display:flex;align-items:baseline;gap:.5rem;white-space:nowrap;height:auto;
  background:transparent;border:0;color:var(--kalk-100);
  padding:.9rem 1.25rem;clip-path:none;
}
.probleem a:hover{background:var(--groen-800)}
.probleem__wat{font-family:var(--serif);font-size:1.02rem;font-weight:400;line-height:1.2}
.probleem__dienst{font-size:.58rem;letter-spacing:.14em;color:var(--groen-300);white-space:nowrap}
.probleem__dienst::before{content:none}

.band--probleem .probleem__na{
  flex:none;display:flex;align-items:center;gap:.7rem;white-space:nowrap;
  margin:0;padding:0 calc(var(--pad) + 4.5rem) 0 1.6rem;
  font-size:.82rem;color:var(--kalk-100);opacity:.85;
}
.band--probleem .probleem__na .link-arrow{
  margin-left:0;color:var(--kalk-000);border-color:var(--groen-600);padding-bottom:.25rem;
}
.band--probleem .probleem__na .link-arrow:hover{border-color:var(--kalk-000)}

@media (max-width:620px){
  .band--probleem .eyeb{
    white-space:normal;max-width:8.5rem;line-height:1.3;
    padding:.7rem 1.2rem .7rem var(--pad);letter-spacing:.16em;font-size:.62rem;
  }
  .probleem a{padding:.8rem 1rem}
}

/* Wie beweging beperkt heeft, krijgt de strook zoals ze zonder animatie hoort te staan:
   één rij, stil, nog altijd met de hand te verschuiven. De kopie heeft dan geen werk meer
   en zou alleen maar dubbel te lezen zijn. */
@media (prefers-reduced-motion:reduce){
  .strook__spoor{animation:none}
  .band--probleem .strook__kloon{display:none}
}


/* ───────── de zakelijke passage: een sectie op inkt ─────────
   De hele band gaat op het donkergroen van het bord, het labeltje wordt de kop in de
   kopletter, en de pijlregel wordt een echte knop in baksteen. Zo is het geen tussenzin
   meer maar een sectie met een eigen kop. ───────── */
.band--zakelijk{
  background:var(--groen-800);border-top-color:var(--groen-700);border-bottom-color:var(--groen-700);
  color:var(--kalk-100);padding:clamp(2.6rem,5vw,4rem) 0;
}
.band__in--zakelijk{align-items:flex-end;gap:1.6rem 3rem}
.band__zak{
  color:var(--kalk-100);font-size:clamp(1rem,1.25vw,1.08rem);max-width:44rem;margin:0;
}
.band__zak-eyeb{
  display:block;margin:0 0 .85rem;padding:0;border:0;clip-path:none;
  font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.08;letter-spacing:-.012em;text-transform:none;color:var(--kalk-000);
}
.band--zakelijk .link-arrow--sterk{
  flex:none;background:var(--bak-600);color:var(--kalk-000);border:0;
  font-size:.86rem;letter-spacing:.08em;text-transform:none;font-weight:600;
  padding:.85rem 1.5rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .7rem),calc(100% - .7rem) 100%,0 100%);
}
.band--zakelijk .link-arrow--sterk:hover{background:var(--bak-700);gap:.5rem}


/* ───────── de twee deuren lopen regel voor regel gelijk ─────────
   De deuren waren al even hoog — het raster rekt ze — maar hun inhoud niet: de ene alinea
   is drie regels langer dan de andere en de ene prijstabel heeft drie regels waar de
   andere er twee heeft. Daardoor zakten het fotopaar en de knoppen van de ene deur onder
   die van de andere. De twee deuren delen nu hun rijen: kop, tekst, prijstabel, fotopaar
   en knoppen krijgen in beide deuren dezelfde hoogte, dus alles staat op één lijn, wat de
   tekst er ook boven doet.
   Waar die rijendeling niet bestaat valt het terug op een kolom met het fotopaar onderaan;
   en onder de 860 staan de deuren toch onder elkaar, dan is er niets uit te lijnen. */
.deuren{grid-template-rows:repeat(5,auto);row-gap:0}
.deur{display:grid;grid-template-rows:subgrid;grid-row:span 5;align-content:start}
@supports not (grid-template-rows:subgrid){
  .deuren{grid-template-rows:none;row-gap:clamp(1rem,2.5vw,2rem)}
  .deur{display:flex;flex-direction:column}
  .deur .d3-paar{margin-top:auto}
}
@media (max-width:860px){
  .deuren{grid-template-rows:none;row-gap:clamp(1rem,2.5vw,2rem)}
  .deur{display:flex;flex-direction:column;grid-row:auto}
}

/* ───────── de prijstabel in de deur ─────────
   De prijzen staan regel voor regel: wat het is links in kapitaaltjes, het bedrag rechts
   in de kopletter, met de haarlijn van de pagina ertussen. Zo is het een tarief in plaats
   van een zin, en leest de deur met drie prijzen even rustig als die met twee. Doordat de
   twee deuren de hoogte van de tabel delen en de regels die hoogte onderling verdelen,
   liggen de bovenste en de onderste lijn in beide deuren op dezelfde hoogte. */
.deur__prijs{display:grid;gap:0;margin-top:.35rem}
.deur__p{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;align-content:center;column-gap:.55rem;
  padding:.44rem 0;border-bottom:1px solid var(--kalk-300);
}
.deur__p:first-child{border-top:1px solid var(--kalk-300)}
.deur__prijs .prijs__vanaf{font-size:.62rem;letter-spacing:.14em;color:var(--lei-600);line-height:1.3}
.deur__prijs strong{font-size:1.15rem;line-height:1}
.deur__eh{font-size:.74rem;color:var(--lei-600)}


/* ───────── de strook zakt in de voet van de fold ─────────
   Ze hoort bij het bovenblok, niet onder de twee feiten: de fold krijgt een tweede rij
   over de volle breedte en de strook valt daarin, van rand tot rand, nog binnen het
   eerste beeld. De vrije hoogte gaat naar de bovenste rij, dus de strook is precies zo
   hoog als haar eigen regel en het beeld erboven vult de rest. ───────── */
.fold{grid-template-rows:1fr auto}
.fold>.band--probleem{grid-column:1/-1;align-self:end;min-width:0}   /* de rail mag de kolom niet oprekken */

/* In beeld betekent: binnen het eerste scherm. Op de computer wordt de fold precies zo
   hoog als wat er onder de balk over is, dus de strook komt op de vouwlijn te liggen —
   en op een laag scherm gaat er wat lucht van de tekstkolom af zodat ze er nog bij past.
   Is het scherm hoger dan negenhonderd, dan houdt de fold daar op. */
@media (min-width:1041px){
  .fold{min-height:min(calc(100svh - 4.4rem),900px)}
}
@media (min-width:1041px) and (max-height:770px){
  .fold__copy{padding-block:clamp(1.6rem,4vh,2.6rem)}
}


/* ═══════════════════════════════════════════════════════════════════════════════════════
   st23 — de telefoon.
   Twee treden, precies de breekpunten die de pagina al had:
     860 — waar de belbalk bestaat: de kopbalk, de balk, de raakvlakken, de kaart
     620 — de telefoon zelf: de ladder in gebruik, de composities, de fold
   Hier staat het onderaan de laatste stylesheet, omdat het regels uit dit bestand moet
   overschrijven. Wat hieronder buiten een mediaquery staat, zet alleen uit wat het bureau
   niet kent, zodat de bureaurender letterlijk blijft wat hij was.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── wat het bureau niet kent ── */
.kaartveld{display:contents}          /* het veld om de veegrij       */
.veegcue{display:none}                /* de veegaanwijzing            */
.rijspoor{display:none}               /* de loper onder de veegrij    */

/* de pijl van de aanwijzing glijdt heen en weer */
@keyframes veeg-glij{
  0%  {transform:translateX(-3px);opacity:.45}
  45% {transform:translateX(7px); opacity:1}
  100%{transform:translateX(-3px);opacity:.45}
}

@media (max-width:860px){

  /* ── de ladder: de lucht van de telefoon, vijf treden, hier één keer genoteerd ── */
  :root{
    --r-1:8px;    /* in een regelgroep : label→veld · foto→onderschrift · knop→knop        */
    --r-2:16px;   /* in een groep      : kop→tekst · figuur→zin · veld→veld · onder een lijn */
    --r-3:24px;   /* tussen groepen    : tekst→knoppen · tekst→foto · boven een lijn       */
    --r-4:40px;   /* tussen blokken    : knoppen→feiten · sectiekop→kaarten                */
    --r-5:56px;   /* tussen secties    : de padding van een sectie, boven en onder          */
  }

  /* ── de kopbalk staat bij het landen buiten beeld ──
     De fold draagt het merk; twee merken op één scherm is er één te veel. Vast in plaats van
     plakkend: een verborgen plakkende kop houdt zijn hoogte in de bladspiegel. script.js zet
     .is-neer zodra het merk van de fold het scherm uit is. */
  .hdr{
    position:fixed;top:0;left:0;right:0;
    padding-top:env(safe-area-inset-top,0px);
    transform:translateY(-101%);
    transition:transform .24s ease;
  }
  .hdr.is-neer,.hdr:focus-within{transform:none}
  .hdr__nav{max-height:calc(100dvh - var(--hdr-h,64px))}
  .fold__copy{padding-top:calc(clamp(2.4rem,6vh,3.6rem) + env(safe-area-inset-top,0px))}

  /* ── de belbalk: onderop tot de knoppen van de fold weg zijn ──
     script.js zet .is-op zodra .fold__actions het scherm uit is. Een veld waarin getypt wordt
     wint van alles: dan is de balk weg. */
  .sticky{
    gap:var(--r-1);
    padding:var(--r-1) var(--r-1) calc(var(--r-1) + env(safe-area-inset-bottom,0px));
    transform:translateY(110%);
    transition:transform .2s ease;
  }
  .sticky.is-op{transform:none}
  body.is-typing .sticky{display:none}
  .sticky__bel,.sticky__wa,.sticky__form{min-height:48px;padding-block:0}
  .sticky__bel span{white-space:nowrap}
  body{padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px))}

  /* ── raakvlakken: 44px, en 8px tussen twee buren ── */
  .burger{width:44px;height:44px;flex:none}
  .hdr__name{min-height:44px;justify-content:center}
  /* een telefoonnummer breekt niet op zijn koppelteken */
  .tel-inline{white-space:nowrap}
  .hdr__cta{display:flex;gap:var(--r-1)}
  .hdr__cta .btn{min-width:44px;min-height:44px}

  /* een link die een tekstregel is houdt zijn regel; het raakvlak groeit eronder en erboven */
  .link-arrow,.h2 a,.deur__h a,.tel-inline,.voet__tel a{position:relative}
  .link-arrow::before,.h2 a::before,.deur__h a::before,.tel-inline::before,.voet__tel a::before{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px;
  }
  .link-arrow--sterk{min-height:48px}
  /* wat de muis bij een koplink onthult, krijgt de vinger bij het aantikken */
  .h2 a:active,.h2 a:focus-visible{background-size:100% 2px}
  .deur__h a:active,.deur__h a:focus-visible{border-color:var(--groen-600)}

  /* een regel met een nummer onder een rij knoppen: een groep verder, zodat het raakvlak van
     het nummer niet tegen de knop erboven komt */
  .acties__note,.form__na{margin-top:var(--r-3)}

  /* de twee knoppen bij de vragen onder elkaar, 8px uit elkaar */
  .vragen__kop{display:flex;flex-direction:column;align-items:flex-start}
  .vragen__kop>p:not(.eyeb){margin-bottom:0}
  .vragen__kop .btn{margin-top:var(--r-1)}
  .vragen__kop .btn:first-of-type{margin-top:var(--r-3)}

  /* de voet: elke link een raakvlak van 44px, 8px tussen de regels; de twee knoppen onder
     elkaar, 8px uit elkaar */
  .voet__kol ul li{margin-bottom:var(--r-1)}
  .voet__kol li a{display:inline-block;padding-block:.6rem}
  .voet__kol--cta{display:flex;flex-direction:column;align-items:flex-start}
  .voet__p{margin-bottom:var(--r-3)}
  .voet__kol--cta .btn+.btn{margin-top:var(--r-1)}

  /* de kaart is van een ander: de knoppen in de inkt van de pagina, op maat gezet */
  .kaartje .leaflet-bar{border:0;box-shadow:none;border-radius:0}
  .kaartje .leaflet-control-zoom a{
    width:44px;height:44px;line-height:42px;font-size:20px;border-radius:0;
    background:var(--kalk-000);color:var(--groen-800);border:1px solid var(--kalk-300);
  }
  .kaartje .leaflet-control-zoom-in{margin-bottom:var(--r-1)}
  /* de naamsvermelding schuift uit de afgesneden hoek van de kaart; haar raakvlak groeit naar
     boven, want de onderrand van de kaart snijdt het af */
  .kaartje .leaflet-control-attribution{margin-right:1.6rem;padding:4px 8px}
  .kaartje .leaflet-control-attribution a{position:relative}
  .kaartje .leaflet-control-attribution a::before{content:"";position:absolute;left:-2px;right:-2px;bottom:-4px;height:44px}
}

@media (max-width:620px){

  /* de kopbalk past op 360: het liggende merk een halve punt kleiner, de buren op --r-1 */
  .hdr__in{gap:var(--r-1)}
  .hdr__name .merkblok{font-size:15px}

  /* ═════════════  DE FOLD  ═════════════════════════════════════════════════════════════
     Versie a, gekozen op 2026-09-22: de foto opent de fold. Het merk gecentreerd op
     telefoonmaat, de kop, de kopij, het bewijs en de knoppen.
     De rangorde erin is ook gekozen (2026-09-22, versie b): het merk is het grootste
     op het scherm (38px), de kop staat een stap terug (26px), de kopij nog een stap
     (17px) en de knoppen zijn 51px. Het groene label en de schuine snede onder de
     foto horen bij het bureau; op de telefoon gaan ze eraf.
     .fold__copy en .fold__stack geven hun doos op, zodat de foto tussen de kop en de woorden
     kan staan zonder dat de opmaak verschuift. Eerst de
     basis (de foto als band tussen kop en woorden), dan wat versie a daaraan verandert. */
  .fold{
    display:flex;flex-direction:column;
    padding:calc(var(--r-3) + env(safe-area-inset-top,0px)) var(--pad) 0;
  }
  .fold__copy,.fold__stack{display:contents}
  .fold>*,.fold__stack>*{min-width:0}

  /* het merk van de fold: gecentreerd, het woord op 30px */
  .merkblok--fold{order:1;align-self:center;font-size:30px;padding-bottom:var(--r-2);margin:0}
  .fold__h1{order:2;margin:var(--r-3) 0 0}

  /* de foto is een beeld, geen grond: een band van rand tot rand, met de schuine snede.
     40vw, maar nooit hoger dan wat het eerste scherm toelaat — de foto wijkt als eerste,
     tot de kop, de foto, de belknop en de beoordeling samen op het eerste scherm staan. */
  .fold__photo{
    order:3;position:relative;height:min(40vw,22svh);
    margin:var(--r-3) calc(-1 * var(--pad)) 0;
  }
  /* geen schuine snede op de telefoon: `none` en niet weglaten — in style.css staat
     er nog een voor tot 860 */
  .fold__photo img{object-position:52% 42%;clip-path:none}


  /* na de kopij het bewijs, dan de knoppen — de volgorde die op de telefoon gekozen is:
     kop, kopij, beoordeling, knoppen. De belknop staat daarmee op 360 onder het eerste
     scherm; zo is het gekozen. */
  /* het groene label van de fold blijft op het bureau; op de telefoon gaat het eraf */
  .fold__label{display:none}

  .fold__actions{order:5;margin-top:var(--r-3);flex-direction:column;align-items:flex-start;gap:0}
  /* de lijn boven de beoordeling scheidde haar van de knoppen erboven; nu staat ze onder
     de band, en de rand van de band is de scheiding */
  .fold__actions .grate{order:-1;margin-bottom:var(--r-3)}
  .grate--fold{border-top:0;padding-top:0}
  .fold__actions .btn--wa{margin-top:var(--r-1)}
  .fold__actions .btn{min-height:48px;line-height:1.2;padding-block:.9rem;font-size:15px}

  .fold__sub{order:4;margin:var(--r-3) 0 0;max-width:none;font-size:17px;line-height:1.5}

  /* De rollende strook met de klussen staat sinds 2026-09-22 niet meer in de pagina —
     ook niet op het bureau. Haar regels staan nog wel in dit bestand (zoek op
     `band--probleem` en `strook`); die raken nu niets meer en mogen bij een opruimronde
     weg. */

  /* versie a — de foto opent de fold: van rand tot rand tegen de bovenkant, de hele stapel
     eronder. 56vw is het idee; het plafond is de omzetstapel, dus de foto wijkt tot 31svh
     en het merk stapt een maat terug. De snede gaat naar de onderrand: boven is de rand
     van het scherm. */
  :root .fold__photo{
    order:0;height:min(56vw,31svh);
    margin-top:calc(-1 * (var(--r-3) + env(safe-area-inset-top,0px)));
  }
  :root .merkblok--fold{margin-top:var(--r-3);font-size:38px}
  :root .fold__h1{margin-top:var(--r-2)}

  /* ── de sectielucht op de ladder ── */
  .sec--full,.sec--vol,.sec--driekwart,.sec--half,.sec--kort{padding-block:var(--r-5)}
  .paar__boven{padding:var(--r-5) 0 var(--r-4)}
  .paar__onder{padding-top:var(--r-4)}
  .feiten{padding-block:var(--r-4)}
  .band--lint{padding-block:var(--r-3)}
  .band--lint .band__in{row-gap:var(--r-2)}
  .band--opname,.band--zakelijk,.band--klus{padding-block:var(--r-5)}
  .band--stem{padding-bottom:var(--r-5)}
  /* de knoppen onder elkaar, over de hele breedte, 16px ertussen — ook waar de groep in
     een rij staat (de voet van de renovatiekaart, de voet van de beoordelingen) */
  .acties{margin-top:var(--r-3);gap:var(--r-2);flex-direction:column;align-items:stretch;width:100%}
  .acties>.btn{width:100%}
  /* en elke andere knop net zo: de fold, het werkgebied, de vragen en de voet (gekozen op
     2026-09-22) */
  .fold__actions .btn,.gebied__copy>.btn,.vragen__kop .btn,.voet__kol--cta .btn{width:100%}
  .eyeb{margin-bottom:var(--r-2)}

  /* ── de romp leest op 16px; opschriften, data, plaatsen en onderschriften niet ── */
  .scope li,.deur p,.rev__tekst,.vraag__a p,.vragen__kop p:not(.eyeb),.feit__note,
  .gegevens dd,.acties__note,.form__na,.form__demo,.adresregel,.prijs__wat,
  .voet__kol li a,.voet__adres,.voet__p,
  .veld input,.veld select,.veld textarea{font-size:1rem}

  /* ── de prijsregels: wat het is boven het bedrag, het bedrag rechts ── */
  .prijsblok{margin-top:var(--r-3)}
  .prijs{grid-template-columns:minmax(0,1fr);row-gap:var(--r-1)}
  .prijs__row{justify-self:end}
  .deur__p{grid-template-columns:minmax(0,1fr) auto auto;row-gap:var(--r-1)}
  .deur__p .prijs__vanaf{grid-column:1/-1}
  .deur__p strong{grid-column:2}


  /* ═════════ het jaartal: één blok, zo kort als het feit ═════════
     De kaart met de specialiteit is hier weg (gekozen op 2026-09-22: te druk), dus de sectie
     draagt alleen het jaartal-blok. Dat blok krimpt het hardst: het cijfer staat op de regel
     van het opschrift, de lijn ertussen is weg en de zin leest een maat kleiner. */
  .feit--spec{display:none}
  .feit__note{max-width:none}

  :root .feit--jaar{
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--r-2);
    align-items:baseline;padding:var(--r-2) var(--r-3);
  }
  :root .feit--jaar .eyeb{margin:0;padding-bottom:0}
  :root .feit--jaar .eyeb::after{display:none}
  :root .feit__fig{font-size:30px}
  :root .feit--jaar .rule{display:none}
  :root .feit__note{grid-column:1/-1;margin:0;font-size:15px;line-height:1.45}

  /* ── het jaartal-blok staat op papier (gekozen op 2026-09-22) ──
     Het stond in hetzelfde groen als het lint van het werkgebied eronder, met alleen een
     reepje kalk ertussen: twee gelijke vlakken op elkaar, die als één onderbroken blok
     lazen. Nu draagt alleen het lint dat groen. De schuine hoek linksonder blijft, maar
     staat in papier; de bakstenen rand links geeft het blok zijn eigen kleur terug zonder
     er een tweede groen vlak van te maken, en het cijfer neemt het groen over. */
  :root .feit--jaar{
    background:var(--kalk-000);color:var(--lei-900);
    border-left:4px solid var(--bak-600);
  }
  :root .feit--jaar .eyeb{color:var(--lei-600)}
  :root .feit__fig{color:var(--groen-700)}
  :root .feit__note{color:var(--lei-600)}

  /* ═════════ Gevelrenovatie: kop, beeld, tekst — de kaart op drie gronden ═════════
     De kaart geeft zijn twee binnendozen op, zodat de kop boven de foto kan staan. De witte
     grond onder kop, foto en tekst is een eigen laag (::before) over rij 1 tot 5; de lijst
     op papier en de knoppen op inkt volgen eronder. De afgesneden hoek zit op de kaart. */
  #gevelrenovatie .kaart{
    --kaart-lucht:clamp(1.6rem,3vw,2.8rem);
    display:grid;grid-template-columns:minmax(0,1fr);
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--hoek)),calc(100% - var(--hoek)) 100%,0 100%);
  }
  #gevelrenovatie .kaart::before{
    content:"";grid-column:1;grid-row:1/6;
    background:var(--kalk-000);border:1px solid var(--kalk-300);border-bottom:0;
  }
  #gevelrenovatie .kaart__body,#gevelrenovatie .kaart__left{display:contents}
  #gevelrenovatie .kaart__left>*{grid-column:1;margin-inline:var(--kaart-lucht)}
  #gevelrenovatie .kaart__left>.h2{grid-row:1;margin-top:clamp(1.8rem,3.4vw,3rem);margin-bottom:0}
  #gevelrenovatie .kaart__photo{grid-row:2;grid-column:1;margin-top:var(--r-3)}
  #gevelrenovatie .kaart__photo img{height:50vw}
  #gevelrenovatie .kaart__left>.lead{grid-row:3;margin-top:var(--r-3);margin-bottom:0}
  #gevelrenovatie .kaart__left>p:not(.lead){grid-row:4;margin-top:var(--r-2);margin-bottom:0}
  #gevelrenovatie .kaart__grate{grid-row:5;margin-top:var(--r-3);margin-bottom:1.8rem}
  #gevelrenovatie .kaart__right{grid-row:6;grid-column:1;margin:0;border-inline:1px solid var(--kalk-300)}
  #gevelrenovatie .kaart__right .eyeb--tight{margin-top:0}
  #gevelrenovatie .kaart__foot{grid-row:7;grid-column:1;margin:0;gap:var(--r-3)}
  #gevelrenovatie .kaart__foot .acties__note{margin-top:0}
  .scope li{margin-bottom:var(--r-1)}
  .scope li:last-child{margin-bottom:0}

  /* ═════════ de stem, de opname, de klus: banden met een zin en een oproep ═════════ */
  .stem__kaart{gap:var(--r-2)}
  .band__in--opname{flex-direction:column;align-items:stretch;gap:0}
  .band__in--opname>div{margin-bottom:var(--r-3)}
  .band__in--opname .btn+.btn{margin-top:var(--r-1)}
  .band__in--opname .btn{padding-inline:1rem}
  .band__in--opname .btn span{white-space:nowrap}
  .band__in--zakelijk{gap:var(--r-3)}
  .band__in--klus{gap:var(--r-3)}
  .acties--klus{margin-top:0;gap:var(--r-2)}

  /* ═════════ de twee deuren — de veegrij ═════════
     Het veld is één rastercel waarin de rij en de aanwijzing over elkaar liggen; de rij loopt
     van rand tot rand, begint 30px voorbij de goot zodat de volgende deur meegluurt, en een
     loper van 2px zegt waar je bent. De deuren delen hun rijen, zoals op het bureau. */
  .kaartveld{--goot:var(--pad);display:grid;grid-template-columns:minmax(0,1fr)}
  .kaartveld>*{grid-area:1/1}
  .deuren.rij{
    grid-template-columns:none;grid-template-rows:repeat(5,auto);
    grid-auto-flow:column;grid-auto-columns:min(68vw,300px);
    column-gap:var(--r-2);row-gap: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);
  }
  .deuren.rij::-webkit-scrollbar{display:none}
  .deuren.rij>.deur{display:grid;grid-template-rows:subgrid;grid-row:span 5;scroll-snap-align:start}
  /* in een deur van 68vw worden twee foto's naast elkaar postzegels waar de stempel niet op
     past; onder elkaar blijven het foto's */
  .d3-paar{grid-template-columns:minmax(0,1fr);gap:var(--r-1);margin:var(--r-3) 0 0}
  .d3-paar img{aspect-ratio:16/9}
  .deur .acties--kort{margin-top:var(--r-3)}

  /* de kaart breder en met minder lucht aan de zijkant: 84vw, de binnenlucht de helft, en de
     rij begint op de goot van de pagina; het streepje van de aanwijzing staat in het midden
     van die goot */
  :root .deuren.rij{grid-auto-columns:84vw;padding-left:var(--goot);scroll-padding-left:var(--goot)}
  :root .kaartveld::before{margin-left:calc(var(--goot) / -2 - 1px)}
  :root .deuren.rij>.deur{padding:var(--r-2)}

  /* de aanwijzing: het korte streepje van de pagina in de lucht links, VEEG met de pijl
     van de pagina rechtsboven */
  .kaartveld::before{
    content:"";grid-area:1/1;justify-self:start;align-self:center;
    width:2px;height:56%;margin-left:14px;
    background:var(--groen-600);z-index:3;pointer-events:none;
  }
  .veegcue{
    display:inline-flex;align-items:center;gap:var(--r-1);
    justify-self:end;align-self:start;margin-top:calc(-1 * var(--r-3));
    font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
    color:var(--groen-600);pointer-events:none;z-index:3;
  }
  .veegcue__pijl{flex:none;animation:veeg-glij 2s ease-in-out infinite}
  .kaartveld.is-geveegd .veegcue,
  .kaartveld.is-geveegd::before{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}

  /* de loper onder de rij */
  .rijspoor{display:block;height:2px;background:var(--kalk-300);margin-top:var(--r-3)}
  .rijloper{
    display:block;height:2px;width:34%;background:var(--groen-600);
    transform:translateX(calc(var(--loper,0) * 194%));transition:transform .18s ease;
  }
  .acties__note--breed{margin-top:var(--r-3)}

  /* ═════════ kop, beeld, tekst: Dakwerk, Schoorsteen, Over ons ═════════
     De tekstkolom geeft zijn doos op; de kop en haar opschrift gaan voor, de fotokolom staat
     eronder, de rest van de tekst volgt. De ene kolom is minmax(0,1fr): een prijsregel die niet
     mag breken rekte hem anders op tot voorbij de rand. */
  .sec__split{grid-template-columns:minmax(0,1fr);row-gap:0}
  .sec__split>.sec__col:not(.sec__col--media){display:contents}
  .sec__split>.sec__col:not(.sec__col--media)>*{order:3;margin-top:0;margin-bottom:0}
  .sec__split>.sec__col:not(.sec__col--media)>*+*{margin-top:var(--r-2)}
  .sec__split>.sec__col:not(.sec__col--media)>.eyeb:first-child,
  .sec__split>.sec__col:not(.sec__col--media)>.h2{order:1}
  .sec__split>.sec__col:not(.sec__col--media)>.lead{margin-top:var(--r-3)}
  .sec__split>.sec__col:not(.sec__col--media)>.eyeb--tight,
  .sec__split>.sec__col:not(.sec__col--media)>.prijsblok,
  .sec__split>.sec__col:not(.sec__col--media)>.kernen,
  .sec__split>.sec__col:not(.sec__col--media)>.acties,
  .sec__split>.sec__col:not(.sec__col--media)>.acties__note{margin-top:var(--r-3)}
  .sec__split>.sec__col--media{order:2;margin-top:var(--r-3)}
  .sec--beeldpaar .sec__col--media{display:flex;flex-direction:column;gap:var(--r-1)}
  .sec--beeldpaar .foto--detail>img{aspect-ratio:2/1}
  .sec--beeldpaar .foto--detail figcaption{margin:var(--r-1) 0 0}
  .foto--staand>img{aspect-ratio:4/3}
  .fotobijschrift{margin-top:var(--r-1)}
  .kernen li{padding-block:var(--r-2)}

  /* ═════════ de eigenaar: kop, portret, tekst ═════════ */
  .eigenaar__in{grid-template-columns:minmax(0,1fr);row-gap:0}
  .eigenaar__copy{display:contents}
  .eigenaar__copy>*{order:3;margin-top:0;margin-bottom:0}
  .eigenaar__copy>*+*{margin-top:var(--r-2)}
  .eigenaar__copy>.eyeb,.eigenaar__copy>.h2{order:1}
  .eigenaar__foto{order:2;margin-top:var(--r-3);max-width:none}
  .eigenaar__foto img{aspect-ratio:4/3;object-position:50% 22%}
  .eigenaar__foto figcaption{margin-top:var(--r-1)}
  .eigenaar__copy>.lead,.eigenaar__copy>.script,.eigenaar__copy>.acties{margin-top:var(--r-3)}
  .eigenaar__copy>.rule{margin-top:var(--r-1)}

  /* ═════════ weg op de telefoon ═════════
     Acht van zijn tien aantekeningen van 2026-09-22 op de stitcher. Het blijft in de
     pagina staan: dit zijn telefoonregels, dus het bureau houdt alles onveranderd en
     Google leest het nog steeds. */

  /* de tweede alinea van Gevelrenovatie; rij 4 van de kaart valt dicht, de witte
     achtergrond (`.kaart::before`, rij 1 t/m 5) krimpt mee */
  #gevelrenovatie .kaart__left>p:not(.lead){display:none}
  /* de prijstabel in de rechterhelft van diezelfde kaart; de opsomming blijft */
  #gevelrenovatie .kaart__right .prijsblok{display:none}
  /* de prijsregels in beide dienstkaarten — hij wees er één aan en schreef "for both
     services", dus allebei */
  :root .deur__prijs{display:none}
  /* de prijstabel van Dakwerkzaamheden */
  #dakwerkzaamheden .prijsblok{display:none}
  /* en die van Schoorsteenrenovatie, die hij er op 2026-09-22 bij koos: anders was dat
     de enige prijs die op de telefoon nog stond */
  #schoorsteenrenovatie .prijsblok{display:none}
  /* de kaart met de quote van Roy. De band eromheen bevat niets anders, dus die gaat mee —
     anders blijft er een strook lucht staan van haar eigen padding */
  .band--stem{display:none}
  /* de alinea over het vaste team bij de eigenaar */
  .eigenaar__copy>p.p--licht{display:none}
  /* de laatste twee alinea's van Over ons (de kop, de lead en de kerngetallen blijven) */
  #over-ons .sec__col>p:not(.eyeb):not(.lead){display:none}

  /* ═════════ de zeven plaatsen: drie kolommen, Den Haag erboven ═════════
     Twee keer wees hij aan dat de plaatsen symmetrisch moeten staan (gekozen op 2026-09-22,
     versie b). Ze stonden als een flexrij die afbrak waar hij vol was: 3 / 3 / 1 met een
     rafelige rand, en bij elke nieuwe regel een stip die nergens tussen stond. Zeven is een
     priemgetal en verdeelt zich dus niet, zes wel: Den Haag is de thuisbasis en staat op een
     eigen regel erboven, de zes andere vullen twee regels van drie. Het lint onder de vouw
     en de blokjes bij het werkgebied krijgen dezelfde verdeling — het zijn dezelfde zeven
     plaatsen. */
  :root .lint,
  :root .plaatsen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  :root .lint>li:first-child,
  :root .plaatsen>li:first-child{grid-column:1/-1}
  /* de blokjes vullen hun vak, dus de tekst staat gecentreerd in plaats van links */
  :root .plaatsen>li{text-align:center;padding-inline:.35rem;font-size:.8rem}
  /* tussen kolommen van een derde past geen stip meer, dus die gaan eraf; het lint zet een
     maat kleiner en vast, niet meeschalend: bij 360 is een kolom precies 101px breed en dat
     is wat Leidschendam nodig heeft */
  :root .lint{column-gap:var(--r-1)}
  :root .lint>li{font-size:15px}
  :root .lint>li+li::before{display:none}

  /* ═════════ het werkgebied: kop, kaart, tekst ═════════ */
  .gebied{grid-template-columns:minmax(0,1fr);row-gap:0}
  .gebied__copy{display:contents}
  .gebied__copy>*{order:3;margin-top:0;margin-bottom:0}
  .gebied__copy>*+*{margin-top:var(--r-2)}
  .gebied__copy>.eyeb,.gebied__copy>.h2{order:1}
  .gebied__media{order:2;margin-top:var(--r-3)}
  .gebied__copy>.h2+p{margin-top:var(--r-3)}
  .gebied__copy>.btn{justify-self:start;margin-top:var(--r-3)}

  /* ═════════ vragen, beoordelingen, contact, voet: lijsten, gestapeld ═════════ */
  .vragen{gap:var(--r-4)}

  .rev__kop{margin-bottom:var(--r-4);gap:var(--r-3)}
  .rev__grid{gap:var(--r-3)}
  .rev__foot{margin-top:var(--r-4);padding-top:var(--r-3);gap:var(--r-3)}
  .rev__foot .acties{margin-top:0}

  .contact__in{gap:var(--r-4)}
  .belblok{margin:var(--r-3) 0 var(--r-4)}
  .gegevens{gap:var(--r-2)}
  .gegevens>div{grid-template-columns:minmax(0,1fr);gap:var(--r-1);padding-bottom:var(--r-2)}
  .gegevens dt{padding-top:0}
  .veld{margin-bottom:var(--r-2)}
  .veld--duo{gap:var(--r-2)}
  .veld label{margin-bottom:var(--r-1)}
  .veld input,.veld select{min-height:44px}
  /* de kop en de slotregel van het formulier stonden kalkwit op de witte plaat: de regel voor
     alinea's in een donkere sectie raakte ook het formulier. Op de telefoon weer leesbaar. */
  #aanvraag .form__kop{color:var(--lei-900)}
  #aanvraag .form__na{color:var(--lei-600)}
  #aanvraag .form__demo{color:var(--bak-800)}

  .voet__in{gap:var(--r-4);padding-block:var(--r-5)}

  /* ── de belbalk op de telefoon: het nummer op één regel; de appknop draagt zijn
     pictogram, het woord blijft voor de schermlezer — zoals in de kopbalk ── */
  .sticky__bel{padding-inline:.8rem}
  .sticky__wa{padding-inline:.9rem}
  .sticky__wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sticky__form{padding-inline:.8rem}
}

@media (max-width:620px) and (prefers-reduced-motion:reduce){
  /* stil, en ze blijft staan */
  .veegcue__pijl{animation:none}
  .kaartveld.is-geveegd .veegcue,
  .kaartveld.is-geveegd::before{opacity:1;visibility:visible}
}