/* ============================================================
   jj-technics.be — site.css
   Bron: Claude Design stijlblad (2026-08-23). Eén bestand:
   1. fonts (zelf gehost)  2. tokens  3. reset/basis  4. componenten (fase 1)
   5. responsief (fase 2)
   ============================================================ */

/* 1. FONTS ---------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  font-optical-sizing: auto;
  src: url('../fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  font-optical-sizing: auto;
  src: url('../fonts/fraunces-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. TOKENS --------------------------------------------------- */
:root {
  /* kleur — stijlblad */
  --kalkwit:      #F7F3ED;   /* achtergrond */
  --zand:         #EBE3D8;   /* tweede vlak */
  --bruinzwart:   #1C1815;   /* tekst */
  --secundair:    #5A5148;   /* tekst secundair */
  --mosgroen:     #3D463C;   /* donkere secties */
  --terracotta:   #A35635;   /* CTA, actieve staten — stijlblad #B4633F, verdiept voor contrast ≥ 4,5:1 (wit erop 5,3) */
  --terracotta-d: #8F4C2E;   /* hover */
  --koper:        #C08A50;   /* haarlijnen, iconen, details — nooit als vlak */
  --koper-tekst:  #855A27;   /* kleine kopertekst — stijlblad #96682F mat 4,4:1; nu 5,4 op kalkwit, 4,7 op zand */
  --wit:          #FFFFFF;
  --papier:       #FCFAF6;   /* kaartvlak */

  /* haarlijnen */
  --lijn:         #DDD3C6;
  --lijn-zacht:   #E2D8C8;
  --lijn-sterk:   #D2C5B0;
  --lijn-koper:   rgba(201,162,107,.35);   /* op mosgroen */
  --lijn-licht:   rgba(247,243,237,.16);   /* op donker */

  /* schaduw — warm getint, nooit grijs */
  --schaduw-kaart:  0 20px 40px -28px rgba(90,64,40,.28);
  --schaduw-lift:   0 28px 52px -32px rgba(90,64,40,.35);
  --schaduw-groot:  0 32px 56px -32px rgba(90,64,40,.35);
  --schaduw-donker: 0 4px 14px rgba(28,24,21,.35);
  --ring-focus:     0 0 0 3px rgba(180,99,63,.18);

  /* vorm */
  --radius:    3px;
  --radius-s:  2px;

  /* typografie — stijlblad */
  --font-kop:   'Fraunces', Georgia, 'Times New Roman', serif;
  --font-tekst: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(44px, 5.4vw, 78px);   /* Fraunces 480 · 76/1.02 */
  --fs-h2:      clamp(32px, 3.2vw, 46px);   /* Fraunces 500 · 46/1.08 */
  --fs-h3:      clamp(22px, 2vw, 27px);     /* Fraunces 520 · 27/1.2  */
  --fs-intro:   19px;                       /* Manrope 400 · 19/1.6   */
  --fs-body:    17px;                       /* Manrope 400 · 17/1.65  */
  --fs-klein:   15px;
  --fs-label:   12px;                       /* Manrope 800 · +0.2em   */
  --lh-display: 1.02;
  --lh-h2:      1.08;
  --lh-h3:      1.2;
  --lh-intro:   1.6;
  --lh-body:    1.65;
  --ls-label:   .2em;
  --ls-label-s: .18em;
  --maat:       68ch;                       /* max regellengte */

  /* ruimte */
  --sectie-y:   clamp(64px, 8vw, 110px);
  --sectie-x:   clamp(24px, 6vw, 80px);
  --container:  1440px;
  --gap:        clamp(20px, 2.4vw, 36px);
  --header-h:   88px;

  /* beweging — subtiel en traag */
  --duur:       600ms;
  --duur-kort:  .35s;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --reveal-y:   22px;
  --zoom-hover: 1.04;
}

/* 3. RESET / BASIS -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--kalkwit);
  color: var(--bruinzwart);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-tekst);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--font-kop); font-optical-sizing: auto; margin: 0; letter-spacing: -.01em; }
h1 { font-size: var(--fs-display); font-weight: 480; line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); font-weight: 520; line-height: var(--lh-h3); }
p { margin: 0 0 1em; max-width: var(--maat); }
a { color: var(--terracotta); text-decoration: none; }
a:hover { color: var(--terracotta-d); }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }   /* hidden wint altijd van component-display (B1-schakelaar, menu) */
button, input, select, textarea { font: inherit; color: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
::selection { background: var(--koper); color: var(--wit); }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.label { font: 800 var(--fs-label)/1.3 var(--font-tekst); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--koper-tekst); }
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 4. COMPONENTEN — fase 1 ------------------------------------- */

/* 4.0 aanvullende tokens — fase 1 (ontbraken in sectie 2, nodig voor
   1-op-1 kleuren uit de Preview die niet met de bestaande tokens te
   bouwen waren) */
:root {
  --tekst-lijst:      #3E362E;  /* opsommingstekst in dienstkaart */
  --tekst-op-donker:  #C9CDC5;  /* lopende tekst op mosgroen */
  --label-op-donker:  #DAAB78;   /* was #C9A26B (4,1:1); nu 4,7:1 op mosgroen */  /* eyebrow/label op mosgroen (architecten, footer) */
  --label-op-hero:    #DCA871;  /* eyebrow-label in de hero-statenbalk */
  --merk-tekst:       #A99C8C;  /* merknamen in de merkenband */
  --lijn-form:        #CFC3B2;  /* rand van formuliervelden */
  --lijn-koper-zwak:  rgba(201,162,107,.3);   /* rand sub-footer */
  --tekst-subfooter:  #B0B8AC;   /* was #9AA396 (3,8:1); nu 4,8:1 op mosgroen */  /* copyright/links in de sub-footer */
  --hover-op-donker:  #E4BE93;  /* hover van lichte knoppen op mosgroen */
  --tekst-muted:      #8A7C6B;  /* privacyzin, BTW-regel */
  --scrim-1:          rgba(28,24,21,.1);   /* hero-verloop, lichtste band */
  --scrim-2:          rgba(28,24,21,.55);  /* hero-verloop midden + statenbalk-vlak */
  --scrim-3:          rgba(28,24,21,.7);   /* hero-verloop, donkerste band */
  --vlak-label-donker: rgba(28,24,21,.6);  /* "VOOR"-pil op de voor/na-foto */
  --terracotta-vlak:  rgba(180,99,63,.92); /* "NA"-pil op de voor/na-foto */
  --tekst-op-hero:      rgba(247,243,237,.88); /* statenbalk-tekst in hero */
  --tekst-op-hero-intro: rgba(247,243,237,.92); /* hero-introtekst */
  --lijn-op-hero:       rgba(247,243,237,.14); /* scheidingslijnen statenbalk */
  --rand-op-hero:       rgba(247,243,237,.55); /* rand secundaire knop op hero */
  --vlak-op-hero-hover: rgba(247,243,237,.12); /* hover secundaire knop op hero */
}

/* 4.1 layout basis --------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sectie-x); }
.foto-warm { filter: saturate(.88) sepia(.12) contrast(.96) brightness(1.03); }
.foto-warm-voor { filter: saturate(.82) sepia(.14) contrast(.95); }
.pos-over { object-position: 50% 30%; }
.pos-verwarming { object-position: 50% 40%; }
.pos-koeling { object-position: 50% 8%; }
.pos-sanitair { object-position: 50% 55%; }
.pos-energie { object-position: 50% 58%; }
.pos-vergelijk { object-position: 50% 45%; }
.pos-badkamer { object-position: 50% 40%; }
.pos-hvac { object-position: 70% 50%; }
.pos-vloerverwarming { object-position: 50% 70%; }
.label-klein { font: 800 11px/1.3 var(--font-tekst); letter-spacing: .18em; text-transform: uppercase; color: var(--koper-tekst); }
.label-klein--op-donker { color: var(--label-op-donker); }
.label-klein--op-hero { color: var(--label-op-hero); }
.label--op-donker { color: var(--label-op-donker); }

/* 4.2 header ----------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px); height: var(--header-h);
  background: transparent; border-bottom: 1px solid var(--lijn-licht);
  box-shadow: none; transition: background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled {
  background: var(--kalkwit); border-bottom: 1px solid var(--lijn);
  box-shadow: var(--schaduw-kaart);
}
.site-header__logo { position: relative; height: 50px; width: 135px; }
.site-header__logo img { position: absolute; left: 0; top: 0; height: 50px; width: auto; transition: opacity .35s ease; }
.site-header__logo .logo-wit { opacity: 1; }
.site-header__logo .logo-kleur { opacity: 0; }
.site-header.is-scrolled .logo-wit { opacity: 0; }
.site-header.is-scrolled .logo-kleur { opacity: 1; }
.site-header__nav { display: flex; align-items: center; gap: 34px; }
.site-header__nav a { font: 600 15px var(--font-tekst); color: var(--kalkwit); transition: color .3s ease; }
.site-header.is-scrolled .site-header__nav a { color: var(--bruinzwart); }
.site-header__nav a:hover { color: var(--terracotta); }
.site-header__nav a:focus-visible { outline: 2px solid var(--koper); outline-offset: 4px; }
.site-header__acties { display: flex; align-items: center; gap: 22px; }
.site-header__tel { font: 700 15px var(--font-tekst); color: var(--kalkwit); letter-spacing: .02em; transition: color .3s ease; }
.site-header.is-scrolled .site-header__tel { color: var(--bruinzwart); }
.site-header__tel:hover { color: var(--terracotta); }

/* 4.3 knoppen & tekstlink ----------------------------------------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 16px var(--font-tekst); padding: 16px 30px; border: none;
  border-radius: var(--radius); cursor: pointer; background: none; color: inherit;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.knop--klein { padding: 13px 24px; font-size: 15px; }
.knop--primair { background: var(--terracotta); color: var(--wit); }
.knop--primair:hover { background: var(--terracotta-d); }
.knop--primair:focus-visible { outline: 2px solid var(--koper-tekst); outline-offset: 3px; }
.knop--primair:disabled { background: var(--zand); color: var(--secundair); cursor: not-allowed; }
.knop--secundair { background: transparent; border: 1px solid var(--lijn-sterk); color: var(--bruinzwart); }
.knop--secundair:hover { background: var(--zand); }
.knop--secundair:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.hero .knop--secundair { border-color: var(--rand-op-hero); color: var(--kalkwit); }
.hero .knop--secundair:hover { background: var(--vlak-op-hero-hover); border-color: var(--kalkwit); }
.hero .knop--secundair:focus-visible { outline-color: var(--kalkwit); }
.tekstlink { display: inline-block; font: 700 16px var(--font-tekst); color: var(--terracotta); border-bottom: 1px solid var(--koper); padding-bottom: 4px; }
.tekstlink:hover { color: var(--terracotta-d); }
.tekstlink:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; }
.architecten__cta { margin-top: 36px; background: var(--kalkwit); color: var(--bruinzwart); }
.architecten__cta:hover { background: var(--hover-op-donker); }
.architecten__cta:focus-visible { outline: 2px solid var(--label-op-donker); outline-offset: 3px; }

/* 4.4 hero --------------------------------------------------------- */
.hero { position: relative; height: 100vh; min-height: 680px; }
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.9) sepia(.08); }
/* links extra donker: de koptekst staat links en de nieuwe klantfoto's zijn licht; zo blijven titel, intro en nav leesbaar */
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,24,21,.5) 0%, rgba(28,24,21,.3) 45%, rgba(28,24,21,.05) 80%), linear-gradient(200deg, var(--scrim-1) 25%, var(--scrim-2) 75%, var(--scrim-3) 100%); }
.hero__inner { position: absolute; left: clamp(24px, 6vw, 80px); right: clamp(24px, 6vw, 80px); bottom: 180px; max-width: 800px; }
.hero h1 { color: var(--kalkwit); text-wrap: balance; }
.hero__intro { margin: 26px 0 0; font: 400 clamp(16px, 1.35vw, 19px)/1.6 var(--font-tekst); color: var(--tekst-op-hero-intro); max-width: 600px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.hero__stats {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--scrim-2); backdrop-filter: blur(10px);
  border-top: 1px solid var(--lijn-licht);
}
.hero__stat { padding: 22px clamp(16px, 2vw, 32px); border-right: 1px solid var(--lijn-op-hero); }
.hero__stat:first-child { padding-left: var(--sectie-x); }
.hero__stat:last-child { padding-right: var(--sectie-x); border-right: none; }
.hero__stat-tekst { font: 500 14.5px var(--font-tekst); color: var(--tekst-op-hero); margin-top: 5px; }

/* 4.5 merkenband --------------------------------------------------- */
.merkenband {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px;
  padding: 30px clamp(24px, 6vw, 80px); border-bottom: 1px solid var(--lijn);
}
.merkenband__label { flex: none; }
.merkenband__lijst { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 44px; flex: 1; justify-content: space-between; }
.merkenband__naam { font: 700 17px var(--font-tekst); letter-spacing: .06em; color: var(--merk-tekst); }

/* 4.6 over --------------------------------------------------------- */
.over {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(40px, 6vw, 88px);
  padding-block: clamp(64px, 8vw, 120px) clamp(56px, 7vw, 110px);
}
.over__foto-wrap { position: relative; }
.over__foto { position: relative; height: 640px; overflow: hidden; box-shadow: var(--schaduw-groot); }
.over__foto img { width: 100%; height: 100%; object-fit: cover; }
.over__lijn { position: absolute; left: -14px; top: 24px; bottom: -24px; width: 1px; background: var(--koper); opacity: .6; }
.over__tekst { padding-top: 12px; }
.over h2 { margin-top: 18px; text-wrap: balance; }
.over__intro { margin-top: 30px; max-width: 60ch; display: grid; gap: 18px; }
.over__intro p { margin: 0; color: var(--secundair); }
.over__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px;
  margin-top: 52px; border-top: 1px solid var(--lijn); padding-top: 36px;
}
.over__stat-getal { font: 450 52px var(--font-kop); color: var(--bruinzwart); }
.over__stat .over__stat-tekst { font: 600 14px var(--font-tekst); color: var(--secundair); margin-top: 6px; }

/* 4.7 diensten / dienstkaart ---------------------------------------- */
.diensten { background: var(--zand); }
.diensten__inner { padding-block: clamp(64px, 8vw, 110px) clamp(72px, 8vw, 120px); }
.diensten__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.diensten__kop h2 { margin-top: 18px; }
.diensten__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
.dienstkaart {
  background: var(--papier); border: 1px solid var(--lijn-zacht); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--schaduw-kaart); transition: box-shadow .3s ease;
}
.dienstkaart:hover { box-shadow: var(--schaduw-lift); }
.dienstkaart__foto { height: 280px; overflow: hidden; }
.dienstkaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.dienstkaart:hover .dienstkaart__foto img { transform: scale(var(--zoom-hover)); }
.dienstkaart__body { padding: 32px 36px 36px; }
.dienstkaart__intro { margin: 12px 0 20px; font: 400 16px/1.6 var(--font-tekst); color: var(--secundair); }
.dienstkaart__lijst { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.dienstkaart__lijst li { display: flex; gap: 12px; font: 500 15px var(--font-tekst); color: var(--tekst-lijst); }
.dienstkaart__streep { color: var(--koper); }

/* 4.8 werkwijze ------------------------------------------------------ */
.werkwijze { padding-block: var(--sectie-y); }
.werkwijze__kop { max-width: 560px; }
.werkwijze__kop h2 { margin-top: 18px; }
.werkwijze__stappen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; margin-top: 64px; }
.werkwijze__lijn { position: absolute; left: 26px; right: 26px; top: 26px; height: 1px; background: var(--lijn); }
.werkwijze__stap { position: relative; }
.werkwijze__nummer {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--koper);
  background: var(--kalkwit); display: flex; align-items: center; justify-content: center;
  font: 400 20px var(--font-kop); color: var(--koper-tekst);
}
.werkwijze__stap h3 { margin: 22px 0 8px; font-size: 22px; }
.werkwijze__stap p { margin: 0; font: 400 15.5px/1.6 var(--font-tekst); color: var(--secundair); }

/* 4.9 realisaties / projectkaart / voor-na --------------------------- */
.realisaties { padding-block: 20px clamp(72px, 8vw, 120px); }
.realisaties__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.realisaties__kop h2 { margin-top: 18px; }
.realisaties__intro { font: 500 15px var(--font-tekst); color: var(--secundair); max-width: 340px; text-align: right; margin: 0; }
.realisaties__rij1 { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 32px; }
.realisaties__rij2 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; margin-top: 44px; }

.voor-na { position: relative; height: 500px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--schaduw-lift); --ba: 55%; }
.voor-na__laag { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voor-na__laag--voor { clip-path: inset(0 calc(100% - var(--ba)) 0 0); z-index: 1; }   /* links = voor */
.voor-na__lijn, .voor-na__handvat, .voor-na__label, .voor-na__regelaar { z-index: 2; }
.voor-na__lijn { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; background: var(--kalkwit); transform: translateX(-1px); }
.voor-na__handvat {
  position: absolute; top: 50%; left: var(--ba); transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--kalkwit);
  box-shadow: var(--schaduw-donker); display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--font-tekst); color: var(--koper-tekst);
}
.voor-na__label { position: absolute; top: 20px; font: 800 11px var(--font-tekst); letter-spacing: .16em; padding: 7px 12px; border-radius: var(--radius-s); color: var(--kalkwit); }
.voor-na__label--voor { left: 20px; background: var(--vlak-label-donker); }
.voor-na__label--na { right: 20px; background: var(--terracotta-vlak); }
.voor-na__regelaar { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

.projectkaart__foto { height: 500px; overflow: hidden; border-radius: var(--radius); }
.projectkaart--klein .projectkaart__foto { height: 320px; }
.projectkaart__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.projectkaart:hover .projectkaart__foto img { transform: scale(var(--zoom-hover)); }
.projectkaart__bijschrift { margin-top: 16px; }
.projectkaart--klein .projectkaart__bijschrift { margin-top: 14px; }
.projectkaart__titel { font: 700 15.5px var(--font-tekst); color: var(--bruinzwart); }
.projectkaart--klein .projectkaart__titel { font-size: 15px; }
.projectkaart__locatie { font: 500 14px var(--font-tekst); color: var(--koper-tekst); margin-left: 12px; letter-spacing: .08em; text-transform: uppercase; }
.projectkaart--klein .projectkaart__locatie { font-size: 13.5px; margin-left: 10px; }
.realisaties__rij1 > div > .projectkaart__bijschrift { margin-top: 16px; }

/* 4.10 architecten ---------------------------------------------------- */
.architecten { background: var(--mosgroen); color: var(--kalkwit); }
.architecten__inner {
  display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(40px, 6vw, 88px);
  padding-block: var(--sectie-y);
}
.architecten h2 { margin-top: 18px; color: var(--kalkwit); text-wrap: balance; }
.architecten__intro { margin: 26px 0 0; font: 400 17px/1.65 var(--font-tekst); color: var(--tekst-op-donker); max-width: 52ch; }
.architecten__stap { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 26px 0; border-top: 1px solid var(--lijn-koper); }
.architecten__stappen .architecten__stap:last-child { border-bottom: 1px solid var(--lijn-koper); }
.architecten__nummer { font: 400 22px var(--font-kop); color: var(--label-op-donker); }
.architecten__stap h3 { font: 700 18px var(--font-tekst); font-family: var(--font-tekst); color: var(--kalkwit); }
.architecten__stap p { margin: 6px 0 0; font: 400 15.5px/1.6 var(--font-tekst); color: var(--tekst-op-donker); }

/* 4.11 onderhoud -------------------------------------------------------- */
.onderhoud { border-bottom: 1px solid var(--lijn); }
.onderhoud__inner {
  display: grid; grid-template-columns: minmax(0,8fr) minmax(0,4fr); gap: clamp(32px, 5vw, 64px);
  align-items: start; padding-block: var(--sectie-y);
}
.onderhoud h2 { margin-top: 18px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; }
.onderhoud__features { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px 40px; margin-top: 44px; }
.onderhoud__feature { border-top: 1px solid var(--lijn); padding-top: 18px; }
.onderhoud__feature h3 { font: 700 16.5px var(--font-tekst); font-family: var(--font-tekst); color: var(--bruinzwart); }
.onderhoud__feature p { margin: 6px 0 0; font: 400 15px/1.6 var(--font-tekst); color: var(--secundair); }
.onderhoud__call { background: var(--zand); border: 1px solid var(--lijn-zacht); border-radius: var(--radius); padding: 40px; }
.onderhoud__nummer { display: block; margin-top: 14px; font: 500 34px var(--font-kop); color: var(--bruinzwart); letter-spacing: .01em; }
.onderhoud__nummer:hover { color: var(--terracotta-d); }
.onderhoud__call-tekst { margin: 12px 0 24px; font: 400 15px/1.6 var(--font-tekst); color: var(--secundair); }
.onderhoud__bel { display: flex; width: 100%; padding: 16px 24px; }
.onderhoud__bel:focus-visible { outline: 2px solid var(--koper-tekst); outline-offset: 3px; }

/* 4.12 quotes ------------------------------------------------------------ */
.quotes { max-width: 1100px; margin-inline: auto; padding-inline: var(--sectie-x); padding-block: var(--sectie-y); }
.quotes__label { text-align: center; }
.quotes__lijst { margin-top: 48px; display: grid; gap: 56px; }
.quote { text-align: center; margin: 0; }
.quote__tekst {
  margin: 0 auto; font: 440 clamp(24px, 2.4vw, 33px)/1.35 var(--font-kop); font-style: italic;
  color: var(--bruinzwart); max-width: 26ch; text-wrap: balance;
}
.quote__auteur { font: 700 14px var(--font-tekst); color: var(--secundair); font-style: normal; display: block; margin-top: 18px; }
.quote__detail { font-weight: 500; color: var(--koper-tekst); }
.quotes__scheiding { width: 64px; height: 1px; background: var(--koper); margin: 0 auto; }

/* 4.13 faq ---------------------------------------------------------------- */
.faq { background: var(--zand); }
.faq__inner { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(40px, 6vw, 88px); padding-block: var(--sectie-y); }
.faq__inner h2 { margin-top: 18px; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; text-wrap: balance; }
.faq__intro { margin: 24px 0 0; font: 400 16px/1.65 var(--font-tekst); color: var(--secundair); max-width: 44ch; }
.faq__item { border-top: 1px solid var(--lijn-sterk); }
.faq__lijst .faq__item:last-child { border-bottom: 1px solid var(--lijn-sterk); }
.faq__samenvatting { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 4px; font: 700 18px var(--font-tekst); color: var(--bruinzwart); }
.faq__samenvatting:hover { color: var(--terracotta); }
.faq__samenvatting:focus-visible { outline: 2px solid var(--koper); outline-offset: 2px; }
.faq__icoon { color: var(--koper); font-size: 22px; font-weight: 400; transition: transform var(--duur-kort) var(--ease); }
.faq__item[open] .faq__icoon { transform: rotate(45deg); }
.faq__antwoord { margin: 0; padding: 0 40px 24px 4px; font: 400 15.5px/1.65 var(--font-tekst); color: var(--secundair); max-width: 62ch; }

/* 4.14 offerte / formulier -------------------------------------------------- */
.offerte { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: clamp(40px, 6vw, 88px); padding-block: var(--sectie-y); }
.offerte h2 { margin-top: 18px; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; }
.offerte__intro { margin: 20px 0 0; font: 400 16px/1.65 var(--font-tekst); color: var(--secundair); max-width: 56ch; }
.offerte-form { margin-top: 40px; }
.offerte-form__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px 24px; }
.veld--breed { grid-column: 1 / -1; }
.veld label { display: block; font: 700 13.5px var(--font-tekst); color: var(--bruinzwart); margin-bottom: 8px; }
.veld input, .veld select, .veld textarea {
  width: 100%; box-sizing: border-box; background: var(--papier); border: 1px solid var(--lijn-form);
  border-radius: var(--radius); padding: 14px 16px; font: 500 15.5px var(--font-tekst); color: var(--bruinzwart);
}
.veld textarea { line-height: 1.6; resize: vertical; }
.veld select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B4633F' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible {
  outline: none; border-color: var(--terracotta); box-shadow: var(--ring-focus);
}
.veld.is-fout input, .veld.is-fout select, .veld.is-fout textarea { border-color: var(--terracotta); }
.veld__fout { margin: 8px 0 0; font: 600 13.5px var(--font-tekst); color: var(--terracotta); }
.offerte-form__melding { margin: 0 0 20px; font: 600 15px var(--font-tekst); color: var(--bruinzwart); }
.offerte-form__acties { display: flex; align-items: center; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.offerte-form__privacy { flex: 1 1 280px; margin: 0; max-width: none; font: 500 13.5px/1.5 var(--font-tekst); color: var(--tekst-muted); }
.offerte__zijkolom { border-left: 1px solid var(--lijn); padding-left: clamp(28px, 4vw, 56px); }
.offerte__contactblok { margin-top: 20px; display: grid; gap: 6px; }
.offerte__bedrijf { font: 700 17px var(--font-tekst); color: var(--bruinzwart); }
.offerte__adres { font: 400 16px/1.6 var(--font-tekst); color: var(--secundair); }
.offerte__linkjes { margin-top: 28px; display: grid; gap: 10px; }
.offerte__tel { font: 700 20px var(--font-tekst); color: var(--terracotta); }
.offerte__tel:hover { color: var(--terracotta-d); }
.offerte__mail { font: 600 16px var(--font-tekst); color: var(--terracotta); }
.offerte__mail:hover { color: var(--terracotta-d); }
.offerte__uren-blok { margin-top: 32px; border-top: 1px solid var(--lijn); padding-top: 24px; }
.offerte__uren { margin-top: 14px; display: grid; gap: 8px; font: 500 15px var(--font-tekst); color: var(--secundair); }
.offerte__uren-rij { display: flex; justify-content: space-between; gap: 16px; }
.offerte__uren-waarde { color: var(--bruinzwart); font-weight: 700; }
.offerte__meta { margin-top: 32px; border-top: 1px solid var(--lijn); padding-top: 24px; font: 500 14px/1.7 var(--font-tekst); color: var(--tekst-muted); }

/* 4.15 footer ---------------------------------------------------------------- */
.footer { background: var(--mosgroen); color: var(--kalkwit); }
.footer__inner { padding-block: 80px 0; }
.footer__boven {
  display: grid; grid-template-columns: minmax(0,4fr) minmax(0,3fr) minmax(0,2.5fr) minmax(0,2.5fr);
  gap: clamp(32px, 4vw, 56px); padding-bottom: 64px;
}
.footer__logo { height: 60px; width: auto; }
.footer__intro { margin: 22px 0 0; font: 400 15px/1.65 var(--font-tekst); color: var(--tekst-op-donker); max-width: 34ch; }
.footer__kolom .label-klein { display: block; }
.footer__kaart { position: relative; height: 150px; margin-top: 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--lijn-koper); }
.footer__kaart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.footer__adres { margin-top: 14px; font: 400 15px/1.6 var(--font-tekst); color: var(--tekst-op-donker); }
.footer__lijst { margin-top: 16px; display: grid; gap: 10px; }
.footer__lijst a { font: 500 15px var(--font-tekst); color: var(--tekst-op-donker); }
.footer__lijst a:hover { color: var(--kalkwit); }
.footer__tel { font-weight: 700 !important; font-size: 16px !important; color: var(--kalkwit) !important; }
.footer__tel:hover { color: var(--hover-op-donker) !important; }
.footer__uren { font: 500 15px/1.6 var(--font-tekst); color: var(--tekst-op-donker); }
.footer__onder {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 24px 0; border-top: 1px solid var(--lijn-koper-zwak);
}
.footer__copyright { font: 500 13.5px var(--font-tekst); color: var(--tekst-subfooter); }
.footer__links { display: flex; gap: 28px; }
.footer__links a { font: 500 13.5px var(--font-tekst); color: var(--tekst-subfooter); }
.footer__links a:hover { color: var(--kalkwit); }

/* 4.16 scroll-reveal — CSS-staat klaar, html.js zet fase 3 -------------------- */
html.js [data-reveal] {
  opacity: 0; transform: translateY(var(--reveal-y));
  transition: opacity var(--duur) var(--ease), transform var(--duur) var(--ease);
}
html.js [data-reveal].is-zichtbaar { opacity: 1; transform: none; }

/* fase 3: staten ------------------------------------------------------------- */
.offerte-form__melding.is-fout { color: var(--terracotta); }
.offerte-form__melding.is-ok { color: var(--mosgroen); }

/* fase 4: subpagina's --------------------------------------------------------- */
/* privacy.html — vaste lichte header (.site-header.is-scrolled zonder scroll-JS) */
body.subpagina { padding-top: var(--header-h); }
.subpagina__terug { text-decoration: none; }
.subpagina__terug:hover { color: var(--terracotta); }
.subpagina__main { max-width: 760px; padding-block: clamp(40px, 6vw, 72px) 96px; }
.subpagina__main h1 { font-size: clamp(32px, 4.4vw, 56px); margin: 10px 0 28px; }
.subpagina__main > p { margin-bottom: 1.2em; }
.subpagina__main h2 {
  font-size: 20px; font-weight: 600; margin: 40px 0 12px; padding-top: 20px;
  border-top: 1px solid var(--lijn);
}
.subpagina__main ul { padding-left: 1.2em; margin: 8px 0 0; }
.subpagina__main li { margin-bottom: 8px; }
.subpagina__main table { border-collapse: collapse; width: 100%; font-size: var(--fs-klein); margin-top: 10px; }
.subpagina__main th, .subpagina__main td {
  text-align: left; vertical-align: top; padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--lijn);
}
.subpagina__main th { color: var(--bruinzwart); font-weight: 700; }
.subpagina__footer { border-top: 1px solid var(--lijn); padding-block: 24px; }
.subpagina__footer .container { font: 500 13.5px var(--font-tekst); color: var(--secundair); }

/* 5. RESPONSIEF — fase 2 -------------------------------------- */

/* 5.0 zichtbaarheid --------------------------------------------- */
.alleen-mobiel { display: none; }

/* 5.1 tablet ≤ 1024px (geen artboard — gezond verstand) --------- */
@media (max-width: 1024px) {
  .site-header__nav { gap: 20px; }
  .site-header__tel { display: none; }

  .werkwijze__stappen { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px 40px; }
  .werkwijze__lijn { display: none; }

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

  .architecten__inner { grid-template-columns: minmax(0,1fr); }
  .onderhoud__inner { grid-template-columns: minmax(0,1fr); }

  .offerte { grid-template-columns: minmax(0,1fr); }
  .offerte__zijkolom {
    border-left: none; padding-left: 0; margin-top: 48px;
    border-top: 1px solid var(--lijn); padding-top: 40px;
  }

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

/* 5.2 klein tablet / grote telefoon ≤ 768px — mobiele header actief,
   alles 1 kolom; detailwaarden hieronder volgen het Mobiel-390-artboard
   bij gebrek aan een eigen tablet-artboard (gezond verstand). --------- */
@media (max-width: 768px) {
  :root { --header-h: 68px; }

  body.menu-open { overflow: hidden; }

  /* zichtbaarheid header ------------------------------------------ */
  .alleen-desktop { display: none; }
  .site-header__mobiel-acties.alleen-mobiel { display: flex; align-items: center; gap: 10px; }
  .header__bel.alleen-mobiel {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--rand-op-hero); border-radius: var(--radius);
    color: var(--kalkwit); font: 700 12px var(--font-tekst);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
  }
  .header__bel.alleen-mobiel:hover { background: var(--vlak-op-hero-hover); }
  .site-header.is-scrolled .header__bel.alleen-mobiel { border-color: var(--lijn-sterk); color: var(--bruinzwart); }
  .header__menu-knop.alleen-mobiel {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; background: transparent; border: 1px solid var(--rand-op-hero);
    border-radius: var(--radius); cursor: pointer;
  }
  .header__menu-knop.alleen-mobiel span { display: block; width: 18px; height: 2px; background: var(--kalkwit); }
  .site-header.is-scrolled .header__menu-knop.alleen-mobiel { border-color: var(--lijn-sterk); }
  .site-header.is-scrolled .header__menu-knop.alleen-mobiel span { background: var(--bruinzwart); }

  /* header — afmetingen ------------------------------------------- */
  .site-header { padding: 0 20px; }
  .site-header__logo { height: 40px; width: 88px; }
  .site-header__logo img { height: 40px; }

  /* overlay-menu (markup fase 2, opening/sluiten JS in fase 3) ----- */
  .mobiel-menu {
    position: fixed; inset: 0; z-index: 70; background: var(--bruinzwart);
    display: flex; flex-direction: column;
  }
  .mobiel-menu[hidden] { display: none; }
  .mobiel-menu__kop {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; height: var(--header-h); border-bottom: 1px solid var(--lijn-licht);
  }
  .mobiel-menu__logo { width: 40px; height: 40px; }
  .mobiel-menu__kop img { height: 40px; width: auto; }
  .mobiel-menu__sluit {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--lijn-licht); border-radius: var(--radius);
    color: var(--kalkwit); font: 400 20px var(--font-tekst); cursor: pointer;
  }
  .mobiel-menu__links { display: grid; padding: 16px 24px; overflow-y: auto; }
  .mobiel-menu__links a {
    display: flex; align-items: center; min-height: 44px;
    font: 500 32px/1.2 var(--font-kop); color: var(--kalkwit); padding: 16px 0;
    border-bottom: 1px solid var(--lijn-licht);
  }
  .mobiel-menu__links a:last-child { border-bottom: none; }
  .mobiel-menu__links a:hover { color: var(--terracotta); }
  .mobiel-menu__acties {
    flex: none; margin-top: auto; padding: 24px; display: grid; gap: 12px;
    border-top: 1px solid var(--lijn-licht);
  }
  .mobiel-menu__tel {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    border: 1px solid var(--lijn-licht); color: var(--kalkwit); font: 700 16px var(--font-tekst);
    padding: 15px; border-radius: var(--radius);
  }
  .mobiel-menu__acties .knop { width: 100%; min-height: 48px; }

  /* hero ------------------------------------------------------------ */
  /* hero als kolom: tekst en bewijsstrip in de flow, zodat ze elkaar nooit overlappen */
  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .hero__foto { object-position: 56% 50%; } /* de bron is liggend: toon op een smal scherm het ligbad i.p.v. de lamellen links */
  .hero__inner { position: relative; left: auto; right: auto; bottom: auto; margin: auto var(--sectie-x) 40px; padding-top: calc(var(--header-h) + 48px); max-width: none; }
  .hero__stats { position: relative; bottom: auto; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__cta .knop { width: 100%; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__stat { padding: 18px 20px; }
  .hero__stat:nth-child(2n) { border-right: none; }
  .hero__stat:nth-child(-n+2) { border-bottom: 1px solid var(--lijn-op-hero); }
  .hero__stat:first-child, .hero__stat:last-child { padding-left: 20px; padding-right: 20px; }
  .hero__stat .label-klein { font-size: 10px; }
  .hero__stat-tekst { font-size: 13px; }

  /* merkenband -------------------------------------------------------- */
  .merkenband__label { display: none; }
  .merkenband__lijst { justify-content: center; gap: 14px 22px; }
  .merkenband__naam { font-size: 13px; }

  /* over ---------------------------------------------------------------- */
  .over { grid-template-columns: minmax(0,1fr); gap: 28px; padding-block: 64px; }
  .over__foto { height: 400px; }
  .over__lijn { display: none; }
  .over__stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 32px; padding-top: 24px; }
  .over__stat-getal { font-size: 32px; }
  .over__stat .over__stat-tekst { font-size: 12px; }

  /* diensten ------------------------------------------------------------ */
  .diensten__inner { padding-block: 64px; }
  .diensten__kop { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .diensten__grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .dienstkaart__foto { height: 190px; }
  .dienstkaart__body { padding: 22px 24px 26px; }

  /* werkwijze — verticale tijdlijn ---------------------------------------- */
  .werkwijze__kop { max-width: none; }
  .werkwijze__stappen { grid-template-columns: minmax(0,1fr); gap: 32px; margin-top: 40px; }
  .werkwijze__lijn { display: none; }
  .werkwijze__stappen::before {
    content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--lijn);
  }
  .werkwijze__stap { display: grid; grid-template-columns: 44px minmax(0,1fr); grid-template-rows: 44px auto; gap: 0 20px; }
  .werkwijze__nummer { grid-row: 1; grid-column: 1; width: 44px; height: 44px; font-size: 17px; }
  .werkwijze__stap h3 { grid-row: 1; grid-column: 2; margin: 0; padding-top: 8px; font-size: 19px; align-self: start; }
  .werkwijze__stap p { grid-row: 2; grid-column: 2; margin-top: 6px; font-size: 14.5px; }

  /* realisaties ------------------------------------------------------------ */
  .realisaties { padding-block: 0 64px; }
  .realisaties__kop { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 32px; }
  .realisaties__intro { text-align: left; max-width: none; }
  .realisaties__rij1 { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .voor-na { height: 300px; }
  .realisaties__rij2 { grid-template-columns: minmax(0,1fr); gap: 28px; margin-top: 28px; }
  /* volgorde binnen rij2 omgewisseld via order zodat "Warmtepomp" vóór
     "Stookruimte" staat, gestapeld zoals het artboard (DOM-volgorde blijft
     ongewijzigd — bestandseigendom laat geen herschikking van markup toe) */
  .realisaties__rij2 > *:nth-child(1) { order: 2; }
  .realisaties__rij2 > *:nth-child(2) { order: 1; }
  .projectkaart__foto { height: 260px; }
  .projectkaart--klein .projectkaart__foto { height: 260px; }

  /* architecten -------------------------------------------------------------- */
  .architecten__inner { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .architecten__intro { max-width: none; }
  .architecten__stap { grid-template-columns: 40px minmax(0,1fr); gap: 14px; padding: 18px 0; }
  .architecten__nummer { font-size: 18px; }
  .architecten__stap h3 { font-size: 16px; }
  .architecten__cta { display: flex; width: 100%; justify-content: center; }

  /* onderhoud ------------------------------------------------------------------ */
  .onderhoud__features { grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 24px; }
  .onderhoud__feature { padding-top: 14px; }
  .onderhoud__inner .knop.alleen-mobiel { display: flex; width: 100%; margin-top: 24px; }

  /* klanten / quotes -------------------------------------------------------------- */
  .quotes__lijst { gap: 0; }

  /* faq --------------------------------------------------------------------------- */
  .faq__inner { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .faq__intro { max-width: none; }
  .faq__antwoord { padding-right: 24px; }

  /* offerte ------------------------------------------------------------------------ */
  .offerte { grid-template-columns: minmax(0,1fr); }
  .offerte-form__grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .offerte__zijkolom {
    border-left: none; padding-left: 0; margin-top: 40px;
    border-top: 1px solid var(--lijn); padding-top: 32px;
  }
  .offerte-form__acties { flex-direction: column; align-items: stretch; }
  .offerte-form__privacy { flex: none; }   /* in kolomrichting mag de flex-basis geen hoogte worden */
  .offerte-form__acties .knop { width: 100%; }
  .veld input, .veld select, .veld textarea { min-height: 48px; }

  /* footer ------------------------------------------------------------------------- */
  .footer__inner { padding-block: 48px 0; }
  .footer__logo { height: 46px; }
  .footer__boven { grid-template-columns: minmax(0,1fr); gap: 40px; padding-bottom: 40px; }
  .footer__kaart { height: 180px; }
  .footer__onder { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* touch: alle knoppen minstens 44px hoog -------------------------------------------- */
  .knop { min-height: 44px; }
}

/* 5.3 telefoon ≤ 480px — "Mobiel 390"-artboard, fijnafstemming --------- */
@media (max-width: 480px) {
  :root { --fs-display: clamp(34px, 9vw, 44px); }

  h1, h2, h3 { overflow-wrap: anywhere; }
}

/* 5.4 touch — geen zoom-on-hover buiten hover-capable input --------------- */
@media (hover: none) {
  .dienstkaart:hover .dienstkaart__foto img,
  .projectkaart:hover .projectkaart__foto img { transform: none; }
}