/* ==========================================================================
   Nour Loodgietersbedrijf - statische HTML/CSS versie
   Design tokens 1-op-1 overgenomen uit de Elementor global kit (post-21).
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Kleuren - exact zoals in de Elementor kit */
  --c-primary:   #084F6B;
  --c-secondary: #ED9819;
  --c-text:      #737373;
  --c-accent:    #096183;
  --c-blue:      #1D69B7;
  --c-white:     #FFFFFF;
  --c-offwhite:  #F8F8F8;
  --c-line:      #D9D9D9;
  --c-gray-400:  #A7A7A7;
  --c-gray-500:  #787878;
  --c-gray-900:  #292929;
  --c-black:     #111111;

  /* Typografie */
  --font: "Poppins", -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-h1: 60px;
  --fs-h2: 50px;
  --fs-h3: 40px;
  --fs-h4: 30px;
  --fs-h5: 20px;
  --fs-h6: 16px;
  --fs-body: 15px;

  /* Layout */
  --container: 1140px;
  --gutter: 15px;
  --radius: 25px;
}

@media (max-width: 1024px) {
  :root { --fs-h1: 55px; --fs-h2: 45px; --fs-h3: 35px; --fs-h4: 25px; }
}
@media (max-width: 767px) {
  :root { --fs-h1: 40px; --fs-h2: 33px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-h6: 15px; }
}

/* --------------------------------------------------------------------------
   2. Reset / basis
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5em;
  color: var(--c-text);
  background: var(--c-white);
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--c-secondary); text-decoration: none; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.1em;
  color: var(--c-black);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); font-weight: 500; }

ul { margin: 0; padding: 0; list-style: none; }

/* De filters op Projecten en op het blog verbergen items met het
   hidden-attribuut. De browserregel [hidden] { display: none } is de zwakste
   die er is: elke eigen display-waarde wint ervan, en dan telt het filter wel
   maar verdwijnt er niets van het scherm. Dat is precies wat er met de
   blogkaarten gebeurde (display: flex). Deze regel maakt hidden hier
   onvoorwaardelijk, zodat het niet nog eens kan gebeuren. */
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-primary); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* Knoppen - kit defaults: accent bg, 15px/500, radius 25px, padding 15/24 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--c-white);
  background: var(--c-accent);
  border: 0;
  border-radius: 25px;
  padding: 15px 24px;
  cursor: pointer;
  transition: background-color .3s, transform .25s;
}
.btn:hover { background: var(--c-secondary); color: var(--c-white); }
.btn--round { border-radius: 50%; padding: 12px 15px; }
.btn--round svg { width: 16px; height: 16px; fill: currentColor; }
.btn--grow:hover { transform: scale(1.1); }

/* Eyebrow-label + streepje (Elementor divider + kleine heading) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3em;
  color: var(--c-primary);
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 0;
  border-top: 2px solid currentColor;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--c-white); }

.section-title { margin-top: 15px; }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   3. Header - topbalk
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--c-primary);
  border-bottom: 1px solid #FFFFFF1F;
  padding: 5px var(--gutter);
  position: relative;
  z-index: 10;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.topbar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
  padding: 5px 15px 5px 5px;
}
.topbar__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.2em;
  color: var(--c-offwhite);
}
.topbar__meta a { color: inherit; }
.topbar__meta svg { width: 12px; height: 12px; fill: var(--c-white); flex: none; }

.social {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social--right { justify-content: flex-end; }
.social a {
  display: inline-flex;
  color: var(--c-white);
  transition: color .3s;
}
.social svg { width: 15px; height: 15px; fill: currentColor; }
.social a:hover { color: var(--c-line); }

/* --------------------------------------------------------------------------
   4. Header - logobalk
   -------------------------------------------------------------------------- */
.logobar {
  background: var(--c-white);
  padding: 18px var(--gutter);
  position: relative;
  z-index: 10;
}
.logobar__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.logobar__brand { width: 28%; flex: 0 0 auto; }
.logobar__brand img { width: 100%; max-width: 320px; }
.logobar__spacer { width: 33.698%; flex: 0 0 auto; }
.logobar__cta {
  width: 36%;
  flex: 0 0 auto;
  padding-left: 15px;
  display: flex;
  justify-content: flex-end;
}

/* Call-knop, overgenomen uit de custom-HTML widget in de header */
.call-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-secondary);
  color: #ffffff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
  transition: transform .25s, background-color .25s;
}
.call-btn:hover {
  background: #b71c1c;
  color: #fff;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   5. Header - hoofdmenu
   -------------------------------------------------------------------------- */
.navbar {
  background: var(--c-offwhite);
  padding: 12px var(--gutter);
  position: relative;
  z-index: 20;
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 8px 12px;
  background: var(--c-accent);
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.menu-toggle svg { width: 30px; height: 30px; fill: #fff; }

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.menu > li { margin-inline: 20px; }
.menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--c-black);
  transition: color .2s;
}
.menu a:hover,
.menu a:focus,
.menu .is-current > a { color: var(--c-blue); }
.menu .caret { width: 9px; height: 9px; fill: currentColor; flex: none; }

/* Dropdowns */
.menu li { position: relative; }
.menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin-top: 15px;
  background: var(--c-white);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 30;
}
.menu .sub-menu::before {
  content: "";
  position: absolute;
  inset: -15px 0 auto 0;
  height: 15px;
}
.menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
  margin-top: 0;
}
.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu .sub-menu a {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  color: var(--c-text);
  font-weight: 500;
}
.menu .sub-menu li:not(:last-child) { border-bottom: 1px solid #87878726; }
.menu .sub-menu a:hover,
.menu .sub-menu a:focus { background: var(--c-secondary); color: var(--c-white); }
.menu .sub-menu .caret { transform: rotate(-90deg); }

/* Op smallere desktopschermen past het derde niveau (Werkgebied > Breda > ...)
   niet meer rechts naast het menu; klap het dan naar links open. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .menu > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }
  .menu .sub-menu .sub-menu { left: auto; right: 100%; }
  .menu .sub-menu .sub-menu-parent .caret { transform: rotate(90deg); }
}

/* Mobiele spoed-belbalk */
.mobile-callbar {
  display: none;
  background: var(--c-offwhite);
  padding: 10px var(--gutter);
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 40;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  background: var(--c-primary);
  padding: 0 var(--gutter);
  margin-bottom: -207px;
}
.hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  min-height: 750px;
}
.hero__col { width: 50%; padding-inline: 10px; }
.hero__col--media {
  margin-bottom: 130px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: flex-end;
}

/* De hero-kaart komt letterlijk uit de custom-HTML widget van de pagina */
.hero-card {
  background: #ffffff;
  padding: 26px;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  max-width: 880px;
  margin: 56px auto 24px;
  border-top: 4px solid #f59e0b;
}
.hero-card__grid { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.hero-card__main { flex: 1 1 520px; min-width: 280px; }
.hero-card__aside { flex: 1 1 300px; min-width: 260px; }
.hero-badge {
  display: inline-block;
  background: #e6f4f7;
  color: #0f5b6a;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
.hero-card h2 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.18;
  color: #0b4a57;
  font-weight: 800;
}
.hero-card__lead {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.6;
  color: #2b2f33;
}
.hero-usps { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.hero-usps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #e7eaee;
  border-radius: 12px;
  font-size: 14px;
  color: #1f2937;
  background: #fafbfc;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  color: #ffffff;
  font-weight: 800;
}
.hero-actions .is-call { background: #d32f2f; letter-spacing: .2px; box-shadow: 0 10px 18px rgba(211,47,47,.24); }
.hero-actions .is-mail { background: #0b4a57; box-shadow: 0 10px 18px rgba(11,74,87,.18); }
.hero-area { margin-top: 10px; font-size: 13px; color: #6b7280; }

.hero-panel { background: #f7fafb; border: 1px solid #e7eaee; border-radius: 16px; padding: 16px; }
.hero-panel__title { font-size: 14px; font-weight: 800; color: #0b4a57; margin-bottom: 10px; }
.hero-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-jobs li, .hero-jobs a {
  background: #ffffff;
  border: 1px solid #e7eaee;
  border-radius: 14px;
  padding: 12px;
}
.hero-jobs strong { display: block; font-weight: 800; color: #111827; font-size: 14px; }
.hero-jobs span { display: block; color: #6b7280; font-size: 12.5px; margin-top: 4px; }
.hero-jobs a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border-color: #d6dee6;
  color: #0b4a57;
}
.hero-note {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #7c2d12;
  font-size: 13.5px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. Uitgelichte strip (over de hero heen)
   -------------------------------------------------------------------------- */
.highlight {
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
  padding: 0 var(--gutter);
}
.highlight__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.highlight__col { width: 50%; display: flex; align-items: center; }

.claim {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 25px 0 0 0;
  background-image: radial-gradient(at top left, var(--c-offwhite) 74%, var(--c-white) 42%);
  box-shadow: 0 0 25px rgba(0,0,0,.1);
}
.claim__icon { flex: none; }
/* Puur zwart, niet het black-token: de paden in het origineel dragen geen
   fill-attribuut, dus valt de SVG terug op #000. Nagemeten op de live pagina. */
.claim__icon svg { width: 45px; height: 45px; fill: #000000; }
.claim h5 { margin: 0; }

.promo {
  width: 100%;
  background: var(--c-secondary);
  border-radius: 25px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}
/* Het huis-icoon is een lijntekening: de kleur komt van de stroke via
   currentColor, niet van fill. Maat en kleur nagemeten op het origineel. */
.promo__icon svg { width: 105px; height: 105px; color: #231F20; }
.promo h5 { color: var(--c-white); }
.promo .btn { background: var(--c-primary); }
.promo .btn:hover { background: var(--c-white); color: var(--c-primary); }

/* --------------------------------------------------------------------------
   8. Diensten
   -------------------------------------------------------------------------- */
.services { padding: 0 var(--gutter); margin-bottom: 65px; }
.services__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 30px;
}
.services__intro-left { flex: 1 1 380px; padding-right: 50px; }
.services__intro-right { flex: 1 1 380px; }
.services__intro h1 { margin-top: 15px; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}
.service-grid--pair { grid-template-columns: repeat(2, 1fr); }
/* Alleen de tekstlinks in de alinea's. Zonder de p ving deze regel ook de
   ronde plusknop onder elke kaart, die daardoor oranje stond in plaats van
   wit - en pas bij hover wit werd, omdat .btn:hover wél specifieker is. */
.service-grid p a { color: var(--c-secondary); }

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-image: radial-gradient(at top left, var(--c-offwhite) 74%, var(--c-white) 42%);
  border-radius: var(--radius);
  box-shadow: 0 0 20px -10px rgba(0,0,0,.8);
  padding: 40px 40px 0;
  margin-bottom: 22px;
}
.service-card h5 { text-align: center; margin-bottom: 15px; }
.service-card p { color: var(--c-black); margin-bottom: 20px; }
.service-card__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 15px;
}
.service-card__foot img { width: 70px; height: 70px; }
.service-card__num {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1em;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  text-align: right;
}
.service-card .btn--round {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
}
.service-card .btn--round:hover { transform: translateX(-50%) scale(1.1); }

/* --------------------------------------------------------------------------
   9. Over ons
   -------------------------------------------------------------------------- */
.about {
  background: var(--c-offwhite);
  padding: 110px var(--gutter);
}
/* Mozaïek van vier kleine foto's, exact op de maten van het origineel:
   smalle linkerkolom (25%) met twee foto's onder elkaar, rechterkolom (75%)
   met twee rijen van foto + tekst naast elkaar. De foto's houden hun eigen
   formaat; ze worden dus niet opgerekt tot de kolombreedte. */
.about__inner { display: flex; flex-wrap: wrap; align-items: flex-start; }

.about__media {
  width: 25%;
  display: grid;
  gap: 15px;
  justify-items: end;
}
.about__media img { border-radius: var(--radius); max-width: 100%; height: auto; }
.about__media img:nth-of-type(1) { width: 215px; }
.about__media img:nth-of-type(2) { width: 285px; }

.about__body { width: 75%; padding-left: 15px; display: grid; gap: 25px; }
.about__row { display: flex; flex-wrap: wrap; gap: 25px; align-items: center; }
/* De fotokolom moet mee kunnen krimpen. Met flex: 0 0 auto bleef hij op de
   volle 252/294px staan zodra het venster smaller werd dan 1140, terwijl het
   origineel hem daar laat meekrimpen; de rij liep dan over. De foto blijft
   op zijn eigen maat zolang er ruimte is en krimpt pas als het krap wordt. */
.about__row-media { flex: 0 1 auto; min-width: 0; }
.about__row-media img { border-radius: var(--radius); max-width: 100%; height: auto; width: 252px; }
.about__row:last-child .about__row-media img { width: 294px; }
.about__row-text { flex: 1 1 320px; }
/* Deze kop staat op het origineel op 30px, niet op de 50px van de kit. */
.about__row-text h2 { margin: 15px 0; font-size: 30px; line-height: 1.1em; }

/* De checklist staat op het origineel in een witte kaart met een zachte
   schaduw; die ontbrak hier. Waarden nagemeten op de live pagina. */
.about__row:last-child .about__row-text {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 25px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .15);
}

.check-list { display: grid; gap: 12px; }
.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  color: var(--c-black);
}
.check-list svg { width: 18px; height: 18px; fill: var(--c-secondary); flex: none; }

/* --------------------------------------------------------------------------
   10. Beoordelingen
   -------------------------------------------------------------------------- */
.reviews {
  background: var(--c-white);
  padding: 90px 0 110px;
  text-align: center;
}
.reviews .btn { margin-top: 30px; }
.reviews__embed { margin: 40px 0 0; min-height: 120px; }

/* --------------------------------------------------------------------------
   11. Werkproces
   -------------------------------------------------------------------------- */
.process {
  background-color: var(--c-primary);
  background-image: url("../img/plumbero-img25.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px var(--gutter) 60px;
  position: relative;
  text-align: center;
}
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  opacity: .95;
}
.process > .container { position: relative; z-index: 1; }
.process h3 { color: var(--c-white); margin-top: 15px; }

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 50px;
}
.step { padding: 0 20px; }
.step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/Circle.png") center / contain no-repeat;
  padding: 40px;
  margin-bottom: -30px;
}
.step__icon svg { width: 40px; height: 40px; fill: var(--c-white); }
.step__num {
  display: inline-block;
  margin-left: 80px;
  padding: 11px 18px 10px;
  background: var(--c-secondary);
  border-radius: 50%;
  color: var(--c-white);
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.1em;
  position: relative;
}
.step h5 { color: var(--c-white); margin: 25px 0 15px; }
.step p { color: var(--c-line); }

/* --------------------------------------------------------------------------
   12. Portfolio
   -------------------------------------------------------------------------- */
.portfolio {
  margin: 40px 0 106px;
  padding: 0 var(--gutter);
  text-align: center;
}
.portfolio h3 { margin-top: 15px; }
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 25px;
}
.gallery a {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1; /* de gallery-widget staat op 1:1 */
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms;
}
.gallery a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity 800ms;
}
.gallery a:hover img { transform: scale(1.08); }
.gallery a:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   13. Veelgestelde vragen
   -------------------------------------------------------------------------- */
.faq {
  background: var(--c-offwhite);
  padding: 80px var(--gutter);
}
.faq__inner { min-height: 600px; }
.faq h3 { margin: 15px 0 20px; }

.accordion { display: grid; gap: 20px; margin-top: 30px; }
.accordion__item { box-shadow: 0 0 13px -4px rgba(0,0,0,.2); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--c-accent);
  color: var(--c-white);
  border: 0;
  padding: 18px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  cursor: pointer;
}
.accordion__trigger svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex: none;
  transition: transform .3s;
}
.accordion__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion__panel {
  display: none;
  background: var(--c-white);
  color: var(--c-black);
  padding: 20px;
}
.accordion__panel[data-open] { display: block; }
.accordion__panel ul { margin-top: 10px; display: grid; gap: 6px; }
.accordion__panel li::before { content: "\2022  "; color: var(--c-secondary); }

/* --------------------------------------------------------------------------
   14. Kaart
   -------------------------------------------------------------------------- */
.map iframe { width: 100%; height: 400px; border: 0; display: block; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.contact-strip {
  background: url("../img/plumbero-img45.png") center / cover no-repeat;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  padding: 20px var(--gutter) 15px;
  position: relative;
  z-index: 1;
}
.contact-strip__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px 10px;
}
.contact-item__icon {
  flex: none;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--c-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-item__icon svg { width: 23px; height: 23px; fill: var(--c-black); }
.contact-item__body, .contact-item__body a { color: var(--c-white); }
.contact-item__body h6 { color: var(--c-white); word-break: break-word; }

.site-footer {
  background: var(--c-primary);
  padding: 30px var(--gutter) 0;
  color: var(--c-line);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.9fr;
  gap: 40px;
  padding-bottom: 20px;
}
.site-footer h6 {
  color: var(--c-white);
  font-size: var(--fs-h6);
  font-weight: 500;
  margin-bottom: 15px;
}
.site-footer__logo { margin-bottom: 20px; max-width: 300px; }
.site-footer__tagline { color: var(--c-line); margin-bottom: 20px; }
.site-footer .social { justify-content: flex-start; margin-bottom: 20px; }
.site-footer__maps { color: var(--c-line); display: inline-block; }
.site-footer__maps:hover { color: var(--c-secondary); }

.footer-links { display: grid; gap: 15px; padding-top: 5px; }
.footer-links a {
  color: var(--c-line);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5em;
  transition: color .3s;
}
.footer-links a:hover { color: var(--c-secondary); }

.site-footer__aside img { margin-inline: auto; }

.site-footer__bottom {
  border-top: 1px solid #FFFFFF1F;
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
  color: var(--c-line);
}
.site-footer__bottom a { color: #ed9819; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .topbar { display: none; }

  .logobar { padding: 20px var(--gutter); }
  .logobar__inner { flex-direction: column; gap: 15px; }
  .logobar__brand { width: 50%; }
  .logobar__spacer { display: none; }
  .logobar__cta { width: 100%; padding-left: 0; justify-content: center; }

  .menu-toggle { display: inline-flex; }
  .navbar__inner { position: relative; }
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 20px;
    flex-direction: column;
    align-items: stretch;
    /* Op desktop is dit menu een rij die mag afbreken (flex-wrap: wrap). Als
       kolom met een max-height betekent afbreken iets heel anders: wat niet
       past komt in een NIEUWE KOLOM ERNAAST te staan in plaats van onder de
       scroll. Zo stond Werkgebied > Breda > Loodgieter Breda rechts naast het
       menu, half buiten het scherm en niet te bereiken. */
    flex-wrap: nowrap;
    /* Op desktop is dit menu een gecentreerde rij (justify-content: center).
       Als kolom met een max-height is centreren schadelijk: zodra de lijst
       langer wordt dan het venster - en dat gebeurt zodra Werkgebied > Breda
       openklapt - loopt de inhoud er aan BEIDE kanten uit, en in de overflow
       aan de bovenkant kan de browser niet scrollen. De bovenste items waren
       daardoor onbereikbaar. Vanaf de bovenkant stapelen lost dat op. */
    justify-content: flex-start;
    background: var(--c-white);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    max-height: 70vh;
    overflow-y: auto;
    /* Nooit zijwaarts kunnen schuiven: anders verdwijnen de bovenste items
       links buiten beeld zodra een diep submenu breder uitvalt. */
    overflow-x: hidden;
  }
  .menu.is-open { display: flex; }
  .menu > li { margin-inline: 0; }
  .menu li { border-bottom: 1px solid #87878726; }
  .menu a {
    display: flex;
    justify-content: space-between;
    padding: 15px 16px;
    color: var(--c-text);
  }
  .menu a:hover, .menu .is-current > a { background: var(--c-secondary); color: var(--c-white); }
  .menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin: 0;
    box-shadow: none;
    display: none;
    background: #fbfbfb;
    /* De dropdown op desktop is 240px breed. Als uitklaplijst met inspringing
       past dat niet meer: het derde niveau begon op 105px en eiste 345px in
       een venster van 330px, waardoor het menu zijwaarts ging schuiven. */
    min-width: 0;
  }
  .menu .sub-menu::before { display: none; }
  .menu li.is-open > .sub-menu { display: block; }
  .menu .sub-menu a { padding-left: 28px; }
  .menu .sub-menu .sub-menu a { padding-left: 44px; }
  .menu .caret { transform: none; transition: transform .2s; }
  .menu li.is-open > a .caret { transform: rotate(180deg); }

  .hero { margin-bottom: 0; }
  .hero__inner { min-height: 0; padding-block: 40px; }
  .hero__col { width: 100%; }
  .hero__col--media { margin-bottom: 0; margin-top: 30px; }
  .hero-card { margin-top: 0; }

  .highlight { margin-top: 40px; }
  .highlight__col { width: 100%; }
  .highlight__col:first-child { margin-bottom: 20px; }
  .claim { border-radius: 25px; }

  .services__intro-left { padding-right: 0; }
  .service-grid, .service-grid--pair { grid-template-columns: repeat(2, 1fr); }

  .about { padding: 70px var(--gutter); }
  .about__inner { gap: 30px; }
  /* Naast elkaar, maar wel meekrimpen: vaste px-breedtes zouden hier de
     kolom uitlopen. */
  .about__media { width: 100%; display: flex; gap: 15px; }
  .about__media img:nth-of-type(1),
  .about__media img:nth-of-type(2) { width: auto; min-width: 0; flex: 1 1 0; }
  .about__body { width: 100%; padding-left: 0; }

  .steps { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .step { margin-bottom: 20px; }

  .gallery { grid-template-columns: repeat(2, 1fr); }

  .reviews { padding: 50px 0; }

  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 767px) {
  /* Op telefoon neemt de sticky spoedbalk de belknop over; de knop in de
     logobalk zou dan een tweede keer hetzelfde nummer tonen. */
  .mobile-callbar { display: block; }
  .logobar__cta { display: none; }

  .logobar__brand { width: 70%; }

  .hero__col { padding-inline: 0; }
  .hero-card { padding: 20px; }
  .hero-jobs { grid-template-columns: 1fr; }

  .claim { flex-direction: column; align-items: flex-start; }

  .service-grid, .service-grid--pair { grid-template-columns: 1fr; }
  .service-card { padding: 30px 25px 0; margin-bottom: 35px; }

  .about__row-text h2 { font-size: 24px; }
  .about__media { flex-direction: column; align-items: center; }
  .about__media img:nth-of-type(1),
  .about__media img:nth-of-type(2) { flex: 0 0 auto; max-width: 100%; }
  .about__row-media img, .about__row:last-child .about__row-media img { width: auto; max-width: 100%; }
  .about__row { text-align: center; justify-content: center; }
  .about__row-media img { margin-inline: auto; }
  .check-list li { justify-content: center; }

  .steps { grid-template-columns: 1fr; }
  .step__num { margin-left: 60px; }

  .gallery { grid-template-columns: 1fr; }

  .faq { padding: 60px var(--gutter); }
  .faq__inner { min-height: 0; }

  .contact-strip__inner { grid-template-columns: 1fr; }
  .contact-item { padding: 10px 0; }

  .site-footer__cols { grid-template-columns: 1fr; text-align: center; }
  .site-footer .social { justify-content: center; }
  .site-footer__logo { margin-inline: auto; }
}

/* ==========================================================================
   17. Pagina: Wie Zijn Wij
   ========================================================================== */

/* Paginabanner - achtergrondfoto met primaire overlay op 90% */
.page-hero {
  position: relative;
  background-image: url("../img/plumbero-img25.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 var(--gutter);
  margin-bottom: 40px;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  opacity: .9;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-block: 40px;
}
.page-hero h1 { color: var(--c-white); }
.page-hero p { color: var(--c-white); margin-top: 20px; }
.page-hero a { color: var(--c-secondary); }

/* Introductie: tekst + witte checklistkaart links, fotopaneel rechts */
.intro { padding: 0 var(--gutter); }
.intro__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: stretch;
}
.intro__text { flex: 1 1 480px; }
.intro__text h2 { margin-top: 15px; }
.intro__media {
  flex: 1 1 480px;
  min-height: 420px;
  border-radius: var(--radius);
  background-image: url("../img/Loodgieter-Gorinchem.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.intro__card {
  margin-top: 30px;
  background: var(--c-white);
  padding: 25px;
  border-radius: var(--radius);
  box-shadow: 0 10px 20px -10px rgba(0,0,0,.15);
  display: grid;
  gap: 12px;
}
.intro__card li {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--c-black);
}
.intro__card svg { width: 25px; height: 25px; fill: var(--c-gray-400); flex: none; }

/* Kengetallenbalk */
.counters { padding: 0 var(--gutter); margin: 50px 0; }
.counters__inner {
  background: var(--c-secondary);
  border-style: solid;
  border-width: 8px 8px 0 0;
  border-color: var(--c-white);
  border-radius: var(--radius);
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}
.counter { padding-right: 30px; border-right: 1px solid #E5C18F94; }
.counter:last-child { border-right: 0; padding-right: 0; }
.counter__num {
  color: var(--c-white);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1em;
}
.counter__title { color: var(--c-white); font-size: var(--fs-body); line-height: 1.5em; }

/* Visie & Missie - middenbeeld steekt 50px over de tekstkolommen heen */
.vm {
  background: var(--c-offwhite);
  padding: 30px var(--gutter);
  margin-bottom: 50px;
}
.vm__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.vm__text h2 { margin: 15px 0; }
.vm__media { position: relative; z-index: 0; }
.vm__media img {
  width: calc(100% + 100px);
  max-width: none;
  margin-inline: -50px;
  border-radius: var(--radius);
}
/* Witte kaart onder de tekst. Die ligt over de foto heen (z-index 1 boven
   de .vm__media van 0), dus zonder ondergrond loopt de tekst dwars door
   het beeld en is hij nauwelijks te lezen. De schaduw hoort bij de kaart,
   niet bij de letters. */
.vm__text {
  position: relative;
  z-index: 1;
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .18);
}

/* Werkgebied + kaartenraster.
   Geen padding op de sectie zelf: de grijze kaartenstrook loopt door tot de
   schermranden, de .container-kinderen brengen hun eigen gutter mee. */
.areas__head { text-align: center; display: grid; gap: 15px; justify-items: center; }
/* De kaartenstrook loopt over de volle breedte, het raster zelf blijft
   binnen de containerbreedte van 1140px - net als in het origineel. */
.areas__mapswrap { background: var(--c-offwhite); margin-top: 30px; padding: 30px 0; }
.areas__maps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.areas__maps iframe {
  width: 100%;
  height: 300px;
  border: 0;
  padding: 0 10px;
}

/* Afsluitende herinnering */
.reminder {
  padding: 40px var(--gutter) 60px;
  text-align: center;
  display: grid;
  gap: 15px;
  justify-items: center;
}

/* Knoppenrij onder de beoordelingen */
.review-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.review-actions .btn { margin-top: 0; }
.review-actions .btn--orange { background: var(--c-secondary); }
.review-actions .btn--orange:hover { background: var(--c-primary); }
.review-actions .btn--dark { background: var(--c-primary); }
.review-actions .btn--dark:hover { background: var(--c-secondary); }

@media (max-width: 1024px) {
  .page-hero__inner { min-height: 320px; }

  .intro__media { min-height: 320px; }

  .counters__inner { padding: 35px; }
  .counter { padding-right: 20px; }

  .vm__inner { grid-template-columns: 1fr; gap: 30px; }
  .vm__media { order: -1; }
  .vm__media img { width: 100%; margin-inline: 0; }
  .vm__text { padding: 26px 22px; }

  .areas__maps { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
}

@media (max-width: 767px) {
  .counters__inner { padding: 30px 25px; flex-direction: column; }
  .counter { padding-right: 0; padding-bottom: 20px; border-right: 0; border-bottom: 1px solid #E5C18F94; }
  .counter:last-child { padding-bottom: 0; border-bottom: 0; }

  .areas__maps { grid-template-columns: 1fr; }
  .areas__maps iframe { padding: 0; height: 260px; }

  .review-actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   18. Pagina: Klusbedrijf
   ========================================================================== */

/* Zelfde banner als Wie Zijn Wij, andere achtergrondfoto */
.page-hero--klus { background-image: url("../img/Nour-Klusbedrijf.webp"); }

/* Licht werkproces: grijze achtergrond in plaats van de donkere foto,
   en donkerblauwe iconen zonder gevulde cirkel. */
.process--light {
  background-color: var(--c-offwhite);
  background-image: none;
  padding: 20px var(--gutter) 60px;
}
.process--light::before { display: none; }
.process--light h3 { color: var(--c-black); }
.process--light .eyebrow--light { color: var(--c-primary); }
.process--light .step__icon svg { fill: var(--c-primary); }
.process--light .step h5 { color: var(--c-black); }
.process--light .step p { color: var(--c-text); }

/* Licht accordeon: witte kop met donkere tekst */
.accordion--light .accordion__trigger {
  background: var(--c-white);
  color: var(--c-gray-900);
}

/* De FAQ-kop op deze pagina staat op 45px in plaats van de h2-standaard */
.faq__title--45 { font-size: 45px; }
@media (max-width: 1024px) { .faq__title--45 { font-size: 40px; } }
@media (max-width: 767px)  { .faq__title--45 { font-size: 30px; } }

/* ==========================================================================
   19. Pagina: Renovatie
   ========================================================================== */

.page-hero--renovatie { background-image: url("../img/Renovation-Img01.jpg"); }

/* Twee kolommen: artikel 65%, zijbalk 35% */
.article { padding: 0 var(--gutter); margin-bottom: 80px; }
.article__inner { display: flex; flex-wrap: wrap; }
.article__main { width: 65%; padding-right: 50px; }
.article__side { width: 35%; }

/* Dienstpagina's zonder zijbalk: het artikel vult dan de volle breedte. */
.article__main:only-child { width: 100%; padding-right: 0; }

.article__main > * { margin-bottom: 18px; }
.article__main > *:last-child { margin-bottom: 0; }
.article__main h2 { font-size: 40px; font-weight: 700; line-height: 1.1em; }
.article__main img { border-radius: var(--radius); }
.article__main ul { display: grid; gap: 8px; }
.article__main ul li { padding-left: 1.2em; text-indent: -1.2em; }

/* De twee USP-kolommetjes onder de intro */
.usp-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.usp-cols ul { display: grid; gap: 8px; }
.usp-cols li { display: flex; align-items: center; gap: 10px; color: var(--c-black); }
.usp-cols svg { width: 14px; height: 14px; fill: var(--c-primary); flex: none; }

/* Contactformulier in de zijbalk */
.side-form {
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 30px;
  margin: 15px 10px 0;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,.15);
}
.side-form__grid { display: grid; gap: 20px; }
.side-form input,
.side-form textarea {
  width: 100%;
  background: var(--c-offwhite);
  border: 0;
  border-radius: 5px;
  padding: 18px 15px;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--c-black);
}
.side-form textarea { resize: vertical; min-height: 140px; }
.side-form input::placeholder,
.side-form textarea::placeholder { color: var(--c-gray-500); }
.side-form input:focus,
.side-form textarea:focus { outline: 2px solid var(--c-secondary); outline-offset: 1px; }
.side-form button { background: var(--c-secondary); width: 100%; }
.side-form button:hover { background: var(--c-primary); }

/* Voor/na-carrousels: CSS scroll-snap, twee beelden in beeld */
.shots { padding: 30px 0; }
.shots__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shots h2 { margin-bottom: 20px; }
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 10px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 10px;
}
.carousel > * { scroll-snap-align: start; }
.carousel img { width: 100%; border-radius: var(--radius); }

@media (max-width: 1024px) {
  .article__main, .article__side { width: 100%; }
  .article__main { padding-right: 0; margin-bottom: 40px; }
  .article__main h2 { font-size: 35px; }

  .shots__inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  .article { margin-bottom: 50px; }
  .article__main h2 { font-size: 28px; }

  .usp-cols { grid-template-columns: 1fr; }

  .side-form { margin-inline: 0; padding: 25px 20px; }

  .carousel { grid-auto-columns: 100%; }
}

/* ==========================================================================
   20. Pagina: Badkamer Renovatie
   Zelfde sjabloon als Renovatie; alleen de bannerfoto en de opsommingen
   verschillen (hier echte <ul>-lijsten in plaats van handmatige bolletjes).
   ========================================================================== */

.page-hero--badkamer { background-image: url("../img/Bathroom-renovation-Img01.jpg"); }

/* Echte opsommingen, gebruikt in beide artikelsjablonen (.article__main op
   Renovatie/Badkamer en .wg__article op de werkgebied- en plaatspagina's). */
.article__main ul.bullets,
.wg__article ul.bullets {
  display: block;
  list-style: disc;
  padding-left: 40px; /* gelijk aan het origineel */
}
.article__main ul.bullets li,
.wg__article ul.bullets li {
  display: list-item;
  padding-left: 0;
  text-indent: 0;
  margin-bottom: 8px;
}
.article__main ul.bullets li:last-child,
.wg__article ul.bullets li:last-child { margin-bottom: 0; }

/* ==========================================================================
   21. Pagina: Projecten
   ========================================================================== */

.page-hero--projecten { background-image: url("../img/Nour-Klusbedrijf.webp"); }

.projects { padding: 0 var(--gutter); margin-bottom: 110px; }

/* Filterbalk: zwart, blauw bij hover, oranje wanneer actief */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}
.filters button {
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2em;
  color: #000000;
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 10px 16px;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}
.filters button:hover { color: var(--c-blue); border-color: var(--c-blue); }
.filters button[aria-pressed="true"] { color: var(--c-secondary); border-color: var(--c-secondary); }

/* Het raster hergebruikt .gallery; hier alleen de titel-overlay erbij */
.projects .gallery figcaption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: 500;
  opacity: 0;
  transition: opacity 800ms;
}
.projects .gallery a:hover figcaption,
.projects .gallery a:focus figcaption { opacity: 1; }

.projects .gallery a[hidden] { display: none; }

@media (max-width: 1024px) {
  .projects .gallery { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}
@media (max-width: 767px) {
  .projects { margin-bottom: 60px; }
  .projects .gallery { grid-template-columns: 1fr; gap: 20px; }
  .filters { gap: 6px; }
  .filters button { padding: 8px 12px; }
}

/* ==========================================================================
   22. Pagina: Contact
   ========================================================================== */

.page-hero--contact { background-image: url("../img/Nour-Klusbedrijf.webp"); }

.contact { padding: 0 var(--gutter); margin-bottom: 60px; }
.contact__inner { display: flex; flex-wrap: wrap; align-items: stretch; }
.contact__main { width: 50%; padding-right: 50px; }
.contact__main h3 { margin: 15px 0; }
.contact__main > p { margin-bottom: 30px; }

/* De rechterkolom is op het origineel een lege kolom met alleen een foto:
   volle breedte binnen de kolom, geen hoekradius. */
.contact__media {
  width: 50%;
  background-image: url("../img/plumbero-img25.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

/* Formulierkaart */
.contact-form {
  padding: 50px 40px;
  border-radius: var(--radius);
  box-shadow: 0 0 25px rgba(0,0,0,.15);
}
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}
.contact-form .is-full { grid-column: 1 / -1; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: var(--c-offwhite);
  border: 0;
  border-radius: 3px;
  padding: 13px 15px;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5em;
  color: var(--c-black);
}
.contact-form select { appearance: none; cursor: pointer; padding-right: 34px; }

/* Eigen pijltje voor de keuzelijst, zodat hij overal hetzelfde oogt */
.contact-form .select-wrap { position: relative; }
.contact-form .select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -2px;
  border: 5px solid transparent;
  border-top-color: var(--c-gray-500);
  pointer-events: none;
}

.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--c-gray-500); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 2px solid var(--c-secondary); outline-offset: 1px; }


/* Fotoveld: het echte <input type="file"> is onzichtbaar (zie contact-ons.html),
   het label ernaast is de zichtbare knop. */
/* .contact-form input is specifieker dan .upload__veld en zou het veld
   anders gewoon 100% breed houden; vandaar de dubbele klasse. */
.contact-form .upload__veld {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  background: none;
}
.upload__balk {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.upload__knop {
  flex: none;
  background: var(--c-offwhite);
  border: 1px solid var(--c-line);
  border-radius: 3px;
  padding: 11px 18px;
  font-size: var(--fs-body);
  line-height: 1.5em;
  color: var(--c-primary);
  font-weight: 500;
  cursor: pointer;
}
.upload__knop:hover { background: var(--c-white); border-color: var(--c-secondary); }
/* Het label is geen focusdoel; de focusring hoort bij het veld erachter. */
.upload__veld:focus-visible + .upload__balk .upload__knop {
  outline: 2px solid var(--c-secondary);
  outline-offset: 1px;
}
/* Staat direct naast de knop, iets steviger dan de status ernaast, zodat
   meteen duidelijk is dat dit veld overgeslagen mag worden. */
.upload__optioneel { font-size: 14px; color: var(--c-gray-500); font-weight: 500; }
.upload__status { font-size: 14px; color: var(--c-gray-500); }
/* De balk mag afbreken op smalle schermen; de knop blijft dan bovenaan. */
@media (max-width: 480px) { .upload__balk { gap: 8px 12px; } }

.upload__lijst { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.upload__lijst:empty { display: none; }
.upload__item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-offwhite);
  border-radius: 3px;
  padding: 9px 10px 9px 14px;
}
/* min-width:0 laat een lange bestandsnaam afkappen in plaats van de rij oprekken. */
.upload__naam {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--c-black);
}
.upload__maat { flex: none; font-size: 13px; color: var(--c-gray-500); }
/* .contact-form button zet width:100% en is specifieker; vandaar ook hier
   de dubbele klasse, anders duwt het kruisje de bestandsnaam naar 0px. */
.contact-form .upload__weg {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-gray-500);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.contact-form .upload__weg:hover { background: #C0392B; color: var(--c-white); }
.contact-form .upload__weg:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 1px; }
.contact-form__hint { font-size: 13px; color: var(--c-gray-500); margin-top: 6px; }
.contact-form__hint.is-fout { color: #C0392B; font-weight: 500; }

/* ==========================================================================
   Google-reviews (eigen carrousel, verving de Elfsight-widget)

   Vier kaarten in beeld op desktop, twaalf in totaal. Het spoor is gewoon een
   overflow-x container met scroll-snap: vegen op touch en trackpad werkt dan
   vanzelf, de pijlen zijn er alleen bij voor de muis.

   Bewust lichte randen en GEEN schaduwen: de kaarten moeten rustig blijven
   naast de rest van de pagina.
   ========================================================================== */
.revs { margin: 30px 0 35px; text-align: left; }

/* --- Balk bovenaan: logo, oordeel, cijfer, aantal, knop ------------------- */
.revs__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 20px;
}
.revs__balklinks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.revs__woordmerk { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.revs__woordmerk b { font-weight: 700; }
.revs__oordeel { font-size: 16px; font-weight: 700; color: var(--c-black); }
.revs__balksterren { color: var(--c-secondary); font-size: 18px; letter-spacing: 1px; }
.revs__cijfer { font-size: 16px; font-weight: 700; color: var(--c-black); }
.revs__streep { color: var(--c-line); }
.revs__aantal { font-size: 15px; color: var(--c-black); }

.revs__schrijf {
  flex: none;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-black);
  white-space: nowrap;
}
.revs__schrijf:hover { border-color: var(--c-primary); color: var(--c-primary); }
.revs__schrijf:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

/* --- Venster met de pijlen over de randen --------------------------------- */
.revs__venster { position: relative; }

.revs__pijl {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-black);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.revs__pijl--links  { left: -19px; }
.revs__pijl--rechts { right: -19px; }
.revs__pijl:hover:not(:disabled) { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.revs__pijl:disabled { opacity: .3; cursor: default; }
.revs__pijl:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

/* --- Het spoor ------------------------------------------------------------ */
.revs__spoor {
  display: grid;
  grid-auto-flow: column;
  /* Vier kaarten met drie tussenruimtes van 20px. */
  grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px;
  margin: 0;
  padding: 2px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.revs__spoor::-webkit-scrollbar { display: none; }
.revs__spoor:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

.revs__kaart {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 20px;
}

.revs__kaartkop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.revs__wie { min-width: 0; }
.revs__naam {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-black);
  /* Sommige reviewers gebruiken hun volledige bedrijfsnaam; die mag afbreken
     maar niet de kaart oprekken. */
  overflow-wrap: anywhere;
}
.revs__datum { margin: 2px 0 0; font-size: 13px; color: var(--c-gray-500); }
.revs__g { flex: none; width: 20px; height: 20px; }

.revs__sterren {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--c-secondary);
  font-size: 16px;
  letter-spacing: 1px;
}
.revs__badge { flex: none; width: 15px; height: 15px; }

.revs__tekst {
  margin: 0;
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.6em;
  color: var(--c-black);
  /* Reviews lopen van 40 tot 800 tekens uiteen; zonder klem worden de kaarten
     absurd ongelijk. De JS zet er een "Lees verder" bij waar het echt afkapt. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
.revs__tekst.is-open { -webkit-line-clamp: unset; overflow: visible; }

.revs__meer {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-gray-500);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
}
.revs__meer:hover { color: var(--c-primary); text-decoration: underline; }
.revs__meer:focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 2px; }

@media (max-width: 991px) {
  .revs__spoor { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 599px) {
  .revs__spoor { grid-auto-columns: 85%; }
  .revs__balk { padding: 14px 16px; }
  .revs__schrijf { width: 100%; text-align: center; }
  /* Op smalle schermen is er buiten de container geen ruimte voor de pijlen. */
  .revs__pijl--links  { left: 2px; }
  .revs__pijl--rechts { right: 2px; }
}

/* --------------------------------------------------------------------------
   Bedankpagina - staat los: geen header, geen voettekst
   -------------------------------------------------------------------------- */
.dankpagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px var(--gutter);
  background: var(--c-offwhite);
}
.dankpagina__inner {
  width: 100%;
  max-width: 680px;
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.18);
  padding: 45px 50px 40px;
  text-align: center;
}
.dankpagina__logo { display: inline-block; margin-bottom: 28px; }
.dankpagina__logo img { width: 230px; height: auto; }

.dankpagina__vink {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #E8F5EC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dankpagina__vink svg { width: 36px; height: 36px; fill: #1E9E52; }

.dankpagina h1 { color: var(--c-primary); margin: 0 0 14px; }
.dankpagina__lead { font-size: 17px; margin: 0 auto 22px; max-width: 520px; }
.dankpagina__spoed { margin: 0 auto 24px; max-width: 520px; }
.dankpagina__spoed strong { color: var(--c-primary); }
.dankpagina__bel { display: inline-block; margin-bottom: 10px; }

.dankpagina__terug { margin: 26px 0 0; font-size: 14px; }
.dankpagina__terug a { color: var(--c-accent); font-weight: 500; }

@media (max-width: 767px) {
  .dankpagina { padding: 30px 16px; }
  .dankpagina__inner { padding: 32px 22px 28px; }
  .dankpagina__logo img { width: 190px; }
}

/* --------------------------------------------------------------------------
   Zwevende WhatsApp-knop (wordt door main.js aan elke pagina toegevoegd)
   -------------------------------------------------------------------------- */
.whatsapp-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  z-index: 9999;
  transition: transform .15s ease, box-shadow .15s ease;
}
.whatsapp-button:hover {
  background: #1EBE5A;
  transform: scale(1.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.whatsapp-button:focus-visible { outline: 3px solid var(--c-secondary); outline-offset: 3px; }
.whatsapp-button svg { width: 34px; height: 34px; fill: #FFFFFF; display: block; }

@media (max-width: 767px) {
  .whatsapp-button { width: 54px; height: 54px; right: 15px; bottom: 15px; }
  .whatsapp-button svg { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-button { transition: none; }
  .whatsapp-button:hover { transform: none; }
}

.contact-form button { width: 100%; }
.contact-form button:hover { background: var(--c-secondary); color: #000000; }

.contact-map iframe { width: 100%; height: 350px; border: 0; display: block; }

@media (max-width: 1024px) {
  .contact__main { width: 100%; padding-right: 0; margin-bottom: 40px; }
  .contact__media { width: 100%; min-height: 320px; }
  .contact-form { padding: 40px 25px; }
}

@media (max-width: 767px) {
  .contact-form { padding: 30px 20px; }
  .contact-form__grid { grid-template-columns: 1fr; gap: 20px; }
  .contact-map iframe { height: 300px; }
}

/* ==========================================================================
   23. Pagina: Werkgebied
   Geen Elementor-pagina maar een Gutenberg-pagina; de koppen zijn daardoor
   kleiner en donkerblauw in plaats van de kit-formaten.
   ========================================================================== */

.wg { padding: 40px var(--gutter) 60px; }
.wg__article h1 {
  font-size: 36px;
  color: var(--c-primary);
  margin: 30px 0 15px;
}
.wg__article h2 {
  font-size: 20px;
  color: var(--c-primary);
  margin: 25px 0 10px;
}
.wg__article p { margin-bottom: 1em; }
.wg__cta { text-align: center; margin: 25px 0; }

/* Belknop midden in het artikel */
.wg-call-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #d32f2f;
  color: #ffffff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
  transition: transform .25s, background-color .25s;
}
.wg-call-inline:hover { background-color: #b71c1c; color: #fff; transform: translateY(-2px); }

/* Introkaart bovenaan */
.wg-card {
  max-width: 720px;
  margin: 10px auto 40px;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  border: 1px solid rgba(8,79,107,.12);
}
.wg-card__head {
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(8,79,107,.12), rgba(8,79,107,.02));
  border-bottom: 1px solid rgba(8,79,107,.10);
  text-align: center;
}
.wg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8,79,107,.10);
  color: #084F6B;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.wg-card__head h2 { margin: 0; color: #084F6B; font-size: 30px; line-height: 1.2; font-weight: 800; }
.wg-card__head p { margin: 10px 0 0; color: #2f3b43; font-size: 17px; line-height: 1.6; }
.wg-card__body { padding: 22px 24px 24px; }

.wg-usps { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 16px; }
.wg-usps li {
  padding: 9px 12px;
  border-radius: 12px;
  background: #f6fafb;
  border: 1px solid rgba(8,79,107,.10);
  font-size: 14px;
  color: #2f3b43;
}

.wg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.wg-tile {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
}
.wg-tile__icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(8,79,107,.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wg-tile__text { font-size: 15px; color: #2f3b43; line-height: 1.4; }
.wg-tile__text span { color: #5f6b73; }

.wg-card__cta { text-align: center; margin-top: 6px; }
.wg-card__cta-lead { font-size: 15px; color: #5f6b73; margin-bottom: 10px; }
.wg-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #D32F2F, #B71C1C);
  color: #ffffff;
  padding: 16px 28px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 16px 28px rgba(211,47,47,.35);
  transition: transform .2s, filter .2s;
}
.wg-call:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; }
.wg-card__cta-note { font-size: 13px; color: #6b7780; margin-top: 10px; }

/* Kadence-accordeon: ronde koppen, iets compacter dan de Elementor-variant */
.accordion--kadence { gap: 10px; }
.accordion--kadence .accordion__item { box-shadow: none; }
.accordion--kadence .accordion__trigger { border-radius: 25px; padding: 15px 24px; font-size: 15px; }
.accordion--kadence .accordion__panel { padding: 15px 24px 20px; }

@media (max-width: 680px) {
  .wg-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .wg { padding: 30px var(--gutter) 50px; }
  .wg__article h1 { font-size: 28px; }
  .wg-card__head h2 { font-size: 24px; }
  .wg-card__head p { font-size: 15px; }
}

/* ==========================================================================
   24. Plaatspagina's onder Werkgebied (Breda e.a.)
   Zelfde Gutenberg-sjabloon als Werkgebied; de belknop midden in het artikel
   is hier een blokje met telefoonicoon in plaats van een rode knop.
   ========================================================================== */

.cta-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f9fafb;
  border: 1px solid rgba(0,0,0,.06);
  max-width: 560px;
  margin: 18px 0;
  color: #111827;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cta-inline:hover {
  color: #111827;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.10);
}
.cta-inline__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #d32f2f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-inline__icon svg { width: 18px; height: 18px; fill: #ffffff; }
.cta-inline strong { display: block; color: #111827; }
.cta-inline__sub { display: block; font-size: 13px; color: rgba(17,24,39,.65); margin-top: 2px; }

@media (max-width: 480px) {
  .cta-inline { max-width: 100%; padding: 12px 14px; }
}

/* Afbeeldingen in het artikel van een plaatspagina.
   Beide staan op het origineel op 450px breed, links uitgelijnd. De tweede
   heeft de WordPress-stijl "rounded" (border-radius 9999px), wat een ovaal
   oplevert - dat is bewust zo overgenomen. */
.wg__article figure { margin: 0 0 15px; }
.wg__article figure img { width: 450px; max-width: 100%; height: auto; }
.wg__article figure.is-rounded img { border-radius: 9999px; }

/* ==========================================================================
   25. Pagina: Privacybeleid
   ========================================================================== */

/* Eén kolom van 1140px onder de banner. Het origineel zet de koppen hier op
   30px (de h4-maat uit de kit) in plaats van de 40px van de dienstpagina's, en
   de alinea's op de gewone 15px met 15px eronder. */
.legal { padding: 0 var(--gutter); margin-bottom: 80px; }
.legal__inner > * { margin-bottom: 15px; }
.legal__inner > *:last-child { margin-bottom: 0; }
.legal__inner h2 {
  font-size: var(--fs-h4);
  margin-top: 8px;
  margin-bottom: 16px;
}

/* ==========================================================================
   26. Blog: overzicht en artikel
   ========================================================================== */

/* De titel van een artikel. Op het origineel staat die als h2 met
   has-large-font-size; hier is het de h1 van de pagina. Zelfde maat als de
   koppen op de plaatspagina's, zodat het artikel er niet uit springt. */
.post-kop {
  max-width: 720px;
  margin: 0 auto 20px;
  font-size: var(--fs-h4);
  line-height: 1.25;
}

.post-terug {
  max-width: 720px;
  margin: 30px auto 0;
}
.post-terug a { color: var(--c-primary); font-weight: 600; }

/* Het overzicht: dezelfde kaartjes als het origineel - beeld, titel, datum,
   samenvatting, "Lees meer". Drie kolommen op desktop, net als daar. */
.postlist { padding: 0 var(--gutter); margin-bottom: 80px; }
.postlist__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.postcard {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.postcard__img { display: block; }
.postcard__img img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.postcard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.postcard h2 { font-size: var(--fs-h5); line-height: 1.3; }
.postcard h2 a { color: var(--c-black); }
.postcard h2 a:hover { color: var(--c-primary); }
.postcard__date { margin-top: 8px; font-size: 13px; color: var(--c-gray-400); }

/* De samenvatting is op het origineel de hele eerste alinea; die knippen we af
   op drie regels zodat de kaartjes even hoog blijven. */
.postcard__body p {
  margin-top: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.postcard__more {
  margin-top: auto;
  padding-top: 16px;
  color: var(--c-primary);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .postlist__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .postlist__grid { grid-template-columns: 1fr; }
}

/* Zoeken en filteren boven het blogoverzicht. Dezelfde knopvorm als het
   projectenfilter, zodat de twee filters op de site hetzelfde aanvoelen. */
.postfilter { margin-bottom: 40px; display: grid; gap: 14px; }
.postfilter__rij { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.postfilter__label {
  flex: none;
  width: 70px;
  font-weight: 600;
  color: var(--c-black);
}
.postfilter__zoek {
  flex: 1;
  min-width: 220px;
  padding: 12px 18px;
  font: inherit;
  color: var(--c-black);
  background: var(--c-offwhite);
  border: 1px solid var(--c-line);
  border-radius: 999px;
}
.postfilter__zoek:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.postfilter__telling { flex: none; font-size: 14px; color: var(--c-gray-400); }

.postfilter__groep { display: flex; flex-wrap: wrap; gap: 8px; }
.postfilter__groep button {
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
}
.postfilter__groep button:hover { border-color: var(--c-primary); color: var(--c-primary); }
.postfilter__groep button[aria-pressed="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

.postlist__leeg { margin: 0 0 40px; color: var(--c-text); }

@media (max-width: 640px) {
  .postfilter__label { width: 100%; }
  .postfilter__telling { width: 100%; }
}

/* Bijschrift onder een afbeelding in een artikel. Komt maar op een handvol
   artikelen voor, maar hoort wel bij het beeld. */
.wg__article figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--c-gray-400);
}