/* Expert Dakbedekkingen: gedeelde opmaak voor alle pagina's */
:root{
  --canvas:#F2F1ED;
  --panel:#E8E7E1;
  --deep:#1E2224;
  --deep-2:#272C2E;
  --accent:#1E7A14;
  --accent-hover:#17610F;
  --accent-bright:#2FA524;
  --accent-muted:#D8E7D2;
  --text-secondary:#565C5B;
  --text-primary:#171A1B;
  --line:#D6D4CC;
  --hero-text:#F6F5F1;
  --tshadow:0 1px 2px rgba(5,7,8,.95),0 3px 12px rgba(5,7,8,.78),0 10px 44px rgba(5,7,8,.8);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --gutter:clamp(20px,5vw,64px);
  --maxw:1240px;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.026em;margin:0}
p{margin:0}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.lede{color:var(--text-secondary);max-width:56ch;font-size:clamp(16px,1.5vw,18.5px)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--canvas);padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- fixed environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(58% 44% at 22% 18%,rgba(216,231,210,.5) 0%,rgba(216,231,210,0) 62%),
    radial-gradient(52% 40% at 82% 66%,rgba(196,206,210,.42) 0%,rgba(196,206,210,0) 64%),
    radial-gradient(70% 50% at 50% 100%,rgba(30,34,36,.06) 0%,rgba(30,34,36,0) 70%);
  animation:drift 84s var(--ease-soft) -22s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
@keyframes drift{from{transform:translate3d(-1.6%,-1%,0) scale(1.02)}to{transform:translate3d(2%,1.4%,0) scale(1.06)}}
.page{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:24px;
  padding:11px var(--gutter);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(242,241,237,.94);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto;position:relative;z-index:3}
.nav .brand img{
  height:64px;width:auto;
  filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(5,7,8,.7));
  transition:filter .5s var(--ease);
}
.nav.solid .brand img{filter:none}
@media (max-width:560px){.nav .brand img{height:52px}}

.menu{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);margin-left:auto}
.links{display:flex;align-items:center;gap:clamp(14px,1.9vw,26px);list-style:none;margin:0;padding:0}
.links>li{position:relative}
.links a,.links .top{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--body);font-size:14.5px;font-weight:500;
  color:var(--hero-text);text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer;
  text-shadow:0 1px 8px rgba(5,7,8,.7);
  transition:color .4s var(--ease),text-shadow .4s var(--ease);
}
.nav.solid .links a,.nav.solid .links .top{color:var(--text-secondary);text-shadow:none}
.nav.solid .links a:hover,.nav.solid .links .top:hover{color:var(--text-primary)}
.links .top svg{transition:transform .35s var(--ease)}
.hassub.open .top svg{transform:rotate(180deg)}
.links a[aria-current="page"]{color:var(--accent-bright)}
.nav.solid .links a[aria-current="page"]{color:var(--accent)}

/* the dropped panel */
.uitklap{
  position:absolute;top:calc(100% + 16px);left:-28px;
  background:var(--canvas);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 26px 70px rgba(12,16,14,.2);
  padding:28px 32px 24px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.hassub:hover .uitklap,.hassub.open .uitklap{opacity:1;visibility:visible;transform:none}
.uitklap::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.subwrap{display:grid;grid-template-columns:repeat(4,minmax(150px,auto));gap:6px 34px}
/* Vier kolommen zijn breder dan het menu-item waar ze onder hangen. Meet het
   paneel daarom vanaf de balk zelf, met dezelfde marge als de rest van de
   pagina, anders steekt het op smallere schermen buiten beeld. */
@media (min-width:1041px){
  .links>li{position:static}
  .hassub .uitklap{left:auto;right:var(--gutter);top:calc(100% + 10px)}
}
.colkop{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.nav .links .uitklap a{
  display:block;color:var(--text-primary);text-shadow:none;font-size:15px;font-weight:400;
  padding:8px 0;white-space:nowrap;transition:color .28s var(--ease),transform .28s var(--ease);
}
.nav .links .uitklap a:hover{color:var(--accent);transform:translateX(3px)}

.acties{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.nav .tel{
  font-family:var(--mono);font-size:14px;text-decoration:none;color:var(--hero-text);
  text-shadow:0 1px 8px rgba(5,7,8,.7);transition:color .4s var(--ease),text-shadow .4s var(--ease);
}
.nav.solid .tel{color:var(--text-primary);text-shadow:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;text-decoration:none;
  padding:13px 22px;border-radius:2px;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.005em;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  box-shadow:0 1px 0 rgba(0,0,0,.12);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 8px 22px rgba(30,122,20,.24)}
.btn.ghost{background:transparent;color:var(--text-primary);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--panel);border-color:var(--text-secondary)}
.nav .btn{flex:0 0 auto;padding:12px 20px;font-size:14.5px}
/* De tweede knop in de balk. Niet zo zwaar als de offerteknop, maar wel een
   eigen gezicht: boven de hero een lichte vulling zodat hij niet wegvalt, en
   zodra de balk dichtslaat het accentgroen, zodat het paar leesbaar blijft
   als hoofd- en nevenactie. */
.nav .btn.ghost{color:#fff;border-color:rgba(246,245,241,.55);background:rgba(246,245,241,.12);backdrop-filter:blur(2px)}
.nav .btn.ghost:hover{background:rgba(246,245,241,.22);border-color:#fff}
.nav.solid .btn.ghost{color:var(--accent);border-color:var(--accent);background:transparent}
.nav.solid .btn.ghost:hover{background:rgba(30,122,20,.09);border-color:var(--accent-hover);color:var(--accent-hover)}
@media (pointer:coarse){.btn{min-height:44px}}

/* the burger, and the panel it opens */
.burger{
  display:none;margin-left:auto;position:relative;z-index:3;
  width:46px;height:42px;flex-direction:column;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:0;
}
.burger span{
  display:block;width:24px;height:2px;background:var(--hero-text);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s var(--ease),background .4s var(--ease);
}
.burger span+span{margin-top:6px}
.nav.solid .burger span{background:var(--text-primary)}
.burger[aria-expanded="true"] span{background:var(--text-primary)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Het menupaneel zit ín de balk, en die balk vormt een eigen laag. Een z-index
   op het paneel zelf helpt dus niet: de hele balk moet omhoog zodra het menu
   openstaat. Anders legt het waas zich over het menu heen en lijkt het dood.
   De volgorde als het open is: balk 80, waas 75, belbalk 70, pagina. */
.nav.menu-open{z-index:80}
.menu-backdrop{
  position:fixed;inset:0;z-index:75;background:rgba(12,16,14,.5);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.menu-backdrop.open{opacity:1;visibility:visible}

@media (max-width:1040px){
  .nav{padding:11px var(--gutter)}
  .nav.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(242,241,237,.98)}
  .burger{display:inline-flex}
  /* het logo en de sluitknop blijven boven het paneel liggen, anders kan
     de bezoeker het menu alleen nog wegklikken via de donkere rand */
  .nav.menu-open .brand img{filter:none}
  .menu{
    position:fixed;top:0;right:0;bottom:0;left:auto;width:min(430px,88vw);
    margin-left:0;z-index:1;
    background:var(--canvas);border-left:1px solid var(--line);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:92px 30px 36px;overflow-y:auto;
    transform:translateX(100%);transition:transform .46s var(--ease);
  }
  .menu.open{transform:none}
  .links{flex-direction:column;align-items:stretch;gap:0}
  .links>li{width:100%}
  .nav .links a,.nav .links .top{
    color:var(--text-primary);text-shadow:none;font-family:var(--display);font-weight:600;
    font-size:19px;padding:16px 0;width:100%;justify-content:space-between;
    border-bottom:1px solid var(--line);
  }
  .uitklap{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;padding:0;max-height:0;overflow:hidden;
    transition:max-height .45s var(--ease);
  }
  .hassub.open .uitklap{max-height:840px}
  .uitklap::before{display:none}
  .subwrap{grid-template-columns:1fr;gap:20px;padding:18px 0 8px}
  .nav .links .uitklap a{font-family:var(--body);font-size:16px;font-weight:400;padding:9px 0;border:0}
  .acties{flex-direction:column;align-items:stretch;gap:11px;margin-top:26px}
  .nav .tel{
    color:var(--text-primary);text-shadow:none;font-size:16px;
    padding:12px 0;text-align:center;border:1px solid var(--line);border-radius:2px;
  }
  .nav .btn{width:100%;padding:15px 20px;font-size:16px}
  .nav .btn.ghost{color:var(--text-primary);border-color:var(--line)}
}


/* ---------- shared section rhythm ---------- */
section{position:relative}
.sec{padding:clamp(84px,11vw,150px) 0}
.sec h2{font-size:clamp(30px,4.1vw,54px)}

/* waterline signature: the swoosh from the logo, drawn at every seam */
.seam{position:relative;height:clamp(56px,7vw,96px);pointer-events:none}
.seam svg{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:100%;display:block;overflow:visible}
.seam path{
  fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.42;
}
.seam .thin{stroke:var(--line);stroke-width:1.4;opacity:1}
.seam .draw{transition:stroke-dashoffset 1.7s var(--ease)}

/* premise */
#premisse .head{max-width:60ch}
.proef{
  margin:clamp(38px,5vw,62px) 0 0;background:var(--panel);border:1px solid var(--line);
  border-radius:3px;padding:clamp(20px,3vw,34px);
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,40px);align-items:center;
}
.proef svg{width:100%;height:auto;display:block}
.proef .ctrl h3{font-size:20px;margin-bottom:10px}
.proef .ctrl p{color:var(--text-secondary);font-size:15.5px}
.hold{
  margin-top:18px;width:100%;position:relative;overflow:hidden;
  background:var(--deep);color:#fff;border:0;border-radius:2px;padding:15px 20px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:15px;
  touch-action:none;user-select:none;
}
.hold .fill{position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(var(--p,0));opacity:.9}
.hold .lbl{position:relative}
.hold.filled{background:var(--accent)}
.hp{transition:opacity .5s var(--ease);color:var(--text-secondary)}
.hp .dot{fill:#8E938F;transition:fill .5s var(--ease)}
.hp text{font-family:var(--mono);font-size:13px;fill:var(--text-secondary)}
.hp[data-lit="0"]{opacity:.5}
.hp[data-lit="1"]{opacity:1;color:var(--accent)}
.hp[data-lit="1"] .dot{fill:var(--accent)}
.hp[data-lit="1"] text{fill:var(--accent);font-weight:700}
.layer text{font-family:var(--mono);font-size:11px;fill:#8E938F;letter-spacing:.06em}
.water{fill:rgba(74,126,155,.34)}
.wline{stroke:#4A7E9B;stroke-width:2;fill:none;vector-effect:non-scaling-stroke}

.cards{margin-top:clamp(34px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.card{
  background:var(--canvas);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transition:box-shadow .7s var(--ease),border-color .7s var(--ease),transform .7s var(--ease);
}
.card.lit{border-color:var(--accent);box-shadow:0 16px 38px rgba(23,26,27,.11);transform:translateY(-3px)}
.card.lit .num{color:var(--accent)}
.card figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover img{transform:scale(1.045)}
.card .txt{padding:18px 18px 22px}
.card h3{font-size:17.5px;margin-bottom:8px}
.card p{font-size:14.6px;color:var(--text-secondary);line-height:1.55}
.card .num{font-family:var(--mono);font-size:11.5px;color:var(--accent);letter-spacing:.14em;display:block;margin-bottom:9px}

/* werk gallery */
#werk{background:var(--panel);border-block:1px solid var(--line)}
.gal{margin-top:clamp(34px,4vw,54px);display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px)}
.gal figure{margin:0;overflow:hidden;background:var(--canvas);border-radius:3px}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.g-a{grid-column:span 4;aspect-ratio:16/10}
.g-b{grid-column:span 2;aspect-ratio:3/4}
.g-c{grid-column:span 2;aspect-ratio:3/4}
.g-d{grid-column:span 2;aspect-ratio:3/4}
.g-e{grid-column:span 2;aspect-ratio:3/4}
.g-f{grid-column:span 6;aspect-ratio:24/9}

/* stappen */
.stappen{margin-top:clamp(36px,4vw,58px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.stap figure{margin:0 0 20px;aspect-ratio:5/4;overflow:hidden;border-radius:3px;background:var(--panel)}
.stap img{width:100%;height:100%;object-fit:cover}
.stap .num{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--accent);display:block;margin-bottom:10px}
.stap h3{font-size:22px;margin-bottom:10px}
.stap p{color:var(--text-secondary);font-size:15.6px}

/* diensten */
#diensten .grid{margin-top:clamp(30px,3.6vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,80px)}
.dienst{
  display:flex;align-items:baseline;gap:16px;padding:20px 0;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:border-color .35s var(--ease),padding-left .35s var(--ease);
}
a.dienst:hover{border-top-color:var(--accent);padding-left:8px}
a.dienst:hover h3{color:var(--accent)}
.dienst .n{font-family:var(--mono);font-size:12px;color:var(--accent);flex:0 0 auto}
.dienst h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,25px);letter-spacing:-.015em;transition:color .35s var(--ease)}
.dienst p{margin-top:6px;color:var(--text-secondary);font-size:15px}

/* dark band */
.deepband{background:var(--deep);color:#EDEEEC}
.deepband h2{font-size:clamp(30px,4.4vw,58px);max-width:16ch}
.deepband .lede{color:#B9BEBC}
.chips{margin-top:clamp(30px,3.6vw,46px);display:flex;flex-wrap:wrap;gap:12px}
.chip{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(246,245,241,.055);border:1px solid rgba(246,245,241,.16);
  border-radius:2px;padding:11px 16px;font-size:14.5px;color:#E6E8E6;
}
.chip svg{flex:0 0 auto;color:var(--accent-bright)}
.deepband .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);align-items:end}
.deepband figure{margin:0;border-radius:3px;overflow:hidden;aspect-ratio:4/3}
.deepband figure img{width:100%;height:100%;object-fit:cover}

/* faq */
.faqGrid{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:clamp(26px,4.5vw,80px);align-items:start}
.faqGrid .faqHead{position:sticky;top:118px}
.faq{border-top:1px solid var(--line)}
@media (max-width:900px){
  .faqGrid{grid-template-columns:1fr;gap:0}
  .faqGrid .faqHead{position:static}
  .faq{margin-top:clamp(28px,3.4vw,46px)}
}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%;display:flex;align-items:flex-start;gap:18px;justify-content:space-between;
  background:none;border:0;text-align:left;padding:22px 0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.8vw,20.5px);letter-spacing:-.012em;
}
.q .ic{flex:0 0 auto;width:22px;height:22px;margin-top:3px;color:var(--accent);transition:transform .45s var(--ease)}
.q[open] .ic,.q.open .ic{transform:rotate(45deg)}
.q .a{overflow:hidden;height:0;transition:height .5s var(--ease)}
.q .a p{padding:0 0 24px;color:var(--text-secondary);max-width:64ch;font-size:16px}

/* cta */
#dakinspectie{background:var(--panel);border-top:1px solid var(--line)}
.ctaGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start}
form{margin-top:26px;display:grid;gap:14px}
.f{display:grid;gap:7px}
.f label{font-size:13.5px;font-weight:500;color:var(--text-secondary)}
.f input,.f textarea{
  font:inherit;font-size:16px;padding:13px 14px;border:1px solid #C9C7BE;border-radius:2px;
  background:var(--canvas);color:var(--text-primary);width:100%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,122,20,.16)}
.f textarea{min-height:104px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formNote{font-size:13.5px;color:var(--text-secondary);margin-top:4px}
.sent{display:none;background:var(--canvas);border:1px solid var(--accent-muted);border-left:3px solid var(--accent);padding:20px 22px;border-radius:2px;margin-top:26px}
.sent.show{display:block}
/* the form is long and the box is short, so the right column read as a hole:
   let the box ride along while the visitor fills the form in */
@media (min-width:901px){.aside{position:sticky;top:112px}}
.aside .box{background:var(--canvas);border:1px solid var(--line);border-radius:3px;padding:clamp(22px,3vw,32px)}
.aside .tel{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,34px);text-decoration:none;letter-spacing:-.02em;margin-top:6px}
.aside ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px}
.aside li{display:flex;gap:12px;align-items:flex-start;font-size:15.4px;color:var(--text-secondary)}
.aside li svg{flex:0 0 auto;color:var(--accent);margin-top:4px}

/* footer */
footer{background:var(--deep);color:#B9BEBC;padding:clamp(50px,6vw,76px) 0 34px;font-size:14.8px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
footer h3{font-family:var(--display);font-weight:700;font-size:20px;color:#F1F2F0;letter-spacing:-.02em}
footer a{color:#B9BEBC;text-decoration:none;transition:color .3s var(--ease)}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
footer .fine{margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:1px solid rgba(246,245,241,.13);display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;color:#8E9492;font-size:13.4px}

/* entrances */
.rev{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rev.in{opacity:1;transform:none}
.stg>*{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.stg.in>*{opacity:1;transform:none}
.stg.in>*:nth-child(1){transition-delay:0s}
.stg.in>*:nth-child(2){transition-delay:.09s}
.stg.in>*:nth-child(3){transition-delay:.18s}
.stg.in>*:nth-child(4){transition-delay:.27s}
.stg.in>*:nth-child(5){transition-delay:.36s}
.stg.in>*:nth-child(6){transition-delay:.45s}
.stg.done>*:nth-child(1),.stg.done>*:nth-child(2),.stg.done>*:nth-child(3),
.stg.done>*:nth-child(4),.stg.done>*:nth-child(5),.stg.done>*:nth-child(6){transition-delay:0s}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .proef{grid-template-columns:1fr}
  .deepband .split{grid-template-columns:1fr}
  .ctaGrid{grid-template-columns:1fr}
  .stappen{grid-template-columns:1fr;gap:34px}
  #diensten .grid{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .cards{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(4,1fr)}
  .g-a{grid-column:span 4}
  .g-b,.g-c,.g-d,.g-e{grid-column:span 2}
  .g-f{grid-column:span 4;aspect-ratio:16/9}
}
@media (max-width:560px){
  body{font-size:16.4px}
  .cards{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .g-a,.g-b,.g-c,.g-d,.g-e{grid-column:span 2}
  .g-f{grid-column:span 2;aspect-ratio:16/10}
  .two{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
}
@media (max-height:560px){.chev{display:none}}

/* static hero gates: these five must match the JS GATES array exactly.
   De standaard staat hier, direct boven de poorten, zodat het tonen en
   verbergen op één plek staat en niets het later kan overschrijven. */
.static-hero{display:none}
@media (max-width:720px){.hero{display:none}.static-hero{display:flex}}
@media (orientation:portrait) and (max-width:1024px){.hero{display:none}.static-hero{display:flex}}
@media (orientation:portrait) and (pointer:coarse){.hero{display:none}.static-hero{display:flex}}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){.hero{display:none}.static-hero{display:flex}}
@media (prefers-reduced-motion:reduce){.hero{display:none}.static-hero{display:flex}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rev,.stg>*{opacity:1!important;transform:none!important}
  .card{opacity:1!important;transform:none!important}
  .b4{transform:translateX(-50%)!important}
  .env::before{transform:none!important}
}

/* ---------- subpagina's ---------- */
.phero{position:relative;min-height:clamp(400px,52vh,540px);display:flex;align-items:flex-end;background:var(--deep);overflow:hidden}
.phero .shot{position:absolute;inset:0;background-size:cover;background-position:50% 56%;transform:scale(1.04)}
.phero .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,11,12,.93) 0%,rgba(8,11,12,.68) 44%,rgba(8,11,12,.5) 100%)}
.phero .inner{position:relative;width:100%;padding:120px 0 clamp(38px,4.6vw,60px)}
.phero h1{color:var(--hero-text);font-size:clamp(33px,5.4vw,68px);max-width:20ch;text-shadow:var(--tshadow)}
.phero .lede{color:rgba(246,245,241,.88);margin-top:20px;max-width:50ch;text-shadow:0 1px 10px rgba(5,7,8,.7)}
.phero .row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.phero .btn.ghost{color:var(--hero-text);border-color:rgba(246,245,241,.5);backdrop-filter:blur(6px)}
.phero .btn.ghost:hover{background:rgba(246,245,241,.14);border-color:rgba(246,245,241,.85)}
.kruimels{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,245,241,.66);margin:0 0 20px}
.kruimels a{text-decoration:none;color:inherit;transition:color .3s var(--ease)}
.kruimels a:hover{color:var(--hero-text)}
.kruimels span{margin:0 9px;opacity:.5}

.tweeluik{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4.4vw,76px);align-items:start}
.prose h2{font-size:clamp(27px,3.5vw,44px);margin-bottom:20px}
.prose h3{font-size:clamp(19px,2vw,24px);margin:38px 0 12px}
.prose p{color:var(--text-secondary);margin-bottom:16px;max-width:62ch}
.prose p strong{color:var(--text-primary);font-weight:600}
.lijst{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:13px}
.lijst li{display:flex;gap:12px;align-items:flex-start;color:var(--text-secondary);font-size:16px}
.lijst li svg{flex:0 0 auto;color:var(--accent);margin-top:5px}
.blok{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:clamp(24px,2.8vw,34px)}
.blok h3{font-size:19px;margin-bottom:12px}
.blok p{color:var(--text-secondary);font-size:15.6px}
.blok .tel{display:block;font-family:var(--display);font-weight:700;font-size:clamp(23px,2.6vw,30px);text-decoration:none;letter-spacing:-.02em;margin-top:8px}
.blok .btn{margin-top:20px;width:100%}
.zijfoto{margin:0;border-radius:3px;overflow:hidden;background:var(--panel);aspect-ratio:4/5}
.zijfoto img{width:100%;height:100%;object-fit:cover}
.blok+.zijfoto{margin-top:22px}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px);margin-top:34px}
.duo .kaart{background:var(--canvas);border:1px solid var(--line);border-radius:3px;padding:clamp(22px,2.6vw,30px)}
.duo .kaart h3{font-size:20px;margin-bottom:10px}
.duo .kaart p{color:var(--text-secondary);font-size:15.6px;margin:0}
.duo .kaart .merk{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}

.stappenrij{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px);margin-top:40px}
.stappenrij .stapje{border-top:2px solid var(--line);padding-top:18px}
.stappenrij .stapje .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.12em}
.stappenrij .stapje h3{font-size:17.5px;margin:10px 0 8px}
.stappenrij .stapje p{color:var(--text-secondary);font-size:15px;margin:0}

.slotcta{background:var(--deep);color:var(--hero-text);padding:clamp(60px,7.5vw,100px) 0;position:relative;overflow:hidden}
.slotcta h2{font-size:clamp(28px,3.9vw,50px);max-width:20ch}
.slotcta p{color:rgba(246,245,241,.78);margin-top:18px;max-width:52ch}
.slotcta .row{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap}
.slotcta .btn.ghost{color:var(--hero-text);border-color:rgba(246,245,241,.42)}
.slotcta .btn.ghost:hover{background:rgba(246,245,241,.12);border-color:rgba(246,245,241,.8)}

@media (max-width:940px){
  .tweeluik{grid-template-columns:1fr;gap:34px}
  .stappenrij{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .duo{grid-template-columns:1fr}
  .stappenrij{grid-template-columns:1fr}
  .phero .inner{padding-top:104px}
}

/* ---------- spoedstrook, direct onder de hero ---------- */
/* Rustig en donker, met één groene knop. Een volvlak groene balk met
   onderstreepte tekst leest als een actiebanner, en dat is het tegendeel
   van waar deze site voor staat. */
.spoed{background:var(--deep-2);color:var(--hero-text);border-bottom:1px solid rgba(246,245,241,.1)}
.spoed .wrap{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,2.4vw,28px);flex-wrap:wrap;
  padding-top:17px;padding-bottom:17px;
}
.spoed p{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.55vw,17.5px);letter-spacing:-.01em}
.spoed .stip{
  width:8px;height:8px;border-radius:50%;background:var(--accent-bright);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(47,165,36,.18);
}
.spoed .btn{padding:10px 18px;font-size:14.5px;min-height:0}
.spoed .los{color:rgba(246,245,241,.62);font-size:14.6px}
@media (max-width:560px){
  .spoed .wrap{gap:12px;padding-top:14px;padding-bottom:14px}
  .spoed .los{display:none}
}

/* ---------- keurmerken en feiten ---------- */
.merkband{background:var(--deep);color:var(--hero-text);padding:clamp(38px,4.6vw,60px) 0}
.merkband .kicker{color:var(--accent-bright);text-align:center;margin-bottom:26px}
.merken{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(20px,4vw,60px);
}
.merken li{
  font-family:var(--display);font-weight:700;font-size:clamp(17px,2.1vw,25px);
  letter-spacing:.02em;color:rgba(246,245,241,.92);
  display:flex;align-items:center;gap:clamp(20px,4vw,60px);
}
.merken li::after{content:"";width:1px;height:26px;background:rgba(246,245,241,.22)}
.merken li:last-child::after{display:none}
.merken img{height:clamp(30px,3.4vw,44px);width:auto;filter:brightness(0) invert(1);opacity:.9}
.feiten{
  list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px clamp(18px,2.6vw,34px);
}
.feiten li{
  display:flex;gap:10px;align-items:flex-start;
  color:rgba(246,245,241,.76);font-size:15.2px;line-height:1.5;
}
.feiten li svg{flex:0 0 auto;color:var(--accent-bright);margin-top:4px}
@media (max-width:860px){.feiten{grid-template-columns:1fr 1fr}}
@media (max-width:520px){
  .feiten{grid-template-columns:1fr}
  .merken{gap:14px 22px}
  .merken li{gap:14px 22px;font-size:16px}
  .merken li::after{height:18px}
}

/* ---------- vaste belbalk op de telefoon ---------- */
.belbalk{display:none}
@media (max-width:720px){
  .belbalk{
    display:grid;grid-template-columns:1.25fr 1fr;gap:0;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    border-top:1px solid rgba(0,0,0,.16);
    box-shadow:0 -8px 26px rgba(10,14,12,.18);
  }
  .belbalk a{
    display:flex;align-items:center;justify-content:center;gap:9px;
    min-height:58px;padding:10px 12px;text-decoration:none;
    font-family:var(--display);font-weight:600;font-size:16px;
  }
  .belbalk .bel{background:var(--accent);color:#fff}
  .belbalk .vraag{background:var(--deep);color:var(--hero-text)}
  /* uit zolang het menu openstaat, anders ligt hij over het paneel heen */
  body.menu-open .belbalk{opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
  body{padding-bottom:58px}
  /* het paneel van het menu moet boven de belbalk uit komen */
  /* geen eigen z-index meer op het paneel: dat wordt hierboven geregeld
     door de hele balk omhoog te zetten zodra het menu openstaat */
}
@media (max-width:720px) and (prefers-reduced-motion:no-preference){
  .belbalk a{transition:background .3s var(--ease)}
}

/* ---------- oproep tussen de secties ---------- */
.tussencta{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--panel);
}
.tussencta .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;padding-top:clamp(26px,3.4vw,40px);padding-bottom:clamp(26px,3.4vw,40px);
}
.tussencta p{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.3vw,27px);letter-spacing:-.02em;max-width:34ch}
.tussencta .row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- verwante diensten ---------- */
.verwant{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);margin-top:22px}
.verwantkaart{
  display:block;text-decoration:none;background:var(--canvas);
  border:1px solid var(--line);border-radius:3px;padding:clamp(22px,2.5vw,30px);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.verwantkaart:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,30,22,.09)}
.verwantkaart h3{font-size:19.5px;margin-bottom:10px}
.verwantkaart p{color:var(--text-secondary);font-size:15.4px;margin:0}
.verwantkaart .meer{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  color:var(--accent);font-weight:600;font-size:15px;
}
.verwantkaart .meer svg{transition:transform .35s var(--ease)}
.verwantkaart:hover .meer svg{transform:translateX(4px)}
@media (max-width:860px){.verwant{grid-template-columns:1fr}}

/* het verborgen veld tegen robots: onzichtbaar, maar niet met display:none,
   want een deel van de robots slaat verborgen velden dan juist over */
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formFout{margin-top:12px;color:#A3231B;font-size:15px;font-weight:500}

/* ---------- keurmerken en merken ---------- */
/* Lichte band: logo's houden hun eigen kleuren, want de meeste keurmerken
   staan niet toe dat hun merk wordt omgekleurd. */
.logoband{background:var(--canvas);border-top:1px solid var(--line);padding:clamp(42px,5vw,68px) 0}
.logogroep+.logogroep{margin-top:clamp(28px,3.4vw,42px)}
.logoband .kicker{text-align:center;margin-bottom:20px;color:var(--text-secondary)}
.logorij{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,3.6vw,54px);
}
.logorij li{display:flex;align-items:center;justify-content:center}
/* Keurmerken staan in hun eigen kleuren: een grijs gemaakt keurmerk is
   niet meer herkenbaar, en herkenbaarheid is precies waar het voor dient. */
.logorij img{width:auto;object-fit:contain;opacity:.92;transition:opacity .4s var(--ease)}
.logorij li:hover img{opacity:1}
.logorij .breed img{height:clamp(30px,3.4vw,44px);max-width:190px}
.logorij .normaal img{height:clamp(38px,4.2vw,56px);max-width:170px}
.logorij .vierkant img{height:clamp(52px,5.6vw,74px);max-width:110px}
.logorij.klein .breed img{height:clamp(26px,2.9vw,38px)}
.logorij.klein .normaal img{height:clamp(31px,3.4vw,45px)}
.logorij.klein .vierkant img{height:clamp(40px,4.3vw,57px)}
.logorij .naamalleen{
  font-family:var(--display);font-weight:700;font-size:clamp(16px,1.9vw,22px);
  color:var(--text-secondary);letter-spacing:.01em;
}
.logoband .feiten{
  list-style:none;padding:clamp(28px,3.4vw,40px) 0 0;
  margin:clamp(28px,3.4vw,40px) 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px clamp(18px,2.6vw,34px);
}
.logoband .feiten li{color:var(--text-secondary)}
.logoband .feiten li svg{color:var(--accent)}
/* deze regel moet even specifiek zijn als die hierboven, anders stapelen de
   feiten niet op smalle schermen en lopen ze het beeld uit */
@media (max-width:860px){.logoband .feiten{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.logoband .feiten{grid-template-columns:1fr}}


/* ---------- brede foto met onderschrift ---------- */
.breedfoto{margin:0}
.breedfoto img{width:100%;height:auto;border-radius:3px;display:block}
.breedfoto figcaption{
  margin-top:14px;color:var(--text-secondary);font-size:15px;
  max-width:62ch;
}

/* ---------- projecten ---------- */
.projectgroep + .projectgroep{margin-top:clamp(52px,6vw,86px)}
.groepkop{max-width:62ch}
.groepkop h3{font-size:clamp(22px,2.7vw,32px)}
.groepkop p{margin-top:14px;color:var(--text-secondary);font-size:clamp(15.5px,1.4vw,17.5px)}
.projectrij{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.2vw,28px);margin-top:clamp(24px,2.8vw,36px);
}
.projectfoto{margin:0}
.projectfoto img{
  width:100%;height:auto;border-radius:3px;display:block;
  background:var(--panel);
}
.projectfoto figcaption{
  margin-top:12px;color:var(--text-secondary);font-size:14.6px;line-height:1.55;
}
@media (max-width:620px){.projectrij{grid-template-columns:1fr}}

/* ---------- klantbeoordelingen ----------
   Citaten staan letterlijk zoals ze op het Google-bedrijfsprofiel staan.
   Links uitgelijnd binnen een gecentreerde sectie: een citaat leest niet
   prettig als het gecentreerd staat. */
.beoordelingen{
  list-style:none;margin:38px 0 0;padding:0;
  display:grid;gap:18px;text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.beoordelingen li{
  background:var(--canvas);border:1px solid var(--line);border-radius:6px;
  padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;
}
.sterretjes{color:var(--accent);font-size:16px;letter-spacing:2px;line-height:1}
.beoordelingen blockquote{
  margin:14px 0 0;padding:0;border:0;flex:1;
  font-family:var(--body);font-size:15.4px;line-height:1.62;color:var(--text-primary);
}
.beoordelingen blockquote::before{content:"\201C"}
.beoordelingen blockquote::after{content:"\201D"}
.beoordelingen cite{
  margin-top:16px;font-style:normal;
  font-family:var(--mono);font-size:12.6px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-secondary);
}