/* ==========================================================================
   J.A.N plus Architecten — site.css
   Richting B: fotografisch en stil.
   ========================================================================== */

:root{
  --wit:#FBFAF7;
  --zand:#EDE7DB;
  --ink:#231F1A;
  --grijs:#6E6659;
  --brons:#7A5F1D;
  --cyaan:#2FB4C4;
  --lijn:#DCD5C6;

  --ff-d:"Jost",system-ui,-apple-system,sans-serif;
  --ff-b:"Source Serif 4",Georgia,serif;

  --mx:1240px;
  --gut:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
/* Vangnet tegen zijwaarts schuiven. Let op: dit verbergt de oorzaak wel
   degelijk, dus bij het opsporen van een te breed element zet je het uit. */
html,body{max-width:100%;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--wit);color:var(--ink);
  font-family:var(--ff-b);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyaan);outline-offset:2px}

.wrap{max-width:var(--mx);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:660px;margin:0 auto}
/* De overslaan-link: onzichtbaar tot je hem met het toetsenbord bereikt.
   Met left:-9999px zou de pagina 9999 pixels breed worden. */
.overslaan{
  position:absolute;left:10px;top:0;background:var(--ink);color:var(--wit);
  padding:10px 16px;z-index:300;font-family:var(--ff-d);font-size:13px;
  transform:translateY(-200%);transition:transform .15s
}
.overslaan:focus{transform:translateY(10px)}

h1,h2,h3,h4{font-family:var(--ff-d);font-weight:300;margin:0;text-wrap:balance}
.kap{
  font-family:var(--ff-d);font-weight:400;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--grijs);margin:0
}

.btn{
  display:inline-block;font-family:var(--ff-d);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;padding:13px 32px;
  border:1px solid var(--ink);color:var(--ink);background:none;cursor:pointer;transition:.28s
}
.btn:hover{background:var(--ink);color:var(--wit)}
.btn.brons{border-color:var(--brons);color:var(--brons)}
.btn.brons:hover{background:var(--brons);color:var(--wit)}

/* ---------- hoofding ---------------------------------------------------- */
/* Eén horizontale band: logo links, menu en telefoon rechts. Voorheen stonden
   logo, menu en telefoon los onder elkaar, elk gecentreerd — samen met de
   gecentreerde paginakop gaf dat zes middenpunten op een rij, en dat leest
   onrustig. Nu is er één ankerlijn links en is de paginakop het enige
   gecentreerde blok. */
.hdr{
  border-bottom:1px solid var(--lijn);background:var(--wit);
  position:relative;z-index:50
}
.hdr-in{
  max-width:var(--mx);margin:0 auto;padding:16px var(--gut);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px)
}
.lock{display:block;line-height:0;flex:0 0 auto;text-decoration:none}
.lock img{width:clamp(200px,26vw,300px);height:auto}

.hdr-rechts{
  margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)
}
.nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
.nav a{
  font-family:var(--ff-d);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--grijs);padding-bottom:3px;
  border-bottom:1px solid transparent;transition:.25s;white-space:nowrap
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-color:var(--cyaan)}

.kopbellen{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-family:var(--ff-d);font-size:14px;letter-spacing:.04em;text-decoration:none;
  color:var(--brons);padding:8px 14px;border:1px solid var(--lijn);transition:.25s
}
.kopbellen:hover{background:var(--brons);color:var(--wit);border-color:var(--brons)}
.kopbellen svg{flex:0 0 auto}

.navknop{
  display:none;margin-left:auto;align-items:center;gap:8px;background:none;
  border:1px solid var(--lijn);padding:9px 14px;cursor:pointer;color:var(--ink)
}
.navknop em{
  font-style:normal;font-family:var(--ff-d);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase
}
.navknop span{display:block;width:16px;height:1px;background:var(--brons);margin:3px 0;transition:.25s}
.navknop[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.navknop[aria-expanded="true"] span:nth-child(2){opacity:0}
.navknop[aria-expanded="true"] span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

/* ---------- beeldvlakken ------------------------------------------------ */
.beeld{position:relative;overflow:hidden;background:var(--zand)}
.beeld img{width:100%;height:100%;object-fit:cover}
.beeld.zoom img{transition:transform .9s cubic-bezier(.2,.7,.3,1)}
a:hover>.beeld.zoom img,button:hover>.beeld.zoom img{transform:scale(1.045)}

/* ---------- home: hero ------------------------------------------------- */
.hero{position:relative;margin-top:14px}
/* dvh in plaats van vh: op iOS rekent vh met de adresbalk mee, waardoor het
   beeld hoger wordt dan het zichtbare deel van het scherm. */
/* Hoger gezet van 70 naar 88 procent van de vensterhoogte. Bij een breed
   scherm is de hero een band van ruim vier op één, terwijl een render
   anderhalf op één is — er valt dan altijd bij te snijden. Meer hoogte is dus
   meer beeld. Het maximum is opgetrokken van 700 naar 900 pixels, want anders
   verandert er niets op een groot scherm.

   Let op: hoe hoger de hero, hoe minder er van de tekst eronder in beeld komt
   zonder scrollen. */
.hero-beeld{position:relative;height:clamp(340px,88vh,900px);overflow:hidden;background:var(--zand)}
@supports (height:1dvh){
  .hero-beeld{height:clamp(340px,88dvh,900px)}
}
@media(max-width:560px){
  .hero-beeld{height:clamp(300px,64vh,600px)}
  @supports (height:1dvh){
    .hero-beeld{height:clamp(300px,64dvh,600px)}
  }
}
.hero-beeld img{width:100%;height:100%;object-fit:cover}
.hero-cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px var(--gut);
  background:linear-gradient(transparent,rgba(20,18,14,.66));color:#fff;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap
}
.hero-cap h1{font-size:clamp(24px,3.4vw,42px);line-height:1.15;color:#fff;max-width:20ch}
.hero-cap .kap{color:rgba(255,255,255,.82)}

/* ---------- home: manifest --------------------------------------------- */
.manifest{padding:clamp(52px,9vw,112px) 0;text-align:center}
.manifest p.groot{font-size:clamp(21px,2.5vw,29px);line-height:1.55;font-weight:300;margin:18px 0 0}
.manifest p.groot em{font-style:italic;color:var(--brons)}
.streep{width:1px;height:56px;background:var(--lijn);margin:34px auto 0}

/* ---------- home: projectparen ----------------------------------------- */
.paren{padding:0 0 clamp(40px,6vw,80px)}
.paar{
  display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(20px,4vw,56px);
  align-items:end;margin-bottom:clamp(40px,7vw,110px)
}
.paar.om{grid-template-columns:1fr 1.35fr}
.paar.om .pj:first-child{order:2}
.pj{text-decoration:none;display:block}
.pj>.beeld{aspect-ratio:4/3}
.pj.hoog>.beeld{aspect-ratio:3/4}
.pj-txt{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding-top:14px;border-top:1px solid var(--lijn);margin-top:14px
}
.pj-txt h3{font-size:22px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;line-height:1.2}
.pj-txt span{
  font-family:var(--ff-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grijs);white-space:nowrap
}

/* ---------- diensten --------------------------------------------------- */
.diensten{padding:clamp(52px,8vw,104px) 0;border-top:1px solid var(--lijn)}
.diensten-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.diensten-grid h3{
  font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding-top:16px;border-top:1px solid var(--ink)
}
.diensten-grid p{font-size:16px;color:var(--grijs);margin:10px 0 0}

/* ---------- portfolio: kop en filters ---------------------------------- */
/* Dezelfde maten als .pagkop, zodat elke pagina met hetzelfde ritme opent.
   Voorheen had het portfolio eigen, ruimere waarden. */
.pf-kop{
  padding:clamp(22px,3vw,40px) 0 clamp(24px,3.5vw,40px);
  text-align:center;border-bottom:1px solid var(--lijn)
}
.pf-kop h1{font-size:clamp(28px,4vw,46px);letter-spacing:.06em;text-transform:uppercase;margin:12px 0 0}
.pf-kop .intro{
  max-width:620px;margin:22px auto 0;font-size:clamp(18px,1.7vw,21px);
  font-weight:300;line-height:1.6;color:var(--grijs)
}
.pf-kop .voet{max-width:620px;margin:16px auto 0;font-size:14px;color:var(--grijs);font-style:italic}

.filterbalk{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.filterbalk-in{max-width:var(--mx);margin:0 auto;padding:16px var(--gut) 14px}
/* Het label en de keuzes zijn twee kolommen. Voorheen zaten ze in dezelfde
   stroom, waardoor een tweede regel knoppen terugviel tot onder het label in
   plaats van uit te lijnen met de eerste knop. */
.frij{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.frij-lbl{
  font-family:var(--ff-d);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grijs);flex:0 0 78px;padding-top:9px
}
.frij-keuzes{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:8px}

/* Een lange lijst wordt een keuzemenu in plaats van een knoppenrij. */
.fkeuze{
  font-family:var(--ff-d);font-size:13px;letter-spacing:.04em;color:var(--ink);
  background:var(--wit);border:1px solid var(--lijn);border-radius:999px;
  padding:7px 32px 7px 15px;cursor:pointer;appearance:none;min-width:190px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b8a060' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:9px 6px;
  transition:.2s
}
.fkeuze:hover{border-color:var(--brons)}
.fkeuze:focus-visible{outline:2px solid var(--cyaan);outline-offset:2px}
@media(max-width:560px){ .fkeuze{width:100%;min-width:0} }
.chip{
  font-family:var(--ff-d);font-weight:400;font-size:12.5px;letter-spacing:.06em;
  padding:6px 14px;border:1px solid var(--lijn);background:none;color:var(--grijs);
  cursor:pointer;border-radius:999px;transition:.2s;white-space:nowrap
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--wit)}

.fonder{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding-top:12px;margin-top:12px;border-top:1px solid var(--lijn)
}
.zoekveld{position:relative;flex:1 1 260px;max-width:340px}
.zoekveld input{
  width:100%;font-family:var(--ff-b);font-size:16px;padding:9px 12px 9px 30px;
  background:none;border:0;border-bottom:1px solid var(--lijn);color:var(--ink)
}
.zoekveld input:focus{outline:0;border-color:var(--cyaan)}
.zoekveld svg{position:absolute;left:4px;top:12px;width:16px;height:16px;stroke:var(--grijs);fill:none;stroke-width:1.6}
.telling{font-family:var(--ff-d);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs)}
.telling b{color:var(--ink);font-weight:500}
.wisknop{
  font-family:var(--ff-d);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:none;border:0;border-bottom:1px solid var(--cyaan);color:var(--brons);
  cursor:pointer;padding:2px 0;visibility:hidden
}
.wisknop.zicht{visibility:visible}

/* ---------- portfolio: raster ----------------------------------------- */
.pfraster{
  padding:clamp(30px,5vw,60px) 0 clamp(50px,8vw,100px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px) clamp(18px,2.6vw,36px)
}
.kaart{text-decoration:none;display:block}
.kaart.verborgen{display:none}
.kaart>.beeld{aspect-ratio:4/3}
.kaart-type{
  position:absolute;left:12px;top:12px;font-family:var(--ff-d);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;background:rgba(251,250,247,.92);
  color:var(--ink);padding:5px 10px
}
.kaart-nr{
  position:absolute;right:12px;bottom:12px;font-family:var(--ff-d);font-size:11px;
  letter-spacing:.14em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)
}
.kaart-txt{padding-top:13px;border-top:1px solid var(--lijn);margin-top:13px}
.kaart-txt h3{font-size:20px;letter-spacing:.05em;text-transform:uppercase;font-weight:400;line-height:1.2}
.kaart-meta{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;
  font-family:var(--ff-d);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs)
}
.kaart-meta em{font-style:normal;color:var(--brons)}
.geenresultaat{grid-column:1/-1;text-align:center;padding:70px 0;border:1px solid var(--lijn);display:none}
.geenresultaat.zicht{display:block}
.geenresultaat h3{font-size:22px;letter-spacing:.08em;text-transform:uppercase;font-weight:400}
.geenresultaat p{color:var(--grijs);margin:10px 0 22px}

/* ---------- projectpagina --------------------------------------------- */
.terug{padding:10px 0 0}
.terug a{
  font-family:var(--ff-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grijs);text-decoration:none;display:inline-flex;align-items:center;gap:8px
}
.terug a:hover{color:var(--ink)}
.terug a span{color:var(--cyaan)}

.pjkop{
  padding:clamp(22px,3.5vw,44px) 0 clamp(26px,4vw,46px);
  display:grid;grid-template-columns:1fr auto;gap:clamp(22px,5vw,64px);align-items:start
}
.pjkop h1{font-size:clamp(28px,4vw,48px);letter-spacing:.04em;text-transform:uppercase;line-height:1.08}
.pjkop .onder{font-size:clamp(18px,1.7vw,21px);font-weight:300;color:var(--grijs);margin:16px 0 0;max-width:44ch}
.pjnr{text-align:right;border-left:1px solid var(--lijn);padding-left:clamp(18px,3vw,38px)}
.pjnr .kap{display:block;margin-bottom:8px}
.pjnr strong{
  display:block;font-family:var(--ff-d);font-weight:300;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.06em;color:var(--brons);line-height:1
}

.beelden{padding-bottom:clamp(30px,5vw,58px)}
.hoofdbeeld{aspect-ratio:16/10;cursor:zoom-in;width:100%;border:0;padding:0;display:block}
.beeldraster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-top:clamp(10px,1.4vw,18px)}
.beeldraster button{border:0;padding:0;background:none;cursor:zoom-in}
.beeldraster button>.beeld{aspect-ratio:4/3}

.details{border-top:1px solid var(--lijn);padding:clamp(26px,4vw,46px) 0}
.details h2,.beschrijving h2{
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--brons);margin-bottom:22px
}
.tabel{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--lijn)}
.tabel div{background:var(--wit);padding:14px 0 14px 16px}
.tabel b{
  display:block;font-family:var(--ff-d);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grijs);font-weight:400;margin-bottom:5px
}
.tabel span{font-family:var(--ff-d);font-size:15px;letter-spacing:.03em}

.beschrijving{border-top:1px solid var(--lijn);padding:clamp(26px,4vw,46px) 0 clamp(40px,6vw,80px)}
.beschrijving-in{max-width:720px}
.beschrijving p{margin:0 0 20px}
.beschrijving p:first-of-type{font-size:clamp(19px,1.8vw,22px);font-weight:300;line-height:1.6}

.volgende{border-top:1px solid var(--lijn);background:var(--zand);padding:clamp(34px,5vw,64px) 0}
.volgende-in{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.volgende h3{font-size:clamp(20px,2.4vw,30px);letter-spacing:.05em;text-transform:uppercase;font-weight:300;margin-top:10px}

/* ---------- tekstpagina's --------------------------------------------- */
/* De kop van een tekstpagina: bovenkop, titel en inleiding horen bij elkaar
   en staan dus in hetzelfde blok. Voorheen stond de inleiding onder de
   scheidingslijn, wat een gat van bijna 150 pixels opleverde. */
.pagkop{
  padding:clamp(22px,3vw,40px) 0 clamp(24px,3.5vw,40px);
  text-align:center;border-bottom:1px solid var(--lijn)
}
.pagkop h1{font-size:clamp(28px,4vw,46px);letter-spacing:.06em;text-transform:uppercase;margin:12px 0 0}
.pagkop .intro{
  max-width:620px;margin:22px auto 0;font-size:clamp(18px,1.7vw,21px);
  font-weight:300;line-height:1.6;color:var(--grijs)
}
/* Een kop zonder inleiding hoeft niet dezelfde ruimte in te nemen. */
.pagkop.kort{padding-bottom:clamp(18px,2.5vw,28px)}
.pagkop.kort h1{margin-top:8px}

/* padding-block, niet de korte notatie: dit element draagt ook de klasse
   .wrap, en 'padding: x 0 y' zou de zijmarge van .wrap op nul zetten. Dan
   plakt de tekst tegen de schermrand. */
.pagtekst{padding-block:clamp(26px,3.5vw,52px) clamp(46px,7vw,90px)}
/* De eerste alinea van de lopende tekst iets zwaarder: dat geeft een zachte
   overgang van de gecentreerde kop naar de linksuitgelijnde tekst. */
.pagtekst .narrow>p:first-child{font-size:clamp(18px,1.6vw,20px);color:var(--ink)}
/* De eerste tussentitel krijgt GEEN haarlijn: de kop heeft er al een, en twee
   lijnen kort na elkaar zien slordig uit. */
.pagtekst .narrow>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.pagtekst h2{
  font-size:clamp(19px,2.1vw,26px);letter-spacing:.06em;text-transform:uppercase;
  font-weight:300;margin:42px 0 14px;padding-top:18px;border-top:1px solid var(--lijn)
}
.pagtekst p{margin:0 0 20px}
.pagtekst ul{margin:0 0 20px;padding-left:22px}
.pagtekst li{margin-bottom:8px}

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.teamlid>.beeld{aspect-ratio:3/4}
.teamlid h3{font-size:17px;letter-spacing:.12em;text-transform:uppercase;font-weight:400;margin-top:14px}
.teamlid p{font-family:var(--ff-d);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);margin:5px 0 0}

/* ---------- contact --------------------------------------------------- */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.veld{display:block;margin-bottom:16px}
.veld>span{
  display:block;font-family:var(--ff-d);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brons);margin-bottom:6px
}
.veld input,.veld textarea{
  width:100%;font-family:var(--ff-b);font-size:16px;padding:11px 13px;
  background:var(--wit);border:1px solid var(--lijn);color:var(--ink)
}
.veld input:focus,.veld textarea:focus{outline:2px solid var(--cyaan);outline-offset:1px;border-color:var(--cyaan)}
.veld textarea{min-height:130px;resize:vertical}
/* Het lokvak tegen spam: verborgen voor mensen, wel leesbaar voor robots.
   NIET met left:-9999px, want dat maakt de pagina 9999 pixels breed en dan kan
   je op een gsm horizontaal schuiven — de hele opmaak valt dan uit elkaar. */
.honing{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0
}
.gegevens{list-style:none;margin:0;padding:0}
.gegevens li{padding:14px 0;border-bottom:1px solid var(--lijn)}
.gegevens b{
  display:block;font-family:var(--ff-d);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brons);margin-bottom:3px;font-weight:400
}
.gegevens a{text-decoration:none;border-bottom:1px solid var(--cyaan)}
.melding{padding:16px 18px;border:1px solid var(--cyaan);background:rgba(47,180,196,.08);margin-bottom:24px}
.melding.fout{border-color:#B4472F;background:rgba(180,71,47,.07)}
.melding p{margin:0}

/* ---------- lichtbak -------------------------------------------------- */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(24,21,17,.95);
  display:none;align-items:center;justify-content:center;padding:clamp(14px,4vw,60px)
}
.lb.open{display:flex}
.lb-kader{position:relative;width:min(100%,1160px)}
.lb-kader img{width:100%;height:auto;max-height:82vh;object-fit:contain}
.lb button{
  position:absolute;background:rgba(24,21,17,.6);border:1px solid rgba(251,250,247,.3);
  color:#FBFAF7;font-family:var(--ff-d);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:9px 15px;cursor:pointer;transition:.2s
}
.lb button:hover{background:rgba(251,250,247,.18)}
.lb-sluit{top:-46px;right:0}
.lb-vorig{left:12px;top:50%;transform:translateY(-50%)}
.lb-volg{right:12px;top:50%;transform:translateY(-50%)}
.lb-teller{
  position:absolute;left:0;bottom:-32px;font-family:var(--ff-d);font-size:11px;
  letter-spacing:.2em;color:rgba(251,250,247,.72)
}

/* ---------- voettekst ------------------------------------------------- */
/* Alles gecentreerd in vier rustige regels, van belangrijk naar bijkomstig:
   naam en adres, bereikbaarheid, pictogrammen, regio, wettelijk, slot. */
.ftr{padding:clamp(30px,4vw,46px) 0 clamp(24px,3vw,34px);border-top:1px solid var(--lijn);text-align:center}
.ftr-in{max-width:var(--mx);margin:0 auto;padding-inline:var(--gut)}
.ftr-adres{
  margin:0;font-family:var(--ff-d);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)
}
.ftr-bereik{
  margin:8px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;
  font-family:var(--ff-d);font-size:14px;letter-spacing:.04em
}
.ftr-bereik a{text-decoration:none;color:var(--brons);border-bottom:1px solid transparent;padding-bottom:1px}
.ftr-bereik a:hover{border-color:var(--cyaan)}

/* ---------- verschijnen ----------------------------------------------- */
.rev{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s ease}
.rev.in{opacity:1;transform:none}

/* ---------- responsief ------------------------------------------------ */
@media(max-width:900px){
  .paar,.paar.om{grid-template-columns:1fr}
  .paar.om .pj:first-child{order:0}
  .pj{margin-bottom:26px}
  .diensten-grid,.team{grid-template-columns:repeat(2,1fr)}
  .pfraster{grid-template-columns:repeat(2,1fr)}
  /* Op een smal scherm gaat het label boven de keuzes staan. Dat vraagt dat
     de rij zelf van kolommen naar rijen wisselt; enkel het label op volle
     breedte zetten duwde de keuzes buiten het scherm. */
  .frij{flex-direction:column;gap:4px}
  .frij-lbl{flex:0 0 auto;padding-top:0;margin-bottom:2px}
  .frij-keuzes{width:100%}
  .pjkop{grid-template-columns:1fr}
  .pjnr{text-align:left;border-left:0;padding-left:0;border-top:1px solid var(--lijn);padding-top:18px}
  .tabel,.beeldraster{grid-template-columns:repeat(2,1fr)}
  .contactgrid{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:17px}
  .nav{gap:12px}
  /* Titel en label onder elkaar. Naast elkaar liep het label — dat niet mag
     afbreken — buiten het scherm. */
  .pj-txt{flex-direction:column;gap:4px;align-items:flex-start}
  .pj-txt span{white-space:normal}
  /* De gemeentelinks onderaan mogen wel afbreken op een smal scherm. */
  .ftr-regio a{white-space:normal}
  .diensten-grid,.team,.pfraster,.tabel,.beeldraster{grid-template-columns:1fr}
  .filterbalk{position:static}
  .lb-sluit{top:-40px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- gemeentepagina's ------------------------------------------- */
.landingkop{
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--brons);padding-top:clamp(20px,3vw,34px);border-top:1px solid var(--lijn)
}
.pfraster.landing{padding-top:clamp(22px,3vw,36px)}
.regiolinks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px}
.regiolinks a{
  font-family:var(--ff-d);font-size:14px;letter-spacing:.06em;text-decoration:none;
  border-bottom:1px solid var(--cyaan);padding-bottom:2px;transition:.2s
}
.regiolinks a:hover{color:var(--brons)}
.ftr-regio{
  max-width:820px;margin:22px auto 0;padding-inline:var(--gut);text-align:center;
  font-family:var(--ff-d);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grijs);line-height:2
}
.ftr-regio a{text-decoration:none;white-space:nowrap}
.ftr-regio a:hover{color:var(--brons)}

.ftr-wettelijk{
  max-width:760px;margin:18px auto 0;padding-inline:var(--gut);text-align:center;
  font-family:var(--ff-d);font-size:11.5px;letter-spacing:.05em;color:var(--grijs);line-height:1.9
}
.ftr-wettelijk:empty{display:none}

.ftr-slot{
  margin:16px auto 0;padding:14px var(--gut) 0;max-width:var(--mx);
  border-top:1px solid var(--lijn);text-align:center;
  font-family:var(--ff-d);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs)
}
.ftr-slot a{text-decoration:none}
.ftr-slot a:hover{color:var(--brons)}

/* ---------- teampagina ------------------------------------------------- */
.teamhint{
  font-family:var(--ff-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--grijs);text-align:center;margin:clamp(30px,5vw,54px) 0 clamp(20px,3vw,30px)
}
/* Twee per rij: met vier naast elkaar worden de cirkels klein en breken de
   functiebenamingen over twee regels. Twee geeft ruim het dubbele oppervlak. */
.teamraster{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(34px,5vw,72px);
  max-width:880px;margin:0 auto;padding-bottom:clamp(24px,4vw,48px)
}
.teamlid{text-align:center}
.teamfoto{
  position:relative;display:block;width:100%;max-width:340px;margin:0 auto;
  aspect-ratio:1/1;border-radius:50%;overflow:hidden;padding:0;
  border:1px solid var(--lijn);background:var(--zand);cursor:default
}
.teamfoto.wisselbaar{cursor:pointer}
.teamfoto.leeg{max-width:340px}
.tf{position:absolute;inset:0;line-height:0;transition:opacity .45s ease;overflow:hidden}
/* De afmeting en de plaats komen uit het beheer, als style-attribuut op het
   beeld zelf. Geen object-fit: dat zou de foto binnen het beeld al bijsnijden
   en dan levert verschuiven leegte op. */
.tf img{position:absolute;max-width:none;object-fit:fill}
.tf-nu{opacity:0}

/* De twee foto's vloeien over elkaar, met een klein schaalverschil zodat de
   overgang niet als een harde wissel aanvoelt. Op een aanraakscherm bestaat
   hover niet; daar zorgt een tik voor de klasse toon-nu. */
.tf{transition:opacity 1.1s cubic-bezier(.4,0,.2,1),transform 1.6s cubic-bezier(.4,0,.2,1)}
.tf-jong{transform:scale(1)}
.tf-nu{transform:scale(1.04)}
.teamfoto.wisselbaar:hover .tf-jong,
.teamfoto.wisselbaar:focus-visible .tf-jong,
.teamfoto.toon-nu .tf-jong{opacity:0;transform:scale(1.04)}
.teamfoto.wisselbaar:hover .tf-nu,
.teamfoto.wisselbaar:focus-visible .tf-nu,
.teamfoto.toon-nu .tf-nu{opacity:1;transform:scale(1)}
.teamlid h3{
  font-size:clamp(18px,1.7vw,21px);letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;margin-top:22px
}
.teamfunctie{
  font-family:var(--ff-d);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brons);margin:6px auto 0;
  /* geen breedtebeperking: die deed lange functiebenamingen afbreken vlak voor
     het haakje. Moet er toch gebroken worden, dan verdeelt de browser de
     regels evenwichtig in plaats van één woord alleen te laten. */
  text-wrap:balance
}
.teamtekst{font-size:16px;color:var(--grijs);margin:12px auto 0;max-width:34ch}
@media(max-width:560px){
  .teamraster{grid-template-columns:1fr;gap:clamp(28px,7vw,44px)}
  .teamfoto,.teamfoto.leeg{max-width:280px}
}
@media(prefers-reduced-motion:reduce){ .tf{transition:none;transform:none!important} }

/* contactgegevens onder een teamlid, enkel wat ingevuld is */
.teamcontact{
  margin:12px 0 0;display:flex;flex-direction:column;gap:3px;align-items:center;
  font-family:var(--ff-d);font-size:13px;letter-spacing:.03em
}
.teamcontact a{text-decoration:none;color:var(--grijs);transition:color .2s}
.teamcontact a:hover{color:var(--brons);border-bottom:1px solid var(--cyaan)}

/* ---------- vragen en antwoorden --------------------------------------- */
.vragen{padding:clamp(34px,5vw,64px) 0 clamp(40px,6vw,80px);border-top:1px solid var(--lijn)}
.vragenkop{
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:var(--brons);margin:0 0 8px
}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{
  font-family:var(--ff-d);font-weight:400;font-size:clamp(16px,1.6vw,18.5px);
  letter-spacing:.02em;padding:18px 34px 18px 0;cursor:pointer;position:relative;
  list-style:none;transition:color .2s
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--brons)}
.vraag summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1px solid var(--brons);border-bottom:1px solid var(--brons);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease
}
.vraag[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.vraag .antwoord{padding:0 0 20px;color:var(--grijs)}
.vraag .antwoord p{margin:0 0 14px}
.vraag .antwoord p:last-child{margin-bottom:0}
.vraag .antwoord ul{margin:0 0 14px;padding-left:20px}
.vraag .antwoord h2{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brons);
  margin:14px 0 8px
}
@media(prefers-reduced-motion:reduce){ .vraag summary::after{transition:none} }

/* ---------- verwijzing naar de gemeentepagina -------------------------- */
.meergemeente{
  border-top:1px solid var(--lijn);padding-top:22px;margin:0 0 clamp(20px,4vw,40px);
  font-size:16px;color:var(--grijs)
}
.meergemeente a{color:var(--brons);text-decoration:none;border-bottom:1px solid var(--cyaan)}

@media(max-width:860px){
  /* Op een smal scherm klapt het menu onder de band open. */
  .hdr-in{flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
  .navknop{display:inline-flex}
  .hdr-rechts{
    order:3;width:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:0
  }
  .nav{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    margin-top:14px;border-top:1px solid var(--lijn)
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;text-align:center;border-bottom:1px solid rgba(220,213,198,.6)}
  .kopbellen{margin-top:14px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){ .navknop span{transition:none} }

/* ---------- sociale profielen in de voettekst -------------------------- */
.ftr-socials{
  max-width:var(--mx);margin:20px auto 0;padding-inline:var(--gut);
  display:flex;justify-content:center;gap:14px
}
.ftr-socials a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--grijs);border:1px solid var(--lijn);transition:.25s
}
.ftr-socials a:hover{color:var(--wit);background:var(--brons);border-color:var(--brons)}
.ftr-socials a:focus-visible{outline:2px solid var(--cyaan);outline-offset:2px}
.ftr-socials svg{display:block}

/* ---------- kengetallen bij een project -------------------------------- */
/* Grote getallen op haarlijnen. Bewust geen kaders of kleurvlakken: de cijfers
   moeten opvallen, niet de omlijsting. */
.kengetallen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  margin-bottom:clamp(40px,6vw,80px)
}
.kengetal{padding:clamp(22px,3vw,34px) clamp(14px,2vw,26px);border-left:1px solid var(--lijn)}
.kengetal:first-child{border-left:0;padding-left:0}
.kengetal b{
  display:block;font-family:var(--ff-d);font-weight:300;
  font-size:clamp(28px,3.6vw,44px);line-height:1;letter-spacing:-.01em;color:var(--ink)
}
.kengetal span{
  display:block;margin-top:9px;font-family:var(--ff-d);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)
}
@media(max-width:560px){
  .kengetallen{grid-template-columns:1fr 1fr}
  .kengetal{border-left:0;border-top:1px solid var(--lijn);padding-inline:0}
  .kengetal:nth-child(2n){padding-left:18px;border-left:1px solid var(--lijn)}
  .kengetal:first-child,.kengetal:nth-child(2){border-top:0}
}

/* ---------- voor en na ------------------------------------------------- */
.vergelijk-blok{margin-bottom:clamp(40px,6vw,80px)}
.vergelijk{
  position:relative;overflow:hidden;background:var(--zand);margin-top:14px;
  --p:50%;touch-action:pan-y
}
.vergelijk>div{position:absolute;inset:0;line-height:0}
.vergelijk img{width:100%;height:100%;object-fit:cover}
/* de foto van voor wordt weggeklipt tot aan de schuifbalk */
.vgl-voor{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vgl-schuif{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;appearance:none;background:none;z-index:3
}
.vgl-schuif:focus-visible+.vgl-greep{outline:2px solid var(--cyaan);outline-offset:3px}
.vgl-greep{
  position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:rgba(251,250,247,.9);
  transform:translateX(-1px);z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center
}
.vgl-greep i{
  position:absolute;width:42px;height:42px;border-radius:50%;
  background:rgba(251,250,247,.94);box-shadow:0 2px 14px rgba(20,18,14,.28)
}
.vgl-greep i:last-child{
  width:0;height:0;background:none;box-shadow:none;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:6px solid var(--ink);border-right:6px solid var(--ink);
  transform:scaleX(1.6)
}
.vgl-lbl{
  position:absolute;bottom:14px;z-index:2;pointer-events:none;
  font-family:var(--ff-d);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(20,18,14,.62);color:#fff;padding:5px 12px;border-radius:999px
}
.vgl-lbl-voor{left:14px}
.vgl-lbl-na{right:14px}
.hint-onder{
  margin-top:12px;font-family:var(--ff-d);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grijs);text-align:center
}

/* ---------- plannen ---------------------------------------------------- */
.plannen-blok{margin-bottom:clamp(40px,6vw,80px)}
.plannen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2.4vw,30px);margin-top:14px
}
.plan{
  display:block;padding:0;border:1px solid var(--lijn);background:#fff;
  cursor:zoom-in;text-align:left;transition:border-color .25s
}
.plan:hover{border-color:var(--brons)}
.plan img{width:100%;height:auto;display:block;background:#fff}
.plan span{
  display:block;padding:12px 16px;border-top:1px solid var(--lijn);
  font-family:var(--ff-d);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grijs)
}
@media(prefers-reduced-motion:reduce){ .plan{transition:none} }

/* de opsplitsing onder een kengetal */
.kengetal em{
  display:block;margin-top:5px;font-style:normal;font-family:var(--ff-d);
  font-size:11px;letter-spacing:.06em;color:var(--grijs);opacity:.85
}

/* ---------- getuigenissen ---------------------------------------------- */
/* Eén citaat, groot gezet in de serif. Geen sterretjes, geen kaders, geen
   portretfoto: één zin die je gelooft werkt beter dan een wand vol lof. */
.getuigenis{
  padding:clamp(44px,7vw,96px) 0;border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn);text-align:center
}
.getuigenis.bij-project{margin-bottom:clamp(30px,5vw,60px)}
.getuigenis blockquote{max-width:760px;margin:0 auto;position:relative}
.getuigenis blockquote p{
  font-family:var(--ff-b);font-size:clamp(20px,2.6vw,30px);line-height:1.5;
  font-weight:300;color:var(--ink);font-style:italic;text-wrap:pretty
}
.getuigenis blockquote p::before{content:'\201C'}
.getuigenis blockquote p::after{content:'\201D'}
.getuigenis cite{
  display:block;margin-top:clamp(18px,2.6vw,28px);font-style:normal;
  font-family:var(--ff-d);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brons)
}
.getuigenis-meer{margin-top:22px}
.getuigenis-meer a{
  font-family:var(--ff-d);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grijs);text-decoration:none;border-bottom:1px solid var(--lijn);
  padding-bottom:3px;transition:.2s
}
.getuigenis-meer a:hover{color:var(--brons);border-color:var(--cyaan)}

/* ---------- filmpje als hero ------------------------------------------- */
/* Het filmpje ligt boven de foto en wordt pas zichtbaar zodra het speelt.
   Laadt het niet, of is beweging uitgezet, dan blijft de foto gewoon staan. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;pointer-events:none;z-index:1
}
.hero-video.speelt{opacity:1}
.hero-cap{z-index:2}
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
}