/* Lume interieurstyling — één stylesheet voor alle pagina's. Kleuren aanpassen? Pas de variabelen hieronder aan. */
:root{--olive:#232418;--olive2:#2c2e20;--wine:#4a1119;--cream:#ece8e0;--cream2:#f2efe9;--bronze:#a98b62;--brown:#5b3f31;--ink:#3a2a26;
--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost","Helvetica Neue",Arial,sans-serif;--script:"Pinyon Script","Snell Roundhand",cursive}
*{box-sizing:border-box;margin:0}
body{font:400 1rem/1.75 var(--sans);color:var(--ink);background:var(--cream)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.wrap{width:min(1120px,100% - 3rem);margin-inline:auto}
section{padding:5rem 0}
p+p{margin-top:1em}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15}
h1{font-size:clamp(2.5rem,5.5vw,4rem)}
h2{font-size:clamp(2rem,3.8vw,2.9rem);color:var(--wine);margin-bottom:1.4rem}
h3{font-size:1.55rem;margin-bottom:.5rem}
.eyebrow{display:flex;align-items:center;gap:1rem;font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;margin-bottom:1.2rem}
.eyebrow:before{content:"";width:36px;height:1px;background:currentColor}
.btn{display:inline-block;margin-top:1.8rem;padding:.9rem 1.7rem;background:var(--wine);color:#f4ece0;border:1px solid #7a2a35;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:#661820}
.btn.gold{background:var(--bronze);border-color:var(--bronze);color:var(--olive)}
.btn.gold:hover{background:#b99c73}
.sign{font:2.6rem/1.2 var(--script);color:var(--wine);margin-top:1.6rem}
.sign small{display:block;font:.75rem var(--sans);letter-spacing:.25em;text-transform:uppercase;color:var(--bronze);margin-top:.3rem}
.dark{background:var(--olive2);color:#e6dccb}
.dark h2{color:#f3ebdc}
.light{background:var(--cream2)}
/* header */
.site-header{background:var(--olive);color:#efe6d6}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;width:min(1280px,100% - 3rem);margin-inline:auto;padding:1.4rem 0}
.bar nav{display:flex;gap:2.2rem;align-items:center;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
.bar nav.r{justify-content:flex-end}
.bar nav a{text-decoration:none;padding:.3rem 0;border-bottom:1px solid transparent}
.bar nav a:hover,.bar nav a[aria-current]{border-color:var(--bronze)}
.bar nav a.btn{margin:0;padding:.75rem 1.3rem;border:1px solid #7a2a35;color:#f4ece0}
.logo{text-decoration:none;text-align:center;font:400 2.8rem/1 var(--serif);letter-spacing:.14em}
.logo small{display:block;font:.62rem var(--sans);letter-spacing:.32em;text-transform:uppercase;margin-top:.4rem}
.nt,.burger{display:none}
/* hero: foto loopt door achter de (transparante) menubalk en vervaagt links en onderaan naar het groen */
body:has(.hero) .site-header{position:absolute;inset:0 0 auto 0;z-index:10;background:transparent}
body:has(.hero) .site-header:has(.nt:checked){background:var(--olive)}
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--olive);color:#f1e9da;padding:9rem 0 6rem;min-height:clamp(620px,90vh,820px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;z-index:-1;inset:0 0 0 auto;width:min(80%,1250px);background:var(--hero) center/cover no-repeat;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 12%,rgba(0,0,0,.45) 28%,rgba(0,0,0,.8) 48%,#000 65%);
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 12%,rgba(0,0,0,.45) 28%,rgba(0,0,0,.8) 48%,#000 65%)}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
background:linear-gradient(0deg,var(--olive) 0,rgba(35,36,24,.75) 12%,rgba(35,36,24,0) 42%),linear-gradient(180deg,rgba(35,36,24,.6) 0,rgba(35,36,24,0) 24%)}
.hero p{max-width:30rem;margin-top:1.5rem;color:#e0d5c3}
.hero .eyebrow{color:#d9cdb9}
.page-hero{background:var(--olive);color:#f1e9da;padding:4.5rem 0 4rem}
.page-hero p{max-width:36rem;margin-top:1.2rem;color:#d9cdb9}
/* blokken */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.split img{width:100%;box-shadow:18px 18px 0 -2px #2c2e20}
.split.flip img{order:2}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding:4rem 0}
.service{text-align:center;padding:0 1.6rem;border-left:1px solid #d8d0c3}
.service:first-child{border:0}
.service svg{width:44px;height:44px;fill:none;stroke:var(--bronze);stroke-width:1;margin-bottom:1.2rem}
.service h3{font:500 .78rem var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:.8rem}
.service p{font-size:.95rem;line-height:1.6}
.more{display:inline-block;margin-top:1rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#7b6a52;text-decoration:none}
.more:hover{color:var(--wine)}
.projects{display:grid;grid-template-columns:1fr 2fr;gap:4rem;align-items:center}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.thumbs img,.card img{width:100%;aspect-ratio:7/8;object-fit:cover;border:1px solid rgba(169,139,98,.4)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.5rem}
.card p{font-size:.95rem}
.card small{display:block;margin-top:.8rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.card h3{margin-top:1.2rem}
/* diensten & werkwijze */
.dienst{padding:3rem 0;border-top:1px solid #d3cabb;display:grid;grid-template-columns:1fr 2fr;gap:3rem}
.dienst:first-of-type{border:0}
.dienst h2{margin:0;font-size:2.2rem}
.dienst ul{margin:1rem 0 0 1.2rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;counter-reset:s}
.steps li{list-style:none;counter-increment:s}
.steps li:before{content:counter(s);font:2.6rem var(--serif);color:var(--bronze);display:block}
.steps p{font-size:.95rem}
/* contact */
.contact{display:grid;grid-template-columns:3fr 2fr;gap:5rem}
form{display:grid;gap:1.2rem}
label{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;display:grid;gap:.4rem}
input,select,textarea{font:1rem var(--sans);padding:.8rem 1rem;border:1px solid #bfb4a2;background:#fbf9f5;color:var(--ink);width:100%}
textarea{min-height:9rem}
form .btn{justify-self:start;margin:0}
.info p{margin-top:.2rem}
.info strong{display:block;margin-top:1.4rem;font:500 .75rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.tekst{max-width:46rem}
.tekst h2{font-size:1.7rem;margin:2.2rem 0 .6rem}
.note{background:#e4dccd;padding:1rem 1.2rem;font-size:.9rem;margin-bottom:2rem}
/* footer */
.site-footer{background:var(--brown);color:#e9dccb;padding:3.5rem 0 0}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:2.5rem;align-items:center;padding-bottom:2.5rem}
.fgrid .logo{font-size:2.2rem;text-align:left}
.fgrid .script{font:2rem var(--script)}
.fgrid ul{list-style:none;padding:0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;line-height:2.1}
.fgrid a{text-decoration:none}.fgrid a:hover{color:#fff}
.fgrid blockquote{font:italic 1.2rem/1.4 var(--serif);border-left:1px solid rgba(233,220,203,.4);padding-left:1.5rem}
.legal{border-top:1px solid rgba(233,220,203,.25);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding:1.2rem 0;font-size:.78rem}
.legal a{text-decoration:none;margin-left:1rem}
@media(max-width:900px){
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0}
.logo{order:1;font-size:2.2rem;text-align:left}
.burger{display:block;order:2;font-size:1.8rem;cursor:pointer;padding:.3rem .6rem}
.bar nav{display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.2rem 0 .4rem}
.nt:checked~nav{display:flex}
.hero{min-height:0;padding:7.5rem 0 4.5rem}
.hero::before{width:100%;opacity:.4;-webkit-mask-image:none;mask-image:none}
.split,.projects,.contact,.dienst{grid-template-columns:1fr;gap:2rem}
.split.flip img{order:0}
.services,.steps{grid-template-columns:1fr 1fr;gap:2.5rem 0}
.service:nth-child(3){border-left:0}
.cards{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr 1fr}
section{padding:3.5rem 0}
}
@media(max-width:560px){.services,.steps,.fgrid{grid-template-columns:1fr}.service{border:0;border-top:1px solid #d8d0c3;padding:1.8rem 0}.service:first-child{border:0}.thumbs{grid-template-columns:1fr}}
.steps.vals li:before{content:none}
/* diensten, projecten, galerij */
.split+.split{margin-top:5rem}
.split ul{margin:1rem 0 0 1.2rem}
.split img{aspect-ratio:4/3;object-fit:cover}
a.card{text-decoration:none;display:block}
.thumbs a{display:block}
.proj{display:grid;grid-template-columns:3fr 2fr;gap:4rem;align-items:start}
.proj ul{margin:1rem 0 0 1.2rem}
.gal-view{position:relative;aspect-ratio:4/3;background:var(--olive);overflow:hidden;cursor:pointer}
.gal-view>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.gal-view>img.on{opacity:1}
.gal-prev,.gal-next{position:absolute;top:50%;translate:0 -50%;z-index:2;width:2.8rem;height:2.8rem;border:0;background:rgba(35,36,24,.65);color:#f1e9da;font-size:1.8rem;line-height:1;cursor:pointer}
.gal-prev{left:0}.gal-next{right:0}
.gal-prev:hover,.gal-next:hover{background:var(--wine)}
.gal-thumbs{display:flex;gap:.6rem;margin-top:.6rem}
.gal-thumbs button{padding:0;border:2px solid transparent;background:none;width:76px;opacity:.6;cursor:pointer}
.gal-thumbs button.on{border-color:var(--bronze);opacity:1}
.gal-thumbs img{aspect-ratio:1;object-fit:cover;width:100%}
.review{border-left:2px solid var(--bronze);padding-left:1.5rem;margin-top:2rem;font:italic 1.5rem/1.45 var(--serif)}
.review cite{display:block;font:normal .75rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-top:.7rem}
@media(max-width:900px){.proj{grid-template-columns:1fr;gap:2rem}}
@media(prefers-reduced-motion:reduce){.gal-view>img{transition:none}}