/* G&L Bouw — ontwerp "Avondlicht" (versie 8). Contract: kennisbank/DESIGN.md */
/* Tokens */
:root{--nacht:#12161D;--schemer:#1D232D;--schemer-2:#272E3A;--rood:#ED1C24;--rood-donker:#B8121A;--blauw:#C0D9E6;--licht:#F2F4F6;--tekst:#ECEEF1;--grijs:#A7AFBA;--lijn:#323A47;--serif:'Young Serif',serif;--sans:'Schibsted Grotesk',sans-serif;--kop-h:116px}

/* Basis */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nacht);color:var(--tekst);font-family:var(--sans);font-size:18px;line-height:1.6}
a{color:var(--blauw)} a:hover{color:#fff}
img{height:auto}
summary{list-style:none;cursor:pointer} summary::-webkit-details-marker{display:none}
details[open]>summary .faq-plus{transform:rotate(45deg)}
@keyframes glOp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* Hero zonder fade-in: het beeld is het LCP-element en moet meteen zichtbaar zijn */
@keyframes glDag{from{transform:scale(1.07)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* Componenten en secties, elk met de eigen media queries erbij */
.wrap{max-width:1400px;margin:0 auto;padding-left:32px;padding-right:32px}
.h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.2vw,62px);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.icoon{width:20px;height:20px;flex-shrink:0}
.icoon-whatsapp{color:#25D366}

/* Knoppen */
.knop{display:inline-flex;align-items:center;gap:9px;border-radius:6px;font-weight:700;text-decoration:none}
.knop-blauw{background:var(--blauw);color:var(--nacht);padding:12px 20px}
.knop-blauw:hover{background:#fff;color:var(--nacht)}
.knop-rood{background:var(--rood);color:#fff;padding:17px 24px;font-size:19px}
.knop-rood:hover{background:var(--rood-donker);color:#fff}
.knop-lijn{color:#fff;padding:15px 22px;font-size:19px;border:2px solid rgba(255,255,255,.7)}
.knop-lijn:hover{border-color:var(--blauw);color:var(--blauw)}
.knop-lijn-klein{color:#fff;padding:10px 14px;border:2px solid rgba(255,255,255,.7)}
.knop-lijn-klein:hover{border-color:var(--blauw);color:var(--blauw)}

/* Hero */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column}
.hero-beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% center;animation:glDag 2.4s cubic-bezier(.2,.7,.2,1) both}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,22,29,.86) 0,rgba(18,22,29,.79) 44%,rgba(18,22,29,0) 72%),linear-gradient(0deg,rgba(18,22,29,.85) 0,rgba(18,22,29,0) 34%)}
/* Tekst over de foto: scrim gemeten (webdesign.md, "Tekst op een foto"); tot 940 px loopt de tekst over (bijna) de volle breedte */
@media (max-width:940px){.hero-scrim{background:linear-gradient(180deg,rgba(18,22,29,.82) 0,rgba(18,22,29,.68) 60%,rgba(18,22,29,.86) 100%)}}
.kop{position:relative;width:100%;padding-top:20px;padding-bottom:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;animation:glOp .7s both}
.logo{display:block}
.logo img{height:72px;width:auto;display:block}
.menu{display:flex;flex-wrap:wrap;gap:6px 26px;font-weight:500;font-size:16px}
.menu a{color:#fff;text-decoration:none}
.menu a:hover{color:var(--blauw)}
.kop-acties{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero-tekst{position:relative;flex:1;width:100%;padding-top:6vh;display:flex;flex-direction:column;justify-content:center}
.hero-boven{margin:0 0 20px;color:var(--blauw);font-weight:600;letter-spacing:.06em;animation:glOp .9s .3s both}
.hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.4vw,118px);line-height:.98;letter-spacing:-.02em;max-width:8.6em;text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero-lead{margin:26px 0 0;font-size:clamp(18px,1.6vw,22px);max-width:28em;color:#E4E7EB;text-wrap:pretty;animation:glOp 1.1s .55s cubic-bezier(.2,.7,.2,1) both}
.hero-acties{position:relative;width:100%;padding-top:30px;padding-bottom:100px;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;animation:glOp 1.1s .7s cubic-bezier(.2,.7,.2,1) both}
.hero-score{margin:0 0 0 auto;display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"c s g" "c t t";align-items:center;gap:4px 8px;padding:14px 22px 14px 18px;border-radius:8px;background:rgba(18,22,29,.72);border:1px solid rgba(192,217,230,.35);color:#E4E7EB;font-size:16px;line-height:1.6}
.hero-score-cijfer{grid-area:c;margin-right:8px;font-family:var(--serif);font-size:54px;line-height:1;color:#fff}
.hero-score-sterren{grid-area:s;color:#F5B800;font-size:17px;letter-spacing:.1em}
.hero-score-google{grid-area:g}
.hero-score-trust{grid-area:t;color:var(--blauw);font-weight:700}
@media (max-width:940px){.hero-score{margin-left:0;order:-1;margin-bottom:6px}}
/* Telefoon: sterren naast het cijfer, de twee tekstregels eronder op volle breedte */
@media (max-width:480px){.hero-score{grid-template-columns:auto 1fr;grid-template-areas:"c s" "g g" "t t";padding:12px 16px;font-size:15px}.hero-score-cijfer{font-size:44px;margin:0 4px 6px 0}.hero-score-sterren{font-size:19px}}
@media (max-width:350px){.hero-score{font-size:14px;padding:10px 12px}}

/* Diensten */
.diensten{background:var(--licht);color:#161A20}
.diensten .wrap{padding-top:110px;padding-bottom:110px}
.sectie-kop{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:20px 64px;align-items:end;margin-bottom:56px}
.sectie-kop p{margin:0;color:#4D5662;max-width:32em}
.dienst-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:48px 32px}
.dienst img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:6px}
.dienst h3{margin:18px 0 6px;font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.15}
.dienst p{margin:0;color:#4D5662;font-size:17px;text-wrap:pretty}

/* De broers */
.broers{background:var(--schemer);background-image:radial-gradient(90% 70% at 0% 100%,rgba(192,217,230,.16),rgba(192,217,230,0) 60%)}
.broers .wrap{padding-top:110px;padding-bottom:110px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:64px;align-items:start}
.broers-tekst{margin:0;font-size:19px;color:#D6DAE0;text-wrap:pretty}
.broers-citaat{margin:18px 0 0;font-family:var(--serif);font-size:24px;color:var(--blauw)}
.usp-raster{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px 32px}
.usp{border-top:2px solid var(--blauw);padding-top:14px}
.usp h3{margin:0;font-size:19px;font-weight:700}
.usp p{margin:6px 0 0;color:var(--grijs);font-size:17px}

/* Reviews */
.reviews{background:var(--blauw);color:var(--nacht)}
.reviews-raster{padding-top:90px;padding-bottom:90px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px 64px;align-items:start}
.score{font-family:var(--serif);font-size:96px;line-height:.9}
.score-bron{margin:12px 0 0;font-weight:700}
.score-extra{margin:2px 0 0}
.review{margin:0}
.review p{margin:0;font-family:var(--serif);font-size:clamp(25px,2.6vw,36px);line-height:1.2;text-wrap:balance}
.review footer{margin-top:12px;font-size:15px;font-weight:600}
.themas{padding-bottom:80px;display:flex;flex-wrap:wrap;gap:8px}
.thema{background:var(--nacht);color:#fff;padding:8px 16px;border-radius:40px;font-size:16px}
.themas-noot{padding:8px 6px;font-size:16px}

/* Werkwijze */
.werkwijze{padding-top:110px;padding-bottom:110px}
.werkwijze .h2{margin-bottom:56px}
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:40px 28px;background:linear-gradient(var(--lijn),var(--lijn)) 0 9px/100% 2px no-repeat}
.stip{display:block;width:20px;height:20px;border-radius:50%;background:var(--blauw);box-shadow:0 0 0 6px var(--nacht),0 0 24px rgba(192,217,230,.6)}
.stappen h3{margin:22px 0 8px;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15}
.stappen p{margin:0;color:var(--grijs)}

/* Werkgebied */
.werkgebied{position:relative;overflow:hidden}
.werkgebied-beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.werkgebied-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,22,29,.9) 0,rgba(18,22,29,.55) 55%,rgba(18,22,29,.2))}
@media (max-width:680px){.werkgebied-scrim{background:linear-gradient(90deg,rgba(18,22,29,.9) 0,rgba(18,22,29,.72) 55%,rgba(18,22,29,.6))}}
.werkgebied .wrap{position:relative;padding-top:130px;padding-bottom:130px}
.werkgebied-boven{margin:0 0 14px;color:var(--blauw);font-weight:600}
.werkgebied-noot{margin:22px 0 0;color:#D6DAE0}

/* Vragen */
.vragen{max-width:1000px;margin:0 auto;padding:110px 32px}
.vragen .h2{margin-bottom:30px}
.vragen details{border-top:1px solid var(--lijn)}
.vragen summary{display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:600;font-size:20px}
.faq-plus{color:var(--blauw);font-size:30px;line-height:1;transition:transform .2s}
.vragen details p{margin:0 0 24px;color:#C3C9D1;max-width:42em}

/* Offerte */
.offerte{background:var(--schemer);background-image:radial-gradient(80% 90% at 100% 0%,rgba(192,217,230,.18),rgba(192,217,230,0) 60%)}
.offerte .wrap{padding-top:110px;padding-bottom:110px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px}
.offerte h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.8vw,72px);line-height:1;letter-spacing:-.015em}
.offerte-lead{margin:20px 0 32px;color:#D6DAE0;font-size:19px}
.groot-nummer{display:block;font-family:var(--serif);font-size:clamp(34px,3.8vw,52px);color:#fff;text-decoration:none;line-height:1.2}
.groot-nummer:hover{color:var(--blauw)}
.offerte-whatsapp{margin-top:22px}
.offerte-noot{margin:18px 0 0;color:var(--grijs)}
.formulier-vak{background:var(--licht);color:#161A20;padding:34px;border-radius:8px}
.formulier{display:grid;gap:16px}
.formulier label{display:grid;gap:6px;font-weight:600;min-width:0}
.formulier input,.formulier select,.formulier textarea{min-width:0;font:inherit;font-weight:400;padding:13px 12px;border:1px solid #B5BCC5;border-radius:6px;background:#fff;color:#161A20}
.formulier textarea{resize:vertical}
.formulier-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.formulier button{font:inherit;font-size:19px;font-weight:700;background:var(--rood);color:#fff;border:0;padding:17px;border-radius:6px;cursor:pointer}
.formulier button:hover{background:var(--rood-donker)}

/* Voet */
.voet{padding-top:44px;padding-bottom:48px;display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;font-size:15px;color:var(--grijs)}
.voet>img{height:64px;width:auto}
.voet strong{color:#fff}
.voet a{color:var(--grijs);text-decoration:none}
.voet a:hover{color:var(--blauw)}
.voet-sociaal{display:flex;gap:14px}
.voet-sociaal a{color:#fff}
.voet-sociaal a:hover{color:var(--blauw)}

/* Kopbalk: blijft bovenaan staan (contact altijd in beeld); boven de hero doorzichtig zoals ontworpen */
.kop-balk{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .25s,box-shadow .25s}
.kop-balk.is-vast{background:rgba(18,22,29,.94);box-shadow:0 1px 0 var(--lijn)}
.kop{flex-wrap:nowrap}
.hero{padding-top:var(--kop-h)}
section[id],#top{scroll-margin-top:var(--kop-h)}
.kop-acties{flex-wrap:nowrap}
.menu-knop{display:none}
@media (max-width:1240px){
  :root{--kop-h:92px}
  .kop{padding-top:14px;padding-bottom:14px;gap:12px}
  .logo img{height:62px}
  .menu-knop{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 11px;background:transparent;border:2px solid rgba(255,255,255,.7);border-radius:6px;cursor:pointer}
  .menu-knop span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
  .menu-knop[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-knop[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-knop[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;flex-wrap:nowrap;gap:0;padding:8px 32px 20px;background:rgba(18,22,29,.97);box-shadow:0 1px 0 var(--lijn);font-size:20px}
  .menu.is-open{display:flex}
  .menu a{padding:12px 0;border-bottom:1px solid var(--lijn)}
  .menu a:last-child{border-bottom:0}
  .kop-balk:has(.menu.is-open){background:rgba(18,22,29,.97)}
}
@media (max-width:640px){
  .kop-offerte{display:none}
}
@media (max-width:480px){
  :root{--kop-h:78px}
  .kop{padding-left:14px;padding-right:14px;gap:8px}
  .logo img{height:48px}
  .kop-acties{gap:6px}
  .kop-acties .knop-lijn-klein{padding:8px 10px;font-size:15px;min-height:44px}
  .kop-bel .icoon{display:none}
  .kop-whatsapp span{display:none}
  .kop-whatsapp .icoon{width:22px;height:22px}
  .menu-knop{width:44px;height:44px;padding:0 10px}
  .menu{padding:4px 14px 16px}
}

/* Formulier: states van het versturen (assets/js/formulier.js) */
.formulier button:disabled{opacity:.55;cursor:wait}
.formulier button:disabled:hover{background:var(--rood)}
.formulier-privacy{margin:0;font-size:15px;color:#4D5662}
.formulier-privacy a{color:#161A20}
.formulier[hidden]{display:none}
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formulier label.is-fout input,.formulier label.is-fout select,.formulier label.is-fout textarea{border-color:var(--rood-donker);box-shadow:0 0 0 1px var(--rood-donker)}
.veld-fout{font-size:15px;font-weight:600;color:#9B0F16}
.formulier-status{margin:0;padding:12px 14px;border-left:4px solid var(--rood-donker);border-radius:4px;background:#FBE9EA;color:#7A0C11;font-size:15px;font-weight:600}
.formulier-status:empty{display:none}
.formulier-bedankt{outline:none}
.formulier-bedankt h3{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.formulier-bedankt p{margin:0;color:#4D5662}
.formulier-bedankt a{color:#161A20;font-weight:700}

/* Privacyverklaring als laag boven het formulier */
body:has(.privacy-laag[open]){overflow:hidden}
.privacy-laag{padding:0;width:min(720px,calc(100% - 32px));max-height:min(85svh,900px);border:1px solid var(--lijn);border-radius:8px;background:var(--schemer);color:var(--tekst);overflow:hidden}
.privacy-laag[open]{display:flex;flex-direction:column}
.privacy-laag::backdrop{background:rgba(10,12,16,.7)}
.privacy-laag-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--lijn)}
.privacy-laag-kop h2{margin:0;min-width:0;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1}
.privacy-laag-sluit{flex:none;font:inherit;font-size:16px;font-weight:600;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);border-radius:6px;padding:8px 14px;cursor:pointer}
.privacy-laag-sluit:hover{border-color:var(--blauw);color:var(--blauw)}
.privacy-laag-tekst{overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 28px;font-size:17px;color:#D6DAE0}
.privacy-laag-tekst h3{margin:26px 0 8px;font-size:19px;color:#fff}
.privacy-laag-tekst p{margin:0 0 14px}
@media (max-width:480px){.privacy-laag-kop{padding:12px 16px}.privacy-laag-tekst{padding:16px 16px 22px}}

/* Subpagina's (realisaties, privacy): kopbalk altijd donker */
.pagina{padding-top:calc(var(--kop-h) + 70px);padding-bottom:100px}
.pagina h1{margin:0 0 20px;font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.015em}
.pagina-lead{margin:0 0 56px;max-width:36em;color:#D6DAE0;font-size:19px}
.tekst-pagina{max-width:860px}
.tekst-pagina h2{margin:40px 0 10px;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15}
.tekst-pagina p,.tekst-pagina li{color:#D6DAE0}
.tekst-pagina .meta{margin-top:40px;color:var(--grijs);font-size:15px}
.realisatie{margin:0 0 72px}
.realisatie h2{margin:0 0 8px;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1}
.realisatie>p{margin:0 0 22px;max-width:40em;color:#C3C9D1}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1000px}
.paar figure{margin:0}
.paar img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:6px}
.paar figcaption{margin-top:8px;color:var(--blauw);font-weight:600;font-size:16px}
@media (max-width:480px){.paar{gap:10px}}
.tekst-pagina{overflow-wrap:anywhere}

/* Mobiel-regel: kaartenrijen worden op ≤ 768 px swipebare rijen in plaats van lange stapels */
@media (max-width:768px){
  .dienst-raster,.stappen,.usp-raster,.reviews-raster{display:grid;grid-auto-flow:column;grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .dienst-raster>*,.stappen>*,.usp-raster>*,.reviews-raster>*{scroll-snap-align:start}
  .dienst-raster{grid-auto-columns:min(82%,340px);gap:20px;padding-bottom:12px}
  .stappen{grid-auto-columns:min(76%,280px);gap:24px;padding-bottom:12px;background-attachment:local}
  .usp-raster{grid-auto-columns:min(72%,240px);gap:24px;padding-bottom:10px}
  .reviews-raster{grid-auto-columns:min(86%,360px);gap:32px;padding-bottom:70px;scroll-padding-inline:32px}
  .stappen li:last-child,.dienst-raster>:last-child{margin-right:4px}
}

/* Voet: met de links naar de voorwaarden en de privacy blijven logo, gegevens en iconen op één rij */
@media (min-width:1000px){.voet>span{flex:1 1 0;min-width:22em;text-align:center}}
.menu a[aria-current="page"]{color:var(--blauw)}