/* ═══════════════════════════════════════════════════════════════════
   Gevelrenovatie Den Haag — homepage
   Alle kleuren komen uit palette.json. Alle vormen komen van het bord:
   een schuine snede waar een foto een grond raakt, een vlak met één
   afgesneden hoek, een label met een schuine bovenrand.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Baksteen — primary */
  --bak-800:#5E3220; --bak-700:#743E26; --bak-600:#8F4E30;
  --bak-400:#B0725A; --bak-100:#EFE0D6;
  /* Gevelgroen — secondary (mosgroen = de lichte treden) */
  --groen-900:#252C18; --groen-800:#2F3820; --groen-700:#3B4527;
  --groen-600:#4A5520; --groen-500:#5F6C2E; --groen-300:#9AA472;
  /* Goudgeel — accent */
  --goud-600:#C9891F; --goud-300:#E8C98A;
  /* Kalkwit — neutral licht */
  --kalk-000:#FBFBF8; --kalk-100:#F5F5F0; --kalk-200:#EFEEE9; --kalk-300:#E3E2D8;
  /* Leisteen — neutral donker */
  --lei-900:#171D26; --lei-600:#4B5560; --lei-400:#7C8590;

  --serif:"Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --hand:"Caveat", "Segoe Script", cursive;

  --wrap:1240px;
  --pad:clamp(1.25rem, 4vw, 3rem);
  --snede:9%;          /* de horizontale sprong van een schuine fotorand */
  --hoek:2.4rem;       /* de afgesneden hoek van een vlak */
  --naad:3.4vw;        /* de schuine naad tussen twee gronden */
}

/* ─── basis ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  margin:0;background:var(--kalk-100);color:var(--lei-900);
  font-family:var(--sans);font-size:1.02rem;line-height:1.7;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.012em}
p{margin:0 0 1.05em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--groen-800);color:var(--kalk-100);padding:.7rem 1.1rem}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2.5px solid var(--bak-600);outline-offset:3px}

/* ─── het bord-vocabulaire ──────────────────────────────────────── */
.eyeb{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--groen-600);
  margin:0 0 1.1rem;position:relative;padding-bottom:.85rem;
}
.eyeb::after{content:"";position:absolute;left:0;bottom:0;width:2.6rem;height:2px;background:var(--groen-600)}
.eyeb--light{color:var(--groen-300)}
.eyeb--light::after{background:var(--groen-300)}
.eyeb--tight{margin:1.7rem 0 .8rem;padding-bottom:.6rem}
.eyeb--tight::after{width:1.8rem}

.rule{display:block;height:2px;width:4.5rem;background:var(--groen-600);margin:1.5rem 0}
.rule--moss{background:var(--groen-600)}
.rule--sage{background:var(--groen-300)}
.rule--kort{width:3rem;margin-top:.7rem}

.h2{font-family:var(--serif);font-size:clamp(1.85rem,3.2vw,2.85rem);line-height:1.08;margin:0 0 1.1rem}
.h2--klein{font-size:clamp(1.55rem,2.4vw,2.1rem)}
.h2--licht{color:var(--kalk-100)}
.h2--sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.h2 a{text-decoration:none;background-image:linear-gradient(var(--groen-600),var(--groen-600));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s}
.h2 a:hover{background-size:100% 2px}
.h2--licht a{background-image:linear-gradient(var(--groen-300),var(--groen-300))}

.lead{font-size:clamp(1.08rem,1.35vw,1.2rem);line-height:1.62;color:var(--lei-900)}
.lead--licht,.p--licht{color:var(--kalk-100)}
.lead--licht{opacity:.94}
.p--licht{opacity:.82}

.brandname{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;color:var(--lei-900);margin:0}
.microlabels{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:.75rem 0 0}
.microlabels span{
  font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--groen-600);
}
.microlabels span+span{position:relative}
.microlabels span+span::before{content:"";position:absolute;left:-.75rem;top:.35em;width:1px;height:.9em;background:var(--kalk-300)}

/* ─── knoppen ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  padding:.85rem 1.5rem;text-decoration:none;border:2px solid transparent;
  transition:background-color .18s,color .18s,border-color .18s,transform .18s;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, 0 100%);
}
.btn .ico{flex:none}
.btn--primary{background:var(--bak-600);color:var(--kalk-000);border-color:var(--bak-600)}
.btn--primary:hover{background:var(--bak-700);border-color:var(--bak-700)}
.btn--primary:active{background:var(--bak-800);border-color:var(--bak-800);transform:translateY(1px)}
.btn--wit{background:var(--kalk-000);color:var(--bak-700);border-color:var(--kalk-000)}
.btn--wit:hover{background:var(--kalk-200);border-color:var(--kalk-200)}
/* het formulier is de tweede weg naar binnen — bellen blijft de baksteenkleur */
.btn--groen{background:var(--groen-700);color:var(--kalk-000);border-color:var(--groen-700)}
.btn--groen:hover{background:var(--groen-800);border-color:var(--groen-800)}
.btn--ghost{background:transparent;color:var(--groen-600);border-color:var(--kalk-300);border-width:1px;padding:.9rem 1.4rem}
.btn--ghost:hover{border-color:var(--groen-600);background:var(--kalk-000)}
.btn--ghost-licht{color:var(--kalk-100);border-color:var(--groen-500)}
.btn--ghost-licht:hover{border-color:var(--kalk-100);background:transparent;color:var(--kalk-000)}
.btn--sm{padding:.6rem 1.05rem;font-size:.86rem;clip-path:polygon(0 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%)}
.btn--lg{padding:1.05rem 1.9rem;font-size:1.02rem}
.btn--vol{width:100%}

.acties{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.8rem}
.acties--kort{margin-top:1.2rem}
.acties__note{margin:.9rem 0 0;font-size:.9rem;color:var(--lei-600)}
.acties__note--breed{margin-top:1.4rem}
.acties__note--licht{color:var(--groen-300)}
.tel-inline{font-weight:600;color:var(--bak-700);text-underline-offset:3px}
.tel-inline--licht{color:var(--kalk-100)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--groen-600);
  border-bottom:2px solid var(--kalk-300);padding-bottom:.35rem;transition:border-color .2s,gap .2s;
}
.link-arrow:hover{border-color:var(--groen-600);gap:.8rem}
.link-arrow--sterk{color:var(--bak-700);border-color:var(--bak-100)}
.link-arrow--sterk:hover{border-color:var(--bak-600)}

/* ─── Google-element ────────────────────────────────────────────── */
.stars{display:inline-flex;gap:.08em;line-height:1}
.stars i{font-style:normal;color:var(--goud-300);font-size:1.05em}
.stars i.on{color:var(--goud-600)}
.stars--groot i{font-size:1.5rem}
.stars--kaart{margin:.9rem 0 .8rem;display:flex}
.stars--kaart i{font-size:1.32rem}

.grate{display:flex;align-items:center;gap:.8rem}
.grate__g{flex:none;display:flex}
.grate__body{display:flex;flex-direction:column;gap:.1rem}
.grate__top{display:flex;align-items:center;gap:.5rem}
.grate__score{font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1}
.grate__count{font-size:.76rem;letter-spacing:.06em;color:var(--lei-600)}
.grate--fold{padding-left:1.3rem;border-left:1px solid var(--kalk-300)}
.grate--weld{
  margin-top:1.6rem;padding:.9rem 1.2rem;background:var(--kalk-100);
  border:1px solid var(--kalk-300);align-self:flex-start;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .8rem),calc(100% - .8rem) 100%,0 100%);
}
.grate--groot{
  flex-direction:column;align-items:flex-start;gap:.35rem;
  padding:1.3rem 1.6rem 1.2rem;background:var(--kalk-000);border:1px solid var(--kalk-300);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.1rem),calc(100% - 1.1rem) 100%,0 100%);
}
.grate__merk{display:flex;align-items:center;gap:.55rem}
.grate__woord{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}
.grate__cijfer{display:flex;align-items:center;gap:.6rem}
.grate__score--groot{font-size:1.75rem;color:var(--groen-700)}
.grate__count--groot{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lei-600)}

/* ═══════════════ HEADER ═══════════════ */
.hdr{position:sticky;top:0;z-index:70;background:var(--kalk-100);border-bottom:1px solid var(--kalk-300)}
.hdr__in{max-width:var(--wrap);margin-inline:auto;padding:.7rem var(--pad);display:flex;align-items:center;gap:1.4rem}
.hdr__name{
  text-decoration:none;font-weight:700;letter-spacing:-.022em;line-height:1.1;
  font-size:clamp(1.02rem,1.5vw,1.22rem);display:flex;flex-direction:column;flex:none;
}
.hdr__name-word:last-child{color:var(--groen-600)}
.hdr__nav{margin-left:auto}
.nav{display:flex;align-items:center;gap:.25rem}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;
  font-size:.88rem;font-weight:500;padding:.55rem .7rem;color:var(--lei-900);
  border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.nav__link:hover{color:var(--groen-600);border-color:var(--groen-600)}
.nav__chev{transition:transform .2s}
.nav__item--drop{position:relative}
.nav__item--drop.is-open .nav__chev{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + .4rem);left:-.7rem;min-width:22.5rem;
  background:var(--kalk-000);border:1px solid var(--kalk-300);
  box-shadow:0 18px 44px rgba(23,29,38,.14);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;
  z-index:80;clip-path:polygon(0 0,100% 0,100% calc(100% - 1rem),calc(100% - 1rem) 100%,0 100%);
}
.nav__item--drop:hover .drop,
.nav__item--drop:focus-within .drop,
.nav__item--drop.is-open .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop__list{padding:.5rem 0 1rem}
.drop__list a{
  display:flex;flex-direction:column;gap:.1rem;padding:.6rem 1.3rem;text-decoration:none;
  border-left:3px solid transparent;transition:background-color .15s,border-color .15s;
}
.drop__list a:hover{background:var(--kalk-100);border-left-color:var(--bak-600)}
.drop__list span{font-size:.94rem;font-weight:600}
.drop__list em{font-style:normal;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lei-600)}

.hdr__cta{flex:none}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;
  background:none;border:1px solid var(--kalk-300);cursor:pointer;padding:0 10px}
.burger span{display:block;height:2px;background:var(--lei-900);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════ DE FOLD ═══════════════ */
.fold{
  position:relative;background:var(--kalk-100);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,46vw,880px);
  min-height:min(88vh,860px);
}
.fold__copy{
  display:flex;align-items:center;
  padding:clamp(3.2rem,8vh,6rem) clamp(1.5rem,3.5vw,3rem) clamp(3.2rem,8vh,6rem)
          max(var(--pad), calc((100vw - var(--wrap))/2 + var(--pad)));
}
.fold__stack{max-width:38rem}
.brandname{font-size:clamp(1.2rem,1.9vw,1.55rem)}
/* de kop staat in de letter van de naam — dezelfde as, dus hij volgt de keuze mee */
.fold__h1{
  font-family:var(--merk-letter);font-weight:var(--merk-kop-gewicht);
  font-size:clamp(2.45rem,5.3vw,2.5rem);line-height:1.015;letter-spacing:-.018em;
  margin:0 0 1.15rem;color:var(--lei-900);
}
.fold__sub{font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.6;color:var(--lei-600);max-width:34rem;margin-bottom:2.1rem}
.fold__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}

.fold__photo{position:relative}
.fold__photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 15% 100%);
}
.fold__label{
  position:absolute;left:1.5rem;bottom:clamp(2rem,7vh,4.6rem);z-index:3;
  background:var(--groen-700);color:var(--kalk-100);
  padding:1.7rem 2.3rem 1.5rem 2.1rem;
  clip-path:polygon(0 16%, 100% 0, 100% 100%, 0 100%);
  display:flex;flex-direction:column;gap:.34rem;
}
.fold__label-line{font-size:.74rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.fold__label-line:first-of-type{margin-top:.5rem}
.fold__label-rule{display:block;width:2.4rem;height:1.5px;background:var(--groen-300);margin-top:.85rem}
/* plaats en datum op de foto van de fold, klein en stil. Op de computer linksonder, op de lijn waar de tekst van
   de pagina begint en op de hoogte van de voet van de kolom rechts; tot 860 rechtsonder, onder de knoppen en
   naast het rondje van Roy */
.fold__waar{
  position:absolute;z-index:2;margin:0;
  left:max(var(--pad), calc((100vw - var(--wrap))/2 + var(--pad)));bottom:clamp(28px,5vh,52px);
  padding:.3rem .65rem;background:rgba(22,27,14,.62);color:var(--kalk-000);
  font-size:.76rem;font-weight:500;line-height:1.3;letter-spacing:.06em;white-space:nowrap;
}
@media (max-width:860px){
  .fold__waar{left:auto;right:var(--pad);bottom:16px}
}

/* ═══════════════ DE TWEE FEITEN ═══════════════ */
.feiten{background:var(--kalk-200);padding:clamp(1.75rem,3.5vw,2.75rem) 0 clamp(1.75rem,3.5vw,2.75rem)}
.feiten__in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:stretch}

.feit--jaar{
  background:var(--groen-700);color:var(--kalk-100);
  padding:clamp(1rem,1.7vw,1.45rem) clamp(1.2rem,2.1vw,1.8rem) clamp(1.2rem,2vw,1.6rem);
  clip-path:polygon(0 0, 100% 0, 100% 100%, var(--hoek) 100%, 0 calc(100% - var(--hoek)));
  display:flex;flex-direction:column;justify-content:center;
}
.feit__fig{
  font-family:var(--serif);font-weight:600;line-height:.86;
  font-size:clamp(2.3rem,4.75vw,4rem);letter-spacing:-.035em;margin:0;color:var(--kalk-100);
}
.feit__note{margin:.6rem 0 0;color:var(--groen-300);font-size:.9rem;max-width:20rem}
/* het streepje tussen het jaartal en de zin neemt met zijn marges 50px; los van de
   globale `.rule`, die elders wel zoveel lucht mag houden */
.feit--jaar .rule{margin:.75rem 0}

.feit--spec{position:relative;margin:0;min-height:clamp(8.5rem,13vw,11rem);overflow:visible}
.feit--spec img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  clip-path:polygon(7% 0, 100% 0, 100% 100%, 0 100%);
}
.feit__plate{
  position:absolute;left:-1rem;bottom:-1rem;z-index:2;max-width:17rem;
  background:var(--kalk-000);padding:.9rem 1.1rem .85rem;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  box-shadow:0 8px 20px rgba(23,29,38,.12);
}
.feit__plate .eyeb{margin-bottom:.45rem}
.feit__spec-line{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.12;margin:0 0 .65rem}

/* ═══════════════ LINTEN (één adem) ═══════════════ */
.band{position:relative}
.band__in{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.5rem}

.band--lint{background:var(--groen-700);color:var(--kalk-100);padding:1.6rem 0}
.band--lint .eyeb{margin:0;padding:0;flex:none}
.band--lint .eyeb::after{display:none}
.lint{display:flex;flex-wrap:wrap;gap:.45rem 1.5rem;align-items:center}
.lint li{font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.3rem);position:relative}
.lint li+li::before{content:"";position:absolute;left:-.78rem;top:.62em;width:4px;height:4px;background:var(--groen-300);border-radius:50%}
.lint li:first-child{font-weight:700}

.band--opname{background:var(--groen-800);color:var(--kalk-100);padding:clamp(1.8rem,3vw,2.6rem) 0}
.band__in--opname{justify-content:space-between}
.band__line{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.85rem);line-height:1.2;margin:0;max-width:30rem}

.band--zakelijk{background:var(--kalk-200);border-top:1px solid var(--kalk-300);border-bottom:1px solid var(--kalk-300);padding:clamp(1.6rem,3vw,2.3rem) 0}
.band__in--zakelijk{justify-content:space-between;align-items:center}
.band__zak{margin:0;max-width:52rem;font-size:.98rem;color:var(--lei-600)}
.band__zak-eyeb{
  display:inline-block;margin-right:.7rem;font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--groen-600);border:1px solid var(--groen-600);padding:.2rem .55rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .35rem),calc(100% - .35rem) 100%,0 100%);
}

.band--klus{background:var(--bak-700);color:var(--kalk-000);padding:clamp(2.6rem,5vw,4rem) 0;position:relative;overflow:hidden}
.band--klus::before{
  content:"";position:absolute;inset:0 auto 0 0;width:38%;
  background:var(--bak-800);clip-path:polygon(0 0, 100% 0, 62% 100%, 0 100%);opacity:.55;
}
.band__in--klus{position:relative;justify-content:space-between;align-items:center;gap:2rem}
.band__klus-copy{max-width:36rem}
.band__klus-h{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.08;margin:0 0 .7rem}
.band__klus-p{margin:0;opacity:.9;font-size:1rem}
.acties--klus{margin-top:0;flex-direction:column;align-items:stretch}
.band--klus .btn--ghost-licht{border-color:var(--bak-400)}
.band--klus .btn--ghost-licht:hover{border-color:var(--kalk-000)}

/* ═══════════════ SECTIES ═══════════════ */
.sec{position:relative}
.sec--cream{background:var(--kalk-100)}
.sec--paper{background:var(--kalk-200)}
.sec--donker{background:var(--groen-800);color:var(--kalk-100)}
.sec--vol{padding:clamp(4rem,8vw,7rem) 0}
.sec--full{padding:clamp(4.2rem,8.5vw,7.5rem) 0}
.sec--driekwart{padding:clamp(3.4rem,6vw,5.4rem) 0}
.sec--half{padding:clamp(2.6rem,4.5vw,4rem) 0}
.sec--kort{padding:clamp(2.8rem,5vw,4.2rem) 0}

/* de schuine naad: een driehoek van de vorige grond bovenin */
.sec--seam{overflow:hidden}
.sec--seam::before{
  content:"";position:absolute;top:0;left:0;right:0;height:var(--naad);
  background:var(--seam-color,var(--kalk-100));
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.sec--seam>.wrap{position:relative}

.sec__split{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.sec__split--smal{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.sec__split--staand{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.sec__split--omgekeerd .sec__col--media{order:-1}
.sec__col--media{display:flex;flex-direction:column;gap:1.2rem}

/* ─── foto's: altijd één schuine rand, nooit een rechthoek ─── */
.foto{margin:0;position:relative}
.foto img{width:100%;height:100%;object-fit:cover}
.foto--cut img{clip-path:polygon(var(--snede) 0, 100% 0, calc(100% - var(--snede)) 100%, 0 100%)}
.foto--cut-links img{clip-path:polygon(0 0, calc(100% - var(--snede)) 0, 100% 100%, var(--snede) 100%)}
.foto--cut>img{aspect-ratio:16/9}
.foto--staand>img{aspect-ratio:4/5}
.foto--detail>img{aspect-ratio:16/7;clip-path:polygon(0 0, 100% 0, calc(100% - 5%) 100%, 0 100%)}
.foto--detail figcaption{margin-top:.6rem;font-size:.84rem;color:var(--lei-600);font-style:italic}
.sec--donker .foto--detail figcaption{color:var(--groen-300)}
.foto--klein>img{aspect-ratio:16/8}

.projectlijn{
  position:absolute;left:0;bottom:1.4rem;z-index:2;
  background:var(--kalk-000);color:var(--lei-900);
  padding:.7rem 1.3rem .65rem 1.1rem;max-width:80%;
  clip-path:polygon(0 0, 100% 0, calc(100% - .9rem) 100%, 0 100%);
  border-left:4px solid var(--bak-600);
  display:flex;flex-direction:column;
}
.projectlijn__wat{font-size:.84rem;font-weight:600;line-height:1.3}
.projectlijn__wanneer{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--groen-600);margin-top:.2rem}
.projectlijn--cap{bottom:auto;top:1.1rem;left:auto;right:0;border-left:0;border-right:4px solid var(--bak-600);
  clip-path:polygon(.9rem 0, 100% 0, 100% 100%, 0 100%);padding:.7rem 1.1rem .65rem 1.5rem;text-align:right}
.fotobijschrift{margin-top:.6rem;font-size:.78rem;letter-spacing:.06em;color:var(--lei-600)}

/* ─── scope-lijsten ─── */
.scope li{position:relative;padding-left:1.7rem;margin-bottom:.62rem;font-size:.99rem;line-height:1.55}
.scope li::before{
  content:"";position:absolute;left:0;top:.62em;width:.62rem;height:.62rem;
  background:var(--groen-600);clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.scope--licht li{color:var(--kalk-100);opacity:.9}
.scope--licht li::before{background:var(--groen-300)}
.scope--big li{font-size:1.06rem;margin-bottom:.9rem;padding-left:2rem}
.scope--big li::before{width:.78rem;height:.78rem;top:.55em}

/* ─── prijzen: het cijfer is een object, geen zin ─── */
.prijzen{margin:1.9rem 0 0;display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem}
.prijzen--drie{gap:1.5rem 2rem}
.prijs{margin:0;display:flex;flex-direction:column;gap:.3rem;position:relative;padding-top:.9rem}
.prijs::before{content:"";position:absolute;top:0;left:0;width:1.9rem;height:3px;background:var(--bak-400)}
.prijs__wat{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lei-600)}
.prijs__row{display:flex;align-items:baseline;gap:.5rem;line-height:1.05}
.prijs__vanaf{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--groen-600)}
.prijs__fig{font-family:var(--serif);font-size:clamp(1.8rem,2.8vw,2.45rem);font-weight:600;line-height:1;letter-spacing:-.02em}
.prijs__fig--tekst{font-size:clamp(1.4rem,2vw,1.8rem)}
.prijs__eenheid{font-size:.86rem;color:var(--lei-600)}
.prijzen--licht .prijs__wat,.prijzen--licht .prijs__eenheid{color:var(--groen-300)}
.prijzen--licht .prijs__vanaf{color:var(--groen-300)}
.prijzen--licht .prijs__fig{color:var(--kalk-100)}

/* ═══════════════ DE DIENSTKAART (gevelreiniging) ═══════════════ */
.kaart{position:relative}
.kaart__photo{position:relative}
.kaart__photo img{
  width:100%;height:clamp(16rem,32vw,27rem);object-fit:cover;
  clip-path:polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.kaart__body{
  position:relative;z-index:2;margin:-5.5rem auto 0;width:min(100%,94%);
  background:var(--kalk-000);border:1px solid var(--kalk-300);
  padding:clamp(1.8rem,3.4vw,3rem) clamp(1.6rem,3vw,2.8rem) clamp(1.8rem,3vw,2.6rem);
  box-shadow:0 22px 60px rgba(23,29,38,.11);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.6rem,3.5vw,3.2rem);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--hoek)), calc(100% - var(--hoek)) 100%, 0 100%);
}
.kaart__left{display:flex;flex-direction:column}
.kaart__foot{
  grid-column:1/-1;border-top:1px solid var(--kalk-300);padding-top:1.5rem;margin-top:.4rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.kaart__foot .acties{margin-top:0}
.kaart__grate{margin-top:auto;display:flex}

/* ═══════════════ TWEE DEUREN ═══════════════ */
.deuren{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem)}
.deur{
  background:var(--kalk-000);border:1px solid var(--kalk-300);
  padding:clamp(1.4rem,2.6vw,2.1rem);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
  border-left:3px solid var(--groen-600);
}
.deur__h{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);margin:0 0 .7rem}
.deur__h a{text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.deur__h a:hover{border-color:var(--groen-600)}
.deur p{font-size:.96rem;color:var(--lei-600);margin-bottom:.7rem}
.deur__prijs{color:var(--lei-900)!important;font-size:.92rem;margin-bottom:0}
.deur__prijs strong{font-family:var(--serif);font-size:1.2rem;font-weight:600}
.deur__prijs .prijs__vanaf{font-size:.66rem}

/* ═══════════════ PAKKETTEN (impregneren) ═══════════════ */
.pakketten{
  background:var(--kalk-000);border:1px solid var(--kalk-300);margin-top:.4rem;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--hoek)), calc(100% - var(--hoek)) 100%, 0 100%);
  box-shadow:0 18px 46px rgba(23,29,38,.09);
}
.pakketten__cap{position:relative;margin:0}
.pakketten__cap img{width:100%;height:clamp(9rem,16vw,14rem);object-fit:cover;
  clip-path:polygon(0 0, 100% 0, 100% 86%, 0 100%)}
.pakketten__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--kalk-300);margin:0 clamp(1.4rem,2.6vw,2.2rem);border:1px solid var(--kalk-300);
  margin-top:-1.5rem;position:relative;z-index:2;
}
.pak{background:var(--kalk-000);padding:clamp(1.2rem,2.2vw,1.8rem);display:flex;flex-direction:column}
.pak__h{font-family:var(--serif);font-size:clamp(1.12rem,1.7vw,1.4rem);margin:0 0 .5rem;line-height:1.15}
.pak__wanneer{font-size:.9rem;color:var(--lei-600);margin-bottom:1rem}
.prijs--pak{flex-direction:row;align-items:baseline;gap:.4rem;padding-top:.85rem;margin-top:auto}
.prijs--pak::before{background:var(--groen-600)}
.pak--aanbevolen{background:var(--bak-100);border-top:4px solid var(--bak-600);position:relative}
.pak--aanbevolen .prijs--pak::before{background:var(--bak-600)}
.pak__lint{
  display:inline-block;align-self:flex-start;margin:0 0 .7rem;
  background:var(--bak-600);color:var(--kalk-000);
  font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:.28rem .7rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .35rem),calc(100% - .35rem) 100%,0 100%);
}
.pak__waarom{font-size:.87rem;line-height:1.55;color:var(--bak-800);margin:.9rem 0 0;border-top:1px solid rgba(143,78,48,.25);padding-top:.8rem}
.pakketten__foot{
  padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.2rem;
}
.pakketten__scope{margin:0;max-width:36rem;font-size:.93rem;color:var(--lei-600)}
.pakketten__foot .acties{margin-top:0}

/* ═══════════════ DE EIGENAAR ═══════════════ */
.eigenaar__in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.eigenaar__foto{margin:0;position:relative}
.eigenaar__foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  clip-path:polygon(0 0, calc(100% - 8%) 0, 100% 100%, 8% 100%);
}
.eigenaar__foto figcaption{margin-top:.7rem;font-size:.76rem;letter-spacing:.08em;color:var(--groen-300)}
.script{
  font-family:var(--hand);font-weight:600;color:var(--groen-300);
  font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.15;margin:2rem 0 0;
}

/* ═══════════════ OVER ONS + WERKGEBIED — het paar ═══════════════ */
.paar{background:var(--kalk-100)}
.paar__boven{padding:clamp(4rem,8vw,7rem) 0 clamp(2.4rem,4vw,3.4rem)}
.paar__naad{
  display:block;max-width:calc(var(--wrap) - 2 * var(--pad));margin:0 auto;
  height:2px;background:linear-gradient(90deg,var(--groen-600),var(--groen-600) 70%,transparent);
  transform:rotate(-.45deg);transform-origin:left center;
}
.paar__onder{padding-top:clamp(2.4rem,4vw,3.6rem)}

.kernen{display:flex;flex-wrap:wrap;gap:0;margin-top:1.8rem;border-top:1px solid var(--kalk-300)}
.kernen li{padding:1rem 1.6rem 1rem 0;display:flex;flex-direction:column;gap:.2rem;position:relative}
.kernen li+li{padding-left:1.6rem}
.kernen li+li::before{content:"";position:absolute;left:0;top:1.1rem;bottom:1.1rem;width:1px;background:var(--kalk-300)}
.kernen__k{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--groen-600)}
.kernen__v{font-family:var(--serif);font-size:1.28rem;line-height:1.15}

.gebied{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.plaatsen{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 1.4rem;counter-reset:p}
.plaatsen li{
  font-size:.85rem;font-weight:500;padding:.38rem .85rem;background:var(--kalk-200);
  border:1px solid var(--kalk-300);
  clip-path:polygon(0 0,100% 0,100% calc(100% - .4rem),calc(100% - .4rem) 100%,0 100%);
}
.plaatsen li:first-child{background:var(--groen-700);border-color:var(--groen-700);color:var(--kalk-100);font-weight:600}
.adresregel{font-size:.9rem;color:var(--lei-600);margin-bottom:1.3rem}
.gebied__media{display:flex;flex-direction:column;gap:1rem}
.kaartje{
  width:100%;height:clamp(16rem,26vw,22rem);background:var(--kalk-200);
  border:1px solid var(--kalk-300);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%);
}
.kaartje .leaflet-tile-pane{filter:grayscale(.72) sepia(.34) hue-rotate(22deg) saturate(.78) brightness(1.03) contrast(.95)}
.kaartje .leaflet-container{background:var(--kalk-200);font-family:var(--sans)}
.kaartje .leaflet-control-attribution{background:rgba(251,251,248,.86);font-size:10px;color:var(--lei-600)}
.kaartje .leaflet-control-attribution a{color:var(--groen-600)}
.kaart-label{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--groen-900);background:rgba(251,251,248,.9);padding:2px 6px;white-space:nowrap;
  border:0;box-shadow:none;
}
.kaart-label::before{display:none}
.kaart-label--thuis{background:var(--bak-600);color:var(--kalk-000)}
.kaartje-uit{display:flex;align-items:center;justify-content:center;padding:1.5rem;text-align:center;
  font-size:.86rem;color:var(--lei-600)}

/* ═══════════════ VRAGEN ═══════════════ */
.vragen{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
.vragen__kop p:not(.eyeb){color:var(--lei-600);font-size:.96rem}
.vragen__kop .btn{margin-top:.6rem}
.vraag{border-top:1px solid var(--kalk-300)}
.vraag:last-child{border-bottom:1px solid var(--kalk-300)}
.vraag summary{
  list-style:none;cursor:pointer;padding:1.05rem 2.5rem 1.05rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.3;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{
  content:"";position:absolute;right:.35rem;top:1.45rem;width:.85rem;height:.85rem;
  border-right:2px solid var(--groen-600);border-bottom:2px solid var(--groen-600);
  transform:rotate(45deg);transition:transform .2s;
}
.vraag[open] summary::after{transform:rotate(-135deg);top:1.7rem}
.vraag summary:hover{color:var(--groen-600)}
.vraag__a{padding:0 2.5rem 1.2rem 0}
.vraag__a p{margin:0;font-size:.97rem;color:var(--lei-600)}

/* ═══════════════ BEOORDELINGEN ═══════════════ */
.rev__kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.rev__kop .h2{margin-bottom:0}
.rev__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.8rem)}
.rev{
  background:var(--kalk-000);border:1px solid var(--kalk-300);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%);
  box-shadow:0 10px 30px rgba(23,29,38,.06);
  display:flex;flex-direction:column;
}
.rev__top{display:flex;align-items:center;gap:.85rem}
.ava{
  flex:none;width:2.9rem;height:2.9rem;display:grid;place-items:center;border-radius:50%;
  background:var(--groen-700);color:var(--kalk-100);
  font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1;
}
.rev__wie{flex:1 1 auto;min-width:0}
.rev__naam{margin:0;font-weight:600;font-size:1rem;line-height:1.25}
.rev__plaats{margin:0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--groen-600)}
.rev__g{flex:none;display:flex;opacity:.95}
.rev__tekst{font-size:.96rem;line-height:1.62;margin:0 0 1.1rem;color:var(--lei-900)}
.rev__datum{margin:auto 0 0;font-size:.78rem;letter-spacing:.06em;color:var(--lei-600);border-top:1px solid var(--kalk-300);padding-top:.8rem}
.rev__foot{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);padding-top:1.6rem;border-top:1px solid var(--kalk-300);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.rev__foot p{margin:0;color:var(--lei-600)}
.rev__foot .acties{margin-top:0}

/* ═══════════════ CONTACT ═══════════════ */
.contact__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.belblok{
  display:flex;flex-direction:column;gap:.15rem;text-decoration:none;margin:2rem 0 2.2rem;
  background:var(--bak-600);color:var(--kalk-000);padding:1.4rem 1.8rem 1.5rem;max-width:23rem;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
  transition:background-color .18s;
}
.belblok:hover{background:var(--bak-700)}
.belblok__eyeb{font-size:.67rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.belblok__nr{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.belblok__na{font-size:.84rem;opacity:.85;margin-top:.15rem}

.gegevens{margin:0;display:grid;gap:1.1rem}
.gegevens>div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--groen-700)}
.gegevens>div:last-child{border-bottom:0}
.gegevens dt{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--groen-300);padding-top:.25rem}
.gegevens dd{margin:0;font-size:.96rem;color:var(--kalk-100)}
.plaatshouder{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--groen-300);margin-top:.2rem}

.form{background:var(--kalk-000);color:var(--lei-900);padding:clamp(1.5rem,3vw,2.4rem);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--hoek)), calc(100% - var(--hoek)) 100%, 0 100%)}
.form__kop{font-family:var(--serif);font-size:1.25rem;margin:0 0 1.4rem;line-height:1.3}
.veld{margin-bottom:1rem}
.veld--duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.veld label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lei-600);margin-bottom:.35rem}
.veld input,.veld select,.veld textarea{
  width:100%;padding:.72rem .85rem;background:var(--kalk-100);
  border:1px solid var(--kalk-300);border-bottom:2px solid var(--kalk-300);
  font-size:.95rem;transition:border-color .16s,background-color .16s;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;background:var(--kalk-000);border-color:var(--groen-600);border-bottom-color:var(--bak-600)}
.veld textarea{resize:vertical;min-height:6.5rem}
.form .btn{margin-top:.6rem}
.form__na{margin:.9rem 0 0;font-size:.88rem;color:var(--lei-600);text-align:center}
.form__na .tel-inline{color:var(--bak-700)}
.form__demo{
  margin:.9rem 0 0;font-size:.85rem;color:var(--bak-800);background:var(--bak-100);
  padding:.7rem .9rem;border-left:3px solid var(--bak-600);
}

/* ═══════════════ VOETTEKST ═══════════════ */
.voet{background:var(--groen-900);color:var(--kalk-100)}
.voet__in{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr)) minmax(0,.95fr);
  gap:clamp(1.6rem,3.5vw,3rem);padding-top:clamp(3rem,5vw,4.2rem);padding-bottom:clamp(2.4rem,4vw,3.4rem)}
.brandname--voet{color:var(--kalk-100);font-size:1.2rem}
.microlabels--voet span{color:var(--groen-300)}
.microlabels--voet span+span::before{background:var(--groen-700)}
.voet__adres{margin:1.3rem 0 .4rem;font-size:.9rem;color:var(--groen-300)}
.voet__tel a{font-family:var(--serif);font-size:1.45rem;text-decoration:none;border-bottom:2px solid var(--groen-700)}
.voet__tel a:hover{border-color:var(--bak-400)}
.voet__k{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--groen-300);margin-bottom:1rem}
.voet__kol ul li{margin-bottom:.5rem}
.voet__kol a{font-size:.92rem;text-decoration:none;opacity:.88;border-bottom:1px solid transparent}
.voet__kol a:hover{opacity:1;border-bottom-color:var(--groen-500)}
.voet__gebied li{font-size:.92rem;opacity:.82;margin-bottom:.4rem}
.voet__p{font-size:.9rem;opacity:.82;margin-bottom:1.1rem}
.voet__onder{border-top:1px solid var(--groen-800)}
.voet__onder-in{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;padding-block:1.2rem}
.voet__onder p{margin:0;font-size:.8rem;color:var(--groen-300)}
.voet__klein{max-width:44rem}

/* ═══════════════ STICKY BELBALK ═══════════════ */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--groen-900);border-top:2px solid var(--bak-600);
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom));gap:.5rem}
.sticky__bel{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:.55rem;
  background:var(--bak-600);color:var(--kalk-000);text-decoration:none;
  font-weight:700;font-size:1rem;padding:.85rem 1rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .6rem),calc(100% - .6rem) 100%,0 100%);
}
.sticky__form{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  color:var(--kalk-100);text-decoration:none;font-size:.85rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:.85rem 1rem;border:1px solid var(--groen-500);
}

/* ═══════════════ RESPONSIEF ═══════════════ */
@media (max-width:1180px){
  .nav__link{padding:.5rem .5rem;font-size:.84rem}
  .hdr__in{gap:1rem}
}
@media (max-width:1040px){
  .hdr__nav{
    position:fixed;inset:calc(var(--hdr-h,64px)) 0 auto 0;background:var(--kalk-000);
    border-bottom:1px solid var(--kalk-300);box-shadow:0 20px 40px rgba(23,29,38,.12);
    margin-left:0;max-height:calc(100vh - var(--hdr-h,64px));overflow:auto;
    display:none;
  }
  .hdr__nav.is-open{display:block}
  .nav{flex-direction:column;align-items:stretch;gap:0;padding:.5rem 0 1.2rem}
  .nav__item{border-bottom:1px solid var(--kalk-200)}
  .nav__link{padding:.95rem var(--pad);font-size:1rem;justify-content:space-between;border-bottom:0}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:var(--kalk-100);min-width:0;clip-path:none;display:none}
  .nav__item--drop.is-open .drop{display:block}
  .drop__list{padding:.3rem 0 .8rem}
  .drop__list a{padding:.6rem var(--pad)}
  .burger{display:flex}
  .hdr__cta .btn span{display:none}
  .hdr__cta .btn{padding:.6rem .8rem}

  .fold{grid-template-columns:1fr;min-height:0}
  .fold__copy{padding:clamp(2.4rem,6vh,3.6rem) var(--pad) 2.6rem}
  .fold__stack{max-width:none}
  .fold__photo{height:clamp(19rem,52vw,30rem);margin-bottom:2.6rem}
  .fold__photo img{clip-path:polygon(0 12%, 100% 0, 100% 100%, 0 100%)}
  .fold__label{left:auto;right:var(--pad);bottom:-1.2rem;clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}

  .feiten__in{grid-template-columns:1fr;gap:3.2rem}
  .feit--spec{min-height:15rem}
  .feit__plate{left:0;bottom:-.8rem;max-width:min(100%,17rem)}

  .sec__split,.sec__split--smal,.sec__split--staand{grid-template-columns:1fr;gap:2.2rem}
  .sec__split--omgekeerd .sec__col--media{order:0}
  .kaart__body{grid-template-columns:1fr;width:100%;margin-top:-3rem}
  .eigenaar__in{grid-template-columns:1fr;gap:2.4rem}
  .eigenaar__foto{max-width:24rem}
  .vragen{grid-template-columns:1fr;gap:2rem}
  .gebied{grid-template-columns:1fr;gap:2rem}
  .contact__in{grid-template-columns:1fr;gap:2.4rem}
  .voet__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band__in--klus{flex-direction:column;align-items:flex-start}
  .acties--klus{flex-direction:row;width:100%}
}
@media (max-width:860px){
  .sticky{display:flex}
  body{padding-bottom:5rem}
  .pakketten__grid{grid-template-columns:1fr;margin-left:1.1rem;margin-right:1.1rem}
  .deuren{grid-template-columns:1fr}
  .rev__grid{grid-template-columns:1fr}
  .rev__kop{align-items:flex-start}
}
@media (max-width:620px){
  :root{--snede:7%;--hoek:1.6rem}
  .fold__h1{font-size:26px}
  .prijzen{gap:1.2rem 1.6rem}
  .veld--duo{grid-template-columns:1fr}
  .voet__in{grid-template-columns:1fr}
  .kernen li{padding-right:1.1rem}
  .kernen li+li{padding-left:1.1rem}
  .band__in--opname .btn{width:100%}
  .acties--klus{flex-direction:column}
  .acties--klus .btn{width:100%}
  .feit__plate{padding:.75rem .9rem}
  .grate--fold{padding-left:0;border-left:0;border-top:1px solid var(--kalk-300);padding-top:1rem;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ═══════════════ HET MERK — DE LOCKUP VAN HET BORD ═══════════════
   Het bord zet het merk op één manier: de tekening (ooievaar met de skyline
   van Den Haag) boven de naam, Gevelrenovatie eronder, DEN HAAG daaronder in
   gespatieerde kapitalen tussen twee lijnen — alles op één as. Er staat niets
   naast de tekening.

   De verhoudingen zijn nagemeten aan het getrokken origineel
   (logo/merk-3a-tekst.svg) en staan hier uitgedrukt in kaphoogten van de naam,
   zodat ze bij elk korps en elke snit gelijk blijven:

       tekening        3,00 × kaphoogte hoog (breedte 1,19 × haar eigen hoogte)
       insteek        -0,21 × kaphoogte — de poot zakt over de kaplijn heen
       DEN HAAG        kaphoogte 0,343 × die van de naam
       basislijnen     0,655 × kaphoogte uit elkaar
       de regel        0,937 × de breedte van het woord, gecentreerd
       de lijnen       dik 0,111 × kap DEN HAAG, 1,55 kap lucht naast de letters
       de tekening     staat 5% van haar eigen breedte rechts van het midden

   De naam is en blijft echte tekst — alleen de tekening komt uit het bord. */
.merkblok{
  display:inline-flex;flex-direction:column;align-items:center;
  margin:0;line-height:1;font-family:var(--merk-letter);text-decoration:none;
}
.merkblok__vogel{
  flex:none;display:block;width:auto;
  height:var(--merk-vogel-h);
  margin-bottom:calc(var(--merk-insteek) * -1);
  transform:translateX(5%);
}
.merkblok__tekst{display:flex;flex-direction:column;align-items:center;min-width:0}
.merkblok__woord{
  font-family:var(--merk-letter);font-weight:var(--merk-gewicht);
  letter-spacing:var(--merk-woordspatie);line-height:1;white-space:nowrap;
  margin-bottom:var(--merk-dh-gat);
}
.merkblok__plaats{
  display:flex;align-items:center;gap:1.19em;
  width:93.7%;
  font-family:var(--merk-letter);font-weight:400;font-size:.343em;line-height:1;
  text-transform:uppercase;white-space:nowrap;letter-spacing:var(--merk-dh-sp);
}
/* de spatiëring hangt ook achter de laatste letter; die duwt de rechterlijn weg */
.merkblok__plaats span{margin-right:calc(var(--merk-dh-sp) * -1)}
.merkblok__plaats i{flex:1 1 auto;min-width:1.2em;height:max(1px,.086em);background:currentColor}

/* ── de twee standen ──────────────────────────────────────────────────────
   Geen van onze drie snitten is zo smal als de letter van het bord: bij
   gelijke kaphoogte zijn ze ruim 20% breder. Daardoor kan het merk één van
   twee dingen van het bord aanhouden, niet allebei.

   1 · de verhoudingen van het blok. De tekening is 46,7% zo breed als het
       woord en DEN HAAG 45,8%, precies als op het bord. Het blok ziet eruit
       als het origineel; de kapitalen staan iets ruimer omdat ze over een
       breder woord verdeeld worden.
   2 · de verhoudingen van de letter. De tekening is 3,00 kaphoogte hoog en
       DEN HAAG houdt het letterritme van het bord (inkt 10,19 × de eigen
       kaphoogte). De letters staan als op het bord; de tekening oogt naast
       het bredere woord kleiner, en de lijnen worden langer.

   De insteek, de basislijnafstand en de kaphoogte van DEN HAAG zijn in beide
   standen die van het bord. */
/* De snitmaten staan op de wortel, niet op het merkblok zelf: de kop van de fold
   is in dezelfde letter gezet als de naam, dus die moet ze ook kunnen lezen.

   Hier staat zijn keuze vast: Libre Caslon Text, en de tekening op de kaphoogte
   van het bord (3,00 × kap) met DEN HAAG op het letterritme van het bord. De
   schakelaar die deze twee vroeg is eruit — st9 heeft hem nog als er ooit
   teruggekeken moet worden. */
:root{
  --merk-letter:"Libre Caslon Text",Georgia,serif;
  --merk-gewicht:400;
  --merk-woordspatie:-.004em;
  --merk-kop-gewicht:400;
  --merk-kap:.770;        /* kaphoogte in em */
  --merk-insteek:.248em;  /* vakrand→kaplijn + 0,21 kap */
  --merk-dh-gat:.066em;   /* basislijn naam → vak DEN HAAG */
  --merk-vogel-h:2.310em; /* 3,00 × kaphoogte */
  --merk-dh-sp:.315em;    /* spatiëring DEN HAAG, in em van DEN HAAG zelf */
}

/* ── de drie zetels ──────────────────────────────────────────────────── */
/* de kop */
.hdr__name .merkblok{font-size:clamp(1.02rem,1.5vw,1.22rem)}
.hdr__name .merkblok__woord{color:var(--lei-900)}
.hdr__name .merkblok__plaats{color:var(--groen-600)}
.hdr__name .merkblok__plaats i{opacity:.55}

/* de fold — hier staat het merk op zijn grootst */
.merkblok--fold{font-size:clamp(1.9rem,3.7vw,50px);margin:0 auto;padding-bottom:30px}
.merkblok--fold .merkblok__woord{color:var(--lei-900)}
.merkblok--fold .merkblok__plaats{color:var(--groen-600)}
.merkblok--fold .merkblok__plaats i{opacity:.7}

/* de voettekst — op de kalkplaat */
.merkblok--voet{font-size:1.45rem}
.merkblok--voet .merkblok__woord{color:var(--lei-900)}
.merkblok--voet .merkblok__plaats{color:var(--groen-600)}
.merkblok--voet .merkblok__plaats i{opacity:.55}