@font-face{
  font-family:"Oswald";
  src:url("fonts/oswald-300.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Oswald";
  src:url("fonts/oswald-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
:root{
  --wit:#ffffff;
  --warmwit:#fbf7ec;
  --zand:#e9e1d2;
  --taupe:#9d928b;
  --taupe-diep:#766a66;
  --donker:#332e2c;
  --merk:#6b605e;
  --hout:#6b605e;
  --lijn:rgba(38,36,31,.14);
  --serif:"Oswald","Arial Narrow","Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"Oswald","Arial Narrow","Segoe UI",Helvetica,Arial,sans-serif;
  --maat:clamp(1.25rem, 4vw, 4rem);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
}

body{
  font-family:var(--sans);
  font-weight:300;
  letter-spacing:.015em;
  color:var(--donker);
  background:var(--warmwit);
  line-height:1.75;
  font-size:1.32rem;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;}

a{color:inherit;}

::selection{background:var(--zand);}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.03em;text-transform:uppercase;}
.quote{font-family:var(--serif);font-weight:300;}

/* ---------- navigatie ---------- */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.4rem var(--maat);
  transition:background .45s ease, box-shadow .45s ease, padding .45s ease;
}
.nav.vast{
  background:rgba(247,244,238,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--lijn);
  padding-top:.9rem;
  padding-bottom:.9rem;
}
.nav .merk{
  display:flex;
  align-items:center;
  gap:.8rem;
  font-family:var(--serif);
  font-size:1.3rem;
  letter-spacing:.06em;
  text-decoration:none;
  color:var(--wit);
  transition:color .45s ease;
}
.nav .merk img{
  height:68px;
  width:auto;
  border-radius:2px;
  display:block;
  transition:height .45s ease;
}
.nav.vast .merk img{height:52px;}
.nav.vast .merk{color:var(--donker);}
.nav ul{
  display:flex;
  gap:2.2rem;
  list-style:none;
}
.nav ul a{
  text-decoration:none;
  font-weight:400;
  text-transform:uppercase;
  font-size:.92rem;
  letter-spacing:.05em;
  color:rgba(255,255,255,.85);
  transition:color .45s ease;
}
.nav.vast ul a{color:var(--taupe-diep);}
.nav ul a:hover{color:var(--hout);}
.nav ul a:focus-visible{outline:2px solid var(--hout);outline-offset:4px;}
.menu-knop{
  display:none;
  background:none;
  border:none;
  padding:.6rem;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
}
.menu-knop span{
  display:block;
  width:26px;
  height:2px;
  background:var(--wit);
  transition:background .45s ease, transform .3s ease, opacity .3s ease;
}
.nav.vast .menu-knop span,
.nav.open .menu-knop span{background:var(--donker);}
.nav.open .menu-knop span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.open .menu-knop span:nth-child(2){opacity:0;}
.nav.open .menu-knop span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:720px){
  .nav ul{display:none;}
  .menu-knop{display:flex;}
  .nav.open{
    background:var(--warmwit);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 1px 0 var(--lijn);
  }
  .nav.open .merk img{height:52px;}
  .nav.open ul{
    display:flex;
    flex-direction:column;
    gap:0;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--warmwit);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:.5rem var(--maat) 1.4rem;
    box-shadow:0 12px 24px rgba(38,36,31,.12);
  }
  .nav.open ul a{
    display:block;
    padding:.9rem 0;
    color:var(--donker);
    font-size:1.05rem;
    border-bottom:1px solid var(--lijn);
  }
  .nav.open ul li:last-child a{border-bottom:none;}
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  background:
    linear-gradient(to top, rgba(24,22,18,.66) 0%, rgba(24,22,18,.18) 45%, rgba(24,22,18,.22) 100%),
    var(--taupe) url("images/project-1.jpg") center 62%/cover no-repeat;
  color:var(--wit);
}
.hero-inhoud{
  width:100%;
  padding:0 var(--maat) clamp(3.5rem, 8vh, 6.5rem);
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:3rem;
  align-items:end;
}
.hero h1{
  font-size:clamp(2.4rem, 5.4vw, 4.4rem);
  line-height:1.12;
  max-width:16ch;
  text-wrap:balance;
}
.hero p.sub{
  margin-top:1.4rem;
  max-width:44ch;
  font-size:1.35rem;
  color:rgba(255,255,255,.88);
}
.hero-knoppen{
  margin-top:2.2rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.knop{
  display:inline-block;
  font-weight:500;
  text-transform:uppercase;
  text-decoration:none;
  font-size:1.05rem;
  letter-spacing:.05em;
  padding:.95rem 1.9rem;
  border:1px solid transparent;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.knop:focus-visible{outline:2px solid var(--hout);outline-offset:3px;}
.knop-licht{
  background:var(--wit);
  color:var(--donker);
}
.knop-licht:hover{background:var(--zand);}
.knop-omlijnd{
  border-color:rgba(255,255,255,.7);
  color:var(--wit);
}
.knop-omlijnd:hover{background:rgba(255,255,255,.14);}
.hero .quote{
  justify-self:end;
  max-width:26ch;
  font-size:clamp(1.3rem, 2vw, 1.65rem);
  font-style:italic;
  line-height:1.5;
  color:rgba(255,255,255,.94);
  border-left:1px solid rgba(255,255,255,.45);
  padding-left:1.4rem;
}
.hero .quote span{
  display:block;
  margin-top:.9rem;
  font-family:var(--sans);
  font-style:normal;
  font-size:.95rem;
  letter-spacing:.08em;
  color:rgba(255,255,255,.72);
}
@media (max-width:860px){
  .hero-inhoud{grid-template-columns:1fr;gap:2.4rem;}
  .hero .quote{justify-self:start;border-left-color:rgba(255,255,255,.4);}
}

/* ---------- leveranciers ---------- */

.leveranciers{
  background:var(--wit);
  padding:2.2rem var(--maat) 2.4rem;
  text-align:center;
  border-bottom:1px solid var(--lijn);
}
.leveranciers h2{
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--taupe-diep);
  margin-bottom:1.6rem;
}
.leveranciers-rij{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:1.2rem 3rem;
  max-width:1280px;
  margin:0 auto;
}
.leveranciers-rij img{
  height:clamp(30px, 3.4vw, 44px);
  width:auto;
  filter:grayscale(1);
  opacity:.65;
  transition:filter .35s ease, opacity .35s ease;
}
.leveranciers-rij img:hover{
  filter:none;
  opacity:1;
}
@media (max-width:720px){
  .leveranciers-rij{gap:1rem 1.8rem;}
  .leveranciers-rij img{height:28px;}
}

/* ---------- algemene sectie-opmaak ---------- */

section{padding:clamp(4.5rem, 10vh, 8rem) var(--maat);}
.smal{max-width:1280px;margin:0 auto;}

.sectiekop{
  font-size:clamp(2rem, 3.4vw, 2.9rem);
  line-height:1.2;
  max-width:24ch;
  text-wrap:balance;
}

/* zachte onthulling bij scrollen */
.onthul{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s ease, transform .9s ease;
}
.onthul.zichtbaar{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .onthul{opacity:1;transform:none;}
}

/* ---------- visuele intro ---------- */

.intro{background:var(--warmwit);}
.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1rem, 2.5vw, 2.5rem);
  align-items:end;
}
.intro-foto{
  background:var(--zand) center/cover no-repeat;
  aspect-ratio:4/5;
}
.intro-foto.f1{background-image:url("images/project-2.jpg");}
.intro-foto.f2{background-image:url("images/project-3.jpg");aspect-ratio:4/4.4;}
.intro-tekst{
  grid-column:1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:2rem;
  margin-bottom:1.5rem;
}
.intro-tekst p{
  max-width:38ch;
  color:var(--taupe-diep);
  font-size:1.4rem;
}
@media (max-width:720px){
  .intro-grid{grid-template-columns:1fr;}
  .intro-tekst{flex-direction:column;align-items:flex-start;gap:1rem;}
  .intro-foto.f2{aspect-ratio:4/5;}
}

/* ---------- uitgelicht project: van begin tot eind ---------- */

.uitgelicht{
  padding-left:0;
  padding-right:0;
  background:var(--wit);
}
.uitgelicht-kop{
  padding:0 var(--maat);
  max-width:1280px;
  margin:0 auto clamp(2.5rem,5vh,4rem);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:2rem;
  flex-wrap:wrap;
}
.uitgelicht-kop p{max-width:44ch;color:var(--taupe-diep);font-size:1.35rem;}
.fasen{
  padding:0 var(--maat);
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(1.2rem, 2.2vw, 2.2rem);
}
.fase{margin:0;}
.fase .fase-foto{
  background-color:var(--zand);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
.fase-1,.fase-4,.fase-5,.fase-6,.fase-7{grid-column:span 2;}
.fase-2,.fase-3{grid-column:span 4;}
.fase-8{grid-column:span 6;}
.fase-1 .fase-foto,.fase-4 .fase-foto,.fase-5 .fase-foto,.fase-6 .fase-foto,.fase-7 .fase-foto{aspect-ratio:4/5;}
.fase-2 .fase-foto,.fase-3 .fase-foto{aspect-ratio:21/10;}
.fase-8 .fase-foto{aspect-ratio:21/9;}
.fase-1 .fase-foto{background-image:url("images/fase-1.jpg");background-position:center 55%;}
.fase-2 .fase-foto{background-image:url("images/fase-5.jpg");background-position:center 55%;}
.fase-3 .fase-foto{background-image:url("images/fase-3.jpg");background-position:center 50%;}
.fase-4 .fase-foto{background-image:url("images/fase-4.jpg");background-position:center 60%;}
.fase-5 .fase-foto{background-image:url("images/fase-6.jpg");background-position:center 60%;}
.fase-6 .fase-foto{background-image:url("images/fase-7.jpg");background-position:center 55%;}
.fase-7 .fase-foto{background-image:url("images/fase-8.jpg");background-position:center 65%;}
.fase-8 .fase-foto{background-image:url("images/fase-9.jpg");background-position:center 60%;}
.fase figcaption{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin-top:.9rem;
  font-size:1.3rem;
  letter-spacing:.04em;
  color:var(--taupe-diep);
}
.fase figcaption .nr{
  font-family:var(--serif);
  font-size:1.45rem;
  color:var(--merk);
}
/* verbindingslijn van de fasen naar het resultaat */
.verbinding{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:clamp(2rem,4vh,3rem) 0 0;
}
.verbinding .lijn{
  width:1px;
  height:clamp(46px, 7vh, 70px);
  background:var(--merk);
}

/* het resultaat als grote finale op de foto zelf */
.resultaat-foto{
  position:relative;
  margin-top:clamp(2rem,4vh,3rem);
  background:var(--taupe) url("images/project-1.jpg") center 46%/cover no-repeat;
  height:clamp(500px, 88vh, 820px);
}
.resultaat-foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(31,27,25,.72) 0%, rgba(31,27,25,.25) 38%, rgba(31,27,25,0) 60%);
}
.resultaat-inhoud{
  position:absolute;
  inset:auto 0 0 0;
  z-index:1;
  padding:0 var(--maat) clamp(2.6rem, 6vh, 4.2rem);
  color:var(--wit);
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:2rem;
  align-items:end;
}
.resultaat-inhoud .stap{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  font-size:1.3rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.88);
  margin-bottom:.9rem;
}
.resultaat-inhoud .stap .nr{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.05rem;
  color:var(--zand);
}
.resultaat-inhoud h2{
  font-size:clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.1;
  color:var(--wit);
}
.resultaat-inhoud p{
  max-width:48ch;
  font-size:1.35rem;
  color:rgba(255,255,255,.92);
  margin-bottom:1.4rem;
}
.resultaat-inhoud .stil-link{
  color:var(--wit);
  border-color:rgba(255,255,255,.7);
}
.resultaat-inhoud .stil-link:hover{color:var(--zand);border-color:var(--zand);}
@media (max-width:860px){
  .resultaat-inhoud{grid-template-columns:1fr;gap:1.2rem;}
}
@media (max-width:860px){
  .fasen{grid-template-columns:1fr 1fr;}
  .fase-1,.fase-2,.fase-3,.fase-4,.fase-5,.fase-6,.fase-7,.fase-8{grid-column:span 2;}
  .fase-2 .fase-foto,.fase-3 .fase-foto,.fase-8 .fase-foto{aspect-ratio:16/9;}
}
.stil-link{
  text-decoration:none;
  font-size:1.12rem;
  letter-spacing:.05em;
  border-bottom:1px solid var(--donker);
  padding-bottom:.2rem;
  transition:color .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.stil-link:hover{color:var(--hout);border-color:var(--hout);}
.stil-link:focus-visible{outline:2px solid var(--hout);outline-offset:4px;}
@media (max-width:860px){
  .uitgelicht-onder{grid-template-columns:1fr;gap:1rem;}
}

/* ---------- impressie eerdere projecten ---------- */

.impressie{
  background:var(--wit);
  padding-top:clamp(3rem, 6vh, 4.5rem);
  padding-bottom:clamp(3rem, 6vh, 4.5rem);
  padding-left:0;
  padding-right:0;
}
.impressie-kop{
  padding:0 var(--maat);
  max-width:1280px;
  margin:0 auto 2rem;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:2rem;
  flex-wrap:wrap;
}
.impressie-kop p{max-width:44ch;color:var(--taupe-diep);font-size:1.35rem;}
.slider{
  overflow:hidden;
  position:relative;
}
.slider-track{
  display:flex;
  width:max-content;
  animation:schuif 70s linear infinite;
}
.slider-track img{
  height:clamp(190px, 30vh, 280px);
  width:auto;
  display:block;
  margin-right:clamp(.8rem, 1.5vw, 1.4rem);
}
.slider:hover .slider-track{animation-play-state:paused;}
@keyframes schuif{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .slider{overflow-x:auto;}
}

/* ---------- de man achter ---------- */

.roderique{background:var(--warmwit);}
.roderique-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2.5rem, 5vw, 5.5rem);
  align-items:center;
}
.roderique-foto{
  background:var(--taupe) url("images/roderique.jpg") center 20%/cover no-repeat;
  aspect-ratio:4/5;
}
.roderique-tekst h2{
  font-size:clamp(2rem, 3.2vw, 2.8rem);
  margin-bottom:1.6rem;
  text-wrap:balance;
}
.roderique-tekst p{
  color:var(--taupe-diep);
  max-width:52ch;
  margin-bottom:1.1rem;
}
.roderique-tekst .quote{
  font-style:italic;
  font-size:1.4rem;
  color:var(--donker);
  margin:1.8rem 0 1.4rem;
  padding-left:1.3rem;
  border-left:2px solid var(--hout);
  max-width:34ch;
}
.handtekening{
  font-family:var(--serif);
  font-style:italic;
  text-transform:none;
  font-weight:400;
  font-size:1.3rem;
  color:var(--donker);
}
@media (max-width:860px){
  .roderique-grid{grid-template-columns:1fr;}
  .roderique-foto{aspect-ratio:4/4.4;}
}

/* ---------- kernwaarden ---------- */

.waarden{background:var(--merk);color:var(--warmwit);}
.waarden .sectiekop{color:var(--warmwit);margin-bottom:3.5rem;}
.waarden-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.waarde{
  padding:2.2rem 2rem 2.4rem 0;
  border-top:1px solid rgba(251,247,236,.28);
  margin-right:2.5rem;
}
.waarde:last-child{margin-right:0;}
.waarde .icoon{
  display:block;
  width:34px;
  height:34px;
  margin-bottom:1.1rem;
  color:var(--zand);
}
.waarde .icoon svg{width:100%;height:100%;display:block;}
.waarde h3{
  font-size:1.5rem;
  margin-bottom:.8rem;
  color:var(--warmwit);
}
.waarde p{
  font-size:1.3rem;
  color:rgba(251,247,236,.8);
  max-width:26ch;
}
@media (max-width:960px){
  .waarden-grid{grid-template-columns:1fr 1fr;}
  .waarde{margin-right:2rem;}
}
@media (max-width:600px){
  .waarden-grid{grid-template-columns:1fr;}
  .waarde{margin-right:0;}
}

/* ---------- contact ---------- */

.contact{
  background:var(--zand);
  text-align:left;
}
.contact-inhoud{
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2.5rem, 5vw, 5rem);
  align-items:center;
}
.contact h2{
  font-size:clamp(2.2rem, 3.8vw, 3.3rem);
  line-height:1.15;
  max-width:18ch;
  text-wrap:balance;
  margin-bottom:1.6rem;
}
.contact p{
  color:var(--taupe-diep);
  max-width:46ch;
  margin-bottom:1.2rem;
}
.contact .handtekening{margin-top:1.6rem;display:block;}
.contact-kaart{
  background:var(--warmwit);
  padding:clamp(2rem, 3vw, 3rem);
}
.contact-foto{
  background:var(--taupe) url("images/roderique.jpg") center 28%/cover no-repeat;
  aspect-ratio:16/9;
  margin:calc(-1 * clamp(2rem, 3vw, 3rem)) calc(-1 * clamp(2rem, 3vw, 3rem)) 1.6rem;
}
.contact-kaart h3{
  font-size:1.5rem;
  margin-bottom:1.4rem;
}
.contact-regel{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding:.9rem 0;
  border-top:1px solid var(--lijn);
  font-size:1.25rem;
}
.contact-regel span:first-child{color:var(--taupe-diep);}
.contact-regel a{text-decoration:none;border-bottom:1px solid var(--lijn);transition:border-color .3s ease,color .3s ease;}
.contact-regel a:hover{color:var(--hout);border-color:var(--hout);}
.contact-kaart .knop{
  margin-top:1.8rem;
  background:var(--merk);
  color:var(--warmwit);
  width:100%;
  text-align:center;
}
.contact-kaart .knop:hover{background:var(--donker);}
@media (max-width:860px){
  .contact-inhoud{grid-template-columns:1fr;}
}

/* ---------- footer ---------- */

footer{
  background:var(--donker);
  color:rgba(247,244,238,.6);
  padding:2.2rem var(--maat);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  font-size:1.05rem;
  letter-spacing:.03em;
}
footer .merk{
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--warmwit);
}