/* Groenhof Tuinen, voorbeeldsite van Opgeleverd
   Warm redactioneel: crème, olijf, EB Garamond (1500s) + Jost. Traag en filmisch.
   Bewust een heel andere wereld dan waterlinie en buitenwerk. */

@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-400-i.woff2') format('woff2');font-weight:400;font-display:swap;font-style:italic}
@font-face{font-family:'EB Garamond';src:url('../fonts/ebgaramond-600-i.woff2') format('woff2');font-weight:600;font-display:swap;font-style:italic}
@font-face{font-family:'Jost';src:url('../fonts/jost-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Jost';src:url('../fonts/jost-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --creme:#F5F1E6;
  --creme-2:#EBE5D4;
  --olijf:#4A5439;
  --olijf-diep:#2F3626;
  --inkt:#22261B;
  --tekst:#4A4C40;
  --zacht:#87887A;
  --lijn:#DED7C4;
  --accent:#8A6A3B;
  --op-donker:#EFEADC;

  --serif:'EB Garamond',Georgia,serif;
  --sans:'Jost',Futura,'Century Gothic',sans-serif;
  --binnen:1180px;
  --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(--creme);color:var(--tekst);font-family:var(--sans);font-size:clamp(16px,1vw,17px);line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);color:var(--inkt);margin:0;font-weight:500;letter-spacing:-0.005em;line-height:1.12}
h1 em,h2 em,h3 em{font-style:italic;color:var(--olijf)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

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

[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.3s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.14s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.28s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.42s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* demobalk */
.demobar{position:relative;z-index:60;background:var(--olijf-diep);color:#D8D3C2;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:600}
.demobar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);white-space:nowrap}

/* nav */
.nav{position:sticky;top:0;z-index:50;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.nav.vast{background:rgba(245,241,230,.93);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--lijn)}
.nav-in{max-width:var(--binnen);margin:0 auto;padding:18px var(--marge);display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{text-decoration:none;display:inline-flex;gap:7px;align-items:baseline}
.logo-g{font-family:var(--serif);font-size:23px;color:var(--inkt);letter-spacing:-0.01em}
.logo-s{font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--zacht)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav-links a:not(.knop){text-decoration:none;font-size:14.5px;color:var(--tekst);transition:color .3s}
.nav-links a:not(.knop):hover{color:var(--olijf)}
@media (max-width:820px){.nav-links a:not(.knop){display:none}}

.knop{display:inline-flex;align-items:center;justify-content:center;background:var(--olijf);color:#F7F4EA;
  text-decoration:none;font-family:var(--sans);font-weight:500;font-size:14.5px;padding:13px 24px;border:0;border-radius:999px;cursor:pointer;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.knop:hover{background:var(--olijf-diep);transform:translateY(-1px)}
.knop-klein{padding:9px 18px;font-size:13.5px}
.knop-licht{background:#F7F4EA;color:var(--olijf-diep)}
.knop-licht:hover{background:#fff}

/* hero */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:-8% 0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-tint{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(20,24,15,.88) 0%,rgba(20,24,15,.66) 38%,rgba(20,24,15,.34) 68%,rgba(20,24,15,.18) 100%)}
.hero-in{position:relative;z-index:2;max-width:var(--binnen);margin:0 auto;width:100%;padding:0 var(--marge) clamp(56px,9vh,104px)}
.kicker{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,234,.82)}
.hero h1{margin-top:20px;color:#F9F6EE;font-size:clamp(38px,6.2vw,78px);max-width:16ch;line-height:1.05}
.hero h1 em{color:#CBD6B4}
.hero-sub{margin-top:22px;max-width:50ch;color:rgba(247,244,234,.88);font-size:clamp(16px,1.2vw,18.5px)}
.hero .knop{margin-top:30px}
.scroll-hint{position:absolute;left:50%;bottom:22px;width:1px;height:44px;background:linear-gradient(to bottom,transparent,rgba(247,244,234,.7));z-index:2}

/* secties */
.sectie{padding-block:clamp(64px,10vh,124px)}
.label{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--zacht);margin-bottom:14px}
.sectie h2{font-size:clamp(29px,4vw,52px);max-width:17ch}
.groot{font-family:var(--serif);font-size:clamp(23px,2.8vw,36px);line-height:1.4;color:var(--inkt)}
.kop-rij{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(30px,5vh,54px)}
.kop-note{max-width:34ch;font-size:15.5px;color:var(--zacht)}

/* seizoenen */
.seizoenen{background:var(--creme-2)}
.seizoen-blok{display:grid;grid-template-columns:1.55fr 1fr;gap:0;background:var(--creme);border:1px solid var(--lijn);overflow:hidden}
@media (max-width:900px){.seizoen-blok{grid-template-columns:1fr}}
.seizoen-beeld{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--creme-2)}
.seizoen-beeld img{width:100%;height:100%;object-fit:cover;transition:opacity .55s var(--ease),transform 8s linear}
.seizoen-beeld img.wisselt{opacity:0}
.seizoen-paneel{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column}
.seizoen-knoppen{display:flex;gap:6px;border-bottom:1px solid var(--lijn);padding-bottom:14px;margin-bottom:20px;flex-wrap:wrap}
.seizoen-knoppen button{background:none;border:0;cursor:pointer;font-size:14px;color:var(--zacht);padding:7px 13px;border-radius:999px;transition:background .3s,color .3s}
.seizoen-knoppen button:hover{color:var(--olijf)}
.seizoen-knoppen button[aria-selected="true"]{background:var(--olijf);color:#F7F4EA}
.seizoen-tekst h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:12px}
.seizoen-tekst p{font-size:15.5px}
.seizoen-taken{margin-top:20px;display:grid;gap:9px;border-top:1px solid var(--lijn);padding-top:18px}
.seizoen-taken li{position:relative;padding-left:20px;font-size:14.5px;color:var(--tekst)}
.seizoen-taken li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:1px;background:var(--accent)}

/* werk */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{background:none;border:1px solid var(--lijn);cursor:pointer;font-size:13.5px;color:var(--tekst);padding:8px 16px;border-radius:999px;transition:all .3s var(--ease)}
.filters button:hover{border-color:var(--olijf);color:var(--olijf)}
.filters button.actief{background:var(--olijf);border-color:var(--olijf);color:#F7F4EA}
.werk-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
@media (max-width:900px){.werk-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.werk-raster{grid-template-columns:1fr}}
.kaart{text-decoration:none;display:block;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.kaart.groot{grid-column:span 2}
@media (max-width:600px){.kaart.groot{grid-column:span 1}}
.kaart.weg{display:none}
.kaart-beeld{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--creme-2)}
.kaart.groot .kaart-beeld{aspect-ratio:16/9}
.kaart-beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease),filter .6s}
.kaart:hover .kaart-beeld img{transform:scale(1.045)}
.kaart-tekst{display:block;padding-top:14px}
.kaart-plek{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--zacht)}
.kaart-naam{display:block;font-family:var(--serif);font-size:19px;color:var(--inkt);margin-top:5px;line-height:1.25}
.kaart-meer{display:inline-block;margin-top:9px;font-size:14px;color:var(--olijf);border-bottom:1px solid var(--lijn);padding-bottom:2px}
.geen-resultaat{margin-top:28px;color:var(--zacht)}

/* aanpak */
.aanpak-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:880px){.aanpak-grid{grid-template-columns:1fr}}
.aanpak-note{margin-top:18px;max-width:34ch;color:var(--zacht);font-size:15.5px}
.aanpak-rechts details{border-top:1px solid var(--lijn)}
.aanpak-rechts details:last-of-type{border-bottom:1px solid var(--lijn)}
.aanpak-rechts summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:20px 0;
  font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);color:var(--inkt)}
.aanpak-rechts summary::-webkit-details-marker{display:none}
.nr{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--accent);flex:none}
.pm{margin-left:auto;position:relative;width:13px;height:13px;flex:none}
.pm::before,.pm::after{content:"";position:absolute;background:var(--olijf);transition:transform .4s var(--ease)}
.pm::before{left:0;top:6px;width:13px;height:1px}
.pm::after{left:6px;top:0;width:1px;height:13px}
details[open] .pm::after{transform:scaleY(0)}
.uitleg{padding:0 0 22px 40px;max-width:56ch}
.uitleg p{font-size:15.5px}

/* band */
.band{position:relative;min-height:min(60vh,460px);display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.band img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.band-tint{position:absolute;inset:0;background:rgba(28,32,22,.56)}
.band-tekst{position:relative;z-index:2;font-family:var(--serif);font-size:clamp(21px,3vw,38px);color:#F7F4EA;line-height:1.34;padding-inline:var(--marge);max-width:22ch}

/* contact */
.contact{background:var(--creme-2)}
.contact-note{margin-top:16px;max-width:44ch;color:var(--zacht)}
.formulier{margin-top:32px;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:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--zacht)}
.formulier input,.formulier textarea{font-family:var(--sans);font-size:16px;color:var(--inkt);background:var(--creme);
  border:1px solid var(--lijn);padding:12px 14px;border-radius:3px;width:100%}
.formulier input:focus,.formulier textarea:focus{outline:none;border-color:var(--olijf)}
.formulier .knop{justify-self:start;margin-top:4px}
.form-demo{font-size:13.5px;color:var(--zacht);font-style:italic}

/* voet */
.voet{background:var(--olijf-diep);color:#B9B9A8;padding-top:clamp(44px,6vh,68px)}
.voet h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#8E9180;margin:0 0 12px}
.voet .logo-g{color:#F0EDE1}
.voet .logo-s{color:#8E9180}
.voet-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;padding-bottom:34px}
@media (max-width:760px){.voet-in{grid-template-columns:1fr;gap:26px}}
.voet-in p{font-size:14.5px;margin-top:10px}
.voet-kol a{display:block;text-decoration:none;font-size:14.5px;padding:3px 0;color:#D5D3C6}
.voet-kol a:hover{color:#fff}
.voet-bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:16px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}

/* project-detail */
.pdetail{padding-top:clamp(40px,6vh,70px)}
.terug{display:inline-block;font-size:14px;color:var(--zacht);text-decoration:none;margin-bottom:22px}
.terug:hover{color:var(--olijf)}
.pdetail h1{font-size:clamp(30px,4.4vw,54px);max-width:16ch}
.pmeta{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px;border-top:1px solid var(--lijn);padding-top:20px}
.pmeta div{min-width:120px}
.pmeta dt{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--zacht)}
.pmeta dd{margin:5px 0 0;font-family:var(--serif);font-size:19px;color:var(--inkt)}
.vergelijk{position:relative;overflow:hidden;aspect-ratio:16/9;user-select:none;touch-action:pan-y;cursor:ew-resize;background:var(--creme-2)}
.vergelijk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;pointer-events:none}
.vergelijk:focus-visible{outline:2px solid var(--olijf);outline-offset:3px}
.vergelijk.sleept{cursor:grabbing}
.vergelijk .na{clip-path:inset(0 0 0 var(--split,50%))}
.vergelijk-greep{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:#F7F4EA;z-index:3;pointer-events:none}
.vergelijk-greep::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);
  border:2px solid #F7F4EA;border-radius:50%;background:rgba(28,32,22,.28);backdrop-filter:blur(2px)}
.vergelijk-let{position:absolute;bottom:14px;z-index:4;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#F7F4EA;background:rgba(28,32,22,.55);padding:5px 11px;border-radius:999px}
.vergelijk-let.l{left:14px}
.vergelijk-let.r{right:14px}