/* Buitenwerk Veranda's, voorbeeldsite van Opgeleverd
   Licht, strak en zakelijk. Zilla Slab + Karla. Klikgedreven, geen scroll-effecten.
   Weer een andere wereld dan Groenhof (warm redactioneel) en Waterlinie (donker filmisch). */

@font-face{font-family:'Zilla Slab';src:url('../fonts/zillaslab-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Zilla Slab';src:url('../fonts/zillaslab-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Zilla Slab';src:url('../fonts/zillaslab-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --wit:#FCFBF9;
  --wit-2:#F2EFE9;
  --inkt:#1D1A16;
  --tekst:#4B463F;
  --zacht:#867F74;
  --lijn:#E3DDD2;
  --hout:#A9713A;
  --hout-diep:#7C4F24;

  --disp:'Zilla Slab',Rockwell,Georgia,serif;
  --body:'Karla',Helvetica,Arial,sans-serif;
  --binnen:1240px;
  --marge:clamp(20px,5vw,60px);
  --ease:cubic-bezier(0.22,1,0.36,1);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--wit);color:var(--tekst);font-family:var(--body);font-size:clamp(16px,1vw,17px);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);color:var(--inkt);margin:0;font-weight:500;letter-spacing:-0.02em;line-height:1.08}
h1 em,h2 em{font-style:normal;color:var(--hout)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}

.binnen{max-width:var(--binnen);margin:0 auto;padding-inline:var(--marge)}
.smal{max-width:760px}

/* korte, snelle reveals: deze site is klikgedreven, niet filmisch */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.06s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.12s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

.demobar{position:relative;z-index:60;background:var(--inkt);color:#CFC7BA;font-size:13px;
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 18px;text-align:center}
.demobar strong{color:#fff;font-weight:700}
.demobar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);white-space:nowrap}

.nav{position:sticky;top:0;z-index:50;background:rgba(252,251,249,.94);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.vast{border-bottom-color:var(--lijn)}
.nav-in{max-width:var(--binnen);margin:0 auto;padding:15px var(--marge);display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--inkt);text-decoration:none;letter-spacing:-0.02em;display:inline-flex;align-items:baseline;gap:4px}
.punt{width:6px;height:6px;background:var(--hout);border-radius:50%;display:inline-block}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav-links a:not(.knop){text-decoration:none;font-size:14.5px;color:var(--tekst);transition:color .25s}
.nav-links a:not(.knop):hover{color:var(--hout)}
@media (max-width:860px){.nav-links a:not(.knop){display:none}}

.knop{display:inline-flex;align-items:center;justify-content:center;background:var(--inkt);color:var(--wit);text-decoration:none;
  font-family:var(--body);font-weight:700;font-size:14.5px;padding:14px 24px;border:0;border-radius:4px;cursor:pointer;
  transition:background .25s var(--ease)}
.knop:hover{background:var(--hout-diep)}
.knop-klein{padding:9px 17px;font-size:13.5px}
.tekstlink{text-decoration:none;font-size:15px;font-weight:500;color:var(--inkt);border-bottom:2px solid var(--lijn);padding-bottom:2px;transition:border-color .25s}
.tekstlink:hover{border-color:var(--hout)}

/* hero: gesplitst, geen full bleed */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,4vw,64px);align-items:center;
  max-width:var(--binnen);margin:0 auto;padding:clamp(38px,7vh,84px) var(--marge) clamp(44px,7vh,88px)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:30px}}
.kicker{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--zacht);font-weight:500}
.hero h1{margin-top:18px;font-size:clamp(34px,4.6vw,58px);max-width:14ch;font-weight:700}
.hero-sub{margin-top:20px;max-width:46ch;font-size:clamp(16px,1.15vw,18px)}
.hero-cta{margin-top:28px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.usp{margin-top:30px;display:grid;gap:9px;border-top:1px solid var(--lijn);padding-top:20px}
.usp li{position:relative;padding-left:24px;font-size:15px;font-weight:500;color:var(--inkt)}
.usp li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--hout)}
.hero-beeld{border-radius:6px;overflow:hidden;aspect-ratio:4/3;background:var(--wit-2)}
.hero-beeld img{width:100%;height:100%;object-fit:cover}

/* secties */
.sectie{padding-block:clamp(56px,8vh,104px)}
.label{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--zacht);margin-bottom:12px;font-weight:500}
.sectie h2{font-size:clamp(26px,3.6vw,44px);max-width:18ch;font-weight:700}
.sec-note{margin-top:14px;max-width:52ch;font-size:15.5px;color:var(--zacht)}

/* samensteller */
.samensteller{background:var(--wit-2)}
.conf{margin-top:clamp(26px,4vh,44px);display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(18px,2.4vw,32px);
  background:var(--wit);border:1px solid var(--lijn);border-radius:6px;overflow:hidden}
@media (max-width:960px){.conf{grid-template-columns:1fr}}
/* de hoogte komt uit de keuzekolom, de foto vult wat er is.
   Met aspect-ratio hier liep het prijsblok uit de kaart. */
.conf-beeld{position:relative;background:var(--wit-2);min-height:clamp(260px,32vw,420px)}
.conf-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
@media (max-width:960px){.conf-beeld{position:relative;aspect-ratio:4/3;min-height:0}}
.conf-beeld img.wisselt{opacity:0}
.conf-tag{position:absolute;left:14px;bottom:14px;background:rgba(29,26,22,.82);color:#fff;font-size:12px;
  letter-spacing:.05em;padding:7px 13px;border-radius:3px}
.conf-keuzes{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:20px}
.conf-keuzes legend{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);margin-bottom:9px;font-weight:500}
.opties{display:flex;gap:7px;flex-wrap:wrap}
.opties button{background:var(--wit);border:1px solid var(--lijn);cursor:pointer;font-size:14px;color:var(--tekst);
  padding:9px 15px;border-radius:4px;transition:all .22s var(--ease)}
.opties button:hover{border-color:var(--hout);color:var(--inkt)}
.opties button.aan{background:var(--inkt);border-color:var(--inkt);color:var(--wit)}
.opties.meer button.aan{background:var(--hout);border-color:var(--hout)}
.conf-prijs{margin-top:auto;padding-top:20px;border-top:1px solid var(--lijn);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pr-label{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--zacht)}
.conf-prijs strong{display:block;font-family:var(--disp);font-size:clamp(30px,3.6vw,42px);color:var(--inkt);font-weight:700;line-height:1.05;margin-top:5px}
.pr-btw{font-size:13px;color:var(--zacht)}
.conf-specs{font-size:13.5px;color:var(--zacht);margin-top:4px}

/* werk */
.werk-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.2vw,28px);margin-top:clamp(26px,4vh,44px)}
@media (max-width:760px){.werk-raster{grid-template-columns:1fr}}
.kaart{text-decoration:none;display:block}
.beeld{display:block;overflow:hidden;aspect-ratio:16/10;border-radius:6px;background:var(--wit-2)}
.beeld img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.kaart:hover .beeld img{transform:scale(1.035)}
.k-plek{display:block;margin-top:13px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--zacht)}
.k-naam{display:block;margin-top:4px;font-family:var(--disp);font-size:20px;color:var(--inkt);font-weight:500}

/* vragen */
.vragen{background:var(--wit-2)}
.vragen-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(26px,4vw,64px);align-items:start}
@media (max-width:880px){.vragen-grid{grid-template-columns:1fr;gap:24px}}
.vragen details{border-top:1px solid var(--lijn)}
.vragen details:last-of-type{border-bottom:1px solid var(--lijn)}
.vragen summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 0;
  font-family:var(--disp);font-size:clamp(17px,1.7vw,21px);color:var(--inkt);font-weight:500}
.vragen summary::-webkit-details-marker{display:none}
.pm{margin-left:auto;position:relative;width:13px;height:13px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;background:var(--hout);transition:transform .3s var(--ease)}
.pm::before{left:0;top:6px;width:13px;height:1.5px}
.pm::after{left:6px;top:0;width:1.5px;height:13px}
details[open] .pm::after{transform:scaleY(0)}
.uitleg{padding:0 0 20px;max-width:60ch}
.uitleg p{font-size:15.5px}

/* offerte */
.formulier{margin-top:28px;display:grid;gap:16px;max-width:620px}
.formulier .rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.formulier .rij{grid-template-columns:1fr}}
.formulier label{display:grid;gap:6px}
.formulier span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--zacht)}
.formulier input,.formulier textarea{font-family:var(--body);font-size:16px;color:var(--inkt);background:var(--wit);
  border:1px solid var(--lijn);padding:12px 14px;border-radius:4px;width:100%}
.formulier input:focus,.formulier textarea:focus{outline:none;border-color:var(--hout)}
.formulier input[readonly]{background:var(--wit-2);color:var(--zacht)}
.formulier .knop{justify-self:start}
.form-demo{font-size:13.5px;color:var(--zacht);font-style:italic}

/* voet */
.voet{background:var(--inkt);color:#A79E92;padding-top:clamp(40px,5vh,64px)}
.voet .logo{color:#fff}
.voet h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#877E72;margin:0 0 11px;font-weight:500}
.voet-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px;padding-bottom:30px}
@media (max-width:760px){.voet-in{grid-template-columns:1fr;gap:22px}}
.voet-in p{font-size:14.5px;margin-top:10px}
.voet-in a:not(.logo){display:block;text-decoration:none;font-size:14.5px;padding:3px 0}
.voet-in a:not(.logo):hover{color:#fff}
.voet-bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:15px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}

/* projectpagina */
.pdetail{padding-top:clamp(30px,4vh,54px)}
.terug{display:inline-block;font-size:14px;text-decoration:none;color:var(--zacht);margin-bottom:18px}
.terug:hover{color:var(--hout)}
.pmeta{display:flex;gap:32px;flex-wrap:wrap;margin-top:24px;border-top:1px solid var(--lijn);padding-top:18px}
.pmeta dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht)}
.pmeta dd{margin:5px 0 0;font-family:var(--disp);font-size:19px;color:var(--inkt);font-weight:500}