/* =========================================================
   BINSIDE - stijl
   Opgebouwd in blokken zodat je makkelijk terugvindt wat waar staat.
   ========================================================= */

/* ---------- 1. Kleuren & basisinstellingen ---------- */
:root{
  --cream:      #f4efe8;  /* romige achtergrond      */
  --espresso:   #2b2420;  /* diep bruin (tekst/donker)*/
  --taupe:      #8a7b6b;  /* zacht bruin accent      */
  --sand:       #c9b79c;  /* zand accent             */
  --light:      #f7f2ea;  /* tekst op donkere vlakken*/

  --font-serif: "Fraunces", Georgia, serif;   /* sierlijke koppen */
  --font-sans:  "Jost", Arial, sans-serif;     /* strakke tekst    */

  --maxw: 1400px;          /* maximale breedte van de inhoud */
}

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

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-sans);
  color:var(--espresso);
  background:var(--cream);
  font-weight:calc(300 + var(--tekst-dikte, 0));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- 2. Menubalk bovenaan ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:26px 0;
  color:var(--light);
  transition:background .4s ease, padding .4s ease, color .4s ease;
}
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:20px;
}
.logo{
  position:relative;
  display:inline-block;
  line-height:0;
}
.logo-img{
  display:block;
  height:22px;
  width:auto;
  transition:opacity .5s ease;
}
/* De bruine versie ligt precies over de witte; we wisselen met opacity */
.logo-bruin{ position:absolute; top:0; left:0; opacity:0; }
/* Zodra de balk romig wordt (of op een subpagina): bruine logo tonen */
.site-header.scrolled .logo-wit,
.subpage .logo-wit{ opacity:0; }
.site-header.scrolled .logo-bruin,
.subpage .logo-bruin{ opacity:1; }
.nav-desktop{ display:flex; gap:38px; }
.nav-desktop a{
  font-size:calc(13px * var(--tekst-schaal, 1));
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:calc(400 + var(--tekst-dikte, 0));
  position:relative;
  padding-bottom:3px;
}
/* Fijn lijntje dat onder een menu-item verschijnt bij hover */
.nav-desktop a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background:currentColor;
  transition:width .5s cubic-bezier(.16,1,.3,1);
}
.nav-desktop a:hover::after{ width:100%; }

.menu-toggle{
  display:none;              /* alleen zichtbaar op telefoon/tablet */
  background:none; border:none; cursor:pointer;
  color:inherit;
  font-family:var(--font-sans);
  font-size:calc(13px * var(--tekst-schaal, 1)); letter-spacing:.14em; text-transform:uppercase;
}

/* Wanneer je voorbij de hero scrollt, krijgt de balk een romige achtergrond.
   Deze klasse zet JavaScript er straks op. */
.site-header.scrolled{
  background:var(--cream);
  color:var(--espresso);
  padding:16px 0;
  box-shadow:0 1px 0 rgba(43,36,32,.08);
}
.site-header.scrolled .header-inner{ border-bottom-color:transparent; padding-bottom:0; }

/* ---------- 3. Mobiel uitklapmenu ---------- */
.mobile-menu{
  position:fixed; inset:0;
  z-index:99;
  background:var(--espresso);
  color:var(--light);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:28px; text-align:center; }
.mobile-menu a{
  font-family:var(--font-serif);
  font-size:calc(32px * var(--kop-schaal, 1));
}

/* ---------- 4. Hero (eerste scherm) ---------- */
.hero{
  position:sticky;           /* blijft staan terwijl de volgende sectie eroverheen schuift */
  top:0;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;      /* inhoud onderaan uitlijnen */
  color:var(--light);
}
.hero-bg{ position:absolute; inset:0; z-index:1; }
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover;          /* foto vult altijd het hele vlak */
  object-position:center;
}
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  /* Donkerder aan de onderkant en links, waar de tekst staat */
  background:
    linear-gradient(to top, rgba(30,24,20,.72) 0%, rgba(30,24,20,.18) 45%, rgba(30,24,20,.28) 100%),
    linear-gradient(to right, rgba(30,24,20,.35) 0%, rgba(30,24,20,0) 55%);
}
.hero-content{
  position:relative; z-index:3;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 40px 70px;
}
.hero-title{
  font-family:var(--font-serif);
  font-weight:calc(300 + var(--kop-dikte, 0));
  font-size:calc(clamp(3.4rem, 12vw, 10rem) * var(--kop-schaal, 1));
  line-height:.92;
  letter-spacing:.005em;
  margin-bottom:40px;
}
.hero-title span{ display:block; }
.hero-title .accent{
  font-style:italic;         /* het middelste woord sierlijk schuin */
  font-weight:calc(400 + var(--kop-dikte, 0));
  margin-left:.6em;          /* iets naar rechts, net als de voorbeeldsite */
}

.hero-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:30px;
}
.hero-intro{
  max-width:430px;
  font-size:calc(16px * var(--tekst-schaal, 1));
  font-weight:calc(300 + var(--tekst-dikte, 0));
  color:rgba(247,242,234,.9);
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:calc(13px * var(--tekst-schaal, 1));
  letter-spacing:.16em;
  text-transform:uppercase;
  padding-bottom:6px;
  border-bottom:1px solid rgba(247,242,234,.5);
  white-space:nowrap;
  transition:gap .55s cubic-bezier(.16,1,.3,1), border-color .55s ease;
}
.hero-cta:hover{ gap:22px; border-color:var(--light); }
.hero-cta .arrow{ font-size:calc(16px * var(--tekst-schaal, 1)); }

/* ---------- 5. Inkom-animatie (elementen schuiven zachtjes omhoog) ---------- */
.reveal{
  opacity:0;
  transform:translateY(36px);
  /* Zachte, iets langere overgang voor een rustige, premium inkom */
  transition:opacity 1.5s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d, 0s);
}
.reveal.in{ opacity:1; transform:translateY(0); }
/* Hero-woorden nog iets langzamer, voor een rustige opening */
.hero-title .reveal{ transition-duration:1.7s; }

/* Mensen die liever geen beweging zien: animatie uit. */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- 6. Kleinere schermen ---------- */
@media (max-width: 820px){
  .header-inner{ padding-left:24px; padding-right:24px; }
  .nav-desktop{ display:none; }      /* menu-links verbergen */
  .menu-toggle{ display:block; }     /* MENU-knop tonen      */
  .hero-content{ padding:0 24px 48px; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- 7. Herbruikbare onderdelen (labels & tekstlinks) ---------- */
.section-label{
  display:inline-block;
  font-size:calc(12px * var(--tekst-schaal, 1));
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:26px;
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:calc(13px * var(--tekst-schaal, 1));
  letter-spacing:.16em;
  text-transform:uppercase;
  padding-bottom:5px;
  border-bottom:1px solid var(--espresso);
  transition:gap .5s cubic-bezier(.16,1,.3,1);
}
.text-link:hover{ gap:20px; }
.text-link .arrow{ font-size:calc(15px * var(--tekst-schaal, 1)); }

/* ---------- 8. Sectie: Over Binside ---------- */
.over{
  position:relative;
  z-index:1;                 /* schuift over de vaststaande hero heen */
  padding:140px 40px;
  /* heel subtiele, warme gradient voor een premium gevoel */
  background:linear-gradient(168deg, #f6f2ec 0%, #f1ebe1 55%, #ece4d9 100%);
}
.over-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.over-title{
  font-family:var(--font-serif);
  font-weight:calc(300 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.6rem, 5vw, 4.6rem) * var(--kop-schaal, 1));
  line-height:1.02;
  margin-bottom:34px;
}
.over-title em{ font-style:italic; font-weight:calc(400 + var(--kop-dikte, 0)); }
.over-body{
  font-size:calc(16px * var(--tekst-schaal, 1));
  color:#5f564d;
  max-width:460px;
  margin-bottom:22px;
}
.over-body + .text-link{ margin-top:14px; }

/* De twee foto's: hoofdfoto met een kleinere die er deels overheen valt */
.over-images{ position:relative; }
.over-img-main, .over-img-accent{ overflow:hidden; }
.over-images .reveal{ transition-duration:1.6s; }
/* Foto's komen zacht in beeld met een subtiele uit-zoom */
.over-img-main img, .over-img-accent img{ transition:transform 1.8s cubic-bezier(.16,1,.3,1); }
.over-img-main.reveal img, .over-img-accent.reveal img{ transform:scale(1.08); }
.over-img-main.reveal.in img, .over-img-accent.reveal.in img{ transform:scale(1); }
.over-img-main img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
}
.over-img-accent{
  position:absolute;
  right:-30px;
  bottom:-40px;
  width:46%;
  box-shadow:0 20px 50px rgba(43,36,32,.18);
  border:8px solid var(--cream);
}
.over-img-accent img{
  width:100%;
  aspect-ratio:3 / 4;
  object-fit:cover;
}

/* ---------- 9. Over-sectie op kleinere schermen ---------- */
@media (max-width: 820px){
  .over{ padding:80px 24px; }
  .over-inner{ grid-template-columns:1fr; gap:60px; }
  .over-img-accent{ right:-12px; bottom:-24px; width:44%; }
}

/* ---------- 10. Gedeelde sectiekop (gecentreerd) ---------- */
.section-title{
  font-family:var(--font-serif);
  font-weight:calc(300 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.4rem, 5vw, 4.4rem) * var(--kop-schaal, 1));
  line-height:1.04;
}
.section-title em{ font-style:italic; font-weight:calc(400 + var(--kop-dikte, 0)); }

/* ---------- 11. Sectie: Projecten (grote kop + projectblokken) ---------- */
/* Blijft staan (sticky) terwijl de donkere diensten-sectie eroverheen schuift,
   net zoals de Over-sectie over de hero schuift. */
.projecten{
  position:sticky;
  top:0;
  z-index:1;
  min-height:100vh;
  padding:60px 40px;
  background:var(--cream);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.projecten-head{
  max-width:var(--maxw);
  margin:0 auto 34px;
  text-align:center;
}
.projecten-title{
  font-family:var(--font-serif);
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.6rem, 6vw, 5rem) * var(--kop-schaal, 1));
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* ---------- 12. Fotogalerij (verticaal scrollen, met trage open-animatie) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  visibility:hidden;
  transition:visibility 0s .95s;      /* pas verbergen nadat het dicht-animeren klaar is */
}
.lightbox.open{ visibility:visible; transition:visibility 0s 0s; }

/* Achtergrond wordt langzaam donker */
.lb-backdrop{
  position:absolute; inset:0;
  background:#141210;
  opacity:0;
  transition:opacity .95s ease;
}
.lightbox.open .lb-backdrop{ opacity:.96; }

/* Scrollbaar vlak met de foto's netjes onder elkaar en gecentreerd */
.lb-scroll{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.lb-inner{
  min-height:100%;
  padding:70px 20px 90px;
  display:flex; flex-direction:column; align-items:center; gap:26px;
  opacity:0; transform:scale(.94);
  transition:opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1);
}
.lightbox.open .lb-inner{ opacity:1; transform:scale(1); }
.lb-inner img{
  display:block;
  width:min(1080px, 92vw);
  max-height:90vh;
  object-fit:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}

.lb-close{
  position:fixed; top:22px; right:30px; z-index:2;
  width:46px; height:46px; border-radius:50%;
  background:rgba(20,18,16,.5); border:1px solid rgba(247,242,234,.35);
  color:var(--light); font-size:calc(24px * var(--kop-schaal, 1)); line-height:1; cursor:pointer;
  transition:background .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.lb-close:hover{ background:rgba(20,18,16,.85); transform:rotate(90deg); }

@media (max-width: 820px){
  .lb-inner{ padding:64px 14px 80px; gap:16px; }
  .lb-close{ top:16px; right:18px; }
}

/* ---------- 14. Sectie: Diensten (donker, links tekst + rechts swipe-kaarten) ---------- */
.diensten{
  position:relative;
  z-index:1;                 /* boven de vaststaande hero */
  padding:130px 40px 120px;
  color:var(--light);
  background:linear-gradient(rgba(28,22,18,.9), rgba(28,22,18,.94)),
             url("../images/diensten/02-sfeerbepaling.jpg") center/cover no-repeat;
  overflow:hidden;
}
.diensten-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:70px;
  align-items:center;
}

/* Linkerkolom: label, grote kop, tekst en link */
.diensten .section-label{ color:var(--sand); }
.diensten-heading{
  font-family:var(--font-serif);
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.6rem, 4.6vw, 4.2rem) * var(--kop-schaal, 1));
  line-height:1.04;
  letter-spacing:.005em;
  margin:20px 0 26px;
}
.diensten-heading em{ font-style:italic; }
.diensten-lead{
  max-width:380px;
  color:rgba(247,242,234,.72);
  font-size:calc(16px * var(--tekst-schaal, 1));
  line-height:1.85;
  margin-bottom:38px;
}
.diensten-link{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-sans);
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.16em; text-transform:uppercase;
  color:var(--light);
  padding-bottom:10px;
  border-bottom:1px solid rgba(247,242,234,.4);
  transition:gap .5s ease, border-color .4s ease;
}
.diensten-link:hover{ gap:20px; border-color:var(--sand); }
.diensten-link .arrow{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.diensten-link:hover .arrow{ transform:translateX(5px); }

/* Rechterkolom: kaarten wisselen met een trage cross-fade op dezelfde plek */
.dcards-viewport{ position:relative; }
.dcards-track{
  display:grid;              /* beide pagina's liggen in hetzelfde vlak, over elkaar */
}
.dcards-page{
  grid-area:1 / 1;          /* stapelen op dezelfde plek */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  padding:5px;
  align-items:start;         /* kaarten houden hun eigen hoogte, niet uitgerekt */
  opacity:0;
  pointer-events:none;
  transition:opacity 2s ease-in-out;
}
.dcards-page.is-active{
  opacity:1;
  pointer-events:auto;
}
/* Rechterkolom van elke pagina iets lager: even veel lager onder als boven,
   zodat 02 t.o.v. 01 (en 04 t.o.v. 03) netjes verspringt aan beide kanten. */
.dcards-page .svc-card:nth-child(even){ margin-top:34px; }

.svc-card{
  position:relative;
  background:var(--cream);
  color:var(--espresso);
  padding:13px 13px 15px;
}
.svc-nr{
  font-family:var(--font-serif);
  font-size:calc(11px * var(--tekst-schaal, 1)); letter-spacing:.06em;
  color:var(--taupe);
}
.svc-media{
  position:relative;
  overflow:hidden;
  margin:9px 0 12px;
}
.svc-media img{
  width:100%;
  aspect-ratio:1 / 0.9;
  object-fit:cover;
  transition:transform 1.8s cubic-bezier(.16,1,.3,1);
}
.svc-card:hover .svc-media img{ transform:scale(1.05); }
/* Omschrijving verschijnt in het kaartje bij hover */
.svc-overlay{
  position:absolute; inset:0;
  background:rgba(43,36,32,.9);
  color:var(--light);
  display:flex; align-items:center;
  padding:20px;
  opacity:0;
  transition:opacity 1s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.svc-card:hover .svc-overlay{ opacity:1; }
.svc-overlay p{ font-size:calc(13px * var(--tekst-schaal, 1)); line-height:1.65; }
.svc-title{
  font-family:var(--font-serif);
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(.95rem, 1.1vw, 1.15rem) * var(--kop-schaal, 1));
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.01em;
  min-height:2.4em;            /* twee regels gereserveerd, zodat de witruimte gelijk is */
}
.svc-title .amp{ text-transform:none; }

/* Navigatie onder de kaarten */
.dcards-nav{
  display:flex; align-items:center; justify-content:flex-end;
  gap:18px;
  margin-top:30px;
}
.dcards-index{
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.16em; color:rgba(247,242,234,.6);
  margin-right:6px;
}
.dcards-arrow{
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(247,242,234,.32);
  background:none; color:var(--light);
  font-size:calc(16px * var(--tekst-schaal, 1)); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .5s ease, color .5s ease, border-color .5s ease;
}
.dcards-arrow:hover{ background:var(--light); color:var(--espresso); border-color:var(--light); }

.diensten-caption{
  max-width:var(--maxw);
  margin:70px auto 0;
  text-align:right;
  font-size:calc(13px * var(--tekst-schaal, 1));
  color:rgba(247,242,234,.55);
}

@media (max-width: 900px){
  .diensten{ padding:80px 24px 90px; }
  .diensten-inner{ grid-template-columns:1fr; gap:44px; }
  .diensten-heading{ font-size:calc(clamp(2.2rem, 9vw, 3rem) * var(--kop-schaal, 1)); }
  .diensten-lead{ max-width:none; }
  .dcards-page{ gap:16px; }
  .dcards-page .svc-card:nth-child(even){ margin-top:24px; }
  .svc-overlay p{ font-size:calc(13px * var(--tekst-schaal, 1)); }
  .diensten-caption{ text-align:left; margin-top:40px; }
}

/* ---------- 15. Subtiele interacties (hero-woorden, muis-licht, wisselwoord) ---------- */
.hero-title .w{
  display:inline-block;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}
.hero-title span:hover .w{ transform:translateX(0.12em); }  /* heel subtiel meebewegen */

/* ---------- 16. Projecten: slider met projectblokken ---------- */
/* Kijkvenster + band: elk project is 100% breed; 'Volgend project' schuift de band. */
.projecten-viewport{
  max-width:var(--maxw);
  margin:0 auto;
  overflow:hidden;
}
.projecten-track{
  display:flex;
  align-items:flex-start;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.project-block{ flex:0 0 100%; }

/* De foto-compositie: grote foto in het midden, smallere foto's ernaast,
   netjes verticaal gecentreerd. */
.pb-gallery{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  grid-template-columns:0.82fr 1.7fr 0.92fr;
  gap:28px;
  align-items:center;
}
.pb-img{
  display:block; padding:0; border:none; background:none;
  cursor:pointer; overflow:hidden;
  width:100%;
}
.pb-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1);
}
.pb-img:hover img{ transform:scale(1.04); }
.pb-center img{ aspect-ratio:4 / 3; }
.pb-left img{ aspect-ratio:3 / 4; }
.pb-right img{ aspect-ratio:3 / 3.6; }

/* Onder de foto's: label, projectnaam en omschrijving gecentreerd onder de grote foto */
.pb-foot{
  max-width:700px;
  margin:40px auto 0;
  text-align:center;
}
.pb-label{
  display:block;
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.18em; text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:12px;
}
.pb-name{
  font-family:var(--font-serif);
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(1.95rem, 3.4vw, 3.2rem) * var(--kop-schaal, 1));
  line-height:1.05;
  margin-bottom:18px;
}
.pb-text p{
  color:#5f564d;
  font-size:calc(15.5px * var(--tekst-schaal, 1));
  line-height:1.8;
}
.pb-text p + p{ margin-top:14px; }

/* Navigatie onder de slider */
.projecten-nav{
  max-width:var(--maxw);
  margin:40px auto 0;
  display:flex; align-items:center; justify-content:center;
  gap:26px;
}
.pn-btn{
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(43,36,32,.28);
  background:none; color:var(--espresso);
  font-size:calc(17px * var(--tekst-schaal, 1)); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .5s ease, color .5s ease, border-color .5s ease;
}
.pn-btn:hover{ background:var(--espresso); color:var(--light); border-color:var(--espresso); }
.pn-index{
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.16em; color:var(--taupe);
  min-width:64px; text-align:center;
}
.pn-next{
  display:inline-flex; align-items:center; gap:12px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-sans);
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.16em; text-transform:uppercase;
  color:var(--espresso);
}
.pn-next .arrow{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.pn-next:hover .arrow{ transform:translateX(5px); }

@media (max-width: 820px){
  .pb-gallery{ grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
  .pb-center{ grid-column:1 / -1; order:-1; }
  .pb-center img{ aspect-ratio:4 / 3; }
  .pb-left img, .pb-right img{ aspect-ratio:3 / 4; }
  .pb-foot{ margin-top:34px; }
  .projecten-nav{ margin-top:40px; gap:18px; }
}

/* Op korte of smalle schermen: geen sticky (anders kan inhoud buiten beeld vallen),
   dan staat de sectie gewoon in de normale flow. */
@media (max-width: 820px), (max-height: 1000px){
  .projecten{
    position:relative;
    min-height:auto;
    display:block;
    padding:100px 40px;
  }
}
@media (max-width: 820px){
  .projecten{ padding:80px 24px; }
}

/* ---------- 17. Sierlijke ampersand (gebruikt in titels) ---------- */
.amp{
  font-family:"Baskerville", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-style:italic;
  font-weight:calc(400 + var(--tekst-dikte, 0));
}

/* ---------- 19. Sectie: Werkwijze (licht, redactionele tweekolomslijst) ---------- */
.werkwijze{
  position:relative;
  z-index:1;                 /* boven de vaststaande hero */
  padding:140px 40px;
  background:linear-gradient(168deg, #f6f2ec, #f1ebe1 55%, #ece4d9);
}
.werkwijze-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:90px;
  align-items:start;
}

/* Linkerkolom: label, kop en intro */
.werkwijze-intro-col{ position:sticky; top:120px; }
.werkwijze-heading{
  font-family:var(--font-serif);
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.2rem, 3.6vw, 3.4rem) * var(--kop-schaal, 1));
  line-height:1.06;
  margin:18px 0 26px;
}
.werkwijze-heading em{ font-style:italic; }
.werkwijze-lead{
  max-width:420px;
  color:var(--taupe);
  font-size:calc(16px * var(--tekst-schaal, 1));
  line-height:1.85;
}

/* Rechterkolom: de fasen als rustige lijst met haarlijnen + een foto per fase */
.werkwijze-list{ display:flex; flex-direction:column; }
.fase{
  display:grid;
  grid-template-columns:auto 1fr 150px;
  column-gap:38px;
  align-items:center;
  padding:34px 0;
  border-top:1px solid rgba(43,36,32,.16);
}
.fase:last-child{ border-bottom:1px solid rgba(43,36,32,.16); }
.fase-nr{
  align-self:start;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.6rem, 3.6vw, 3.6rem) * var(--kop-schaal, 1));
  line-height:.9;
  color:var(--sand);
}
.fase-photo{ align-self:center; overflow:hidden; }
.fase-photo img{
  width:100%; aspect-ratio:3 / 4; object-fit:cover;
  border-radius:6px;
}
.fase-title{
  font-family:var(--font-serif);
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(1.4rem, 2vw, 1.75rem) * var(--kop-schaal, 1));
  line-height:1.2;
  margin-bottom:14px;
}
.fase-desc{
  color:#5f564d;
  font-size:calc(16px * var(--tekst-schaal, 1));
  line-height:1.85;
  max-width:46ch;
}

@media (max-width: 820px){
  .werkwijze{ padding:80px 24px; }
  .werkwijze-inner{ grid-template-columns:1fr; gap:44px; }
  .werkwijze-intro-col{ position:static; }
  .fase{ grid-template-columns:auto 1fr; column-gap:24px; row-gap:20px; padding:30px 0; }
  .fase-desc{ max-width:none; }
  .fase-photo{ grid-column:1 / -1; order:-1; }
  .fase-photo img{ aspect-ratio:16 / 10; }
}

/* ---------- 20. Sectie: Contact (licht) + formulier, footer en schuiftekst ---------- */
.contact{
  position:relative;
  z-index:1;                 /* boven de vaststaande hero */
  background:var(--cream);
  overflow:hidden;
}
.contact-grid{
  max-width:var(--maxw);
  margin:0 auto;
  padding:150px 40px 110px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.contact-left{ max-width:420px; }
.contact-title{
  font-family:var(--font-serif);
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.4rem, 4.4vw, 4rem) * var(--kop-schaal, 1));
  line-height:1.04;
  letter-spacing:.005em;
  margin:22px 0 30px;
}
.contact-title em{ font-style:italic; }
.contact-lead{
  color:var(--taupe);
  font-size:calc(16px * var(--tekst-schaal, 1));
  line-height:1.85;
  max-width:340px;
}

/* ----- Formulier met zwevende labels ----- */
.contact-form{ padding-top:6px; position:relative; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.field{ position:relative; margin-bottom:30px; }
.field input,
.field textarea{
  width:100%;
  border:none;
  border-bottom:1px solid rgba(43,36,32,.22);
  background:transparent;
  font-family:var(--font-sans);
  font-size:calc(15px * var(--tekst-schaal, 1));
  color:var(--espresso);
  padding:20px 0 12px;
  resize:none;
}
.field textarea{ min-height:120px; line-height:1.7; }
.field input:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--espresso); }
.field label{
  position:absolute;
  left:0; top:20px;
  color:var(--taupe);
  font-size:calc(15px * var(--tekst-schaal, 1));
  pointer-events:none;
  transition:top .4s cubic-bezier(.16,1,.3,1), font-size .4s ease, letter-spacing .4s ease, color .4s ease;
}
/* Label schuift omhoog zodra het veld focus heeft of ingevuld is */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
  top:0;
  font-size:calc(11px * var(--tekst-schaal, 1));
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--taupe);
}

.form-send{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:10px;
  background:none; border:none; cursor:pointer;
  font-family:var(--font-sans);
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.16em; text-transform:uppercase;
  color:var(--espresso);
}
.form-send .send-line{
  display:inline-block; width:70px; height:1px;
  background:var(--espresso);
  transition:width .5s cubic-bezier(.16,1,.3,1);
}
.form-send:hover .send-line{ width:100px; }
.form-send .arrow{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.form-send .arrow-lg{ font-size:calc(16px * var(--tekst-schaal, 1)); }
.form-send:hover .arrow{ transform:translateX(5px); }

/* Terwijl de aanvraag verstuurt: knop iets rustiger */
.contact-form.sending .form-send{ opacity:.5; cursor:default; }

/* Als de aanvraag verstuurd is, faden de velden weg en komt het bedankscherm ervoor */
.contact-form.sent > .field,
.contact-form.sent > .field-row,
.contact-form.sent > .form-send,
.contact-form.sent > .form-note{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .8s ease, transform .8s ease;
}
.form-note{
  margin-top:18px;
  font-size:calc(12.5px * var(--tekst-schaal, 1)); line-height:1.6; color:var(--taupe);
}
.form-note a{ color:var(--espresso); border-bottom:1px solid rgba(43,36,32,.35); }
.form-note a:hover{ border-bottom-color:var(--espresso); }

/* Bedankscherm */
.form-thanks{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity 1s ease .35s, transform 1s cubic-bezier(.16,1,.3,1) .35s, visibility 0s .35s;
}
.contact-form.sent .form-thanks{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity 1s ease .35s, transform 1s cubic-bezier(.16,1,.3,1) .35s, visibility 0s 0s;
}
.ft-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--taupe);
  color:var(--taupe);
  font-size:calc(22px * var(--kop-schaal, 1));
}
.ft-title{
  font-family:var(--font-serif);
  font-size:calc(clamp(1.5rem, 2.4vw, 2rem) * var(--kop-schaal, 1));
  line-height:1.2;
  color:var(--espresso);
}
.ft-text{
  font-family:var(--font-sans);
  font-size:calc(15px * var(--tekst-schaal, 1)); line-height:1.7;
  color:var(--taupe);
  max-width:360px;
}

/* ----- Footer (warme Japandi-bruine band, onderscheidt zich van de contact-sectie) ----- */
.site-footer{
  background:#6b5847;
  color:var(--light);
  padding:56px 40px 56px;
}
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:30px;
  align-items:start;
}
.footer-brand{ display:flex; flex-direction:column; gap:8px; }
.footer-logo{
  font-family:var(--font-serif);
  font-size:calc(1.4rem * var(--kop-schaal, 1)); letter-spacing:.22em;
}
.footer-logo-img{ display:block; height:26px; width:auto; align-self:flex-start; max-width:220px; }
.footer-tag{
  font-size:calc(11px * var(--tekst-schaal, 1)); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(247,242,234,.6);
}
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.fc-head{
  font-size:calc(12.5px * var(--tekst-schaal, 1)); letter-spacing:.18em; text-transform:uppercase;
  color:var(--sand);
  margin-bottom:4px;
}
.footer-col a,
.footer-col span:not(.fc-head){
  font-size:calc(14px * var(--tekst-schaal, 1));
  color:rgba(247,242,234,.9);
  transition:color .4s ease;
}
.footer-col a:hover{ color:var(--sand); }
.footer-bottom{
  max-width:var(--maxw);
  margin:40px auto 0;
  padding-top:22px;
  border-top:1px solid rgba(247,242,234,.14);
  font-size:calc(11px * var(--tekst-schaal, 1)); letter-spacing:.14em;
  color:rgba(247,242,234,.5);
}

@media (max-width: 820px){
  .contact-grid{ grid-template-columns:1fr; gap:44px; padding:90px 24px 70px; }
  .contact-left{ max-width:none; }
  .site-footer{ padding:44px 24px 46px; }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:34px 24px; }
  .footer-brand{ grid-column:1 / -1; }
}

/* ---------- 21. Sectie: Reviews (band met achtergrondfoto, sterren + quote) ---------- */
.reviews{
  position:relative;
  z-index:1;                 /* boven de vaststaande hero */
  color:var(--light);
  background:linear-gradient(rgba(26,20,16,.60), rgba(26,20,16,.72)),
             url("../images/reviews-bg.jpg") center/cover no-repeat;
}
.reviews-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:64px 40px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:60px;
  align-items:center;
}
.reviews-label{
  align-self:center;
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(247,242,234,.7);
  white-space:nowrap;
}
.reviews-content{ position:relative; max-width:1080px; }

/* Sterren */
.review-stars{ display:flex; gap:7px; margin-bottom:18px; color:var(--sand); font-size:calc(13px * var(--tekst-schaal, 1)); }

/* De reviews liggen gestapeld op dezelfde plek en faden trage in/uit */
.reviews-list{ display:grid; }
.review{
  grid-area:1 / 1;
  opacity:0; transform:translateY(14px);
  transition:opacity 1.6s cubic-bezier(.16,1,.3,1), transform 1.6s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.review.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.review-quote{
  font-family:var(--font-serif);
  font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(0.88rem, 1vw, 1.02rem) * var(--kop-schaal, 1));
  line-height:1.5;
  color:var(--light);
}
.review-by{
  display:block;
  margin-top:16px;
  font-family:var(--font-sans);
  font-size:calc(11px * var(--tekst-schaal, 1)); letter-spacing:.14em;
  color:rgba(247,242,234,.72);
}

.reviews-dots{
  display:flex; gap:10px;
  margin-top:24px;
}
.rdot{
  width:8px; height:8px; padding:0;
  border-radius:50%;
  border:1px solid rgba(247,242,234,.55);
  background:none; cursor:pointer;
  transition:background .5s ease, transform .5s ease;
}
.rdot.is-on{ background:var(--light); border-color:var(--light); transform:scale(1.15); }

@media (max-width: 820px){
  .reviews-inner{ grid-template-columns:1fr; gap:18px; padding:48px 24px; }
  .review-quote{ font-size:calc(1rem * var(--tekst-schaal, 1)); }
}

/* ---------- 22. Subpagina: vaste lichte menubalk + actief item ---------- */
.subpage .site-header{
  background:var(--cream);
  color:var(--espresso);
  padding:16px 0;
  box-shadow:0 1px 0 rgba(43,36,32,.08);
}
.subpage .site-header .header-inner{ border-bottom-color:transparent; padding-bottom:0; }
.nav-desktop a.is-current::after{ width:100%; }

/* ---------- 23. B'atelier: hero (beeld met badge + productkaart) ---------- */
.batelier-hero{
  min-height:100vh;
  padding:132px 40px 70px;
  background:var(--cream);
  display:flex; align-items:center;
}
.bh-inner{
  max-width:var(--maxw);
  margin:0 auto; width:100%;
  display:grid;
  grid-template-columns:1fr 1.02fr;
  gap:74px;
  align-items:stretch;
}
/* Tekst blijft mooi verticaal gecentreerd naast het vullende beeld */
.bh-left{ display:flex; flex-direction:column; justify-content:center; }
.bh-overline{
  display:inline-flex; align-items:center; gap:14px;
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.2em; text-transform:uppercase; color:var(--taupe);
}
.bh-overline::before{ content:""; width:34px; height:1px; background:var(--taupe); }
.bh-dot{ color:var(--sand); }
/* align-self voorkomt dat de kolom het logo in de breedte uitrekt */
.bh-logo{ display:block; align-self:flex-start; height:72px; width:auto; max-width:100%; object-fit:contain; object-position:left; margin-bottom:22px; }
@media (max-width:700px){ .bh-logo{ height:56px; } }
.bh-eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.2em; text-transform:uppercase; color:var(--taupe);
}
.bh-eyebrow::before{ content:""; width:34px; height:1px; background:var(--taupe); }
.bh-title{
  font-family:var(--font-serif); font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.7rem, 5.2vw, 4.8rem) * var(--kop-schaal, 1)); line-height:1.03; letter-spacing:.005em;
  margin:26px 0 26px;
}
.bh-title em{ font-style:italic; }
.bh-text{ max-width:440px; color:#5f564d; font-size:calc(16px * var(--tekst-schaal, 1)); line-height:1.85; margin-bottom:40px; }
.bh-actions{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; }
.bh-btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--espresso); color:var(--light);
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.14em; text-transform:uppercase;
  padding:18px 32px; border-radius:40px;
  transition:gap .5s cubic-bezier(.16,1,.3,1), background .4s ease;
}
.bh-btn:hover{ gap:18px; background:#3a3129; }
.bh-btn .arrow{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.bh-btn:hover .arrow{ transform:translateX(4px); }
.bh-textlink{
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.14em; text-transform:uppercase; color:var(--taupe);
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:color .4s ease, border-color .4s ease;
}
.bh-textlink:hover{ color:var(--espresso); border-bottom-color:var(--espresso); }

.bh-media{ position:relative; align-self:stretch; min-height:560px; }
.bh-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  border-radius:8px;
}
.bh-badge{
  position:absolute; top:22px; right:22px;
  background:rgba(30,24,20,.82); color:var(--light);
  font-size:calc(11px * var(--tekst-schaal, 1)); letter-spacing:.12em; text-transform:uppercase;
  padding:9px 16px; border-radius:30px;
}
.bh-card{
  position:absolute; left:24px; bottom:24px;
  background:var(--cream);
  padding:22px 26px; border-radius:8px;
  box-shadow:0 22px 50px rgba(30,24,20,.16);
  min-width:262px;
}
.bh-card-title{ display:block; font-family:var(--font-serif); font-size:calc(1.35rem * var(--kop-schaal, 1)); line-height:1.1; }
.bh-card-sub{ display:block; font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.05em; color:var(--taupe); margin-top:7px; }
.bh-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:20px; }
.bh-card-price{ font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.12em; text-transform:uppercase; color:var(--espresso); }
.bh-card-btn{
  width:44px; height:44px; border-radius:50%;
  background:var(--espresso); color:var(--light);
  display:inline-flex; align-items:center; justify-content:center; font-size:calc(15px * var(--tekst-schaal, 1));
  transition:background .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.bh-card-btn:hover{ background:#3a3129; transform:translateX(3px); }

@media (max-width: 820px){
  .batelier-hero{ padding:110px 24px 60px; min-height:0; }
  .bh-inner{ grid-template-columns:1fr; gap:40px; align-items:start; }
  .bh-text{ max-width:none; }
  .bh-media{ min-height:0; aspect-ratio:4 / 3; }
  .bh-card{ left:16px; bottom:16px; min-width:0; padding:18px 20px; }
}

/* ---------- 24. Juridische pagina (privacyverklaring) ---------- */
.legal{
  background:var(--cream);
  padding:150px 40px 90px;
}
.legal-inner{ max-width:760px; margin:0 auto; }
.legal-label{
  display:inline-flex; align-items:center; gap:14px;
  font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.2em; text-transform:uppercase; color:var(--taupe);
}
.legal-label::before{ content:""; width:34px; height:1px; background:var(--taupe); }
.legal h1{
  font-family:var(--font-serif); font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(clamp(2.2rem, 4vw, 3.2rem) * var(--kop-schaal, 1)); line-height:1.08;
  margin:22px 0 10px;
}
.legal .legal-intro{ color:#5f564d; font-size:calc(16px * var(--tekst-schaal, 1)); line-height:1.85; margin-bottom:14px; }
.legal .legal-updated{ font-size:calc(12px * var(--tekst-schaal, 1)); letter-spacing:.06em; color:var(--taupe); margin-bottom:46px; }
.legal h2{
  font-family:var(--font-serif); font-weight:calc(400 + var(--kop-dikte, 0));
  font-size:calc(1.5rem * var(--kop-schaal, 1)); line-height:1.2;
  margin:40px 0 14px;
}
.legal p{ color:#4a423b; font-size:calc(15.5px * var(--tekst-schaal, 1)); line-height:1.85; margin-bottom:14px; }
.legal ul{ margin:0 0 14px; padding-left:20px; }
.legal li{ color:#4a423b; font-size:calc(15.5px * var(--tekst-schaal, 1)); line-height:1.75; margin-bottom:7px; }
.legal a{ color:var(--espresso); border-bottom:1px solid rgba(43,36,32,.35); transition:border-color .3s ease; }
.legal a:hover{ border-bottom-color:var(--espresso); }
@media (max-width: 820px){
  .legal{ padding:120px 24px 70px; }
}

/* Vetgedrukte woorden in titels (in te stellen via het beheer) */
:is(h1,h2,h3) strong{ font-weight:calc(600 + var(--kop-dikte, 0)); }