@import url("brand.css");

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h,5.5rem) + 1.5rem);-webkit-text-size-adjust:100%;
  overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--blue);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.72;overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--titles);font-weight:500;text-wrap:balance}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
.enkel-mobiel{display:none}
.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}

/* ---------- type scale ---------- */
.h1{font-size:clamp(1.85rem,4.7vw,3.2rem);line-height:1.14;text-transform:uppercase;letter-spacing:.02em}
.h2{font-size:clamp(1.6rem,3.3vw,2.5rem);line-height:1.16;letter-spacing:.005em;color:var(--orange)}
.h2.on-dark{color:var(--smoke)}
.h3{font-size:clamp(1.08rem,1.6vw,1.32rem);line-height:1.3;color:var(--blue)}
.eyebrow{font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin:0 0 1.15rem}
.eyebrow.on-dark{color:var(--off-white)}
.lead{font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.72;color:var(--ink)}
.small{font-size:.78rem;line-height:1.5}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.measure{max-width:38rem}
.wide{max-width:88rem;margin-inline:auto;padding-inline:var(--pad)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border-radius:var(--pill);
  padding:.82rem 1.75rem;font-weight:600;font-size:.82rem;line-height:1.25;text-transform:uppercase;letter-spacing:.13em;
  text-decoration:none;border:1px solid var(--orange);background:var(--orange);color:var(--smoke);cursor:pointer;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}
.btn:hover{background:var(--orange-dark);border-color:var(--orange-dark);box-shadow:0 .5rem 1.5rem rgba(207,69,0,.2)}
.btn:active{box-shadow:none}
.btn--ghost{background:transparent;color:var(--orange)}
.btn--ghost:hover{background:var(--orange);color:var(--smoke)}
.btn--ghost-light{background:transparent;color:var(--smoke);border-color:rgba(245,245,245,.6)}
.btn--ghost-light:hover{background:var(--smoke);color:var(--blue);border-color:var(--smoke);box-shadow:none}
.btn--lg{padding:.98rem 2.2rem;font-size:.86rem}
.btn--block{width:100%}
.btn svg{width:1.15em;height:1.15em;flex:none}

/* ---------- status bar ---------- */
.statusbar{background:var(--orange);color:#fff;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.statusbar .wide{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;padding-block:.6rem;text-align:center}
.statusbar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);display:inline-block;padding:.35rem .1rem}
.pulse{width:.5rem;height:.5rem;border-radius:50%;background:#fff;flex:none;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(0,37,87,.0);transition:background-color .3s ease,box-shadow .3s ease,backdrop-filter .3s}
.header.is-stuck{background:rgba(0,37,87,.92);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 .25rem 2rem rgba(0,0,0,.18)}
.header .wide{display:flex;align-items:center;gap:1.75rem;padding-block:1.15rem}
.logo img{width:clamp(8.5rem,14vw,11.5rem)}
.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav a{color:var(--smoke);text-decoration:none;text-transform:uppercase;font-size:.76rem;font-weight:600;letter-spacing:.16em;padding:.62rem .8rem;border-radius:var(--pill);transition:color .25s,opacity .25s;opacity:.82}
.nav a:hover{opacity:1}
.header-actions{display:flex;align-items:center;gap:.6rem}
.tel-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--smoke);text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap;padding:.6rem .85rem;border-radius:var(--pill);border:1px solid rgba(245,245,245,.35);transition:background-color .2s,color .2s}
.tel-link:hover{background:var(--smoke);color:var(--blue)}
.tel-link svg{width:1rem;height:1rem}
.burger{display:none;background:none;border:1px solid rgba(245,245,245,.4);border-radius:12px;padding:.7rem .65rem;cursor:pointer;min-height:46px;min-width:46px}
.burger span{display:block;width:20px;height:2px;background:var(--smoke);margin:4px 0;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--blue);padding-bottom:clamp(3rem,7vw,6rem);margin-top:calc(-1 * var(--header-h,5.5rem))}
.hero-media{position:absolute;inset:0;overflow:hidden;border-bottom-right-radius:var(--rounding)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,26,61,.62) 0%,rgba(0,26,61,.18) 38%,rgba(0,26,61,.34) 70%,rgba(0,26,61,.82) 100%),
             linear-gradient(90deg,rgba(0,26,61,.74) 0%,rgba(0,26,61,.22) 46%,rgba(0,26,61,0) 68%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,4rem);
  align-items:end;padding-top:calc(var(--header-h,5.5rem) + 4vw + 2rem);min-height:min(92vh,54rem)}
.hero-copy{color:var(--smoke);padding-bottom:1rem}
.hero-copy .h1{color:var(--smoke);text-shadow:0 2px 22px rgba(0,0,0,.3)}
.hero-sub{margin-top:1.4rem;max-width:32rem;color:rgba(245,245,245,.88);font-size:clamp(.96rem,1.05vw,1.05rem);line-height:1.72;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero-facts{list-style:none;margin:1.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.hero-facts li{display:inline-flex;align-items:center;gap:.5rem;background:rgba(245,245,245,.09);border:1px solid rgba(245,245,245,.22);
  border-radius:var(--pill);padding:.44rem .95rem;font-size:.76rem;font-weight:600;letter-spacing:.04em;color:rgba(245,245,245,.92);backdrop-filter:blur(8px)}
.hero-facts svg{width:.88rem;height:.88rem;color:var(--off-white);opacity:.8}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.3rem}

/* ---------- lead card ---------- */
.leadcard{background:var(--smoke);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.leadcard__head{background:var(--blue);color:var(--smoke);padding:1.35rem 1.65rem}
.leadcard__head h2,.leadcard__head h3{font-family:var(--titles);font-weight:500;font-size:1.22rem;line-height:1.25;letter-spacing:.005em;margin:0}
.leadcard__head p{margin:.45rem 0 0;font-size:.8rem;line-height:1.55;color:rgba(245,245,245,.74)}
.leadcard__body{padding:1.6rem 1.65rem 1.7rem}
.leadcard__foot{padding:0 1.65rem 1.5rem;font-size:.75rem;color:var(--muted);line-height:1.5}
.leadcard__foot a{color:var(--blue)}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.field{display:flex;flex-direction:column;gap:.3rem}
.field--full{grid-column:1 / -1}
.field label{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#48586c}
.field input,.field textarea,.field select{width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);font-size:.94rem;transition:border-color .25s,box-shadow .25s}
.field input::placeholder,.field textarea::placeholder{color:#9aa6b4}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(207,69,0,.12)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.13)}
.field .err{font-size:.8rem;color:#c0392b;min-height:0;display:none}
.field .err.show{display:block}
.hidden-fields{display:none}

.choice{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.35rem}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{display:flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;padding:.72rem .6rem;font-size:.8rem;font-weight:600;color:var(--blue);
  background:#fff;transition:border-color .25s,background-color .25s,color .25s}
.choice input:checked + label{border-color:var(--blue);background:var(--blue);color:#fff;font-weight:600}
.choice input:checked + label::before{content:"";width:.85rem;height:.85rem;flex:none;margin-right:.1rem;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.choice label:hover{border-color:var(--blue)}
.choice input:focus-visible + label{outline:2px solid var(--blue);outline-offset:2px}

.form-note{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.05rem;font-size:.79rem;color:var(--muted);line-height:1.55}
.form-note svg{width:1rem;height:1rem;flex:none;color:var(--orange);margin-top:.15rem}
.form-msg{display:none;border-radius:10px;padding:1rem 1.15rem;margin-top:1.1rem;font-size:.9rem;line-height:1.6}
.form-msg.ok{background:#e8f4ec;border:1px solid #93c4a5;color:#1c4a2e}
.form-msg.bad{background:#fdeceb;border:1px solid #e2a49e;color:#8c2b21}
.form-msg.show{display:block}

/* ---------- proof bar ---------- */
.proof{background:var(--smoke);position:relative;z-index:3}
.proof .wide{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding-block:clamp(2rem,3.6vw,3rem)}
.proof-item{text-align:center;padding-inline:.75rem;border-right:1px solid var(--line)}
.proof-item:last-child{border-right:0}
.proof-item b{display:block;font-family:var(--titles);font-weight:500;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15;color:var(--orange)}
.proof-item span{display:block;margin-top:.45rem;font-size:.74rem;line-height:1.45;color:var(--muted);letter-spacing:.06em}

/* ---------- generic sections ---------- */
.section{padding-block:clamp(4.5rem,8.5vw,8rem)}
.section--smoke{background:var(--smoke)}
.section--white{background:#fff}
.section--blue{background:var(--blue);color:var(--smoke)}
.section--blue .text{color:rgba(245,245,245,.9)}
.section-head{max-width:40rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head.center{margin-inline:auto;text-align:center}

/* intro */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.intro-right p + p{margin-top:1rem}
.sketch-bleed{width:100%;margin-top:clamp(2rem,4vw,3rem)}
.intro-sketch{width:100%;height:auto;mix-blend-mode:multiply}

/* ---------- typologie cards ---------- */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.type-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.type-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(207,69,0,.28)}
.type-card__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--light-blue)}
.type-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.type-card:hover .type-card__img img{transform:scale(1.03)}
.badge{position:absolute;top:.9rem;left:.9rem;background:var(--orange);color:#fff;font-size:.72rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:.36rem .75rem;border-radius:var(--pill)}
.badge--muted{background:var(--blue)}
.type-card__body{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.type-card__body h3{margin-bottom:.7rem}
.spec{list-style:none;margin:.4rem 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.85rem}
.spec li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--rule-soft,rgba(0,37,87,.08));padding-bottom:.5rem;color:var(--muted)}
.spec li b{color:var(--blue);font-weight:700;text-align:right}
.type-card .btn{margin-top:auto}

/* ---------- feature (sticky-style) blocks ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5.5vw,5.5rem);align-items:center;
  padding-block:clamp(3rem,6vw,5rem)}
.feature + .feature{border-top:1px solid var(--line)}
.feature__media{position:relative}
.feature__media img{border-radius:14px;position:relative;z-index:2;width:100%;aspect-ratio:4/3;object-fit:cover}
.feature__media::before{content:"";position:absolute;top:-1.25rem;right:0;width:86%;height:46%;background:var(--orange);border-radius:14px;z-index:1}
.feature--flip .feature__media{order:-1}
.feature--flip .feature__media::before{right:auto;left:0}
.feature ul{list-style:none;margin:1.5rem 0 2rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.feature ul li{display:flex;gap:.7rem;align-items:flex-start;font-size:.91rem;color:var(--muted)}
.feature ul li svg{width:1rem;height:1rem;flex:none;color:var(--orange);margin-top:.3rem}

/* ---------- USP icon grid ---------- */
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.25rem 2.5rem;margin-top:clamp(3rem,5vw,4.5rem)}
.usp{display:flex;gap:1rem;align-items:flex-start}
.usp img{width:2.75rem;height:2.75rem;object-fit:contain;flex:none;opacity:.9}
.usp b{display:block;font-family:var(--titles);font-weight:500;font-size:1.02rem;color:var(--blue);margin-bottom:.35rem}
.usp span{font-size:.86rem;color:var(--muted);line-height:1.62}

/* ---------- quote ---------- */
.quote-band{background:var(--blue);color:var(--smoke);position:relative;overflow:hidden}
.quote-band .wrap{padding-block:clamp(4rem,7.5vw,6.5rem);text-align:center;max-width:54rem}
.quote-band blockquote{margin:0;font-family:var(--titles);font-weight:500;font-size:clamp(1.18rem,2.1vw,1.72rem);line-height:1.42;letter-spacing:.005em;color:rgba(245,245,245,.96)}
.quote-band cite{display:block;margin-top:1.75rem;font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(252,238,232,.72)}

/* ---------- ligging ---------- */
.ligging{background:var(--orange);color:var(--smoke);border-top-right-radius:var(--rounding);border-bottom-left-radius:var(--rounding);overflow:hidden}
.ligging-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,4.5vw,4.5rem);align-items:center;padding-block:clamp(4rem,7vw,6.5rem)}
.ligging .h2{color:var(--smoke)}
.ligging p{color:rgba(255,255,255,.94)}
.dist{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.88rem}
.dist caption{text-align:left;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);padding-bottom:.85rem}
.dist th,.dist td{text-align:left;padding:.7rem .5rem;border-bottom:1px solid rgba(255,255,255,.2)}
.dist thead th{font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.dist tbody th{font-weight:400;font-size:.9rem;color:rgba(255,255,255,.94)}
.dist td:last-child,.dist th:last-child{text-align:right;white-space:nowrap;font-weight:600}
.ligging-map img{border-radius:18px;background:var(--smoke)}
.ligging-map iframe{display:block;width:100%;aspect-ratio:4/3;min-height:20rem;border:0;border-radius:14px;background:var(--smoke)}
@media (max-width:640px){.ligging-map iframe{aspect-ratio:16/10;min-height:13rem}}
.map-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}

/* ---------- timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin-top:clamp(2.5rem,4.5vw,3.5rem);counter-reset:step}
.step{position:relative;padding-top:2.2rem}
.step::before{content:"";position:absolute;top:.55rem;left:0;right:0;height:2px;background:var(--line)}
.step::after{counter-increment:step;content:counter(step);position:absolute;top:0;left:0;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--light-blue);color:var(--blue);display:grid;place-items:center;font-size:.7rem;font-weight:600}
.step.is-done::after{background:var(--orange);color:#fff}
.step.is-done::before{background:var(--orange)}
.step b{display:block;font-family:var(--titles);font-weight:500;font-size:.98rem;color:var(--blue);margin-bottom:.25rem}
.step span{font-size:.82rem;line-height:1.55;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{max-width:48rem;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);background:transparent}
.faq summary{cursor:pointer;list-style:none;padding:1.4rem .25rem;display:flex;justify-content:space-between;gap:1.5rem;
  font-family:var(--titles);font-weight:500;font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.4;color:var(--blue);
  transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange)}
.faq summary::after{content:"+";flex:none;font-family:var(--body);font-weight:400;color:var(--orange);font-size:1.35rem;line-height:1.15;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 .25rem 1.5rem;color:var(--muted);max-width:40rem;font-size:.93rem}

/* ---------- contact ---------- */
.contact{background:var(--smoke);border-top-right-radius:var(--rounding);position:relative}
.contact-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(2.5rem,4.5vw,5rem);align-items:start}
.contact-list{list-style:none;margin:2.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
.contact-list a{display:flex;gap:1rem;align-items:center;text-decoration:none;color:var(--blue);font-weight:600;font-size:.98rem;transition:color .25s}
.contact-list a:hover{color:var(--orange)}
.contact-list .ico{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;flex:none}
.contact-list .ico svg{width:1.05rem;height:1.05rem}
.contact-list span.sub{display:block;font-weight:400;font-size:.8rem;line-height:1.5;color:var(--muted);margin-top:.1rem}
.reassure{list-style:none;margin:2.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem;font-size:.86rem;color:var(--muted)}
.reassure li{display:flex;gap:.6rem;align-items:flex-start}
.reassure svg{width:.95rem;height:.95rem;color:var(--orange);flex:none;margin-top:.28rem}

/* ---------- partners / footer ---------- */
.partners{background:#fff;padding-bottom:clamp(3rem,6vw,5rem)}
.partner-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.75rem,4vw,4rem);justify-content:center;
  border-top:1px solid var(--line);padding-top:2.5rem}
.partner-row img{height:2.1rem;width:auto;object-fit:contain}
.partner-row .inv{filter:brightness(0) saturate(100%) invert(9%) sepia(63%) saturate(3576%) hue-rotate(203deg) brightness(93%) contrast(102%);opacity:.6;transition:opacity .3s}
.partner-row a:hover .inv{opacity:.95}

.footer{background:var(--orange);color:var(--smoke);border-top-right-radius:var(--rounding)}
.footer .wide{padding-block:clamp(3rem,5.5vw,4.25rem)}
.footer-top{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.footer-brand img{height:2.1rem;width:auto}
.footer-brand .vline{width:1px;height:2rem;background:rgba(255,255,255,.5)}
.socials{display:flex;gap:.75rem}
.socials a{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:background-color .2s}
.socials a:hover{background:rgba(255,255,255,.18)}
.socials img{width:1rem;height:1rem}
.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.28);margin-top:2.5rem;padding-top:1.5rem;font-size:.73rem;line-height:1.6;color:rgba(255,255,255,.82)}
.footer-bottom a{color:#fff;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:.4rem .15rem}

/* ---------- mobile sticky CTA ---------- */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:.6rem;padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(0,37,87,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(245,245,245,.16);
  transition:transform .35s cubic-bezier(.4,0,.2,1)}
/* bij het formulier is de balk overbodig en dekt hij het af */
.mobile-cta.is-weg{transform:translateY(115%)}
.mobile-cta .btn{flex:1;padding:.85rem 1rem;font-size:.9rem}

/* ---------- placeholder token ---------- */
.tbd{background:rgba(207,69,0,.12);border-bottom:2px dotted var(--orange);padding:0 .22em;border-radius:3px;font-style:normal;white-space:nowrap}
.on-dark .tbd,.hero-facts .tbd,.ligging .tbd{background:rgba(255,255,255,.2);border-bottom-color:rgba(255,255,255,.75)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .proof .wide{grid-template-columns:repeat(3,1fr);gap:1.25rem}
  .proof-item:nth-child(3n){border-right:0}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .usp-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  :root{--rounding:var(--m-rounding)}
  .hero-inner{grid-template-columns:1fr;min-height:0;padding-top:calc(var(--header-h,5.5rem) + 2rem);gap:2rem}
  .hero-copy{padding-bottom:0}
  .leadcard{margin-bottom:0}
  .type-grid{grid-template-columns:repeat(2,1fr)}
  .intro-grid,.feature,.ligging-grid,.contact-grid{grid-template-columns:1fr}
  .feature--flip .feature__media{order:0}
  .nav{position:fixed;inset:0 0 auto;top:0;flex-direction:column;align-items:stretch;gap:.25rem;
    background:var(--blue);padding:5.5rem 1.5rem 2rem;transform:translateY(-100%);transition:transform .3s ease;box-shadow:var(--shadow-lg)}
  .nav.open{transform:none}
  .nav a{font-size:1.05rem;padding:.9rem 1rem;border-bottom:1px solid rgba(245,245,245,.14);border-radius:0}
  .header-actions .tel-link{display:none}
  .header-actions .btn{display:none}
  .burger{display:block;margin-left:auto;position:relative;z-index:2}
  .mobile-cta{display:flex}
  body{padding-bottom:4.6rem}
  /* ------------------------------------------------------------------
     Hero op mobiel: beeld verkoopt, tekst niet. Minder woorden, lichtere
     sluier zodat de render zichtbaar is, en géén formulier in het gezicht.
     De vaste balk onderaan draagt "Vraag meer info" al permanent, dus de
     bezoeker kan altijd door — maar pas als hij iets gezien heeft.
     ------------------------------------------------------------------ */
  .niet-mobiel{display:none!important}
  h1 .niet-mobiel,span.niet-mobiel{display:none!important}
  .enkel-mobiel{display:inline!important}

  /* de balk bovenaan en de stempel zeggen allebei hetzelfde; op een klein scherm
     is dat twee keer oranje en twee keer dezelfde boodschap. De stempel blijft,
     "bouwwerken gestart" verhuist naar de eyebrow. Scheelt een rij én rust. */
  .statusbar{display:none}

  /* het formulier verhuist naar onderaan; hier stond het te vroeg */
  .hero .leadcard{display:none}

  .hero{padding-bottom:0}
  .hero-inner{min-height:70svh;align-content:end;padding-bottom:2rem}
  /* de render mag zichtbaar zijn, maar niet ten koste van de leesbaarheid:
     licht in het midden, duidelijk donkerder waar de tekst staat */
  .hero-media::after{background:linear-gradient(180deg,rgba(0,26,61,.5) 0%,rgba(0,26,61,.14) 22%,rgba(0,26,61,.5) 48%,rgba(0,26,61,.82) 72%,rgba(0,26,61,.95) 100%)}
  .hero-media img{object-position:58% 52%}

  .logo img{width:6.5rem}
  .header .wide{gap:1rem;padding-block:.9rem}
  .h1{font-size:1.5rem;line-height:1.2;letter-spacing:.01em;
    text-shadow:0 2px 16px rgba(0,26,61,.65)}
  .hero-sub{margin-top:.85rem;font-size:.92rem;line-height:1.6;max-width:24rem;
    color:rgba(245,245,245,.95);text-shadow:0 1px 12px rgba(0,26,61,.75)}
  .hero-facts{margin-top:1.2rem;gap:.4rem 1rem}

  /* één duidelijke actie in de hero, de rest doet de vaste balk */
  .hero-cta{margin-top:1.6rem}
  .hero-cta .btn:not(.btn--ghost-light){display:none}
  /* de zijdelingse verdonkering is voor de tweekolomshero; op mobiel verbergt ze alleen de render */
  .hero-media::after{background:linear-gradient(180deg,rgba(0,26,61,.55) 0%,rgba(0,26,61,.15) 30%,rgba(0,26,61,.5) 62%,rgba(0,26,61,.9) 100%)}
  .hero-media img{object-position:60% 60%}
  /* de statusbalk-CTA is op mobiel dubbel met de vaste balk onderaan */
  .statusbar a{display:none}
  .statusbar .wide{padding-block:.45rem;font-size:.76rem}
}
@media (max-width:640px){
  /* op mobiel zakt niets onder 12px: kleine tracked labels een maat groter */
  .small,.leadcard__foot,.footer-bottom{font-size:.82rem}
  .field label{font-size:.78rem;letter-spacing:.1em}
  .dist{font-size:.92rem}
  .dist thead th,.dist caption{font-size:.76rem;letter-spacing:.13em}
  .eyebrow{font-size:.76rem;letter-spacing:.18em}
  .proof-item span{font-size:.8rem}
  .badge{font-size:.76rem}
  .quote-band cite{font-size:.78rem;letter-spacing:.16em}
  .statusbar{font-size:.72rem;letter-spacing:.06em}
  .step span{font-size:.85rem}
  /* de chips vullen op 375px elk een eigen regel; als vrije lijn is het rustiger en korter */
  .hero-facts{gap:.45rem 1.1rem;margin-top:1.3rem}
  .hero-cta{margin-top:1.6rem}
  .hero-inner{padding-top:calc(var(--header-h,5.5rem) + 1rem)}
  .hero-facts{gap:.4rem;margin-top:1.1rem}
  .hero-facts li{background:rgba(0,26,61,.5);border:1px solid rgba(255,255,255,.2);
    padding:.34rem .7rem;font-size:.74rem;letter-spacing:.02em;backdrop-filter:blur(4px)}
  .hero-facts svg{opacity:.75;width:.8rem;height:.8rem}
  .h1{font-size:1.72rem}
  .hero-sub{margin-top:1rem}
  .proof .wide{grid-template-columns:repeat(2,1fr)}
  .proof-item{border-right:0;text-align:left}
  .type-grid{grid-template-columns:1fr}
  .usp-grid{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .choice{grid-template-columns:1fr}
  .hero-facts li{font-size:.8rem;padding:.35rem .75rem}
  .footer-top{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
@media print{.header,.mobile-cta,.statusbar{display:none}}

/* ---------- honeypot (bots) ---------- */
.hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;
  padding:0!important;border:0!important;overflow:hidden;clip-path:inset(50%);pointer-events:none}

/* ---------- 3-weg keuze (incl. huurder-honeypot) ---------- */
.choice--3{grid-template-columns:repeat(3,1fr)}
.choice--3 label{padding:.62rem .4rem;font-size:.8rem;line-height:1.2}
@media (max-width:640px){.choice--3{grid-template-columns:1fr}.choice--3 label,.choice label{min-height:46px;font-size:.92rem}}

/* ---------- huurder-honeypot: formulier weg, excuus in de plaats ---------- */
.rent-block{display:none;text-align:center;padding:.5rem .25rem 1rem}
.leadcard.is-rent .leadcard__head,
.leadcard.is-rent .lead-form,
.leadcard.is-rent .leadcard__foot{display:none}
.leadcard.is-rent .rent-block{display:block}
.leadcard.is-rent .leadcard__body{padding:2rem 1.75rem 1.5rem}
.rent-block__icon{width:3.4rem;height:3.4rem;margin:0 auto 1.1rem;border-radius:50%;
  background:var(--off-white);color:var(--orange);display:grid;place-items:center}
.rent-block__icon svg{width:1.7rem;height:1.7rem}
.rent-block h3{font-family:var(--titles);font-weight:500;font-size:clamp(1.1rem,1.9vw,1.32rem);line-height:1.3;color:var(--blue);margin-bottom:.85rem}
.rent-block p{font-size:.92rem;line-height:1.68;color:var(--muted);max-width:25rem;margin-inline:auto}
.rent-block p strong{color:var(--blue)}
.rent-block__alt{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.86rem}
.rent-block__alt a{color:var(--orange);font-weight:600}


/* ---------- SEO-tekstsectie ---------- */
.prose{max-width:38rem}
.prose h3{font-family:var(--titles);font-weight:500;font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--blue);margin:2.5rem 0 .75rem}
.prose h3:first-of-type{margin-top:1.75rem}
.prose p{color:var(--muted)}
.prose strong{color:var(--blue)}
.prose ul{margin:.75rem 0 0;padding-left:1.15rem;color:var(--muted);font-size:.93rem}
.prose ul li{margin-bottom:.55rem;line-height:1.65}
.prose ul li::marker{color:var(--orange)}
.prose-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.prose-grid .prose{max-width:none}
@media (max-width:980px){.prose-grid{grid-template-columns:1fr}}

/* ============================================================
   Consent (Google Consent Mode v2)
   ============================================================ */
.consent[hidden]{display:none!important}
.consent{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.25rem}
.consent__scrim{position:absolute;inset:0;background:rgba(0,26,61,.5);backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);animation:consentIn .45s ease both}
.consent__dialog{position:relative;width:min(34rem,100%);max-height:calc(100dvh - 2.5rem);overflow-y:auto;
  background:var(--smoke);border-radius:16px;box-shadow:0 2rem 5rem rgba(0,26,61,.4);
  padding:clamp(1.5rem,4vw,2.25rem);animation:consentUp .5s cubic-bezier(.16,.84,.44,1) both}
@keyframes consentIn{from{opacity:0}to{opacity:1}}
@keyframes consentUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.consent__dialog h2{font-family:var(--titles);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.25;color:var(--blue);margin-bottom:.65rem}
.consent__dialog #consent-tekst{font-size:.92rem;line-height:1.65;color:var(--muted);margin-bottom:1.35rem}

.consent__opties{display:flex;flex-direction:column;gap:.15rem;margin:0 0 1.35rem;border-top:1px solid var(--line)}
.consent__optie{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  padding:.9rem .1rem;border-bottom:1px solid var(--line);cursor:pointer}
.consent__optie.is-vast{cursor:default;opacity:.72}
.consent__optie b{display:block;font-size:.9rem;font-weight:600;color:var(--blue)}
.consent__optie em{display:block;font-style:normal;font-size:.79rem;line-height:1.5;color:var(--muted);margin-top:.15rem}
.consent__optie input{position:absolute;opacity:0;width:0;height:0}
.consent__schakelaar{position:relative;width:2.6rem;height:1.5rem;border-radius:1rem;background:#c8d0da;flex:none;
  transition:background-color .3s ease}
.consent__schakelaar::after{content:"";position:absolute;top:.19rem;left:.19rem;width:1.12rem;height:1.12rem;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.16,.84,.44,1)}
.consent__optie input:checked ~ .consent__schakelaar{background:var(--orange)}
.consent__optie input:checked ~ .consent__schakelaar::after{transform:translateX(1.1rem)}
.consent__optie input:focus-visible ~ .consent__schakelaar{outline:2px solid var(--orange);outline-offset:3px}

.consent__acties{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.btn--consent{flex:1 1 12rem;justify-content:center}
.consent__link{flex:1 1 100%;background:none;border:0;padding:.35rem 0;cursor:pointer;text-align:center;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  transition:color .25s}
.consent__link:hover{color:var(--orange)}
.consent__legal{margin:1.15rem 0 0;font-size:.74rem;color:var(--muted);text-align:center}
.consent__legal a{color:var(--muted);text-underline-offset:3px}
.consent__legal a:hover{color:var(--orange)}
body.consent-open{overflow:hidden}

/* kaart achter toestemming */
.map-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;
  width:100%;aspect-ratio:4/3;min-height:20rem;border-radius:14px;padding:1.5rem;
  background:rgba(0,26,61,.18);border:1px dashed rgba(255,255,255,.4);color:var(--smoke)}
.map-gate p{margin:0;max-width:22rem}
.map-gate .small{color:rgba(255,255,255,.82)}
.map-gate .btn{margin-top:.6rem}
@media (max-width:640px){.map-gate{aspect-ratio:16/10;min-height:13rem}}

@media (prefers-reduced-motion:reduce){
  .consent__scrim,.consent__dialog{animation:none}
}

/* ---------- afstandentabel op een lichte achtergrond ---------- */
.scroll-x{overflow-x:auto}
.dist--licht{margin-top:1rem}
.dist--licht caption{color:var(--muted)}
.dist--licht th,.dist--licht td{border-bottom-color:var(--line)}
.dist--licht thead th{color:var(--muted)}
.dist--licht tbody th{color:var(--blue);font-weight:600}
.dist--licht td{color:var(--muted)}
.dist--licht td:last-child{color:var(--blue)}

/* actieve pagina in de navigatie */
.nav a[aria-current="page"]{opacity:1;color:var(--off-white)}
.nav a[aria-current="page"]::after{content:"";display:block;height:1px;background:var(--orange);margin-top:.2rem}

/* ---------- "50% verkocht"-stempel in de hero ---------- */
.stempel{position:absolute;z-index:6;top:calc(var(--header-h,5.5rem) + 1.25rem);right:clamp(1.25rem,4vw,3rem);
  width:7.5rem;height:7.5rem;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:var(--orange);color:#fff;transform:rotate(-11deg);
  box-shadow:0 .75rem 2rem rgba(0,0,0,.28);border:2px solid rgba(255,255,255,.55)}
.stempel::after{content:"";position:absolute;inset:.42rem;border-radius:50%;border:1px dashed rgba(255,255,255,.5)}
.stempel b{display:block;font-family:var(--titles);font-weight:700;font-size:1.9rem;line-height:1}
.stempel span{display:block;margin-top:.15rem;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:980px){
  .stempel{width:4.9rem;height:4.9rem;right:1rem;
    top:calc(var(--header-h,5.5rem) + .35rem)}
  .stempel b{font-size:1.2rem}
  .stempel span{font-size:.52rem;letter-spacing:.12em}
  /* de eyebrow mag niet onder de stempel doorlopen */
  .hero-copy .eyebrow{padding-right:6rem;line-height:1.5}
}
@media (prefers-reduced-motion:no-preference){
  .stempel{animation:stempelIn .6s cubic-bezier(.2,.9,.3,1.2) both .3s}
  @keyframes stempelIn{from{opacity:0;transform:rotate(-11deg) scale(.6)}to{opacity:1;transform:rotate(-11deg) scale(1)}}
}

/* ---------- huurder: pre-registratie ---------- */
.rent-block__pre{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--line);text-align:left}
.rent-block__pre p{max-width:none;margin-bottom:.75rem;font-size:.88rem}
.rent-block__pre .veldrij{display:flex;gap:.5rem;flex-wrap:wrap}
.rent-block__pre input{flex:1 1 12rem;padding:.72rem .85rem;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.92rem}
.rent-block__pre input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(207,69,0,.12)}
.rent-block__pre .btn{flex:0 0 auto}
.rent-block__pre .klaar{display:none;font-size:.9rem;color:var(--good,#1c6b41);font-weight:600}
.rent-block__pre.is-klaar .veldrij,.rent-block__pre.is-klaar > p:first-child{display:none}
.rent-block__pre.is-klaar .klaar{display:block}

/* ---------- schets: volle breedte, en op mobiel scrollbaar i.p.v. een streepje ---------- */
@media (max-width:768px){
  /* 2000x388 wordt op 375px een strookje van 73px hoog; liever op hoogte houden en laten scrollen */
  /* Geen scrollcontainer, geen vaste hoogte, geen blend-mode. Gewoon een
     afbeelding op volle breedte met een vaste verhouding, zodat er niets
     verspringt tijdens het laden. Dit ging drie keer mis met slimmere opzetten. */
  .sketch-bleed{padding-inline:var(--pad)}
  .intro-sketch{width:100%;height:auto;max-width:100%;aspect-ratio:2000/388;
    mix-blend-mode:normal;object-fit:contain}
}

/* ============================================================
   MOBIEL: korter maken. 19 schermen is te veel om leads te vangen.
   Niets wordt uit de DOM gehaald — alles blijft leesbaar voor Google
   en voor wie doorklikt. Het staat alleen niet meer allemaal open.
   ============================================================ */
@media (max-width:768px){

  /* 1. lange lappen tekst inklappen met een "lees meer" */
  .prose-grid .prose{position:relative;max-height:16rem;overflow:hidden;
    transition:max-height .35s ease}
  .prose-grid .prose::after{content:"";position:absolute;inset:auto 0 0;height:5rem;
    background:linear-gradient(to bottom,transparent,var(--smoke));pointer-events:none;transition:opacity .25s}
  .section--white .prose-grid .prose::after{background:linear-gradient(to bottom,transparent,#fff)}
  .prose-grid .prose.is-open{max-height:none}
  .prose-grid .prose.is-open::after{opacity:0}
  .lees-meer{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;background:none;border:0;
    padding:.5rem 0;cursor:pointer;font-family:var(--body);font-size:.86rem;font-weight:600;
    letter-spacing:.06em;color:var(--orange);text-decoration:underline;text-underline-offset:4px}
  .lees-meer::after{content:"▾";text-decoration:none;font-size:.8em}
  .lees-meer[aria-expanded="true"]::after{content:"▴"}

  /* 2. features: de opsomming herhaalt wat de alinea al zegt */
  .feature ul{display:none}
  .feature{padding-block:2rem;gap:1.5rem}
  .feature__media img{aspect-ratio:3/2}
  /* per blok een knop is drie keer dezelfde knop; de vaste balk staat er al */
  .feature > div > .btn{display:none}

  /* 3. de zes voordelen naast elkaar in plaats van onder elkaar */
  .usp-grid{grid-template-columns:1fr 1fr;gap:1.4rem 1rem;margin-top:2rem}
  .usp{flex-direction:column;gap:.5rem}
  .usp img{width:2rem;height:2rem}
  .usp b{font-size:.92rem}
  .usp span{font-size:.8rem;line-height:1.5}

  /* 4. minder lucht tussen de secties: 12 secties × 2 × 72px is 1700px alleen padding */
  .section{padding-block:3rem}
  .section-head{margin-bottom:1.75rem}
  .ligging-grid,.quote-band .wrap{padding-block:2.75rem}
  .type-card__img{aspect-ratio:3/2}
  .timeline{grid-template-columns:1fr 1fr;gap:1.25rem}
  .sketch-bleed{margin-top:1.5rem}
}

/* ---------- mobiel: typologiekaarten als swipe in plaats van stapel ----------
   Drie kaarten onder elkaar is ~1800px. Naast elkaar met een glimp van de
   volgende is ~600px, en alle drie de foto's én prijzen blijven bereikbaar. */
@media (max-width:768px){
  /* geen negatieve marges: die maakten de pagina breder dan het scherm
     en dan kan je zijdelings scrollen. De kaarten blijven binnen de container;
     de glimp van de volgende kaart werkt evengoed. */
  .type-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;
    gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.5rem;scrollbar-width:none;overscroll-behavior-x:contain}
  .type-grid::-webkit-scrollbar{display:none}
  .type-card{scroll-snap-align:center}
  .type-card:hover{transform:none}
  .type-card__body{padding:1.1rem 1.15rem 1.25rem}
  .spec{margin-bottom:1.1rem;font-size:.82rem;gap:.4rem}

  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.9rem;
    font-size:.78rem;letter-spacing:.08em;color:var(--muted)}
  .swipe-hint span{width:.4rem;height:.4rem;border-radius:50%;background:var(--line);transition:background-color .3s}
  .swipe-hint span.actief{background:var(--orange)}

  /* afstandentabel compacter */
  .dist th,.dist td{padding:.5rem .35rem}
  .dist{font-size:.85rem}
}
@media (min-width:769px){ .swipe-hint{display:none} }

/* ---------- na een geslaagde inzending: formulier weg, enkel bevestiging ---------- */
.leadcard.is-verzonden .leadcard__head,
.leadcard.is-verzonden .leadcard__foot,
.leadcard.is-verzonden .lead-form > *:not(.form-msg){display:none}
.leadcard.is-verzonden .leadcard__body{padding:2.25rem 1.75rem 2rem}
.leadcard.is-verzonden .form-msg.ok{
  display:block;margin:0;background:none;border:0;text-align:center;padding:0;
  font-size:.95rem;line-height:1.65;color:var(--muted)}
.leadcard.is-verzonden .form-msg.ok b{
  display:block;font-family:var(--titles);font-weight:500;
  font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.3;color:var(--blue);margin-bottom:.6rem}
.leadcard.is-verzonden .form-msg.ok br{display:none}
.leadcard.is-verzonden .form-msg.ok::before{
  content:"";display:block;width:3.4rem;height:3.4rem;margin:0 auto 1.15rem;border-radius:50%;
  background:var(--off-white) no-repeat center/1.5rem 1.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cf4500' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* ---------- mobiel: de drie projectblokken als swipe ----------
   Onder elkaar zijn ze ~1760px. Naast elkaar ~700px, met alle drie
   de beelden intact. Zelfde gebaar als bij de typologiekaarten. */
@media (max-width:768px){
  .feature-rail{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:.85rem;
    overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    overscroll-behavior-x:contain;padding-bottom:.5rem}
  .feature-rail::-webkit-scrollbar{display:none}
  .feature-rail .feature{display:flex;flex-direction:column;gap:1rem;
    scroll-snap-align:center;padding-block:0;border-top:0}
  .feature-rail .feature__media{order:-1}
  .feature-rail .feature__media img{aspect-ratio:16/10}
  .feature-rail .feature__media::before{top:-.6rem;height:38%}
  .feature-rail .feature .h2{font-size:1.32rem}
  .feature-rail .feature p{font-size:.9rem}

  /* FAQ: negen dichte accordeons zijn vooral padding */
  .faq summary{padding:1rem .25rem;gap:1rem}
  .faq details p{padding-bottom:1.1rem;font-size:.9rem}

  /* planning en intro compacter */
  .timeline{gap:1rem}
  .step{padding-top:1.9rem}
  .intro-grid{gap:1.25rem}
  .quote-band .wrap{padding-block:2.25rem}
  .quote-band blockquote{font-size:1.05rem;line-height:1.45}
  .proof .wide{padding-block:1.5rem}
  .proof-item b{font-size:1.25rem}
}

/* ---------- mobiel: de SEO-sectie over Eeklo verbergen ----------
   Die staat er voor Google, niet voor wie op zijn gsm een appartement zoekt.
   Op desktop blijft ze staan. De inhoud leeft sowieso ook op
   nieuwbouw-eeklo.html, en die pagina blijft op mobiel gewoon zichtbaar —
   met een link ernaartoe in het menu. */
@media (max-width:768px){
  #eeklo{display:none}
}