/* =================================================================
   AllBeClean — gedeelde site-stijl
   Navigatie (dropdowns), footer en servicepagina's.
   Eén centrale bron: aanpassen op één plek werkt overal door.
   Huisstijl: blauw #1a9fd4 · donker #1b1623 · accent #f0f7fb · Poppins
   ================================================================= */

:root{
  --abc-blue:#1a9fd4;
  --abc-blue-dark:#1278a3;
  --abc-ink:#1b1623;
  --abc-text:#1a3c52;
  --abc-accent:#f0f7fb;
  --abc-nav-h:96px;
}

/* Ruimte reserveren onder de vaste navbar */
body{ padding-top:var(--abc-nav-h); }

/* =================================================================
   NAVBAR
   ================================================================= */
.abc-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--abc-nav-h);
  background:#fff;
  box-shadow:0 1px 0 rgba(26,60,82,.08);
  font-family:Poppins,sans-serif;
  transition:box-shadow .2s ease;
}
.abc-header.abc-scrolled{ box-shadow:0 4px 18px rgba(26,60,82,.12); }
.abc-header-inner{
  max-width:1600px; height:100%;
  margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; gap:1.5rem;
  justify-content:space-between;
}

/* Logo */
.abc-brand{
  display:inline-flex; align-items:center; gap:.5rem;
  flex:0 0 auto;
  color:var(--abc-text);
  font-size:1.25rem; font-weight:700; letter-spacing:-.01em;
  text-decoration:none;
}
.abc-brand svg{ width:28px; height:28px; }
.abc-brand .abc-be{ color:var(--abc-blue); }
.abc-logo{ height:86px; width:auto; display:block; margin:0; padding:0; }

/* Hoofdmenu */
.abc-nav{ flex:0 1 auto; display:flex; justify-content:center; }
.abc-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:.4rem;
}
.abc-menu > li{ position:relative; }

.abc-menu-link,
.abc-menu-btn{
  font-family:Poppins,sans-serif;
  font-size:1.1rem; font-weight:500;
  color:var(--abc-text);
  background:transparent; border:0;
  padding:.55rem 1rem; margin:0;
  border-radius:.5rem;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:.35rem;
  white-space:nowrap;
  text-decoration:none;
  transition:color .2s ease, background-color .2s ease;
}
.abc-menu-link:hover,
.abc-menu-btn:hover{ color:var(--abc-blue); }
.abc-menu-link.abc-active,
.abc-menu-btn.abc-active{ color:var(--abc-blue); }

.abc-caret{ width:11px; height:11px; transition:transform .2s ease; flex:0 0 auto; }
.abc-has-dropdown.abc-open > .abc-menu-btn .abc-caret{ transform:rotate(180deg); }

/* Dropdown-paneel */
.abc-dropdown{
  list-style:none; margin:0; padding:.4rem;
  position:absolute; top:calc(100% + .35rem); left:0;
  min-width:300px;
  background:#fff;
  border:1px solid #e4eef5;
  border-radius:.7rem;
  box-shadow:0 12px 34px rgba(26,60,82,.14);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:1001;
}
.abc-dropdown li{ margin:0; }
.abc-dropdown a{
  display:block;
  font-size:.9rem; font-weight:500; line-height:1.35;
  color:var(--abc-text);
  padding:.6rem .8rem;
  border-radius:.45rem;
  text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.abc-dropdown a:hover,
.abc-dropdown a:focus-visible{ background:var(--abc-accent); color:var(--abc-blue); }
.abc-dropdown a.abc-active{ color:var(--abc-blue); background:var(--abc-accent); }

/* Openen bij hover (alleen desktop, met muis) en bij klik/focus (.abc-open) */
@media (hover:hover) and (min-width:861px){
  .abc-has-dropdown:hover > .abc-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
}
.abc-has-dropdown.abc-open > .abc-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }

/* Contact-knop */
.abc-cta{
  flex:0 0 auto;
  background:var(--abc-blue); color:#fff;
  font-family:Poppins,sans-serif; font-weight:600; font-size:.9rem;
  padding:.6rem 1.25rem;
  border-radius:.5rem;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .2s ease;
}
.abc-cta:hover{ background:var(--abc-blue-dark); }

/* Hamburger */
.abc-burger{
  display:none;
  width:44px; height:44px;
  background:transparent; border:0; padding:0; margin:0 0 0 auto;
  cursor:pointer; position:relative;
  align-items:center; justify-content:center;
}
.abc-burger span,
.abc-burger span::before,
.abc-burger span::after{
  content:''; position:absolute;
  width:24px; height:2px; border-radius:1px;
  background:var(--abc-text);
  transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.abc-burger span{ position:relative; }
.abc-burger span::before{ top:-7px; }
.abc-burger span::after{ top:7px; }
.abc-burger.abc-open span{ background:transparent; }
.abc-burger.abc-open span::before{ top:0; transform:rotate(45deg); }
.abc-burger.abc-open span::after{ top:0; transform:rotate(-45deg); }

/* =================================================================
   NAVBAR — mobiel (< 861px): hamburger + accordion-paneel
   ================================================================= */
@media screen and (max-width:860px){
  .abc-burger{ display:flex; }
  .abc-cta{ display:none; }
  .abc-logo{ height:68px; }

  .abc-nav{
    position:fixed;
    top:var(--abc-nav-h); left:0; right:0; bottom:0;
    background:#fff;
    display:block; justify-content:flex-start;
    padding:1rem 1.25rem 2.5rem;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .28s ease;
    box-shadow:none;
  }
  .abc-nav.abc-open{ transform:translateX(0); }

  .abc-menu{ flex-direction:column; align-items:stretch; gap:.15rem; }
  .abc-menu > li{ border-bottom:1px solid #eef3f7; }

  .abc-menu-link,
  .abc-menu-btn{
    width:100%; justify-content:space-between;
    font-size:1.05rem; min-height:52px;
    padding:.85rem .5rem; border-radius:0;
  }

  /* Dropdown wordt accordion: in de flow, geen overlay */
  .abc-dropdown{
    position:static; min-width:0;
    border:0; border-radius:0; box-shadow:none;
    padding:0 0 .5rem;
    opacity:1; visibility:hidden; transform:none;
    max-height:0; overflow:hidden;
    transition:max-height .28s ease, visibility .28s;
  }
  .abc-has-dropdown.abc-open > .abc-dropdown{
    visibility:visible; max-height:720px;
  }
  .abc-dropdown a{
    min-height:44px; display:flex; align-items:center;
    padding:.6rem .5rem .6rem 1.1rem;
    font-size:.95rem; color:#55707f;
  }

  /* Contact-knop onderaan het paneel */
  .abc-nav-cta{
    display:flex; margin-top:1.25rem;
    background:var(--abc-blue); color:#fff;
    font-weight:600; font-size:1rem;
    padding:.9rem 1.5rem; border-radius:.5rem;
    text-decoration:none; align-items:center; justify-content:center;
  }
  .abc-nav-cta:hover{ background:var(--abc-blue-dark); }

  body.abc-nav-lock{ overflow:hidden; }
}
@media screen and (min-width:861px){
  .abc-nav-cta{ display:none; }
}

/* =================================================================
   FOOTER (contactsectie + balk) — identiek op elke pagina
   ================================================================= */
.abc-footer-wrap{ background:var(--abc-ink); }
.abc-contact{ background:#0d1b2a; padding:5rem 0; }
.abc-contact-inner{
  max-width:1500px; margin:0 auto; padding:0 1.75rem;
  display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start;
}
.abc-cf-tag{ font-family:Poppins,sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.15em; color:var(--abc-blue); text-transform:uppercase; margin-bottom:1rem; }
.abc-cf-heading{ font-family:Poppins,sans-serif; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; color:#fff; line-height:1.15; margin:0 0 .6rem 0; }
.abc-cf-sub{ font-family:Poppins,sans-serif; font-size:1.05rem; color:#b9c5d4; line-height:1.6; margin:0 0 1.8rem 0; }
.abc-cf-items{ display:flex; flex-direction:column; gap:.7rem; }
.abc-cf-item{ display:flex; align-items:center; gap:.85rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:.95rem 1.1rem; color:#fff; text-decoration:none; font-weight:500; transition:background .15s, border-color .15s; }
a.abc-cf-item:hover{ background:rgba(26,159,212,.15); border-color:var(--abc-blue); }
.abc-cf-ic{ flex:none; width:38px; height:38px; min-width:38px; border-radius:8px; background:var(--abc-blue); display:flex; align-items:center; justify-content:center; color:#fff; }
.abc-cf-ic.wa{ background:#25d366; }
.abc-cf-label{ font-family:Poppins,sans-serif; font-size:.78rem; font-weight:600; color:#8da3bc; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.1rem; }
.abc-cf-value{ font-family:Poppins,sans-serif; font-size:1rem; font-weight:600; color:#fff; line-height:1.4; }
.abc-cf-value a{ color:inherit; text-decoration:none; transition:color .2s; }
.abc-cf-value a:hover{ color:var(--abc-blue); }

.abc-cf-card{ background:#fff; color:#0d1b2a; border-radius:14px; padding:2rem 1.6rem; box-shadow:0 8px 40px rgba(0,0,0,.25); }
.abc-cf-title{ font-family:Poppins,sans-serif; font-size:1.3rem; font-weight:700; color:#0d1b2a; margin:0 0 .35rem 0; }
.abc-cf-formsub{ font-family:Poppins,sans-serif; font-size:.95rem; color:#5a6b80; margin:0 0 1.4rem 0; line-height:1.5; }
.abc-cf-form{ display:flex; flex-direction:column; gap:.85rem; }
.abc-field{ display:flex; flex-direction:column; gap:.3rem; }
.abc-field label{ font-family:Poppins,sans-serif; font-size:.82rem; font-weight:600; color:#0d1b2a; }
.abc-input{ font-family:Poppins,sans-serif; font-size:.95rem; padding:.7rem .8rem; border:1px solid #d6dde6; border-radius:8px; outline:none; transition:border .2s, box-shadow .2s; background:#fff; width:100%; box-sizing:border-box; color:#0d1b2a; }
.abc-input:focus{ border-color:var(--abc-blue); box-shadow:0 0 0 3px rgba(26,159,212,.15); }
.abc-input::placeholder{ color:#9aa7b6; }
.abc-textarea{ resize:vertical; min-height:88px; }
.abc-submit{ font-family:Poppins,sans-serif; font-size:1rem; font-weight:600; background:var(--abc-blue); color:#fff; border:none; padding:.85rem 1rem; border-radius:8px; cursor:pointer; transition:background .15s, transform .1s; width:100%; margin-top:.4rem; }
.abc-submit:hover{ background:var(--abc-blue-dark); }
.abc-submit:active{ transform:scale(.98); }
.abc-sent{ font-family:Poppins,sans-serif; font-size:.9rem; color:#0a6a36; background:#e7f9ee; padding:1rem; border-radius:8px; margin-top:.75rem; font-weight:600; text-align:center; }

.abc-footer-bottom{ background:var(--abc-ink); }
.abc-footer-bottom-inner{ max-width:1500px; margin:0 auto; padding:1.5rem 1.75rem 2.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); }
.abc-footer-bottom-inner a{ color:rgba(255,255,255,.75); font-family:Poppins,sans-serif; font-size:.8rem; text-decoration:none; }
.abc-footer-bottom-inner a:hover{ color:#fff; }

@media (max-width:900px){
  .abc-contact-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .abc-cf-heading{ font-size:1.75rem; }
}
@media (max-width:479px){
  .abc-contact{ padding:3.25rem 0; }
  .abc-contact-inner{ padding:0 1.25rem; }
  .abc-cf-card{ padding:1.5rem 1.25rem; }
  .abc-footer-bottom-inner{ padding:1.25rem 1.25rem 2rem; }
}

/* =================================================================
   SERVICEPAGINA'S
   ================================================================= */
.svc-main{ font-family:Poppins,sans-serif; color:var(--abc-text); }

/* Hero */
.svc-hero{
  background:linear-gradient(180deg, var(--abc-accent) 0%, #ffffff 100%);
  padding:3.5rem 0 3rem;
}
.svc-hero-inner{ max-width:1500px; margin:0 auto; padding:0 1.75rem; }
.svc-crumbs{ font-size:.78rem; color:#7d93a0; margin-bottom:1rem; }
.svc-crumbs a{ color:#7d93a0; text-decoration:none; }
.svc-crumbs a:hover{ color:var(--abc-blue); }
.svc-eyebrow{ font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--abc-blue); margin-bottom:.85rem; }
.svc-title{ font-size:2.4rem; font-weight:700; color:var(--abc-ink); line-height:1.15; margin:0 0 1rem 0; max-width:18ch; }
.svc-lead{ font-size:1.02rem; color:#52707f; line-height:1.65; margin:0 0 1.75rem 0; max-width:60ch; }
.svc-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--abc-blue); color:#fff;
  font-weight:600; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:.5rem;
  text-decoration:none; transition:background .2s;
}
.svc-btn:hover{ background:var(--abc-blue-dark); }

/* Inhoud */
.svc-section{ max-width:1500px; margin:0 auto; padding:3.25rem 1.75rem; }
.svc-section.svc-tight{ padding-top:1.5rem; }
.svc-h2{ font-size:1.6rem; font-weight:700; color:var(--abc-ink); margin:0 0 1rem 0; line-height:1.25; }
.svc-p{ font-size:.98rem; color:#52707f; line-height:1.75; margin:0 0 1rem 0; max-width:68ch; }

/* Twee kolommen: intro + checklist */
.svc-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:start; }
.svc-card{ background:var(--abc-accent); border:1px solid #e1eef6; border-radius:.9rem; padding:1.75rem; }
.svc-card h3{ font-size:1.05rem; font-weight:700; color:var(--abc-ink); margin:0 0 1rem 0; }
.svc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.svc-list li{ position:relative; padding-left:1.85rem; font-size:.96rem; color:#42606f; line-height:1.6; }
.svc-list li::before{
  content:''; position:absolute; left:0; top:.15rem;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--abc-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* Waarom AllBeClean */
.svc-why{ background:#fff; }
.svc-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:1.75rem; }
.svc-why-item{ background:#fff; border:1px solid #e6eef4; border-radius:.8rem; padding:1.5rem 1.35rem; }
.svc-why-ic{ width:42px; height:42px; border-radius:.6rem; background:var(--abc-accent); color:var(--abc-blue); display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; }
.svc-why-item h4{ font-size:.98rem; font-weight:700; color:var(--abc-ink); margin:0 0 .45rem 0; }
.svc-why-item p{ font-size:.94rem; color:#6b8492; line-height:1.6; margin:0; }

/* Afsluitende CTA */
.svc-cta{
  position:relative; overflow:hidden;
  background:var(--abc-ink);
  margin:1rem auto 0; max-width:1500px;
  border-radius:1rem;
}
.svc-cta::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--abc-blue); }
.svc-cta-inner{
  display:grid; grid-template-columns:1fr auto; column-gap:2.5rem; row-gap:.35rem;
  align-items:center; padding:1.75rem 2.5rem; text-align:left;
}
.svc-cta h2{ grid-column:1; grid-row:1; font-size:1.3rem; font-weight:700; color:#fff; margin:0; line-height:1.25; }
.svc-cta p{ grid-column:1; grid-row:2; font-size:.92rem; color:rgba(255,255,255,.68); line-height:1.55; margin:0; max-width:62ch; }
.svc-cta .svc-btn{ grid-column:2; grid-row:1 / span 2; align-self:center; white-space:nowrap; font-size:.95rem; padding:.8rem 1.7rem; }
.svc-cta-wrap{ padding:0 1.75rem 3.5rem; }

@media (max-width:860px){
  .svc-grid{ grid-template-columns:1fr; gap:1.75rem; }
  .svc-why-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .svc-hero{ padding:2.5rem 0 2.25rem; }
  .svc-hero-inner,.svc-section,.svc-cta-wrap{ padding-left:1.25rem; padding-right:1.25rem; }
  .svc-title{ font-size:1.8rem; }
  .svc-section{ padding-top:2.25rem; padding-bottom:2.25rem; }
  .svc-why-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .svc-cta-inner{ grid-template-columns:1fr; row-gap:.5rem; text-align:center; padding:1.85rem 1.5rem; }
  .svc-cta h2{ grid-column:1; grid-row:auto; }
  .svc-cta p{ grid-column:1; grid-row:auto; }
  .svc-cta .svc-btn{ grid-column:1; grid-row:auto; justify-self:center; margin-top:.45rem; }
}

/* =================================================================
   SERVICEPAGINA — extra middenblokken (voordelen, werkwijze, FAQ, toepassingen)
   ================================================================= */
.svc-intro{ max-width:72ch; }

/* Intro met afbeelding ernaast */
.svc-intro-split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3.25rem; align-items:center; }
.svc-intro-split .svc-intro-copy{ min-width:0; }
.svc-intro-split .svc-intro{ max-width:none; }
.svc-intro-media{ min-width:0; }
.svc-intro-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:1rem; box-shadow:0 16px 44px rgba(26,60,82,.16); display:block; }
@media (max-width:860px){
  .svc-intro-split{ grid-template-columns:1fr; gap:1.75rem; }
  .svc-intro-media img{ aspect-ratio:16/10; }
}
.svc-band{ background:linear-gradient(180deg,#f3f9fc 0%,#fbfdff 100%); }
.svc-band + .svc-band{ background:#fff; }

/* Voordelen */
.svc-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:1.6rem; }
.svc-benefit{ background:#fff; border:1px solid #e6eef4; border-radius:.85rem; padding:1.5rem 1.45rem; display:flex; gap:1rem; align-items:flex-start; box-shadow:0 2px 14px rgba(26,60,82,.04); }
.svc-benefit-ic{ width:40px; height:40px; min-width:40px; border-radius:50%; background:var(--abc-blue); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 14px rgba(26,159,212,.3); }
.svc-benefit-tx h3{ font-size:1rem; font-weight:700; color:var(--abc-ink); margin:0 0 .35rem 0; }
.svc-benefit-tx p{ font-size:.95rem; color:#6b8492; line-height:1.6; margin:0; }

/* Werkwijze / stappen */
.svc-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:1.6rem; }
.svc-step{ position:relative; }
.svc-step-n{ width:40px; height:40px; border-radius:50%; background:var(--abc-blue); color:#fff; font-weight:700; font-size:1.02rem; display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; box-shadow:0 5px 14px rgba(26,159,212,.3); }
.svc-step h3{ font-size:.98rem; font-weight:700; color:var(--abc-ink); margin:0 0 .4rem 0; }
.svc-step p{ font-size:.94rem; color:#6b8492; line-height:1.6; margin:0; }

/* Toepassingen / voor wie — chips */
.svc-tags{ display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.4rem; }
.svc-tag{ background:#fff; border:1px solid #d8e7f1; border-radius:2rem; padding:.55rem 1.15rem; font-size:.86rem; color:#42606f; line-height:1.2; }

/* Veelgestelde vragen */
.svc-faq{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.9rem; max-width:80ch; }
.svc-faq-item{ background:#fff; border:1px solid #e6eef4; border-radius:.75rem; padding:1.2rem 1.4rem; box-shadow:0 2px 14px rgba(26,60,82,.04); }
.svc-faq-item h3{ font-size:.98rem; font-weight:700; color:var(--abc-ink); margin:0 0 .45rem 0; }
.svc-faq-item p{ font-size:.94rem; color:#5d7682; line-height:1.65; margin:0; }

@media (max-width:860px){
  .svc-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .svc-benefits{ grid-template-columns:1fr; }
  .svc-steps{ grid-template-columns:1fr; }
}

/* Geen horizontale scroll, beelden binnen viewport */
img{ max-width:100%; }

/* =================================================================
   HOMEPAGE — dienstencategorieën (3 kolommen met links)
   ================================================================= */
.cats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; align-items:stretch; }
.cat-card{ background:#fff; border:1px solid #e6eef4; border-radius:.9rem; padding:1.9rem 1.6rem; display:flex; flex-direction:column; box-shadow:0 4px 20px rgba(26,60,82,.06); transition:transform .28s ease, box-shadow .28s ease; }
.cat-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(26,60,82,.13); }
.cat-ic{ width:52px; height:52px; border-radius:50%; background:var(--abc-blue); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; box-shadow:0 6px 16px rgba(26,159,212,.32); }
.cat-title{ font-family:Poppins,sans-serif; font-size:1.28rem; font-weight:700; color:var(--abc-ink); margin:0 0 .6rem 0; }
.cat-intro{ font-family:Poppins,sans-serif; font-size:.98rem; color:#5d7682; line-height:1.65; margin:0 0 1.2rem 0; }
.cat-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.1rem; }
.cat-list a{ display:flex; align-items:flex-start; gap:.55rem; font-family:Poppins,sans-serif; font-size:.96rem; color:var(--abc-text); text-decoration:none; padding:.55rem .35rem; border-radius:.45rem; line-height:1.45; transition:color .15s, background-color .15s; }
.cat-list a::before{ content:'\2192'; color:var(--abc-blue); font-weight:700; flex:0 0 auto; transition:transform .18s ease; }
.cat-list a:hover{ color:var(--abc-blue); background:#f6fbfe; }
.cat-list a:hover::before{ transform:translateX(4px); }
.cat-cta{ margin-top:auto; padding-top:1.25rem; }
.cat-cta a{ display:inline-flex; align-items:center; gap:.4rem; font-family:Poppins,sans-serif; font-size:.85rem; font-weight:600; color:var(--abc-blue); text-decoration:none; }
.cat-cta a svg{ transition:transform .18s ease; }
.cat-cta a:hover{ color:var(--abc-blue-dark); }
.cat-cta a:hover svg{ transform:translateX(4px); }
.cats-dots{ display:none; }
@media (max-width:991px) and (min-width:769px){ .cats-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:768px){
  .cats-grid{ grid-auto-flow:column; grid-auto-columns:85%; grid-template-columns:none; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:.5rem 1.25rem 1rem; margin:0 -1.25rem; }
  .cats-grid::-webkit-scrollbar{ display:none; }
  .cats-grid .cat-card{ scroll-snap-align:center; }
  .cats-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1rem; }
  .cats-dots button{ width:8px; height:8px; padding:0; border:none; border-radius:50%; background:#cddde8; cursor:pointer; transition:background .2s ease, transform .2s ease; }
  .cats-dots button.is-active{ background:var(--abc-blue); transform:scale(1.35); }
}

/* =================================================================
   SERVICEPAGINA — hero met echte projectfoto
   ================================================================= */
.svc-hero.has-photo{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:5rem 0 4.5rem;
}
.svc-hero.has-photo::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,28,38,.55) 0%, rgba(15,22,32,.78) 100%);
}
.svc-hero.has-photo .svc-hero-inner{ position:relative; z-index:1; }
.svc-hero.has-photo .svc-title{ color:#fff; }
.svc-hero.has-photo .svc-lead{ color:#e9eef2; }
.svc-hero.has-photo .svc-eyebrow{ color:#7fd4f0; }
.svc-hero.has-photo .svc-crumbs,
.svc-hero.has-photo .svc-crumbs a{ color:#d3dde4; }
.svc-hero.has-photo .svc-crumbs a:hover{ color:#fff; }
@media screen and (max-width:860px){
  .svc-hero.has-photo{ padding:3.25rem 0 3rem; }
}

/* =================================================================
   HOMEPAGE — Over ons (wagenpark + mobiele waterzuivering)
   ================================================================= */
.abc-about{ background:#fff; padding:4.5rem 0; }
.abc-about-inner{ max-width:1500px; margin:0 auto; padding:0 1.75rem; display:grid; grid-template-columns:minmax(0,540px) 1fr; gap:3rem; align-items:center; }
.abc-about-label{ font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--abc-blue); margin-bottom:.85rem; }
.abc-about-title{ font-family:Poppins,sans-serif; font-size:2rem; font-weight:700; color:var(--abc-ink); line-height:1.2; margin:0 0 1.1rem 0; }
.abc-about-text{ font-family:Poppins,sans-serif; font-size:1rem; color:#52707f; line-height:1.7; margin:0 0 1rem 0; }
.abc-about-media{ display:grid; grid-template-columns:1fr; gap:1rem; }
.abc-about-media img{ width:100%; height:240px; object-fit:cover; border-radius:.9rem; display:block; box-shadow:0 4px 20px rgba(26,60,82,.1); }
.abc-about-media img:last-child{ height:200px; }
@media screen and (max-width:860px){
  .abc-about{ padding:3rem 0; }
  .abc-about-inner{ grid-template-columns:1fr; gap:1.75rem; padding:0 1.25rem; }
  .abc-about-title{ font-size:1.6rem; }
  .abc-about-media img{ height:200px; }
}