@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--cyan:#04c6e5;--blue:#05add8;--ink:#172131;--muted:#5f6c79;--light:#f3f7fa;--line:#dbe5eb}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:white}a{text-decoration:none;color:inherit}
.topline{height:34px;padding:0 4.5%;display:flex;align-items:center;justify-content:flex-end;gap:36px;font-size:10px;font-weight:700;background:#fff}
header{height:92px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9eef1;background:white;position:sticky;top:0;z-index:30}.logo{width:190px;height:80px;object-fit:contain}nav{display:flex;gap:16px;align-items:center}nav a{font-size:12px;font-weight:700;padding:12px 18px;border-radius:8px}nav a:hover,nav .active{background:var(--cyan);color:white}.pill{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--cyan);color:#052736;border-radius:28px;padding:14px 24px;font-size:12px;font-weight:800}.pill:hover{filter:brightness(.96)}
.hero{height:540px;position:relative;overflow:hidden}.hero>img{width:100%;height:100%;object-fit:cover;object-position:65% center}.fade{position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 20%,#ffffffee 28%,#ffffff8a 38%,transparent 56%)}.heroCopy{position:absolute;left:5%;top:50%;transform:translateY(-50%);width:430px}.heroCopy h1{font-size:51px;line-height:1.03;letter-spacing:-.05em;margin:0;font-weight:800}.heroCopy h1 em{font-style:normal;color:var(--cyan)}.heroCopy>i{display:block;width:60px;height:4px;background:var(--cyan);border-radius:3px;margin:23px 0 16px}.heroCopy p{max-width:380px;font-size:13px;line-height:1.6}.buttons{display:flex;gap:13px;margin-top:25px}.outline{border:1px solid #243342;border-radius:28px;padding:12px 27px;font-size:12px;font-weight:700;background:#fff}
.servicebar{height:170px;padding:0 2%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:white}.servicebar img{width:100%;max-width:1450px;height:310px;object-fit:cover;object-position:center 52%}
.about{padding:35px 2.5% 45px;display:grid;grid-template-columns:1.05fr 1fr .63fr;gap:28px;align-items:center}.vanVisual{height:350px;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#79bce7,#f5b15d);position:relative}.van{position:absolute;left:-4%;bottom:-8px;width:105%;height:78%;background:#102f4b;border-radius:25px 80px 10px 10px;box-shadow:0 25px 45px #12293c55}.van:after{content:"";position:absolute;right:5%;top:15%;width:26%;height:48%;background:linear-gradient(145deg,#77b4d4,#183e59);clip-path:polygon(12% 0,100% 8%,100% 100%,0 100%)}.rack{position:absolute;left:10%;top:-35px;width:72%;height:25px;border-top:6px solid #172737;border-left:5px solid #172737;border-right:5px solid #172737}.vanLogo{position:absolute;left:26%;top:25%;color:white;font-size:24px;line-height:1}.vanLogo strong{display:block;color:var(--cyan);font-size:39px;margin-top:8px}.vanLogo small{font-size:19px}.stripe{position:absolute;left:0;bottom:24%;width:65%;height:15px;background:var(--cyan);transform:skewY(-7deg)}.wheel{position:absolute;bottom:-15px;width:66px;height:66px;background:#15202a;border:9px solid #283b4a;border-radius:50%}.w1{left:16%}.w2{right:15%}
.sectionLabel{font-size:13px;color:var(--blue);font-weight:800}.sectionLabel i{display:inline-block;width:38px;height:4px;background:var(--cyan);vertical-align:middle;margin-right:10px;border-radius:3px}.aboutText h2,.story h2,.projects h2{font-size:32px;line-height:1.08;letter-spacing:-.04em;margin:18px 0}.aboutText p,.story p,.projects p{font-size:11px;line-height:1.55;color:#334353}.aboutText .pill{margin-top:10px;color:white}.values{background:var(--light);border-radius:12px;padding:5px 20px}.values div{min-height:66px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--cyan);font-size:12px;font-weight:700}.values div:last-child{border:0}.values b{font-size:31px;font-weight:400}.values .green{color:#44a625}
.story,.projects{padding:75px 8%;background:#f7fafb}.story h2 em,.projects h2 em{font-style:normal;color:var(--blue)}.storyGrid{display:grid;grid-template-columns:1fr 1fr;gap:45px;max-width:950px}.projects{background:white}.projects>p{max-width:750px;font-size:13px}
.contact{min-height:145px;padding:25px 4.5%;display:grid;grid-template-columns:65px 1fr auto;gap:22px;align-items:center;color:white;background:linear-gradient(90deg,#06324b,#0d4965,#092d43)}.calendar{width:52px;height:52px;border:4px solid var(--cyan);border-radius:8px;color:var(--cyan);font-size:30px;display:grid;place-items:center}.contact h2{font-size:23px;margin:0 0 5px}.contact p{font-size:12px;margin:0;color:#d1e0e8}.contactlinks{display:flex;align-items:center;gap:20px;font-size:12px}.contactlinks>a:first-child{color:#d7e8ef}footer{height:95px;padding:12px 5%;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#74808a}footer img{width:150px;height:70px;object-fit:contain}
@media(max-width:900px){.topline{display:none}nav{display:none}.hero{height:500px}.heroCopy{width:390px}.servicebar{height:145px}.servicebar img{width:1150px;max-width:none;height:255px;flex:none}.about{grid-template-columns:1fr 1fr}.values{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.contact{grid-template-columns:60px 1fr}.contactlinks{grid-column:2;justify-content:flex-start}}
@media(max-width:560px){header{height:76px;padding:0 4%}.logo{width:145px;height:62px}header>.pill{font-size:9px;padding:10px 13px}.hero{height:620px}.hero>img{height:48%;object-position:68% center}.fade{background:linear-gradient(0deg,#fff 47%,transparent 68%)}.heroCopy{left:6%;top:auto;bottom:35px;transform:none;width:88%}.heroCopy h1{font-size:41px}.servicebar{height:125px;justify-content:flex-start;overflow-x:auto}.servicebar img{width:960px;height:210px;max-width:none;flex:none}.about{padding:40px 5%;grid-template-columns:1fr}.vanVisual{height:260px}.aboutText h2{font-size:29px}.values{grid-column:auto;display:block}.story,.projects{padding:60px 6%}.storyGrid{grid-template-columns:1fr;gap:10px}.contact{grid-template-columns:50px 1fr;padding:30px 5%}.contactlinks{grid-column:1/-1;align-items:flex-start;flex-direction:column}footer{height:auto;min-height:130px;align-items:flex-start;flex-direction:column;padding:20px 5%}}

/* Echte aangeleverde bedrijfswagenfoto */
.vanVisual{background:#f4f6f7;}
.vanVisual .bedrijfswagen{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
@media(max-width:560px){
  .vanVisual .bedrijfswagen{object-fit:cover;object-position:center;}
}

/* Definitieve bedrijfswagen: Huizing-logo + geblurde kentekenplaat */
.vanVisual{
  background:#f5f7f8;
  overflow:hidden;
}
.vanVisual .bedrijfswagen{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 52%;
}
@media(max-width:560px){
  .vanVisual .bedrijfswagen{
    object-position:center 50%;
  }
}


/* =========================================================
   RESPONSIVE AFMETINGEN - definitieve STRATO versie
   Ontworpen voor 1920, 1440, 1366, 1280, tablet en mobiel.
   ========================================================= */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
img { max-width:100%; }
header, main, footer, section { max-width:100%; }

header{
  width:100%;
  min-height:82px;
  height:auto;
  padding:8px clamp(20px,5vw,80px);
  gap:24px;
}
.logo{width:clamp(150px,15vw,220px);height:76px;}
nav{flex:1;justify-content:center;}
header>.pill{white-space:nowrap;}

.hero{
  width:100%;
  height:clamp(500px,42vw,680px);
  min-height:500px;
}
.hero>img{width:100%;height:100%;object-fit:cover;object-position:66% center;}
.heroCopy{
  left:clamp(28px,5vw,90px);
  width:min(460px,42vw);
}
.heroCopy h1{font-size:clamp(42px,4.25vw,68px);}
.heroCopy p{font-size:clamp(13px,1vw,16px);max-width:430px;}

.servicebar{
  width:100%;
  height:clamp(145px,12vw,205px);
  padding:0 clamp(10px,2.5vw,45px);
}
.servicebar img{
  width:min(100%,1600px);
  height:auto;
  max-height:none;
  object-fit:contain;
}

.about{
  width:min(1600px,100%);
  margin:0 auto;
  padding:clamp(45px,5vw,85px) clamp(25px,4vw,70px);
  grid-template-columns:minmax(330px,1.05fr) minmax(350px,1fr) minmax(250px,.63fr);
}
.vanVisual{height:clamp(320px,29vw,470px);}
.aboutText h2{font-size:clamp(30px,2.6vw,43px);}
.aboutText p{font-size:clamp(12px,.9vw,14px);}

.story,.projects{
  padding:clamp(60px,6vw,100px) clamp(30px,8vw,150px);
}
.story h2,.projects h2{font-size:clamp(34px,3.2vw,52px);}

.contact{
  width:100%;
  min-height:145px;
  padding:28px clamp(25px,5vw,90px);
}
footer{width:100%;padding:14px clamp(25px,5vw,90px);}

@media (min-width:1600px){
  .topline{padding-left:7%;padding-right:7%;}
  header{padding-left:7%;padding-right:7%;}
  .heroCopy{left:7%;}
  .hero>img{object-position:70% center;}
}

@media (max-width:1200px){
  nav{gap:4px;}
  nav a{padding:11px 10px;}
  .about{grid-template-columns:1fr 1fr;}
  .values{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);}
  .values div{border-bottom:0;border-right:1px solid var(--cyan);padding:0 14px;}
  .values div:last-child{border-right:0;}
}

@media (max-width:900px){
  header{min-height:78px;}
  .hero{height:520px;min-height:520px;}
  .heroCopy{width:min(410px,52vw);}
  .servicebar{height:145px;overflow-x:auto;justify-content:flex-start;}
  .servicebar img{width:1100px;max-width:none;flex:none;height:auto;}
  .about{grid-template-columns:1fr;padding:55px 6%;}
  .vanVisual{height:390px;}
  .values{grid-column:auto;grid-template-columns:1fr 1fr;}
  .values div{border-right:0;border-bottom:1px solid var(--cyan);}
}

@media (max-width:600px){
  header{padding:7px 4%;min-height:72px;}
  .logo{width:145px;height:58px;}
  header>.pill{font-size:9px;padding:10px 12px;gap:8px;}
  .hero{height:650px;min-height:650px;}
  .hero>img{
    position:absolute;top:0;right:0;
    width:100%;height:48%;
    object-position:68% center;
  }
  .fade{background:linear-gradient(0deg,#fff 46%,#fffffffa 52%,transparent 70%);}
  .heroCopy{left:6%;bottom:38px;top:auto;transform:none;width:88%;}
  .heroCopy h1{font-size:clamp(38px,11vw,48px);}
  .heroCopy p{font-size:12px;}
  .buttons{flex-wrap:wrap;}
  .servicebar{height:130px;padding:0;overflow-x:auto;}
  .servicebar img{width:1000px;max-width:none;flex:none;}
  .vanVisual{height:280px;}
  .about{padding:50px 5%;}
  .values{grid-template-columns:1fr;}
  .story,.projects{padding:55px 6%;}
  .storyGrid{grid-template-columns:1fr;}
  .contact{grid-template-columns:50px 1fr;padding:30px 5%;}
  .contactlinks{grid-column:1/-1;flex-direction:column;align-items:flex-start;}
  footer{height:auto;min-height:140px;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 5%;}
}

/* Over ons pagina */
.overHero{padding:90px 8%;background:linear-gradient(110deg,#f8fbfc,#e9f8fc);border-bottom:1px solid var(--line)}
.overHero>div{max-width:1050px;margin:auto}
.overHero h1{font-size:clamp(42px,5vw,70px);line-height:1.04;letter-spacing:-.055em;margin:22px 0}
.overHero h1 em{font-style:normal;color:var(--blue)}
.overHero p{max-width:700px;font-size:15px;line-height:1.8;color:var(--muted)}
.overStory{max-width:1450px;margin:auto;padding:80px 7%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:70px;align-items:start}
.overStory article{max-width:850px}
.overStory article h2{font-size:30px;line-height:1.15;letter-spacing:-.035em;margin:45px 0 14px}
.overStory article h2:first-child{margin-top:0}
.overStory article p{font-size:14px;line-height:1.85;color:#465867}
.overStory blockquote{margin:45px 0 0;padding:24px 28px;border-left:5px solid var(--cyan);background:#f3f8fa;font-size:20px;font-weight:800}
.overSide{position:sticky;top:115px;background:#f4f8fa;border-radius:14px;overflow:hidden}
.overSide img{width:100%;height:300px;object-fit:cover;display:block}
.facts{padding:25px}
.facts b{display:block;font-size:24px;color:var(--blue);margin-bottom:18px}
.facts span{display:block;padding:14px 0;border-top:1px solid #d7e5ea;font-size:13px;font-weight:700}
@media(max-width:900px){.overStory{grid-template-columns:1fr;gap:35px}.overSide{position:static}.overSide img{height:380px}}
@media(max-width:600px){.overHero{padding:65px 6%}.overStory{padding:55px 6%}.overStory article h2{font-size:26px}.overStory article p{font-size:13px}.overSide img{height:250px}}

/* Diensten pagina */
.dienstHero{padding:90px 8%;background:linear-gradient(110deg,#f8fbfc,#e8f8fc);border-bottom:1px solid var(--line)}
.dienstHero>div{max-width:1100px;margin:auto}
.dienstHero h1{font-size:clamp(43px,5vw,70px);line-height:1.04;letter-spacing:-.055em;margin:22px 0}
.dienstHero h1 em,.oneContact h2 em{font-style:normal;color:var(--blue)}
.dienstHero p{max-width:780px;font-size:15px;line-height:1.8;color:var(--muted)}
.dienstIntro{max-width:1200px;margin:auto;padding:70px 8% 35px;text-align:center}
.dienstIntro h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em;margin:0 0 18px}
.dienstIntro p{max-width:850px;margin:auto;font-size:14px;line-height:1.8;color:#526473}
.dienstBlocks{max-width:1250px;margin:auto;padding:20px 7% 90px}
.dienstBlocks article{display:grid;grid-template-columns:90px 1fr;gap:30px;padding:42px 0;border-bottom:1px solid #dce6eb}
.dienstNr{width:62px;height:62px;border:2px solid var(--cyan);border-radius:50%;display:grid;place-items:center;color:var(--blue);font-size:12px;font-weight:800}
.dienstBlocks h2{font-size:28px;letter-spacing:-.035em;margin:0 0 15px}
.dienstBlocks p{font-size:14px;line-height:1.8;color:#526473;max-width:900px}
.oneContact{padding:75px 8%;background:#f4f8fa;display:flex;align-items:center;justify-content:space-between;gap:50px}
.oneContact>div{max-width:800px}.oneContact h2{font-size:42px;line-height:1.08;letter-spacing:-.045em;margin:18px 0}
.oneContact p{font-size:14px;line-height:1.8;color:#526473}.oneContact strong{font-size:14px}
@media(max-width:700px){.dienstHero{padding:65px 6%}.dienstIntro{padding:55px 6% 25px}.dienstBlocks{padding:10px 6% 60px}.dienstBlocks article{grid-template-columns:1fr;gap:15px;padding:32px 0}.dienstNr{width:50px;height:50px}.dienstBlocks h2{font-size:24px}.dienstBlocks p{font-size:13px}.oneContact{padding:60px 6%;flex-direction:column;align-items:flex-start}.oneContact h2{font-size:35px}}

/* Exact aangeleverde dienstenafbeelding */
.servicebar{
  height:auto !important;
  min-height:0;
  padding:24px clamp(12px,2.5vw,45px) !important;
  overflow:hidden !important;
  background:#fff;
}
.servicebar img{
  display:block;
  width:min(100%,2048px) !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  margin:0 auto;
  flex:none;
}
@media(max-width:900px){
  .servicebar{padding:18px 10px !important;overflow:hidden !important;}
  .servicebar img{width:100% !important;max-width:100% !important;}
}
@media(max-width:600px){
  .servicebar{padding:14px 5px !important;overflow-x:auto !important;}
  .servicebar img{
    width:900px !important;
    max-width:none !important;
  }
}

/* Diensten exact in de stijl van het aangeleverde voorbeeld, maar strak uitgelijnd */
.diensten-clean{
  width:min(1080px,calc(100% - 48px));
  margin:0 auto;
  padding:18px 0 90px;
}
.dc-row{
  display:grid;
  grid-template-columns:155px minmax(0,1fr);
  gap:30px;
  align-items:start;
  padding:32px 0 34px;
  border-bottom:1px solid #d5dfe3;
}
.dc-icons{
  width:155px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
}
.dc-icons img{
  width:128px;
  height:auto;
  display:block;
  object-fit:contain;
}
.dc-icons-three img{width:112px;margin:-4px 0;}
.dc-text{padding-top:5px;max-width:800px;}
.dc-text h2{
  margin:0 0 12px;
  font-size:27px;
  line-height:1.15;
  letter-spacing:-.035em;
  color:#172131;
}
.dc-text p{
  margin:0 0 10px;
  max-width:790px;
  font-size:13px;
  line-height:1.7;
  color:#596a76;
}
.dc-text p:last-child{margin-bottom:0}
.dc-text strong{color:#33434e}

@media(max-width:800px){
  .diensten-clean{width:calc(100% - 32px)}
  .dc-row{grid-template-columns:125px minmax(0,1fr);gap:22px}
  .dc-icons{width:125px}
  .dc-icons img{width:108px}
  .dc-icons-three img{width:96px}
  .dc-text h2{font-size:23px}
}
@media(max-width:520px){
  .diensten-clean{width:calc(100% - 22px);padding-bottom:55px}
  .dc-row{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:26px 0}
  .dc-icons{width:92px;gap:1px}
  .dc-icons img{width:84px}
  .dc-icons-three img{width:76px;margin:-2px 0}
  .dc-text{padding-top:1px}
  .dc-text h2{font-size:19px;margin-bottom:8px}
  .dc-text p{font-size:11.2px;line-height:1.58;margin-bottom:7px}
}

/* Correctie dienstlabels: volledige originele tekst zichtbaar */
.dc-icons img[src*="dienst-icons-correct"]{
  width:138px;
  max-width:none;
  height:auto;
  object-fit:contain;
}
.dc-icons-three img[src*="dienst-icons-correct"]{
  width:126px;
  margin:-3px 0;
}
@media(max-width:800px){
  .dc-icons img[src*="dienst-icons-correct"]{width:116px}
  .dc-icons-three img[src*="dienst-icons-correct"]{width:108px}
}
@media(max-width:520px){
  .dc-icons img[src*="dienst-icons-correct"]{width:90px}
  .dc-icons-three img[src*="dienst-icons-correct"]{width:84px}
}

/* Definitieve correctie: labels zijn echte tekst en kunnen niet meer afgekapt worden */
.fixed-service-icon{
  width:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  margin:0 auto;
}
.fixed-service-icon img{
  width:100px !important;
  height:100px !important;
  object-fit:contain !important;
  display:block;
}
.fixed-service-icon span{
  display:block;
  width:145px;
  margin-top:3px;
  text-align:center;
  white-space:nowrap;
  font-size:16px;
  line-height:1.2;
  font-weight:400;
  color:#08aee0;
}
.dc-icons-three .fixed-service-icon{
  margin-bottom:8px;
}
@media(max-width:800px){
  .fixed-service-icon{width:120px}
  .fixed-service-icon img{width:86px !important;height:86px !important}
  .fixed-service-icon span{width:120px;font-size:14px}
}
@media(max-width:520px){
  .fixed-service-icon{width:90px}
  .fixed-service-icon img{width:70px !important;height:70px !important}
  .fixed-service-icon span{width:90px;font-size:11px}
}

/* Nieuwbouw + verbouw verticaal bij Elektrotechnische installaties */
.installatie-icons{
  width:155px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.installatie-icons img{
  width:128px !important;
  height:auto !important;
  max-width:none !important;
  display:block;
  object-fit:contain;
  margin:0 !important;
}
@media(max-width:800px){
  .installatie-icons{width:125px;gap:8px}
  .installatie-icons img{width:108px !important}
}
@media(max-width:520px){
  .installatie-icons{width:92px;gap:6px}
  .installatie-icons img{width:84px !important}
}

/* Correctie: nieuwbouw en verbouw exact recht onder elkaar */
.installatie-icons{
  display:grid !important;
  grid-template-columns:1fr !important;
  justify-items:center !important;
  align-items:start !important;
  width:155px !important;
  gap:10px !important;
}
.installatie-icons img{
  display:block !important;
  width:128px !important;
  height:auto !important;
  margin:0 auto !important;
  padding:0 !important;
  position:static !important;
  transform:none !important;
  justify-self:center !important;
}
@media(max-width:800px){
  .installatie-icons{width:125px !important;gap:8px !important}
  .installatie-icons img{width:108px !important}
}
@media(max-width:520px){
  .installatie-icons{width:92px !important;gap:6px !important}
  .installatie-icons img{width:84px !important}
}

/* Aangeleverde afbeelding voor Verlichtingstechniek */
.verlichting-icon{
  width:155px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
}
.verlichting-icon img{
  width:128px !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
@media(max-width:800px){
  .verlichting-icon{width:125px !important}
  .verlichting-icon img{width:108px !important}
}
@media(max-width:520px){
  .verlichting-icon{width:92px !important}
  .verlichting-icon img{width:84px !important}
}

/* Duurzame energie: aangeleverde afbeeldingen exact onder elkaar en in één lijn */
.duurzame-icons{
  width:155px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  justify-items:center !important;
  align-items:start !important;
  gap:10px !important;
}
.duurzame-icons img{
  width:128px !important;
  height:auto !important;
  max-width:none !important;
  display:block !important;
  object-fit:contain !important;
  margin:0 auto !important;
  padding:0 !important;
  position:static !important;
  transform:none !important;
  justify-self:center !important;
}
@media(max-width:800px){
  .duurzame-icons{width:125px !important;gap:8px !important}
  .duurzame-icons img{width:108px !important}
}
@media(max-width:520px){
  .duurzame-icons{width:92px !important;gap:6px !important}
  .duurzame-icons img{width:84px !important}
}

/* Definitieve duurzame-energie labels: echte tekst, dus geen afgesneden letters */
.duurzame-icons-fixed{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:12px !important;
}
.duurzaam-item{
  width:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.duurzame-icons-fixed .duurzaam-item img{
  width:105px !important;
  height:105px !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
.duurzaam-item span{
  width:150px;
  text-align:center;
  white-space:nowrap;
  color:#08aee0;
  font-size:16px;
  line-height:1.25;
  margin-top:3px;
}
@media(max-width:800px){
  .duurzaam-item{width:120px}
  .duurzame-icons-fixed .duurzaam-item img{width:90px !important;height:90px !important}
  .duurzaam-item span{width:120px;font-size:14px}
}
@media(max-width:520px){
  .duurzaam-item{width:90px}
  .duurzame-icons-fixed .duurzaam-item img{width:70px !important;height:70px !important}
  .duurzaam-item span{width:90px;font-size:11px}
}

/* Aangeleverde afbeelding Beveiliging & alarm */
.alarm-icon{
  width:155px !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
}
.alarm-icon img{
  width:128px !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
@media(max-width:800px){
  .alarm-icon{width:125px !important}
  .alarm-icon img{width:108px !important}
}
@media(max-width:520px){
  .alarm-icon{width:92px !important}
  .alarm-icon img{width:84px !important}
}

/* =========================================================
   DEFINITIEVE UITLIJNING DIENSTENPICTOGRAMMEN
   - alle afbeeldingen op exact dezelfde middenlijn
   - gelijke visuele afbeeldingsbreedte
   - blauwe labels één lettertype / grootte / kleur
   - labels exact gecentreerd onder het pictogram
   ========================================================= */

.diensten-clean{
  --icon-column: 160px;
  --icon-box: 112px;
  --label-width: 160px;
  --label-size: 16px;
}

.dc-row{
  grid-template-columns:var(--icon-column) minmax(0,1fr) !important;
  column-gap:32px !important;
}

/* Iedere linker kolom gebruikt exact dezelfde geometrie */
.dc-icons,
.installatie-icons,
.verlichting-icon,
.duurzame-icons,
.alarm-icon{
  width:var(--icon-column) !important;
  box-sizing:border-box !important;
  justify-self:start !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
}

/* Nieuwbouw + verbouw */
.installatie-icons{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}
.installatie-icons img{
  width:138px !important;
  height:auto !important;
  margin:0 auto !important;
}

/* Verlichting */
.verlichting-icon{
  display:flex !important;
  flex-direction:column !important;
}
.verlichting-icon img{
  width:138px !important;
  height:auto !important;
  margin:0 auto !important;
}

/* Duurzame energie */
.duurzame-icons-fixed{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}
.duurzaam-item{
  width:var(--icon-column) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}
.duurzame-icons-fixed .duurzaam-item img{
  width:var(--icon-box) !important;
  height:var(--icon-box) !important;
  object-fit:contain !important;
  margin:0 auto !important;
}
.duurzaam-item span{
  display:block !important;
  width:var(--label-width) !important;
  margin:5px auto 0 !important;
  padding:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  font-family:Manrope,Arial,sans-serif !important;
  font-size:var(--label-size) !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
  color:#08aee0 !important;
}

/* Alarm */
.alarm-icon{
  display:flex !important;
  flex-direction:column !important;
}
.alarm-icon img{
  width:138px !important;
  height:auto !important;
  margin:0 auto !important;
}

/* Ook labels die onderdeel zijn van de aangeleverde PNG's krijgen
   door gelijke afbeeldingsbreedte dezelfde gecentreerde positie. */
.fixed-service-icon{
  width:var(--icon-column) !important;
  align-items:center !important;
  text-align:center !important;
}
.fixed-service-icon span{
  width:var(--label-width) !important;
  font-family:Manrope,Arial,sans-serif !important;
  font-size:var(--label-size) !important;
  font-weight:400 !important;
  text-align:center !important;
  color:#08aee0 !important;
}

/* Tekstkolommen beginnen allemaal exact op dezelfde x-positie */
.dc-text{
  width:100% !important;
  padding-top:4px !important;
}
.dc-text h2{
  font-family:Manrope,Arial,sans-serif !important;
}

@media(max-width:800px){
  .diensten-clean{
    --icon-column:130px;
    --icon-box:94px;
    --label-width:130px;
    --label-size:14px;
  }
  .installatie-icons img,
  .verlichting-icon img,
  .alarm-icon img{width:116px !important}
  .dc-row{column-gap:24px !important}
}

@media(max-width:520px){
  .diensten-clean{
    --icon-column:94px;
    --icon-box:72px;
    --label-width:94px;
    --label-size:11px;
  }
  .installatie-icons img,
  .verlichting-icon img,
  .alarm-icon img{width:86px !important}
  .dc-row{column-gap:12px !important}
  .duurzame-icons-fixed{gap:9px !important}
}

/* Merken pagina */
.merkenHero{
  padding:90px 8%;
  background:linear-gradient(110deg,#f8fbfc,#e8f8fc);
  border-bottom:1px solid var(--line);
}
.merkenHero>div{max-width:1100px;margin:auto}
.merkenHero h1{
  font-size:clamp(43px,5vw,70px);
  line-height:1.04;
  letter-spacing:-.055em;
  margin:22px 0;
}
.merkenHero h1 em,.merkenStatement h2 em{font-style:normal;color:var(--blue)}
.merkenHero p{max-width:760px;font-size:15px;line-height:1.8;color:var(--muted)}

.merkenIntro{max-width:1150px;margin:auto;padding:75px 7% 40px}
.merkenIntro>div{max-width:820px}
.merkenIntro h2{font-size:clamp(30px,3vw,43px);letter-spacing:-.04em;margin:0 0 18px}
.merkenIntro p{font-size:14px;line-height:1.8;color:#526473}

.merkenGrid{
  max-width:1200px;
  margin:auto;
  padding:20px 7% 90px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.merkenGrid article{
  min-height:230px;
  padding:30px;
  border:1px solid #dbe5e9;
  border-radius:14px;
  background:#fff;
}
.merkenGrid article>span{font-size:12px;font-weight:800;color:var(--cyan)}
.merkenGrid h3{font-size:22px;margin:35px 0 12px;letter-spacing:-.03em}
.merkenGrid p{font-size:13px;line-height:1.7;color:#596a76}
.merkenPlaceholder{background:#f5fafb!important;border-style:dashed!important}
.merkenPlaceholder>span{font-size:28px!important}

.merkenStatement{
  padding:75px 8%;
  background:#f4f8fa;
}
.merkenStatement>div{max-width:1050px;margin:auto}
.merkenStatement h2{font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.045em;margin:18px 0}
.merkenStatement p{max-width:800px;font-size:14px;line-height:1.8;color:#526473}

@media(max-width:900px){
 .merkenGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
 .merkenHero{padding:65px 6%}
 .merkenIntro{padding:55px 6% 30px}
 .merkenGrid{grid-template-columns:1fr;padding:15px 6% 60px}
 .merkenGrid article{min-height:190px}
 .merkenStatement{padding:60px 6%}
}

/* Merken per dienst */
.merkenPerDienst{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:10px 0 90px;
}
.merkDienst{
  display:grid;
  grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr);
  gap:55px;
  align-items:center;
  padding:42px 0;
  border-bottom:1px solid #d8e2e7;
}
.merkDienstHead{
  display:grid;
  grid-template-columns:55px 1fr;
  gap:20px;
  align-items:start;
}
.merkDienstHead>span{
  width:46px;height:46px;
  border:1.5px solid var(--cyan);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:11px;font-weight:800;
  color:var(--blue);
}
.merkDienstHead h2{
  margin:2px 0 10px;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.035em;
}
.merkDienstHead p{
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:#596a76;
}
.brandList{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.brandCard{
  min-height:92px;
  padding:18px 12px;
  border:1px solid #dbe5e9;
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 5px 18px rgba(23,33,49,.035);
}
.brandCard strong{
  font-family:Manrope,Arial,sans-serif;
  font-size:16px;
  line-height:1.2;
  color:#172131;
}
@media(max-width:900px){
  .merkDienst{grid-template-columns:1fr;gap:25px}
  .brandList{max-width:650px;margin-left:75px}
}
@media(max-width:600px){
  .merkenPerDienst{width:calc(100% - 28px);padding-bottom:60px}
  .merkDienst{padding:32px 0}
  .merkDienstHead{grid-template-columns:46px 1fr;gap:12px}
  .merkDienstHead>span{width:40px;height:40px}
  .merkDienstHead h2{font-size:21px}
  .brandList{margin-left:0;grid-template-columns:1fr 1fr;gap:9px}
  .brandCard{min-height:72px;padding:12px 8px}
  .brandCard strong{font-size:14px}
}

/* Merkenpagina zonder cijfers + logo's */
.merkDienstHead{
  display:block !important;
}
.merkDienstHead>span{display:none !important;}
.brandLogoCard{
  min-height:135px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden;
}
.brandLogoCard img{
  display:block;
  width:100%;
  max-width:150px;
  height:62px;
  object-fit:contain;
  object-position:center;
}
.brandLogoCard strong{
  font-size:13px !important;
  color:#526473 !important;
  font-weight:700 !important;
}
@media(max-width:900px){
  .brandList{margin-left:0 !important}
}
@media(max-width:600px){
  .brandLogoCard{min-height:115px !important}
  .brandLogoCard img{max-width:125px;height:52px}
}

/* Merken-sectie op homepage */
.homeMerken{
  background:#fff;
  padding:80px 0 15px;
  border-top:1px solid #e1e8eb;
}
.homeMerkenIntro{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto 12px;
}
.homeMerkenIntro h2{
  margin:16px 0 14px;
  max-width:760px;
  font-size:clamp(34px,4vw,52px);
  line-height:1.08;
  letter-spacing:-.045em;
  color:#172131;
}
.homeMerkenIntro h2 em{
  font-style:normal;
  color:var(--blue);
}
.homeMerkenIntro p{
  max-width:760px;
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:#596a76;
}
.homeMerken .merkenPerDienst{
  padding-bottom:70px;
}
@media(max-width:600px){
  .homeMerken{padding-top:55px}
  .homeMerkenIntro{width:calc(100% - 28px)}
  .homeMerken .merkenPerDienst{padding-bottom:45px}
}

/* Dienstenafbeelding op de homepage iets kleiner */
.servicebar{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
.servicebar img{
  width:88% !important;
  max-width:1500px !important;
  height:auto !important;
  display:block !important;
  margin:0 auto !important;
}
@media(max-width:800px){
  .servicebar img{width:92% !important;}
}

.contact-placeholder{display:inline-block;color:#fff;font-weight:600;font-size:15px;padding:15px 0;}

/* Bedrijfsgegevens onderaan: exact gecentreerd op alle pagina's */
footer.bedrijfsfooter{
  height:auto !important;
  min-height:0 !important;
  padding:38px 20px 22px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:22px !important;
  text-align:center !important;
  background:#f7fafb;
  color:#526473;
}
.footer-contact{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;line-height:1.5;}
.footer-contact strong{font-size:18px;color:#172131;margin-bottom:5px;}
.footer-contact a{color:#069bc3;text-decoration:none;overflow-wrap:anywhere;}
.footer-contact a:hover{text-decoration:underline;}
.footer-copyright{font-size:11px;color:#74808a;}
.contactlinks .footer-jump{color:white;text-decoration:underline;text-underline-offset:4px;font-weight:600;}

/* Projectenpagina */
.projectenHero{padding:95px max(6%,calc((100% - 1150px)/2));background:linear-gradient(120deg,#f7fbfd,#e8f8fb)}
.projectenHero h1{font-size:clamp(39px,5vw,66px);letter-spacing:-.055em;line-height:1.08;margin:20px 0;color:#172131}
.projectenHero h1 em{font-style:normal;color:#08aee0}
.projectenHero p{max-width:720px;color:#596a76;font-size:15px;line-height:1.8}
.projectenOverview{width:min(1150px,calc(100% - 40px));margin:auto;padding:75px 0 90px}
.projectenIntro{max-width:780px;margin-bottom:35px}
.projectenIntro h2{font-size:clamp(29px,3vw,43px);letter-spacing:-.04em;margin:0 0 12px}
.projectenIntro p{color:#596a76;line-height:1.8;font-size:14px}
.projectenCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.projectenCards article{border:1px solid #dce7eb;background:#fff;border-radius:15px;padding:32px;min-height:225px;display:flex;flex-direction:column;align-items:flex-start}
.projectenCards article>span{font-size:12px;font-weight:700;color:#08aee0}
.projectenCards h3{font-size:24px;letter-spacing:-.035em;margin:22px 0 8px;color:#172131}
.projectenCards p{font-size:13px;line-height:1.7;color:#596a76;flex:1}
.projectenCards a{color:#078eaf;font-weight:700;font-size:13px;text-decoration:none;margin-top:12px}
.projectenCta{padding:65px 7%;background:#f4f8fa;text-align:center}
.projectenCta h2{font-size:clamp(28px,3.5vw,42px);margin:0 0 12px}
.projectenCta p{color:#596a76;margin-bottom:26px}
.projects .pill{display:inline-flex;margin-top:20px}
@media(max-width:700px){.projectenHero{padding:65px 6%}.projectenOverview{padding:50px 0}.projectenCards{grid-template-columns:1fr}.projectenCards article{min-height:190px}}

/* Contactpagina */
.contactHero{padding:85px max(6%,calc((100% - 1150px)/2)) 75px;background:linear-gradient(120deg,#f7fbfd,#e8f8fb)}
.contactHero h1{font-size:clamp(40px,5vw,64px);letter-spacing:-.055em;line-height:1.1;margin:20px 0;color:#172131}
.contactHero h1 em{font-style:normal;color:#08aee0}
.contactHero p{max-width:680px;line-height:1.8;color:#596a76}
.contactPage{width:min(1150px,calc(100% - 40px));margin:0 auto;padding:75px 0 95px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,1fr);gap:45px;align-items:start}
.contactFormWrap h2,.contactAside h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.04em;color:#172131;margin:0 0 12px}
.contactFormWrap>p{font-size:13px;color:#657581;margin-bottom:28px}
.contactForm{display:flex;flex-direction:column;gap:21px}
.contactFormRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.contactForm label{display:flex;flex-direction:column;gap:9px;color:#243441;font-weight:650;font-size:13px}
.contactForm input:not([type=checkbox]),.contactForm select,.contactForm textarea{box-sizing:border-box;width:100%;border:1px solid #cddde3;border-radius:8px;padding:14px 13px;background:#fff;color:#172131;font:inherit;font-weight:400;min-height:49px}
.contactForm textarea{resize:vertical;line-height:1.6}
.contactForm input:focus,.contactForm select:focus,.contactForm textarea:focus{outline:2px solid #08aee0;outline-offset:1px}
.contactForm .contactConsent{display:flex;flex-direction:row;align-items:flex-start;gap:12px;font-size:12px;line-height:1.6;font-weight:400}
.contactConsent input{margin-top:3px;accent-color:#08aee0}
.contactHoneypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contactForm .contactSubmit{border:0;cursor:pointer;font:inherit;font-weight:700;align-self:flex-start;padding:15px 24px}
.formNotice{background:#fff0ee;border:1px solid #e7aca6;color:#91372d;padding:15px;border-radius:8px;margin:0 0 25px;font-size:14px}
.formNotice.success{background:#edf9f3;border-color:#9ccfb7;color:#196442}
.contactAside{background:#f3f9fb;border:1px solid #e0eef1;border-radius:15px;padding:32px;color:#344752}
.contactAside strong{display:block;margin:24px 0 15px}
.contactAside p{line-height:1.9;font-size:14px}
.contactAside a{color:#078eaf;overflow-wrap:anywhere}
.contactAsideFine{font-size:12px!important;color:#607480}
.contactAsideNote{border-top:1px solid #d6e5e9;padding-top:22px;margin-top:25px;font-size:13px;line-height:1.7}
@media(max-width:800px){.contactHero{padding:65px 6%}.contactPage{grid-template-columns:1fr;gap:35px;padding:45px 0 70px}}
@media(max-width:540px){.contactFormRow{grid-template-columns:1fr}}

/* Mobiel keuzemenu: zichtbaar en bedienbaar op telefoon en tablet */
.mobile-menu-toggle{display:none;flex:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;padding:9px;border:1px solid #dce8ed;border-radius:9px;background:#fff;color:#172131;cursor:pointer;z-index:51}
.mobile-menu-toggle span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.mobile-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
 header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;overflow:visible;z-index:100}
 header .mobile-menu-toggle{display:flex;order:3}
 header>.pill{margin-left:auto;order:2}
 header>nav#hoofdmenu{display:none !important;position:absolute;top:100%;left:0;right:0;width:100%;max-height:calc(100dvh - 75px);overflow-y:auto;flex-direction:column;align-items:stretch;gap:3px;padding:12px 18px 18px;background:#fff;border-top:1px solid #e9eef1;box-shadow:0 14px 25px #17213124;z-index:50}
 header>nav#hoofdmenu.is-open{display:flex !important}
 header>nav#hoofdmenu a{display:block;width:100%;font-size:15px;padding:14px 16px;border-radius:7px}
}
@media(max-width:380px){header>.pill{padding:9px 10px;font-size:9px;gap:4px}.logo{width:125px}}