/* Eline Interieuradvies — stylesheet op basis van concept 2 "Galerie" en de huisstijl */
:root{
  --clay:#F5F1E9; --clay-100:#FFFFFF; --clay-200:#EFE9DD; --clay-300:#E8E0D1; --clay-400:#DED4C1; --clay-500:#B9AE97;
  --ink:#3A2D23; --ink-600:#6E5F50; --ink-500:#4A3B2F; --dark-700:#55463A;
  --olive:#857A3D; --olive-lt:#B3A45E; --on-olive:#F7F4E9; --on-olive-2:#EAE3C9;
  --on-dark:#F5F1E9; --on-dark-2:#C9BEA9; --on-dark-3:#A9977E;
  --serif:'Bodoni Moda',Didot,'Times New Roman',serif;
  --sans:Archivo,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --m:clamp(20px,5.2vw,100px);
  --gap:clamp(24px,3vw,48px);
  --sectie:clamp(64px,9vw,140px);
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--clay);color:var(--ink-500);font-family:var(--sans);font-size:clamp(16px,1.05vw,18px);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,5vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,3.8rem)}
h3{font-size:1.6rem}
p{margin:0;text-wrap:pretty;max-width:60ch}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--on-dark);padding:.6em 1em;z-index:100}
.skip:focus{left:8px}

/* Beeld: kader bepaalt de maat, foto vult het kader, focuspunt (--fx/--fy) blijft in beeld */
.im{position:relative;overflow:hidden;background:var(--clay-300)}
.cover{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.im>.cover,.im>picture>.cover{position:absolute;inset:0}
.credit{position:absolute;right:0;bottom:0;z-index:2;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--on-dark-2);background:color-mix(in oklab,var(--ink) 70%,transparent);padding:.45em .8em;max-width:100%;text-wrap:balance}
.ph{aspect-ratio:4/3;background:repeating-linear-gradient(-45deg,var(--clay-300) 0 8px,var(--clay-200) 8px 16px);display:grid;place-items:center}
.ph span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--on-olive);background:var(--olive);padding:.6em 1em;text-transform:uppercase;text-align:center}

.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.lead{font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.5}
.wrap{padding-inline:var(--m)}
section,.blok{padding-block:var(--sectie)}
.sectie{padding:0}
.sectie[id]{scroll-margin-top:64px}
#home{scroll-margin-top:0}
h2.h1{font-size:clamp(2.4rem,5vw,4.6rem)}
.kop{display:flex;flex-direction:column;gap:14px;margin-bottom:var(--gap)}
.kop .mono::after{content:"";display:inline-block;width:40px;height:2px;background:var(--olive);vertical-align:middle;margin-left:14px}
.btn{display:inline-flex;align-items:center;gap:.7em;font-weight:500;font-size:.95rem;padding:.9em 1.5em;border:1px solid currentColor;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--olive);color:var(--on-olive);border-color:var(--olive)}
.btn.fill{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.btn.fill:hover{background:var(--olive);border-color:var(--olive)}
.on-dark .btn:hover{background:var(--olive);color:var(--on-olive);border-color:var(--olive)}
.link{font-weight:500;color:var(--ink);border-bottom:2px solid var(--olive);padding-bottom:.15em}
.link:hover{color:var(--olive)}
.cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:1.6em}

/* Kop van de site */
.site-kop{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--clay) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--clay-400);color:var(--ink)}
.site-kop .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:18px var(--m)}
.wordmark{display:inline-flex;align-items:center;gap:14px}
.wordmark .n{font-family:var(--serif);font-size:1.6rem;line-height:1}
.wordmark .sep{width:1px;height:20px;background:var(--olive)}
.wordmark .s{font-size:.62rem;letter-spacing:.4em;text-transform:uppercase}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,2vw,30px);flex-wrap:wrap}
nav a{font-size:.85rem;font-weight:500;padding-bottom:2px;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--olive)}
.menu-knop{display:none;align-items:center;gap:10px;background:none;border:1px solid currentColor;color:inherit;font:inherit;font-size:.8rem;font-weight:500;padding:.5em .9em;cursor:pointer}
.menu-knop .lijnen{width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;display:block}
/* Home: kop over de foto, wordt licht bij scrollen */
.home .site-kop{position:fixed;inset:0 0 auto 0;background:transparent;backdrop-filter:none;border-bottom-color:transparent;color:var(--on-dark)}
.home .site-kop .wordmark .sep{background:var(--olive-lt)}
.home nav a:hover,.home nav a[aria-current]{border-color:var(--olive-lt)}
@supports (animation-timeline: scroll()){
  .home .site-kop{animation:kop-dicht linear both;animation-timeline:scroll();animation-range:0 60vh}
  @keyframes kop-dicht{to{background:color-mix(in oklab,var(--clay) 94%,transparent);color:var(--ink);backdrop-filter:blur(8px);border-bottom-color:var(--clay-400)}}
}
@media (max-width:900px){
  .menu-knop{display:inline-flex}
  .js nav#hoofdnav{display:none}
  .js nav#hoofdnav.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--clay);border-bottom:1px solid var(--clay-400);padding:12px var(--m) 24px;color:var(--ink)}
  nav#hoofdnav ul{flex-direction:column;gap:0}
  nav#hoofdnav li a{display:block;padding:12px 0;border-bottom:1px solid var(--clay-400);font-size:1rem}
  nav#hoofdnav li a[aria-current]{border-bottom-color:var(--olive)}
  .home .site-kop{position:sticky;background:color-mix(in oklab,var(--clay) 94%,transparent);color:var(--ink);border-bottom-color:var(--clay-400);animation:none}
  .home .site-kop .wordmark .sep{background:var(--olive)}
  html:not(.js) nav#hoofdnav{display:block;width:100%}
  html:not(.js) .site-kop .bar{flex-wrap:wrap}
  html:not(.js) .menu-knop{display:none}
}
@media (prefers-reduced-motion:reduce){.home .site-kop{animation:none;position:sticky;background:var(--clay);color:var(--ink);border-bottom-color:var(--clay-400)}}

/* Home: schermvullend beeld */
.hero{position:relative;height:100svh;min-height:560px;max-height:1000px;padding:0;color:var(--on-dark);display:grid;align-items:end}
.hero .im{position:absolute;inset:0;background:var(--ink)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(40,30,22,.72) 0%,rgba(40,30,22,.15) 45%,rgba(40,30,22,.05) 100%);pointer-events:none}
.hero .t{position:relative;z-index:1;padding:0 var(--m) clamp(40px,6vw,80px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--gap)}
.hero .stack .n{font-family:var(--serif);font-size:clamp(4rem,12vw,12rem);line-height:.86;letter-spacing:-.02em;display:block;color:var(--on-dark)}
.hero .stack .s{display:block;font-size:clamp(.7rem,1.3vw,1.2rem);letter-spacing:.4em;text-transform:uppercase;margin-top:.9em;padding-left:.15em}
.hero .r{max-width:26ch;text-align:right;font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.8rem);line-height:1.25;color:var(--on-dark)}
.hero .r .mono{color:var(--olive-lt);display:block;margin-bottom:.8em}
.hero .lijn{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--olive);z-index:1}
.hero .credit{bottom:4px}
@media (max-width:820px){.hero{height:80svh}.hero .t{grid-template-columns:1fr}.hero .r{text-align:left;max-width:none}}

/* Home: intro */
.intro{text-align:center}
.intro .in{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:1.4em;align-items:center}
.intro h1 em{font-style:italic;color:var(--olive)}
.intro .quote{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.3;color:var(--ink);max-width:28ch}

/* Galerij: zijwaarts scrollen */
.gal{padding-block:0 var(--sectie)}
.gal .head{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline;padding-inline:var(--m);margin-bottom:24px;border-top:2px solid var(--olive);padding-top:24px}
.gal .head h2{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.gal .head .mono{color:var(--ink-600)}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--m);scrollbar-width:none;scroll-padding-inline:var(--m)}
.strip::-webkit-scrollbar{display:none}
.strip figure{margin:0;flex:0 0 auto;scroll-snap-align:start;width:min(72vw,520px)}
.strip figure.w{width:min(88vw,780px)}
.strip .im{height:min(66vh,620px)}
.strip figcaption{display:flex;justify-content:space-between;padding-top:12px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-600)}
.strip figcaption span:last-child{color:var(--olive)}
.gal .hint{padding-inline:var(--m);margin-top:20px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--clay-500);text-transform:uppercase}

/* Twee kolommen: tekst naast beeld */
.twee .g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.twee .im{aspect-ratio:4/5}
.twee .t{display:flex;flex-direction:column;gap:1.1em}
.twee .t .btn,.twee .t .link{align-self:flex-start}
.twee.flip .g>.im{order:2}
.twee figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--olive);padding-top:10px;text-transform:uppercase}
.twee figure{margin:0}
@media (max-width:820px){.twee .g{grid-template-columns:1fr}.twee.flip .g>.im{order:0}.twee .im{aspect-ratio:4/3}}

/* Statement: donker */
.state{background:var(--ink);color:var(--on-dark);padding-block:clamp(90px,14vw,200px)}
.state .in{text-align:center}
.state .mono{color:var(--olive-lt)}
.state blockquote{margin:.5em auto 0;max-width:24ch;font-family:var(--serif);font-size:clamp(2.2rem,6vw,6.4rem);line-height:1.08;letter-spacing:-.015em;color:var(--on-dark)}
.state blockquote em{font-style:italic;color:var(--olive-lt)}
.state .lines{width:60px;height:2px;background:var(--olive);margin:2em auto 0}

/* Drie vaste vormen (Interieuradvies) */
.vormen{background:var(--clay-200);border-top:1px solid var(--clay-400)}
.drie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.drie li{border-top:1px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;gap:14px;min-height:300px}
.drie .no{font-family:var(--serif);font-size:clamp(3rem,5vw,4.5rem);line-height:1;color:var(--olive)}
.drie h3{font-size:1.6rem;line-height:1.1}
.drie p{font-size:.98rem;color:var(--ink-600)}
.drie .prijs{margin-top:auto;padding-top:14px;border-top:1px dashed var(--clay-500);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--ink);text-transform:uppercase;display:flex;flex-direction:column;gap:4px}
.drie .prijs small{font-family:var(--sans);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--ink-600)}
.vormen .na{margin-top:var(--gap)}
@media (max-width:820px){.drie{grid-template-columns:1fr}.drie li{min-height:0}}
.state.olijf{background:var(--olive);color:var(--on-olive)}
.state.olijf .mono{color:var(--on-olive-2)}
.state.olijf blockquote{color:var(--on-olive);max-width:20ch}
.state.olijf blockquote em{color:var(--on-olive);font-style:italic}
.state.olijf .lines{background:var(--on-olive-2)}

/* Diensten: beeld + lijst */
.diensten .g{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:start}
.diensten .pic{position:sticky;top:90px;margin:0}
.diensten .pic .im{aspect-ratio:3/4}
.diensten .pic figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--olive);padding-top:10px;text-transform:uppercase}
.diensten ol{list-style:none;margin:0;padding:0;counter-reset:d}
.diensten li{display:grid;grid-template-columns:auto 1fr auto;gap:8px 24px;padding:28px 0;border-top:1px solid var(--ink);counter-increment:d}
.diensten li:last-child{border-bottom:1px solid var(--ink)}
.diensten li::before{content:"0" counter(d);grid-row:1/3;font-family:var(--mono);font-size:.72rem;color:var(--olive);padding-top:.6em}
.diensten h3{font-size:1.7rem;line-height:1.1;grid-column:2}
.diensten p{font-size:.95rem;color:var(--ink-600);grid-column:2}
.diensten .prijs{grid-column:3;grid-row:1/3;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--olive);white-space:nowrap;padding-top:.5em}
.diensten .btn{margin-top:2em}
.diensten .kop{margin-bottom:var(--gap)}
@media (max-width:820px){.diensten .g{grid-template-columns:1fr}.diensten .pic{position:static}.diensten .pic .im{aspect-ratio:4/3}.diensten li{grid-template-columns:auto 1fr}.diensten .prijs{grid-column:2;grid-row:auto;padding-top:0}}

/* Subpagina: band met kop, optioneel beeld tot de rand */
.band{padding-top:clamp(48px,7vw,110px);padding-bottom:clamp(40px,5vw,80px)}
.band .wrap{display:flex;flex-direction:column;gap:1em;max-width:900px}
.band .mono a:hover{color:var(--ink)}
.band-beeld{padding:0}
.band-beeld .g{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(480px,70vh,760px)}
.band-beeld .t{padding:clamp(48px,7vw,110px) var(--m);display:flex;flex-direction:column;justify-content:center;gap:1em}
.band-beeld .im{min-height:480px}
.band-beeld.olijf .t{background:var(--olive);color:var(--on-olive-2)}
.band-beeld.olijf h1{color:var(--on-olive)}
.band-beeld.olijf .mono{color:var(--on-olive-2)}
.band-beeld.olijf .btn{color:var(--on-olive);align-self:flex-start}
.band-beeld.olijf .btn:hover{background:var(--on-olive);color:var(--olive);border-color:var(--on-olive)}
.band-beeld.foto-43 .g{min-height:0;align-items:stretch}
.band-beeld.foto-43 .im{min-height:0;aspect-ratio:auto}
@media (max-width:820px){.band-beeld .g{grid-template-columns:1fr;min-height:0}.band-beeld .im,.band-beeld.foto-43 .im{min-height:0;aspect-ratio:4/3;order:-1}}

/* Lopende tekst */
.prose{padding-block:0 var(--sectie);max-width:calc(62ch + 2 * var(--m));display:flex;flex-direction:column;gap:1.2em}
.prose h2{font-size:clamp(1.7rem,2.8vw,2.6rem);margin-top:1em}
.prose h2:first-child{margin-top:0}
.prose p+p{margin-top:0}
.prose ul{margin:0;padding-left:1.2em}
.prose a{border-bottom:2px solid var(--olive)}
.prose .btn{align-self:flex-start;margin-top:.5em}

/* Blokken met kop + tekst naast beeld, afwisselend (Mijn stijl) */
.blokken{display:flex;flex-direction:column;gap:var(--sectie)}
.blokken .twee{padding:0}

/* Werkwijze: drie stappen */
.werk{background:var(--clay-200);border-top:1px solid var(--clay-400)}
.werk .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.werk .step{display:flex;flex-direction:column;gap:16px}
.werk .step .im{aspect-ratio:4/5}
.werk .step .no{position:absolute;left:0;top:0;z-index:1;width:clamp(56px,6vw,84px);aspect-ratio:1;display:grid;place-items:center;background:var(--olive);color:var(--on-olive);font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.8rem);line-height:1}
.werk p{color:var(--ink-600);font-size:.98rem}
.werk .na{margin-top:var(--gap);display:flex;gap:var(--gap);align-items:center;flex-wrap:wrap}
@media (max-width:820px){.werk .steps{grid-template-columns:1fr}.werk .step .im{aspect-ratio:3/2}}

/* Projecten: tegels */
.tegels{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.tegels figure{margin:0}
.tegels .im{aspect-ratio:4/3}
.tegels .im .cover{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.tegels a:hover .im .cover{transform:scale(1.03)}
.tegels figcaption{padding-top:14px;display:grid;grid-template-columns:1fr auto;gap:12px;border-top:1px solid var(--clay-400);margin-top:14px}
.tegels figcaption .serif{font-size:1.5rem}
.tegels figcaption p{font-size:.95rem;color:var(--ink-600);grid-column:1}
@media (max-width:820px){.tegels{grid-template-columns:1fr}}
.projectfotos{padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.projectfotos figure{margin:0}
.projectfotos .liggend{grid-column:1/-1}
.projectfotos .liggend .im{aspect-ratio:16/10}
.projectfotos .staand .im{aspect-ratio:3/4}
.projectfotos figcaption{padding-top:10px;color:var(--ink-600)}
@media (max-width:820px){.projectfotos{grid-template-columns:1fr}}
.volgend{padding-top:0}

/* Lijsten (inspiratie) */
.lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.lijst li{border-top:2px solid var(--olive);padding-top:16px}
.lijst li a,.lijst li>span{display:flex;flex-direction:column;gap:8px}
.lijst .serif{font-size:1.5rem;line-height:1.15}
.lijst a:hover .serif{color:var(--olive)}
.lijst .mono.grijs{color:var(--ink-600)}
@media (max-width:820px){.lijst{grid-template-columns:1fr}}

/* Tabel (prijzen) */
.tabel{width:100%;border-collapse:collapse;margin-top:var(--gap)}
.tabel th,.tabel td{text-align:left;padding:18px 0;border-top:1px solid var(--ink);vertical-align:top}
.tabel tr:last-child td{border-bottom:1px solid var(--ink)}
.tabel th{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);font-weight:400;border-top:0;padding-top:0}
.tabel td:first-child{font-family:var(--serif);font-size:1.35rem;color:var(--ink)}
.tabel td .sub{display:block;font-family:var(--sans);font-size:.9rem;color:var(--ink-600);margin-top:4px}
.tabel td:last-child{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--ink);white-space:nowrap;text-align:right}
.tabel .noot,.prijzen .noot{font-size:.9rem;color:var(--ink-600);margin-top:16px}
.prijzen{padding-top:0}

/* Pers */
.pers{background:var(--clay-200);border-top:1px solid var(--clay-400)}
.pers ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pers li{border-top:1px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.pers li .serif{font-size:1.5rem}
.pers li a{border-bottom:2px solid var(--olive)}
@media (max-width:820px){.pers ul{grid-template-columns:1fr}}

/* Contact (in het donkere koffie-blok) */
.contact .g{align-items:start}
.contact .gegevens{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;border-top:1px solid var(--dark-700);padding-top:20px;margin-top:var(--gap);color:var(--on-dark)}
.contact .gegevens dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);padding-top:.3em}
.contact .gegevens dd{margin:0}
.contact .gegevens dt{color:var(--olive-lt)}
.contact .gegevens a{border-bottom:2px solid var(--olive)}

/* Koffie: donker afsluitblok */
.koffie{background:var(--ink);color:var(--on-dark-2)}
.koffie .g{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.koffie h2{font-size:clamp(4rem,11vw,11rem);line-height:.86;letter-spacing:-.02em;color:var(--on-dark);margin-top:.2em}
.koffie .mono{color:var(--olive-lt)}
.koffie .cta{color:var(--on-dark)}
.koffie .lead{color:var(--on-dark-2)}
@media (max-width:820px){.koffie .g{grid-template-columns:1fr}}

/* Voet */
.site-voet{border-top:2px solid var(--olive);padding-block:36px;font-size:.85rem;color:var(--ink-600)}
.site-voet .rij{display:flex;justify-content:space-between;gap:var(--gap);flex-wrap:wrap;align-items:center}
.site-voet .rij.onder{margin-top:24px;padding-top:20px;border-top:1px solid var(--clay-400);justify-content:flex-start}
.site-voet .mono{color:var(--ink-600)}
.site-voet .mono a:hover{color:var(--olive)}
.voet-nav{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.voet-nav a{font-weight:500;color:var(--ink)}
.voet-nav a:hover{color:var(--olive)}

/* Zacht binnenschuiven bij scrollen (alleen waar de browser het kan) */
@supports (animation-timeline: view()){
  .reveal{animation:up linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  @keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}}