/* ==========================================================================
   IV Isolatie — stylesheet
   Kleuren, lettertypes en opmaak van de hele site staan in dit ene bestand.
   ========================================================================== */

:root{
  /* Kleuren -------------------------------------------------------------- */
  --ink:        #0E181D;   /* donker: de kruipruimte */
  --ink-2:      #16252C;   /* donkere kaarten */
  --ink-3:      #22363F;   /* randen op donker */
  --paper:      #F2F4F2;   /* licht: de woonkamer boven de vloer */
  --paper-2:    #E3E8E5;
  --brand:      #246E5B;   /* exacte IV Isolatie-groen, van ivisolatie.nl */
  --brand-deep: #114538;   /* exacte donkergroen, van ivisolatie.nl */
  --brand-sage: #5D8D82;   /* exacte saliegroen, van ivisolatie.nl (formulierkaart) */
  --cold:       #5E8FA3;   /* koude lucht van onderen */
  --text:       #16252C;
  --text-muted: #5A6B72;
  --text-dark-bg:       #DDE5E6;
  --text-dark-bg-muted: #8DA3AB;
  --foil: linear-gradient(90deg,#8FA0A6 0%,#E8EEF0 18%,#A9B8BE 34%,#F2F6F7 52%,#9AAAB1 70%,#DCE4E6 86%,#8FA0A6 100%);

  /* Maten ---------------------------------------------------------------- */
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 4px;
  --radius-lg: 10px;

  /* Lettertypes ---------------------------------------------------------- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.1rem, 5.4vw, 3.9rem); }
h2{ font-size:clamp(1.75rem, 3.8vw, 2.7rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); letter-spacing:-0.015em; }

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

:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:3px;
  border-radius:2px;
}

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

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--brand); color:#fff;
  padding:12px 18px; z-index:200; font-weight:600;
}
.skip-link:focus{ left:12px; top:12px; }

/* --- Herbruikbare onderdelen ---------------------------------------------- */

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brand-deep);
  margin:0 0 14px;
  display:block;
}
.on-dark .eyebrow{ color:var(--brand); }

/* De "folielijn": verwijst naar de reflecterende PIF-folie */
.foil-rule{
  height:2px;
  border:0;
  background:var(--foil);
  opacity:.55;
  margin:0;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border:2px solid transparent;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.97rem;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-deep); }
.btn--ghost-dark{ border-color:var(--ink-3); color:var(--text-dark-bg); }
.btn--ghost-dark:hover{ border-color:var(--brand); color:#fff; }
.btn--ghost{ border-color:#C6CFCB; color:var(--text); }
.btn--ghost:hover{ border-color:var(--ink); }

.section{ padding:clamp(40px, 6vw, 76px) 0; }
.section--dark{ background:var(--ink); color:var(--text-dark-bg); }
.section--tint{ background:var(--paper-2); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }

.section-head{ max-width:660px; margin-bottom:clamp(24px,4vw,40px); }
.section-head p{ color:var(--text-muted); font-size:1.06rem; margin-top:16px; }
.section--dark .section-head p{ color:var(--text-dark-bg-muted); }

/* --- Kop van de pagina ---------------------------------------------------- */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(14,24,29,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-3);
}
.header-inner{
  display:flex; align-items:center; gap:22px;
  min-height:70px;
}
.logo{
  font-family:var(--font-display);
  font-weight:800; font-size:1.2rem; letter-spacing:-0.03em;
  color:#fff; text-decoration:none; margin-right:auto;
  display:flex; align-items:center; gap:9px;
}
.logo-mark{
  width:24px; height:24px; border-radius:3px;
  background:var(--foil);
  box-shadow:inset 0 -7px 0 -3px var(--brand);
  flex:none;
}
.footer-logo{ display:inline-block; }
.footer-logo img{ height:64px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  color:var(--text-dark-bg); text-decoration:none;
  font-size:0.94rem; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--brand); }

/* --- Submenu in de navigatie ("Wat we doen" ▾) ----------------------------- */

.nav-item{ position:relative; }
.nav-item > a{ display:inline-flex; align-items:center; gap:5px; }
.nav-item > a::after{ content:"▾"; font-size:.62em; opacity:.75; transform:translateY(1px); }
.nav-submenu{
  list-style:none; margin:0; padding:8px;
  position:absolute; top:calc(100% + 10px); left:0; z-index:10;
  min-width:210px;
  background:var(--ink-2); border:1px solid var(--ink-3); border-radius:var(--radius-lg);
  box-shadow:0 18px 36px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-item:hover .nav-submenu,
.nav-item:focus-within .nav-submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.nav-submenu li{ list-style:none; }
.nav-submenu a{
  display:block; padding:10px 12px; border-radius:6px;
  border-bottom:0 !important; white-space:nowrap; font-size:.92rem;
}
.nav-submenu a:hover{ background:var(--ink-3); color:#fff; }

@media (max-width:760px){
  .nav-item{ position:static; }
  .nav-item > a::after{ display:none; }
  .nav-submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; border:0; box-shadow:none; padding:0 0 4px 16px; margin-top:-6px;
  }
  .nav-submenu a{
    padding:11px 0; border-bottom:1px solid var(--ink-3) !important;
    color:var(--text-dark-bg-muted); font-size:.88rem;
  }
}

.header-tools{ display:flex; align-items:center; gap:14px; }

.lang{ display:flex; font-family:var(--font-mono); font-size:.76rem; border:1px solid var(--ink-3); border-radius:var(--radius); overflow:hidden; }
.lang button{
  background:none; border:0; color:var(--text-dark-bg-muted);
  padding:7px 11px; cursor:pointer; font:inherit; letter-spacing:.06em;
}
.lang button[aria-pressed="true"]{ background:var(--brand); color:#fff; font-weight:600; }

.header-phone{
  color:#fff; text-decoration:none; font-family:var(--font-mono);
  font-size:.85rem; white-space:nowrap;
}
.header-phone:hover{ color:var(--brand); }

.header-cta{ padding:11px 18px; font-size:.9rem; }

.nav-toggle{ display:none; }

/* --- Hero ------------------------------------------------------------------
   Eén foto op de achtergrond, met een los "pop-up"-kaartje erover heen —
   zoals op ivisolatie.nl.
   ========================================================================== */

.hero{
  position:relative;
  min-height:clamp(520px, 74vh, 760px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:var(--text-dark-bg);
}
.hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,24,29,.10) 0%, rgba(14,24,29,.45) 55%, rgba(14,24,29,.86) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  width:100%;
  padding-block:clamp(40px,7vw,76px);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:28px;
}
.hero-text{ max-width:640px; }
.hero h1{ color:#fff; }
.hero h1 em{ font-style:normal; color:var(--brand); }
.hero-sub{
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  color:var(--text-dark-bg);
  max-width:48ch; margin-top:18px;
}

.hero-card{
  flex:0 0 auto; width:min(100%, 320px);
  background:var(--brand-sage);
  border-radius:15px;
  padding:28px 26px;
  box-shadow:0 18px 40px rgba(8,12,10,.35);
}
.hero-card-title{
  margin:0 0 16px;
  font-family:var(--font-display); font-weight:700;
  font-size:1.08rem; color:#fff;
}
.hero-actions{ display:flex; flex-direction:column; gap:12px; }
.hero-actions .btn{ width:100%; justify-content:center; }
.hero-card .btn--ghost-dark{ border-color:rgba(255,255,255,.55); color:#fff; }
.hero-card .btn--ghost-dark:hover{ border-color:#fff; background:rgba(255,255,255,.12); }

@media (max-width:760px){
  .hero{ min-height:0; }
  .hero-inner{ flex-direction:column; align-items:stretch; }
  .hero-card{ width:100%; }
}

/* --- Waardebalk ----------------------------------------------------------- */

.valuebar{ background:var(--brand); color:#fff; }
.valuebar-inner{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.valuebar-item{ padding:22px 0; }
.valuebar-item strong{ font-family:var(--font-display); font-size:1.02rem; display:block; }
.valuebar-item span{ font-size:.9rem; opacity:.8; }

/* --- Stappen -------------------------------------------------------------- */

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step{ background:var(--ink-2); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; }
.step img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.step-body{ padding:22px 20px 26px; }
.step-num{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em;
  color:var(--brand); display:block; margin-bottom:10px;
}
.step h3{ color:#fff; margin-bottom:10px; }
.step p{ font-size:.95rem; color:var(--text-dark-bg-muted); }

/* --- Voordelen ------------------------------------------------------------ */

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.5vw,44px); align-items:center; }
.split img{ border-radius:var(--radius-lg); aspect-ratio:4/3; object-fit:cover; }

.benefit-list{ list-style:none; margin:0; padding:0; }
.benefit-list li{
  padding:22px 0; border-top:1px solid #D2D9D6;
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
}
.benefit-list li:last-child{ border-bottom:1px solid #D2D9D6; }
.benefit-list .big{
  font-family:var(--font-display); font-size:1.75rem; font-weight:800;
  color:var(--brand-deep); letter-spacing:-.03em; min-width:70px;
}
.benefit-list h3{ margin-bottom:5px; }
.benefit-list p{ font-size:.96rem; color:var(--text-muted); }

/* --- Subsidie ------------------------------------------------------------- */

.subsidy{
  background:var(--ink-2); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,48px);
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
}
.subsidy p{ color:var(--text-dark-bg-muted); max-width:56ch; }
.subsidy .amount{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.4rem,5vw,3.4rem); color:var(--brand);
  letter-spacing:-.03em; line-height:1;
}
.subsidy .amount span{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--text-dark-bg-muted); margin-top:8px; }

/* --- Kaarten (projecten, redenen) ---------------------------------------- */

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cards--4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:#fff; border:1px solid #DDE3E0; border-radius:var(--radius-lg);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(14,24,29,.13); }
.card img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.card-body{ padding:20px; }
.card-body .place{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-deep); }
.card-body h3{ margin:8px 0 8px; }
.card-body p{ font-size:.93rem; color:var(--text-muted); }

.reasons{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:#D2D9D6; }
.reason{ background:var(--paper); padding:clamp(24px,3vw,36px); }
.reason .n{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.16em; color:var(--brand-deep); }
.reason h3{ margin:10px 0 10px; }
.reason p{ font-size:.96rem; color:var(--text-muted); }

/* --- Galerij -------------------------------------------------------------- */

.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery img{ aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); width:100%; }
.gallery--tall img{ aspect-ratio:3/4; }
.gallery figure{ margin:0; }
.gallery figcaption{ margin-top:8px; font-size:.82rem; color:var(--text-muted); }
.section--dark .gallery figcaption, .on-dark .gallery figcaption{ color:var(--text-dark-bg-muted); }

/* --- Reviews -------------------------------------------------------------- */

.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review{
  background:var(--ink-2); border-radius:var(--radius-lg);
  padding:28px 26px; display:flex; flex-direction:column; gap:16px;
}
.stars{ color:var(--brand); font-size:1rem; letter-spacing:.16em; }
.review blockquote{ margin:0; font-size:1rem; color:var(--text-dark-bg); }
.review cite{ font-style:normal; margin-top:auto; }
.review cite b{ display:block; color:#fff; font-weight:600; font-size:.95rem; }
.review cite span{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-dark-bg-muted); }

/* --- Veelgestelde vragen -------------------------------------------------- */

.faq{ max-width:820px; }
.faq details{ border-top:1px solid #D2D9D6; }
.faq details:last-of-type{ border-bottom:1px solid #D2D9D6; }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0;
  font-family:var(--font-display); font-weight:700; font-size:1.06rem;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:1.35rem; color:var(--brand-deep); font-weight:400;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 44px 24px 0; color:var(--text-muted); font-size:.98rem; }

/* --- Werkgebied ----------------------------------------------------------- */

.places{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.places li{
  list-style:none; font-family:var(--font-mono); font-size:.82rem;
  padding:8px 14px; border:1px solid var(--ink-3); border-radius:100px;
  color:var(--text-dark-bg-muted);
}

/* --- Oproep tot actie ----------------------------------------------------- */

.cta-band{ background:var(--brand); color:#fff; }
.cta-band .wrap{
  padding-block:clamp(46px,6vw,74px);
  display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center;
}
.cta-band h2{ max-width:20ch; }
.cta-band p{ margin-top:12px; max-width:48ch; }
.btn--onbrand{ background:var(--ink); color:#fff; }
.btn--onbrand:hover{ background:#000; }

/* --- Formulier ------------------------------------------------------------ */

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.87rem; font-weight:600; }
.field input, .field textarea{
  font:inherit; font-size:1rem; padding:13px 14px;
  border:1px solid #C6CFCB; border-radius:var(--radius);
  background:#fff; color:var(--text);
}
.field input:focus, .field textarea:focus{ border-color:var(--brand-deep); }
.field textarea{ min-height:130px; resize:vertical; }
.form-note{ font-size:.83rem; color:var(--text-muted); margin-top:14px; }

.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ padding:20px 0; border-bottom:1px solid var(--ink-3); }
.contact-list .label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); display:block; margin-bottom:9px; }
.contact-list a{ color:#fff; text-decoration:none; font-size:1.02rem; display:block; }
.contact-list a:hover{ color:var(--brand); }

/* --- Team ----------------------------------------------------------------- */

.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.team figure{ margin:0; }
.team img{ aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-lg); width:100%; }
.team figcaption{ margin-top:14px; }
.team b{ display:block; font-family:var(--font-display); font-size:1.05rem; }
.team span{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); }

/* --- Kenmerkenlijst (diensten) -------------------------------------------- */

.spec-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.spec-cols h3{ padding-bottom:14px; border-bottom:2px solid var(--brand); margin-bottom:6px; }
.spec-cols ul{ list-style:none; margin:0; padding:0; }
.spec-cols li{ padding:11px 0; border-bottom:1px solid #D2D9D6; font-size:.96rem; }
.section--dark .spec-cols li{ border-bottom-color:var(--ink-3); color:var(--text-dark-bg-muted); }

/* eigenschappen als losse "chips", ipv een kale lijst */
.chip-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chip-list li{
  display:flex; align-items:center; gap:9px;
  padding:9px 15px; border-radius:100px;
  background:var(--ink-2); border:1px solid var(--ink-3);
  font-size:.86rem; color:var(--text-dark-bg);
}
.chip-list li::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--brand);
}
.section--tint .chip-list li{ background:#fff; border-color:#DDE3E0; color:var(--text); }

/* diensten als afvinklijst, gegroepeerd per fase */
.task-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:11px; }
.task-list li{
  position:relative; padding-left:26px;
  font-size:.96rem; color:var(--text-muted);
}
.task-list li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--brand); font-weight:700; font-size:.92em;
}

.prose{ max-width:68ch; }
.prose p{ font-size:1.04rem; }
.prose strong{ color:var(--text); }
.section--dark .prose p{ color:var(--text-dark-bg-muted); }
.section--dark .prose strong{ color:#fff; }

/* --- Prijscalculator -------------------------------------------------------- */

.calc-card{
  background:var(--ink-2); border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,44px); margin-top:clamp(28px,4vw,40px);
}
.calc-top{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,48px); align-items:flex-end; justify-content:space-between; }
.calc-field label{
  display:block; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  color:var(--text-dark-bg-muted); margin-bottom:10px;
}
.calc-field input[type="number"]{
  width:150px; font:inherit; font-size:1.15rem; padding:12px 14px;
  border-radius:var(--radius); border:1px solid var(--ink-3); background:var(--ink);
  color:#fff;
}
.calc-field input[type="number"]:focus{ outline:2px solid var(--brand); outline-offset:1px; }
.calc-result{ text-align:right; }
.calc-result .calc-amount{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.6rem);
  color:var(--brand); line-height:1; display:block;
}
.calc-result .calc-amount-label{ font-size:.82rem; color:var(--text-dark-bg-muted); }
.calc-note{ margin-top:16px; font-size:.86rem; color:var(--text-dark-bg-muted); max-width:60ch; }
.calc-divider{ border:0; border-top:1px solid var(--ink-3); margin:28px 0; }
.calc-form-title{ font-family:var(--font-display); font-weight:700; color:#fff; margin:0 0 6px; }
.calc-form-intro{ font-size:.92rem; color:var(--text-dark-bg-muted); margin:0 0 20px; }
.calc-card .form-grid .field label{ color:var(--text-dark-bg-muted); }
.calc-card .form-grid input, .calc-card .form-grid textarea{
  background:var(--ink); border-color:var(--ink-3); color:#fff;
}

@media (max-width:600px){
  .calc-top{ flex-direction:column; align-items:stretch; }
  .calc-result{ text-align:left; }
}

/* --- Keurmerken/certificeringen --------------------------------------------- */

.cert-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cert-badge{ display:flex; align-items:center; gap:16px; }
.cert-badge .img-ph{ width:72px; height:72px; aspect-ratio:1/1; border-radius:50%; padding:0; flex:none; }
.cert-badge .img-ph-tag{ font-size:.56rem; padding:3px 7px; }
.cert-logo{
  width:84px; height:64px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.cert-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.cert-badge h3{ font-size:1rem; margin:0 0 4px; }
.cert-badge p{ font-size:.88rem; color:var(--text-muted); margin:0; }

@media (max-width:760px){
  .cert-badges{ grid-template-columns:1fr; }
}

/* --- Placeholder-vakken voor foto's en video (nog te vervangen) ----------- */

.img-ph{
  aspect-ratio:4/3; border-radius:var(--radius-lg);
  border:2px dashed #C7D0CB; background:var(--paper-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:20px; width:100%;
}
.img-ph-tag{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  color:var(--brand-deep); border:1px solid var(--brand-deep); border-radius:100px;
  padding:4px 12px;
}
.img-ph p{ font-size:.86rem; color:var(--text-muted); max-width:24ch; margin:0; }
.section--dark .img-ph, .on-dark .img-ph{ background:var(--ink-2); border-color:var(--ink-3); }
.section--dark .img-ph-tag, .on-dark .img-ph-tag{ color:var(--brand); border-color:var(--brand); }
.section--dark .img-ph p, .on-dark .img-ph p{ color:var(--text-dark-bg-muted); }

.img-ph--video{ aspect-ratio:16/9; }
.img-ph--video .img-ph-play{
  width:50px; height:50px; border-radius:50%; background:var(--brand);
  display:grid; place-items:center; color:#fff; font-size:1rem;
}

.hero-certs{
  position:absolute; left:var(--gutter); bottom:20px; z-index:2;
  display:flex; align-items:center; gap:16px;
  background:rgba(255,255,255,.94);
  padding:11px 18px; border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.hero-certs img{ height:30px; width:auto; object-fit:contain; display:block; }
@media (max-width:760px){
  .hero-inner{ padding-bottom:70px; }
  .hero-certs{ bottom:14px; padding:8px 14px; gap:12px; }
  .hero-certs img{ height:24px; }
}

.video-embed{ max-width:640px; margin:26px auto 0; }
.video-embed video{ width:100%; border-radius:var(--radius-lg); display:block; background:var(--ink); }
.video-embed iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--radius-lg); display:block; background:var(--ink); }
.video-caption{ margin:10px 0 0; text-align:center; font-size:.86rem; color:var(--text-muted); }
.section--dark .video-caption, .on-dark .video-caption{ color:var(--text-dark-bg-muted); }

.ph-gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ph-gallery .img-ph{ aspect-ratio:1/1; }
@media (max-width:900px){ .ph-gallery{ grid-template-columns:repeat(2,1fr); } }

.step .img-ph{ border:0; border-radius:0; aspect-ratio:4/3; }

/* --- Zwevende WhatsApp-knop ----------------------------------------------- */

.whatsapp{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .16s ease;
}
.whatsapp:hover{ transform:scale(1.07); }
.whatsapp svg{ width:29px; height:29px; fill:#fff; }

/* --- Voettekst ------------------------------------------------------------ */

.site-footer{ background:var(--ink); color:var(--text-dark-bg-muted); padding:clamp(46px,6vw,72px) 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
.footer-grid h4{ font-family:var(--font-mono); font-weight:500; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:16px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:11px; font-size:.94rem; }
.footer-grid a{ text-decoration:none; }
.footer-grid a:hover{ color:#fff; }
.footer-tagline{ font-family:var(--font-display); font-size:1.06rem; color:#fff; margin-top:14px; max-width:26ch; }
.footer-bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--ink-3);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-family:var(--font-mono); font-size:.76rem;
}

/* --- Responsief ----------------------------------------------------------- */

@media (max-width: 980px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .reviews{ grid-template-columns:1fr; }
  .team{ grid-template-columns:repeat(2,1fr); }
  .spec-cols{ grid-template-columns:1fr; gap:26px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .subsidy{ grid-template-columns:1fr; }
  .cta-band .wrap{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 760px){
  body{ font-size:16px; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--ink-3);
    padding:8px var(--gutter) 18px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--ink-3); }
  .nav-toggle{
    display:grid; place-items:center; width:42px; height:42px;
    background:none; border:1px solid var(--ink-3); border-radius:var(--radius);
    color:#fff; cursor:pointer; font-size:1.2rem;
  }
  .header-cta{ display:none; }
  .header-phone{ font-size:.78rem; }
  .split{ grid-template-columns:1fr; }
  .reasons{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .valuebar-inner{ grid-template-columns:1fr; }
  .valuebar-item{ padding:14px 0; border-bottom:1px solid rgba(14,24,29,.18); }
  .valuebar-item:last-child{ border-bottom:0; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .steps{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* --- Projectpagina's ------------------------------------------------------ */

.proj-meta{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; background:var(--ink-3); margin-top:36px;
  border-radius:var(--radius-lg); overflow:hidden;
}
.proj-meta div{ background:var(--ink); padding:20px 22px; }
.proj-meta .label{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand); display:block; margin-bottom:8px;
}
.proj-meta .val{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:#fff; letter-spacing:-.02em; display:block; line-height:1.25;
}

.proj-photos{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.proj-photos img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); }
.proj-photos--three img:first-child{ grid-column:1 / -1; aspect-ratio:2/1; }

.proj-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(28px,5vw,60px); }
.proj-challenge{
  background:var(--paper-2); border-left:3px solid var(--brand);
  padding:24px 26px; border-radius:0 var(--radius-lg) var(--radius-lg) 0;
}
.proj-challenge .label{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-deep); display:block; margin-bottom:10px;
}
.proj-steps{ list-style:none; margin:0; padding:0; counter-reset:ps; }
.proj-steps li{
  counter-increment:ps; position:relative;
  padding:0 0 24px 46px; border-left:1px solid #D2D9D6; margin-left:11px;
}
.proj-steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.proj-steps li::before{
  content:counter(ps,decimal-leading-zero);
  position:absolute; left:-11px; top:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--brand); color:#fff;
  font-family:var(--font-mono); font-size:.66rem; font-weight:500;
  display:grid; place-items:center;
}

@media (max-width:900px){
  .proj-meta{ grid-template-columns:repeat(2,1fr); }
  .proj-body{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .proj-photos{ grid-template-columns:1fr; }
  .proj-photos--three img:first-child{ aspect-ratio:16/9; }
}