/* ============ Mulder Loodgieterservice: gedeelde stijl voor subpagina's ============ */
:root{
  --navy:#0B1D33; --navy-2:#102A4A; --red:#E63946; --red-d:#C92937;
  --off:#F5F7FA; --ink:#16243A; --muted:#5E6B7E; --muted-l:#9FB0C6;
  --line:#E6EAF1; --r:18px; --pad:clamp(1.25rem,4vw,4rem);
  --font:'Manrope',system-ui,sans-serif;
  --shadow:0 24px 60px -24px rgba(11,29,51,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
/* de header is nu hoger, dus ankerlinks moeten daar rekening mee houden */
html{scroll-behavior:smooth;scroll-padding-top:132px}
@media (max-width:760px){html{scroll-padding-top:110px}}
body{background:#fff;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#fff}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}
.inner{max-width:1200px;margin-inline:auto;padding-inline:var(--pad)}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ============ NAV: dikke, gelaagde header ============ */
/* De header is twee lagen: een donkere infobalk met wat iemand met spoed direct wil weten,
   en daaronder de eigenlijke balk met een fors logo, het menu en het telefoonnummer.
   Samen geeft dat de header gewicht zonder dat hij druk wordt. */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:box-shadow .35s,background .35s;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 -1px 0 rgba(11,29,51,.09)}
.nav--solid{background:rgba(255,255,255,.97);
  box-shadow:inset 0 -1px 0 rgba(11,29,51,.09),0 20px 44px -32px rgba(11,29,51,.8)}

/* ---- infobalk ---- */
.nav__top{background:var(--navy);color:#A7BBD3;font-size:.78rem;font-weight:600}
.nav__top__in{max-width:1200px;margin-inline:auto;padding:.55rem var(--pad);
  display:flex;align-items:center;gap:1.6rem}
.nav__top b{color:#fff;font-weight:800}
.nav__top .dot{width:7px;height:7px;border-radius:50%;background:#3DDC84;display:inline-block;
  box-shadow:0 0 9px #3DDC84;margin-right:.5rem;animation:pulse 2s infinite}
.nav__top .push{margin-left:auto}
.nav__top a{transition:color .25s}
.nav__top a:hover{color:#fff}

/* ---- hoofdbalk ---- */
.nav__in{max-width:1200px;margin-inline:auto;padding:1.05rem var(--pad);display:flex;
  align-items:center;justify-content:space-between;gap:1.2rem}
.logo{display:inline-flex;align-items:center;gap:.72rem}
.logo svg{width:46px;height:46px;flex:none}
.logo__txt{display:block;line-height:1}
.logo b{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;color:var(--navy);display:block}
.logo b i{font-style:normal;color:var(--red)}
.logo small{display:block;font-size:.6rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-top:.22rem}

.nav__links{display:flex;align-items:center;gap:1.35rem;font-size:.88rem;font-weight:700;color:var(--muted)}
/* nooit afbreken: een menu-item over twee regels maakt de hele balk scheef */
.nav__links>a,.has-drop>a{position:relative;padding:.4rem 0;white-space:nowrap;transition:color .25s}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--navy)}
/* een lijntje dat onder het woord uitgroeit leest rustiger dan een kleurwissel alleen */
.nav__links>a::before,.has-drop>a::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.nav__links>a:hover::before,.has-drop:hover>a::before,
.nav__links>a[aria-current]::before,.has-drop>a[aria-current]::before{transform:scaleX(1)}

/* ---- dropdown (diensten / werkgebieden) ---- */
.has-drop{position:relative}
.has-drop>a{display:inline-flex;align-items:center;gap:.34rem}
.has-drop>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-top:-3px}
.has-drop:hover>a::after,.has-drop:focus-within>a::after{transform:rotate(225deg);margin-top:3px}
.nav__drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s}
.has-drop:hover .nav__drop,.has-drop:focus-within .nav__drop{opacity:1;visibility:visible;pointer-events:auto}
.nav__drop__card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:.7rem;display:grid;grid-template-columns:repeat(2,minmax(168px,1fr));gap:.1rem;min-width:360px}
.nav__drop a{display:block;padding:.55rem .75rem;border-radius:10px;font-weight:600;font-size:.85rem;
  color:var(--ink);white-space:nowrap}
.nav__drop a:hover{background:var(--off);color:var(--red)}
/* Diensten. Negen stuks, dus drie kolommen van drie: dat vult netjes en er blijft
   ruimte over in de breedte. De kolommen groeien mee met de langste naam
   (Vloerverwarming & Powerflush), zodat die niet meer tegen de rand van het
   kaartje aan loopt. */
.nav__drop__card--d{grid-template-columns:repeat(3,auto);min-width:0}

/* Werkgebieden. Achttien plaatsen passen niet fatsoenlijk in twee kolommen, dus
   drie kolommen met een kopje boven elke groep. De kopjes lopen over de hele
   breedte, zodat je in een oogopslag ziet waar de steden ophouden. */
.nav__drop__card--wg{grid-template-columns:repeat(3,minmax(200px,1fr));min-width:660px}
.nav__drop__card--wg a{white-space:normal;line-height:1.25}
.nav__drop__kop{grid-column:1/-1;margin:.5rem .75rem .15rem;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l)}
.nav__drop__card--wg>.nav__drop__kop:first-child{margin-top:.15rem}
.nav__drop__all{grid-column:1/-1;margin-top:.25rem;border-top:1px solid var(--line);
  padding-top:.6rem !important;color:var(--red) !important}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

.nav__right{display:flex;align-items:center;gap:1.1rem}
.nav__badge{font-size:.79rem;font-weight:700;color:var(--muted);white-space:nowrap}
@media (max-width:1320px){.nav__badge{display:none}}
.nav__badge b{color:var(--navy)}

/* ---- hamburger + uitschuifmenu ---- */
.nav__burger{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);
  background:#fff;cursor:pointer;padding:0;transition:background .25s,border-color .25s;
  /* flex met align-content, geen grid: bij grid rekken de rijen op en komen de
     twee streepjes in de kruisstand niet op elkaar uit */
  flex-direction:column;align-items:center;justify-content:center}
.nav__burger:hover{background:var(--off);border-color:#D6DEEA}
.nav__burger i{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .18s}
.nav__burger i+i{margin-top:5px}
.nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__mob{display:none;background:#fff;border-top:1px solid var(--line);
  max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1)}
.nav__mob.open{max-height:calc(100svh - 96px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav__mob__in{padding:.6rem var(--pad) 1.8rem}
.nav__mob a{display:block;padding:.9rem .1rem;font-weight:800;font-size:1.02rem;color:var(--ink);
  border-bottom:1px solid var(--line)}
.nav__mob .sub{padding:.35rem 0 .7rem .9rem;border-left:2px solid var(--line);margin:.2rem 0 .5rem}
.nav__mob .sub a{padding:.5rem .1rem;font-size:.9rem;font-weight:600;color:var(--muted);border:0}
.nav__mob .sub__kop{display:block;padding:.6rem .1rem .15rem;font-size:.66rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l)}
.nav__mob .mfoot{margin-top:1.2rem;padding:1.1rem;background:var(--off);border:1px solid var(--line);border-radius:16px;display:grid;gap:.6rem}
.nav__mob .mfoot .btn{justify-content:center;padding:.95rem 1.4rem;font-size:.95rem;border-radius:12px}
.nav__mob .mfoot small{color:var(--muted);font-size:.8rem;text-align:center}
@media (prefers-reduced-motion:reduce){.nav__mob{transition:none}.nav__burger i{transition:none}}

/* De menubalk telde te veel losse onderdelen om op elke breedte binnen de 1200px
   te passen, waardoor de WhatsApp-knop rechts buiten beeld viel. De balk mag nu
   krimpen en onderdelen vallen in de juiste volgorde weg. */
.nav__in{flex-wrap:nowrap}
.logo{flex:0 0 auto}
.nav__links{flex:0 0 auto;justify-content:center;flex-wrap:nowrap}
.nav__right{flex:0 0 auto}
@media (max-width:1440px){.nav__badge{display:none}}
/* Boven 1440px past het beoordelingscijfer er weer bij, maar alleen als de balk
   zelf ook wat breder mag worden. Anders viel de WhatsApp-knop buiten beeld. */
@media (min-width:1441px){.nav__in,.nav__top__in{max-width:1400px}}
@media (max-width:1240px){
  .nav__links{gap:1.05rem;font-size:.85rem}
  .nav__in{gap:.9rem}
  .nav__right{gap:.7rem}
}
@media (max-width:1120px){
  .nav__links{gap:.85rem;font-size:.82rem}
}
@media (max-width:1080px){.nav__links{display:none}.nav__burger{display:flex}.nav__mob{display:block}}
@media (max-width:760px){
  .nav__top__in{gap:1rem;font-size:.72rem;justify-content:center;padding:.48rem var(--pad)}
  .nav__top .hide-sm{display:none}
  .nav__top .push{margin-left:0}
  .nav__in{padding:.8rem var(--pad)}
  .logo svg{width:42px;height:42px}
  .logo b{font-size:1.3rem}
  .logo small{font-size:.57rem;letter-spacing:.13em}
  .nav__right{gap:.6rem}
  .nav__badge{display:none}
  .nav__right .btn--sm{padding:.66rem 1rem;font-size:.79rem}
  .nav__burger{width:44px;height:44px;border-radius:12px}
}
@media (max-width:400px){
  .logo b{font-size:1.18rem}
  .logo small{font-size:.52rem}
  .nav__right .btn--sm{padding:.62rem .8rem;font-size:.72rem;gap:.42rem}
}

/* ---- knoppen ---- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.7rem;border-radius:99px;
  font-weight:800;font-size:.92rem;transition:transform .25s,background .25s;white-space:nowrap;cursor:pointer;border:0}
.btn:hover{transform:translateY(-2px)}
.btn--red{background:var(--red);color:#fff;box-shadow:0 14px 30px -12px rgba(230,57,70,.55)}
.btn--red:hover{background:var(--red-d)}
.btn--ghost{border:1.5px solid rgba(255,255,255,.35);color:#fff;background:none}
.btn--ghost:hover{border-color:#fff}
.btn--sm{padding:.65rem 1.25rem;font-size:.82rem}
.btn__dot{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 10px #3DDC84;
  animation:pulse 2s infinite;flex:none}
@keyframes pulse{50%{opacity:.35}}
/* WhatsApp. Eigen kleur, zodat een bezoeker meteen ziet dat dit iets anders is dan bellen.
   Het logo staat als svg in de pagina zelf, dus er wordt niets van een andere website
   opgehaald: dat blokkeert de hosting namelijk. */
.btn--wa{background:#25D366;color:#06301A;box-shadow:0 14px 30px -12px rgba(37,211,102,.5)}
.btn--wa:hover{background:#1FBF5B;color:#06301A}
.btn__wa{width:1.15em;height:1.15em;flex:none;fill:currentColor;display:block}
.foot .fwa{margin-bottom:.9rem}
@media (max-width:900px){.nav__wa{display:none}}

/* ---- pagina-hero ---- */
.phero{position:relative;background:radial-gradient(120% 120% at 80% 0%,var(--navy-2),var(--navy) 70%);
  color:#fff;padding:9rem 0 4rem;overflow:hidden}
.phero__img{position:absolute;inset:0;opacity:.22}
.phero__img img{width:100%;height:100%;object-fit:cover}
.phero__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--navy) 15%,rgba(11,29,51,.5))}
.phero .inner{position:relative}
.crumbs{font-size:.78rem;font-weight:600;color:var(--muted-l);margin-bottom:1.2rem}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;margin:0 .5rem;color:rgba(255,255,255,.3)}
.phero h1{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.06;max-width:18ch}
.phero p{margin-top:1rem;max-width:52ch;color:#C9D6E6;font-size:1.05rem}
.phero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}

/* ---- usp-strip ---- */
.usps{background:var(--navy);border-top:1px solid rgba(255,255,255,.08)}
.usps .inner{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding-top:1rem;padding-bottom:1rem}
.usps span{color:var(--muted-l);font-size:.82rem;font-weight:600}
.usps b{color:#fff}
.usps span::before{content:"✓";color:var(--red);font-weight:800;margin-right:.5rem}

/* ---- secties: elke sectie is een eigen, herkenbare module ---- */
main{counter-reset:secnum}
.sec{position:relative;counter-increment:secnum;padding:clamp(4rem,9vh,7rem) 0;
  overflow:hidden;border-top:1px solid var(--line)}
.sec--off{background:
    radial-gradient(58% 85% at 92% 0%, rgba(230,57,70,.055), transparent 60%),
    radial-gradient(46% 60% at 2% 100%, rgba(11,29,51,.05), transparent 65%),
    var(--off)}
/* rustige lichtblauwe sectie; het millimeterpapier-raster is er op verzoek van de klant af */
.sec--blueprint{border-top-color:#DDE5EF;background:
    radial-gradient(64% 58% at 12% 0%, rgba(230,57,70,.055), transparent 62%),
    radial-gradient(50% 50% at 96% 100%, rgba(11,29,51,.07), transparent 64%),
    #EDF2F8}
.sec--blueprint::before{color:var(--navy);opacity:.06}
.sec::before{content:counter(secnum,decimal-leading-zero);position:absolute;top:-.35em;right:clamp(1rem,3.4vw,3.2rem);
  font-size:clamp(5.5rem,12vw,10rem);font-weight:800;line-height:1;letter-spacing:-.04em;
  color:var(--navy);opacity:.045;pointer-events:none;z-index:0}
.sec>.inner{position:relative;z-index:1}
.kicker{position:relative;display:inline-flex;align-items:center;font-size:.75rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.9rem}
.h2{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  color:var(--navy);margin-bottom:1.6rem;max-width:26ch}
.lead{color:var(--muted);max-width:62ch;margin-bottom:1.4rem}
.lead strong{color:var(--ink)}

/* ---- kaarten ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.6rem;
  box-shadow:0 16px 36px -28px rgba(11,29,51,.25);transition:transform .3s,box-shadow .3s}

.card h3{font-size:1.05rem;font-weight:800;color:var(--navy);margin-bottom:.4rem}
.card p{font-size:.9rem;color:var(--muted)}
.card--link{display:block}
.card--link h3::after{content:" →";color:var(--red)}

/* ---- stadsblokken op de dienstpagina's ----
   Onderaan een dienstpagina stond alleen een rij plaatsnamen. Nu staat er per stad een
   kort stukje tekst. De blokken zijn bewust wat rustiger dan de gewone kaarten: geen
   zware schaduw, wel een rood streepje links dat bij hover meeloopt, zodat het blok
   duidelijk aanklikbaar is zonder dat het de rest van de pagina overschreeuwt. */
.steden{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.05rem}
.steden__i{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.4rem 1.5rem 1.25rem;overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s}
.steden__i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--red);transform:scaleY(.28);transform-origin:top;
  transition:transform .35s ease}
.steden__i:hover{border-color:#D9E1EC;
  box-shadow:0 18px 40px -30px rgba(11,29,51,.4)}
.steden__i:hover::before{transform:scaleY(1)}
.steden__i h3{font-size:1rem;font-weight:800;color:var(--navy);margin-bottom:.45rem}
.steden__i p{font-size:.9rem;line-height:1.65;color:var(--muted);margin-bottom:.85rem}
.steden__l{display:inline-block;font-size:.84rem;font-weight:700;color:var(--red)}
.steden__l:hover{color:var(--red-d);text-decoration:underline}
@media (max-width:560px){.steden__i{padding:1.2rem 1.25rem 1.1rem}}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{background:var(--off);border:1px solid var(--line);border-radius:99px;
  padding:.45rem 1rem;font-size:.84rem;font-weight:600;color:var(--ink)}
a.chip:hover{border-color:var(--red);color:var(--red)}
/* de laatste chip verwijst naar de volledige lijst, die mag opvallen */
.chip--all{background:#fff;border-color:var(--red);color:var(--red);font-weight:800}

/* Rijtje buurplaatsen op de werkgebiedenpagina. Geen grote kaarten met foto's,
   want het zijn er tien: een compacte lijst leest hier prettiger. */
.plaatsen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.plaats{display:flex;align-items:baseline;gap:.6rem;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:.85rem 1rem;transition:border-color .25s,transform .25s,box-shadow .25s}
a.plaats:hover{border-color:var(--red);transform:translateY(-2px);
  box-shadow:0 16px 34px -22px rgba(11,29,51,.6)}
.plaats b{font-weight:800;color:var(--navy);font-size:.98rem}
.plaats span{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--muted-l);white-space:nowrap}

/* ---- extra diensten: groepen met een opsomming eronder ---- */
/* Bewust geen kaarten met schaduw en foto: het zijn er negen met elk zes regels,
   dan wordt de pagina een etalage. Een dun lijntje links geeft genoeg structuur. */
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2rem}
@media (max-width:1000px){.xgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.xgrid{grid-template-columns:1fr;gap:1.4rem}}
.xcard{border-left:3px solid var(--red);padding-left:1.1rem}
.xcard h3{font-size:1.02rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.xcard__b{color:var(--muted);font-size:.88rem;margin:.25rem 0 .7rem}
.xcard ul{display:grid;gap:.35rem}
.xcard li{position:relative;padding-left:1.1rem;font-size:.88rem;color:var(--ink);line-height:1.5}
.xcard li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--red);font-weight:800;font-size:.82rem}

/* ---- stappen ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem 1.5rem;box-shadow:0 16px 36px -28px rgba(11,29,51,.25)}
.step b{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--red);color:#fff;font-size:.9rem;margin-bottom:.8rem}
.step h3{font-size:.98rem;font-weight:800;color:var(--navy);margin-bottom:.3rem}
.step p{font-size:.85rem;color:var(--muted)}
.sec--blueprint .step{border-color:#D8E2EE;box-shadow:0 20px 42px -30px rgba(11,29,51,.4)}
.sec--blueprint .card,.sec--blueprint .chip{border-color:#D8E2EE}

/* ---- prijzen ---- */
.ptable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;font-size:.95rem;box-shadow:0 20px 44px -30px rgba(11,29,51,.3)}
.ptable th,.ptable td{padding:.9rem 1.2rem;text-align:left;border-bottom:1px solid var(--line)}
.ptable th{background:var(--navy);color:#fff;font-weight:700;font-size:.85rem}
.ptable tr:last-child td{border-bottom:0}
.ptable td:last-child{font-weight:800;color:var(--navy);white-space:nowrap}
.pnote{font-size:.82rem;color:var(--muted);margin-top:.8rem}

/* ---- prijzen als kaarten ----
   Een tabel leest als een factuur. Losse vlakken lezen als een menukaart: je oog springt
   van prijs naar prijs en elke klus staat op zichzelf. Elk vlak heeft een eigen voetje
   in een lichte tint, zodat de kaart diepte houdt en de pagina niet plat oogt. */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1rem}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:0 16px 36px -28px rgba(11,29,51,.25);
  transition:transform .3s,box-shadow .3s,border-color .3s}

.pcard__lab{flex:1;padding:1.25rem 1.3rem 1rem;font-size:.9rem;font-weight:700;
  color:var(--ink);line-height:1.45}
.pcard__pr{padding:.85rem 1.3rem 1rem;background:var(--off);border-top:1px solid var(--line);
  font-size:1.45rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.15}
.pcard__pr small{display:block;font-size:.7rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin-top:.28rem}
.pcard--hi .pcard__pr{background:var(--navy);border-top-color:var(--navy);color:#fff}
.pcard--hi .pcard__pr small{color:var(--muted-l)}
.pcard--soft .pcard__pr{font-size:1.1rem;color:var(--red)}
.sec--blueprint .pcard{border-color:#D8E2EE}

/* ---- voorwaarden en uitleg in vlakken ----
   De kleine lettertjes (excl. btw, meerwerk, betaling, garantie) verdwijnen als je ze
   onder een tabel plakt. In een eigen vlak met een kop erboven leest iedereen ze wél. */
.pnotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem;
  margin-top:1.4rem}
.pnote-c{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.25rem;
  font-size:.86rem;color:var(--muted);line-height:1.55;
  box-shadow:0 14px 32px -30px rgba(11,29,51,.3)}
.pnote-c b{display:block;color:var(--navy);font-weight:800;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:.4rem}
.sec--off .pnote-c,.sec--off .pcard{background:#fff}
@media (max-width:560px){
  .pcards{grid-template-columns:1fr 1fr;gap:.75rem}
  .pcard__lab{padding:1rem 1rem .85rem;font-size:.83rem}
  .pcard__pr{padding:.7rem 1rem .85rem;font-size:1.2rem}
  .pnotes{grid-template-columns:1fr}
}

/* ---- faq ---- */
.faq{display:grid;gap:.7rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0;
  box-shadow:0 14px 32px -28px rgba(11,29,51,.25)}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);padding:1.05rem 1.3rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
/* Het plusje draait een kwartslag als de vraag opengaat. Dat leest als een min,
   maar er staat geen streepje in de tekst: de klant wil nergens losse streepjes. */
.faq summary::after{content:"+";color:var(--red);font-weight:800;font-size:1.1rem;
  transition:transform .25s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.3rem 1.1rem;color:var(--muted);font-size:.92rem}

/* ---- cta-band ---- */
.cta{border-radius:calc(var(--r) + 6px);position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 160% at 85% 0%,var(--navy-2),var(--navy));
  padding:clamp(2rem,4.5vw,3.2rem);display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta h3{font-size:clamp(1.3rem,2.8vw,2rem);font-weight:800;letter-spacing:-.02em;line-height:1.12}
.cta p{color:var(--muted-l);margin-top:.4rem;max-width:44ch}
.cta::before{content:"";position:absolute;right:-70px;top:-130px;width:320px;height:320px;
  border-radius:50%;border:2px solid rgba(230,57,70,.28)}
.cta>*{position:relative}

/* ---- formulier ---- */
.cform{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.2rem);display:grid;gap:1rem;box-shadow:var(--shadow)}
/* melding in het formulier: succes (groen) en mislukt (rood), zonder herladen */
.cform__ok{background:#E8F8EE;border:1px solid #9ADFB6;color:#186A3B;border-radius:12px;
  padding:1rem 1.2rem;font-size:.95rem;line-height:1.55}
.cform__fout{background:#FDECEC;border:1px solid #F2B4B9;color:#8E1F28;border-radius:12px;
  padding:.85rem 1.1rem;font-size:.9rem;line-height:1.55;margin-bottom:.9rem}
.cform label{font-size:.8rem;font-weight:800;color:var(--navy);display:grid;gap:.4rem}
.cform input,.cform select,.cform textarea{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:12px;font:inherit;font-size:.95rem;color:var(--ink);background:var(--off);outline:none;
  transition:border-color .25s}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--red);background:#fff}
.cform textarea{min-height:110px;resize:vertical}
.hp{position:absolute !important;left:-9999px;opacity:0;height:0;width:0;padding:0;border:0}

/* ---- footer ---- */
.foot{background:var(--navy);color:#fff;padding:3.5rem 0 1.8rem;margin-top:clamp(3rem,7vh,5rem)}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;
  padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot h4{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-l);margin-bottom:.9rem}
.foot ul{display:grid;gap:.45rem;font-size:.88rem;color:var(--muted-l)}
.foot ul a:hover{color:#fff}
.foot .ftel{font-size:1.4rem;font-weight:800;color:#fff;display:inline-block;margin:.4rem 0 .6rem}
.foot .ftel:hover{color:var(--red)}
.keur{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem;padding-top:1.9rem;
  border-top:1px solid rgba(255,255,255,.12)}
.keur__i{display:flex;align-items:center;gap:.7rem;font-size:.78rem;line-height:1.35;color:#B9C9DD}
.keur__i b{display:block;color:#fff;font-size:.84rem;font-weight:800;margin-bottom:.1rem}
.keur__i svg{width:30px;height:30px;flex:none;fill:none;stroke:#E63946;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.keur__i svg .k{stroke:#fff}
.keur__b{flex:none;display:grid;place-items:center;width:38px;height:26px;border-radius:5px;
  background:#1D6FB8;color:#fff;font-weight:800;font-size:.68rem;letter-spacing:.06em}
.keur__uren{margin-top:.7rem;font-size:.8rem}
.keur__uren i{font-style:normal;color:#fff;font-weight:700}
@media (max-width:900px){.keur{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.keur{grid-template-columns:1fr}}
.foot__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.4rem;font-size:.78rem;color:var(--muted-l)}

/* ---- werkwijze: de uitleg van de oude site ----
   Drie blokken tekst naast de stappen. In een eigen vlak met een kop leest het als
   een uitleg in plaats van als een lap tekst onder een kopje. Het cijfer op de
   achtergrond geeft het vlak diepte zodat deze sectie niet plat oogt. */
.wcopy{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;
  margin-top:1.6rem}
.wcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:1.4rem 1.45rem;overflow:hidden;
  box-shadow:0 16px 36px -30px rgba(11,29,51,.35);
  transition:transform .3s,box-shadow .3s,border-color .3s}

.wcard h3{position:relative;font-size:.95rem;font-weight:800;color:var(--navy);
  letter-spacing:-.01em;margin-bottom:.5rem}
.wcard p{position:relative;font-size:.9rem;color:var(--muted);line-height:1.65}
.wcard b{color:var(--ink);font-weight:700}
.wcard::after{content:attr(data-n);position:absolute;right:.5rem;bottom:-1.1rem;
  font-size:5.2rem;font-weight:800;color:var(--navy);opacity:.05;line-height:1;
  pointer-events:none}
@media (max-width:560px){
  .wcopy{grid-template-columns:1fr}
  .wcard{padding:1.15rem 1.2rem}
}

/* ==================================================================
   NIEUWE COMPONENTEN
   Fotohero's, fotokaarten, reviews, genummerde rasters, prijskaarten
   en juridische tekstpagina's. Elke sectie krijgt een eigen gezicht,
   zodat de pagina's niet als een lange platte lap tekst lezen.
   ================================================================== */

/* ---- fotohero: de foto is nu het onderwerp, niet een wasje ---- */
.phero--photo{padding:11rem 0 4.5rem;min-height:min(78vh,680px);display:flex;align-items:flex-end}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.phero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,29,51,.94) 8%,rgba(11,29,51,.78) 42%,rgba(11,29,51,.42) 100%),
             linear-gradient(0deg,rgba(11,29,51,.85),transparent 55%)}
.phero--photo .inner{position:relative;z-index:1;width:100%}
.phero--photo h1{max-width:20ch;text-shadow:0 4px 30px rgba(11,29,51,.5)}
.phero--photo p{color:#D6E1EE;max-width:58ch}
.hbadges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.hbadges span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:99px;padding:.36rem .9rem;font-size:.76rem;font-weight:700;color:#fff}
@media (max-width:760px){
  .phero--photo{padding:9rem 0 3rem;min-height:0}
  .phero__bg img{object-position:center 35%}
}

/* ---- de oranje/rode aankondigingsbalk onder de hero ---- */
.hbanner{background:var(--red);color:#fff}
.hbanner .inner{padding-top:.72rem;padding-bottom:.72rem;font-size:.84rem;font-weight:700;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hbanner__dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;
  animation:pulse 2s infinite}

/* ---- sectievarianten ---- */
.sec--tight{padding:clamp(2.2rem,5vh,3.4rem) 0}
.sec--tight::before{display:none}
.sec--navy{border-top-color:rgba(255,255,255,.08);
  background:radial-gradient(120% 130% at 88% 0%,var(--navy-2),var(--navy) 72%);color:#fff}
.sec--navy .h2{color:#fff}
.sec--navy .lead{color:var(--muted-l)}
.sec--navy::before{color:#fff;opacity:.05}
.h3sub{font-size:1rem;font-weight:800;color:var(--navy);margin-bottom:.9rem}
.sec--navy .h3sub{color:#fff}
.tlink{color:var(--red);font-weight:800}
.tlink:hover{color:var(--red-d)}
.inner--narrow{max-width:860px}

/* ---- fotokaarten ---- */
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.3rem}
.fcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:0 18px 40px -30px rgba(11,29,51,.35);
  transition:transform .3s,box-shadow .3s,border-color .3s}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D8E2EE}
.fcard__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--off)}
.fcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.fcard:hover .fcard__img img{transform:scale(1.06)}
.fcard__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(11,29,51,.35))}
.fcard__b{padding:1.35rem 1.45rem 1.55rem;flex:1;display:flex;flex-direction:column}
.fcard__b h3{font-size:1.05rem;font-weight:800;color:var(--navy);margin-bottom:.45rem;letter-spacing:-.01em}
.fcard__b p{font-size:.9rem;color:var(--muted);flex:1}
.fcard__go{margin-top:.9rem;font-size:.82rem;font-weight:800;color:var(--red)}
.sec--blueprint .fcard{border-color:#D8E2EE}

/* ---- genummerd raster ---- */
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.nitem{display:flex;gap:1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem 1.5rem;box-shadow:0 16px 36px -30px rgba(11,29,51,.3);
  transition:transform .3s,box-shadow .3s,border-color .3s}

.nitem b{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:14px;
  background:linear-gradient(150deg,var(--red),var(--red-d));color:#fff;font-size:.92rem;font-weight:800}
.nitem h3{font-size:.98rem;font-weight:800;color:var(--navy);margin-bottom:.3rem}
.nitem p{font-size:.88rem;color:var(--muted)}
.sec--blueprint .nitem{border-color:#D8E2EE;box-shadow:0 20px 42px -32px rgba(11,29,51,.45)}

/* ---- vinkjes-raster ---- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.citem{display:flex;gap:.95rem;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:1.25rem 1.35rem;box-shadow:0 14px 34px -30px rgba(11,29,51,.3);
  transition:transform .3s,border-color .3s}

.citem__v{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;
  background:rgba(230,57,70,.1);color:var(--red);font-size:.9rem;font-weight:800}
.citem h3{font-size:.95rem;font-weight:800;color:var(--navy);margin-bottom:.25rem}
.citem p{font-size:.87rem;color:var(--muted)}
.sec--blueprint .citem{border-color:#D8E2EE}

/* ---- reviews ---- */
.revs{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.2rem}
.rev{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:1.6rem 1.7rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .3s,border-color .3s}

.rev__st{color:#FFC542;font-size:.95rem;letter-spacing:.14em;margin-bottom:.9rem}
.rev blockquote{color:#E4ECF5;font-size:.95rem;line-height:1.7}
.rev figcaption{margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:.15rem}
.rev figcaption b{color:#fff;font-weight:800;font-size:.92rem}
.rev figcaption span{color:var(--muted-l);font-size:.8rem;font-weight:600}
/* op een lichte sectie moeten de reviews juist licht zijn */
.sec:not(.sec--navy) .rev{background:#fff;border-color:var(--line);
  box-shadow:0 18px 40px -32px rgba(11,29,51,.35)}
.sec:not(.sec--navy) .rev blockquote{color:var(--ink)}
.sec:not(.sec--navy) .rev figcaption{border-top-color:var(--line)}
.sec:not(.sec--navy) .rev figcaption b{color:var(--navy)}
.sec:not(.sec--navy) .rev figcaption span{color:var(--muted)}

/* ---- cijfers ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.2rem;
  text-align:center;box-shadow:0 16px 36px -30px rgba(11,29,51,.3)}
.stat b{display:block;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--red);
  letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:.4rem;font-size:.8rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em}

/* ---- tekst naast foto ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split--flip .split__t{order:2}
.split__t p{color:var(--muted);margin-bottom:1rem;max-width:56ch}
.split__t p:last-of-type{margin-bottom:0}
.split__img{position:relative;border-radius:calc(var(--r) + 6px);overflow:hidden;
  box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--off)}
.split__img img{width:100%;height:100%;object-fit:cover}
.split__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,transparent 55%,rgba(11,29,51,.28))}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split--flip .split__t{order:0}
  .split__img{aspect-ratio:16/10}
}

/* ---- fotostrook ---- */
.pstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.pstrip__i{aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--off);
  box-shadow:0 16px 36px -32px rgba(11,29,51,.4)}
.pstrip__i img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.pstrip__i:hover img{transform:scale(1.07)}
@media (max-width:700px){.pstrip{grid-template-columns:repeat(2,1fr)}}

/* ---- prijskaarten met opsomming ---- */
.prcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem}
.prcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:1.5rem 1.6rem;box-shadow:0 16px 36px -30px rgba(11,29,51,.3);
  transition:transform .3s,box-shadow .3s,border-color .3s}

.prcard__t{font-size:.95rem;font-weight:800;color:var(--navy);margin-bottom:.55rem}
.prcard__p{font-size:1.85rem;font-weight:800;color:var(--red);letter-spacing:-.03em;line-height:1.05;
  margin-bottom:.8rem}
.prcard__p small{display:block;font-size:.68rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;margin-top:.3rem}
.prcard p{font-size:.88rem;color:var(--muted);flex:1}
.prcard ul{margin-top:.95rem;display:grid;gap:.4rem;border-top:1px solid var(--line);padding-top:.95rem}
.prcard li{font-size:.84rem;color:var(--ink);font-weight:600;padding-left:1.4rem;position:relative}
.prcard li::before{content:"\2713";position:absolute;left:0;color:var(--red);font-weight:800}
.sec--blueprint .prcard{border-color:#D8E2EE}

/* ---- losse notitievlakken ---- */
.ncards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.9rem;margin-top:1.4rem}
.ncard{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:14px;padding:1.1rem 1.25rem;font-size:.88rem;color:var(--muted);line-height:1.6;
  box-shadow:0 14px 32px -32px rgba(11,29,51,.35)}

/* ---- callout ---- */
.callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);
  border-radius:16px;padding:1.4rem 1.6rem;margin-top:1.6rem;
  box-shadow:0 16px 36px -32px rgba(11,29,51,.35)}
.callout b{display:block;font-size:.98rem;font-weight:800;color:var(--navy);margin-bottom:.4rem}
.callout p{font-size:.9rem;color:var(--muted)}

/* ---- missie en visie ---- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:760px){.mv{grid-template-columns:1fr}}
.mv__c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.9rem;
  box-shadow:0 18px 40px -32px rgba(11,29,51,.35)}
.mv__c h3{font-size:1.15rem;font-weight:800;color:var(--navy);margin-bottom:.7rem}
.mv__c p{font-size:.92rem;color:var(--muted);margin-bottom:.8rem}
.mv__c p:last-child{margin-bottom:0}

/* ---- contactkanalen ---- */
.kanalen{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.kanaal{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.6rem;
  box-shadow:0 16px 36px -30px rgba(11,29,51,.3);transition:transform .3s,border-color .3s}

.kanaal h3{font-size:.98rem;font-weight:800;color:var(--navy);margin-bottom:.35rem}
.kanaal__v{font-size:1.15rem;font-weight:800;color:var(--red);letter-spacing:-.01em;margin-bottom:.4rem;
  word-break:break-word}
.kanaal p{font-size:.87rem;color:var(--muted)}

/* ---- contactpagina in twee kolommen ---- */
.csplit{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.csplit{grid-template-columns:1fr}}
.cform__g{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);margin-top:.4rem}
.cform__g:first-child{margin-top:0}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.cform__row{grid-template-columns:1fr}}

/* ---- lopende tekst (SEO-blokken en overzichten) ---- */
.prose{max-width:78ch;color:var(--muted)}
.prose h3{font-size:1.1rem;font-weight:800;color:var(--navy);margin:1.8rem 0 .6rem;letter-spacing:-.01em}
.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:1rem;font-size:.95rem;line-height:1.75}
.prose ul{margin:0 0 1.2rem;display:grid;gap:.45rem}
.prose li{font-size:.92rem;padding-left:1.5rem;position:relative}
.prose li::before{content:"\2713";position:absolute;left:0;color:var(--red);font-weight:800}
.prose--2{max-width:none;columns:2;column-gap:3rem}
.prose--2 h3{break-after:avoid}
.prose--2 p{break-inside:avoid}
@media (max-width:860px){.prose--2{columns:1}}

/* ---- juridische pagina's ---- */
.legal{color:var(--muted)}
.legal h2{font-size:1.25rem;font-weight:800;color:var(--navy);margin:2.4rem 0 .8rem;
  letter-spacing:-.015em;padding-top:1.6rem;border-top:1px solid var(--line)}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:1rem;font-weight:800;color:var(--ink);margin:1.5rem 0 .5rem}
.legal p{margin-bottom:1rem;font-size:.95rem;line-height:1.8}
.legal ul{margin:0 0 1.3rem;display:grid;gap:.5rem}
.legal li{font-size:.93rem;line-height:1.7;padding-left:1.5rem;position:relative}
.legal li::before{content:"\2713";position:absolute;left:0;color:var(--red);font-weight:800}
.legal__slot{margin-top:2.4rem;padding:1.3rem 1.5rem;background:var(--off);border-radius:16px;
  border-left:4px solid var(--red);font-size:.92rem;color:var(--ink)}

/* ---- cta binnen een donkere sectie ---- */
.cta--in{box-shadow:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}

/* ---- mobiele belbalk: alleen op telefoons, altijd binnen handbereik ---- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:.5rem;
    padding:.55rem .65rem calc(.55rem + env(safe-area-inset-bottom,0px));
    background:rgba(11,29,51,.97);border-top:1px solid rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;
    min-height:48px;border-radius:12px;font-weight:800;font-size:.95rem}
  .mbar svg{width:1.1em;height:1.1em;flex:none;fill:currentColor}
  .mbar .btn__wa{width:1.1em;height:1.1em}
  .mbar__bel{background:var(--red);color:#fff}
  .mbar__wa{background:#25D366;color:#06301A}
  /* de balk mag de onderkant van de pagina niet afdekken */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* ---- tikdoelen op mobiel: minimaal ~44px hoog, zoals Apple en Google adviseren ---- */
@media (max-width:760px){
  .foot li a,.foot__bar a{display:inline-block;padding:.5rem 0}
  .steden__l,.tlink{display:inline-block;padding:.55rem 0}
  .prose a,.pnote a{display:inline-block;padding:.4rem 0}
}

/* Zonder JavaScript: contact.php stuurt terug naar ...#formulier. Via :target
   toont de succesmelding zich dan zonder één regel script. */
.cform:target .cform__ok[hidden]{display:block}

@media (max-width:760px){
  html.js .rv{transform:none;transition-duration:.35s}
  .rv[data-d="1"],.rv[data-d="2"]{transition-delay:0s}
}

/* ---- blogartikel: leesbreedte en een duidelijke intro ---- */
.prose--art{max-width:76ch;margin-inline:auto}
.prose__intro{font-size:1.08rem;font-weight:600;color:var(--ink);line-height:1.75;margin-bottom:1.5rem}

/* ---- mobiel menu: hoofdlink met pijlknop, sublijst klapt pas open op verzoek ---- */
.nav__mob .mrow{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.nav__mob .mrow>a{flex:1;border-bottom:0}
.nav__mob .mtoggle{width:48px;height:48px;flex:none;display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--ink);cursor:pointer}
.nav__mob .mtoggle::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s}
.nav__mob .mtoggle[aria-expanded="true"]::before{transform:rotate(225deg) translate(-1px,-1px)}
.nav__mob .sub{display:none}
.nav__mob .sub.open{display:block}

/* ---- cookiemelding ---- */
.cwrap{position:fixed;right:12px;bottom:12px;left:12px;z-index:70;max-width:540px;margin-left:auto;
  display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;
  box-shadow:0 14px 44px rgba(11,29,51,.20)}
.cwrap p{flex:1 1 260px;margin:0;font-size:.84rem;line-height:1.5;color:var(--muted)}
.cwrap p a{color:var(--navy);font-weight:700;text-decoration:underline}
.cwrap .cok{flex:none}
@media (max-width:760px){
  .cwrap{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* ---- hulpassistent linksonder ---- */
.cbot{position:fixed;left:14px;bottom:14px;z-index:66}
.cbot__knop{position:relative;height:54px;border:0;border-radius:999px;cursor:pointer;
  padding:0 1.15rem 0 .9rem;display:flex;align-items:center;gap:.5rem;
  background:var(--red);color:#fff;font-weight:800;font-size:.92rem;font-family:inherit;
  box-shadow:0 12px 32px rgba(214,43,52,.45);transition:transform .25s,background .25s}
.cbot__knop svg{width:22px;height:22px;flex:none}
.cbot__knop:hover{transform:scale(1.04);background:var(--navy)}
.cbot__knop::after{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(214,43,52,.45);animation:cbotpuls 2.6s ease-out infinite}
.cbot.open .cbot__knop::after{animation:none}
@keyframes cbotpuls{70%{box-shadow:0 0 0 15px rgba(214,43,52,0)}100%{box-shadow:0 0 0 0 rgba(214,43,52,0)}}
@media (prefers-reduced-motion:reduce){.cbot__knop::after{animation:none}}
.cbot__paneel{position:absolute;left:0;bottom:70px;width:min(360px,calc(100vw - 28px));
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(11,29,51,.28);display:none;flex-direction:column}
.cbot.open .cbot__paneel{display:flex}
.cbot__kop{position:relative;background:var(--navy);color:#fff;padding:.9rem 2.6rem .9rem 1.1rem}
.cbot__kop b{display:block;font-size:.95rem}
.cbot__kop span{display:block;font-size:.76rem;opacity:.75;margin-top:.15rem}
.cbot__dicht{position:absolute;top:.55rem;right:.6rem;width:34px;height:34px;border:0;border-radius:10px;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.25rem;line-height:1;cursor:pointer}
.cbot__dicht:hover{background:rgba(255,255,255,.24)}
.cbot__berichten{max-height:min(46vh,340px);min-height:140px;overflow-y:auto;padding:.9rem;display:grid;gap:.55rem;background:var(--off)}
.cbot__b{max-width:88%;padding:.6rem .8rem;border-radius:14px;font-size:.86rem;line-height:1.5}
.cbot__b--m{background:#fff;border:1px solid var(--line);justify-self:start;border-bottom-left-radius:4px}
.cbot__b--u{background:var(--navy);color:#fff;justify-self:end;border-bottom-right-radius:4px}
.cbot__b a{color:var(--red);font-weight:700;text-decoration:underline}
.cbot__b--u a{color:#fff}
.cbot__acties{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.cbot__acties .btn{padding:.5rem .85rem;font-size:.8rem}
/* actieknoppen in chatberichten: witte en donkere letters horen wit en donker te blijven,
   de algemene linkkleur van .cbot__b a mag hier niet overheen */
.cbot__b .cbot__acties a{text-decoration:none}
.cbot__b .cbot__acties .btn--red{color:#fff}
.cbot__b .cbot__acties .btn--red:hover{color:#fff}
.cbot__b .cbot__acties .btn--wa{color:#06301A}
.cbot__b .cbot__acties .btn--wa:hover{color:#06301A}

.cbot__chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:.6rem .9rem;border-top:1px solid var(--line);background:#fff}
.cbot__chips button{border:1px solid var(--line);background:var(--off);border-radius:999px;
  padding:.4rem .75rem;font-size:.78rem;font-weight:700;color:var(--navy);cursor:pointer}
.cbot__chips button:hover{border-color:var(--navy)}
.cbot__invoer{display:flex;gap:.5rem;padding:.7rem .9rem .9rem;background:#fff}
.cbot__invoer input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;
  padding:.6rem .8rem;font:inherit;font-size:.86rem}
.cbot__invoer input:focus{outline:2px solid var(--navy);outline-offset:1px}
@media (max-width:760px){
  .cbot{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .cbot__berichten{max-height:44vh}
}

/* logo in de chatknop en het wegvagen bij de 3D-woning */
.cbot{transition:opacity .35s ease,transform .35s ease}
.cbot--weg{opacity:0;pointer-events:none;transform:translateY(16px)}
.cbot__logo{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center}
.cbot__logo svg{width:26px;height:26px}

/* ---- typmodus: zwevende elementen wijken zolang er getypt wordt ---- */
body.typt .cbot, body.typt .mbar, body.typt .cwrap{
  opacity:0;pointer-events:none;transform:translateY(14px);
  transition:opacity .25s ease,transform .25s ease}
.mbar{transition:opacity .25s ease,transform .25s ease}

/* ---- formulieren op mobiel: 16px voorkomt het inzoomen van iOS, en ruimere
        tikvelden maken raken makkelijker ---- */
@media (max-width:760px){
  .hform input,.hform select,
  .cform input,.cform select,.cform textarea,
  .cbot__invoer input{font-size:16px;min-height:48px}
  .cform textarea{min-height:120px}
}

/* ---- optioneel adresblok in het grote formulier ---- */
.cform details.cform__extra{border:1.5px solid var(--line);border-radius:12px;background:var(--off)}
.cform details.cform__extra summary{list-style:none;cursor:pointer;padding:.8rem 1rem;
  font-size:.85rem;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:.5rem}
.cform details.cform__extra summary::-webkit-details-marker{display:none}
.cform details.cform__extra summary::after{content:"";width:8px;height:8px;margin-left:auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
.cform details.cform__extra[open] summary::after{transform:rotate(225deg)}
.cform details.cform__extra > div{padding:0 1rem .9rem}

/* op mobiel deelt de cookiemelding de onderrand met de chatknop; zolang de
   melding staat wijkt de chatknop, na Duidelijk verschijnt hij */
@media (max-width:760px){
  body.heeft-cookie .cbot{opacity:0;pointer-events:none;transform:translateY(14px)}
}