/* ============================================================
   Van Taba Project & Interior Advies, huisstijl stylesheet
   Palette, type and section order per "Huisstijl Van Taba Project"
   ============================================================ */

/* ── fonts (self-hosted, GDPR-safe) ─────────────────────────── */
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/playfair-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/playfair-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';font-style:italic;font-weight:400 500;font-display:swap;
  src:url('../fonts/playfair-var-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── tokens ─────────────────────────────────────────────────── */
:root{
  --green:#0F2F31;
  --green-deep:#0A1D20;
  --gold:#D4BB86;
  --gold-lt:#E6D4AA;
  --cream:#F7F5F0;
  --white:#FFFFFF;

  --ink:#16211F;
  --ink-soft:rgba(22,33,31,.84);
  --ink-faint:rgba(22,33,31,.64);
  --light:rgba(247,245,240,.92);
  --light-faint:rgba(247,245,240,.76);
  --hair:rgba(15,47,49,.18);
  --hair-light:rgba(230,212,170,.3);

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:min(1240px, 100% - clamp(1.5rem, 6vw, 7rem));
  --pad-y:clamp(5.5rem, 11vw, 10.5rem);
  --r-lg:2rem;
  --r-md:1.35rem;
  --r-sm:.8rem;

  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.32,.72,0,1);
  --e-soft:cubic-bezier(.65,0,.35,1);

  --shadow-soft:0 2px 4px rgba(15,47,49,.03), 0 12px 28px rgba(15,47,49,.05), 0 40px 80px -30px rgba(15,47,49,.12);
  --shadow-lift:0 4px 10px rgba(15,47,49,.05), 0 24px 50px rgba(15,47,49,.09), 0 60px 110px -40px rgba(15,47,49,.18);
}

/* ── base ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6.5rem}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:450;font-size:clamp(1.0625rem,1rem + .28vw,1.175rem);
  line-height:1.68;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,figure,blockquote,table{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:.35rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:var(--wrap);margin-inline:auto}

.skip{
  position:fixed;top:.75rem;left:.75rem;z-index:120;
  transform:translateY(-160%);transition:transform .35s var(--e);
  background:var(--green);color:var(--gold-lt);padding:.7rem 1.1rem;border-radius:999px;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{transform:none}

/* film grain: fixed, nooit op scrollende content */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── typography ─────────────────────────────────────────────── */
.h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2rem,1.32rem + 2.9vw,3.75rem);
  line-height:1.08;letter-spacing:-.018em;color:var(--green);
  text-wrap:balance;
}
.h2--light{color:var(--cream)}
.h2 em{font-style:italic;color:var(--gold)}

.eyebrow{
  display:flex;align-items:center;gap:.85rem;margin-bottom:1.5rem;
  font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green);
}
.eyebrow::before{content:"";width:2.25rem;height:1px;background:var(--gold);flex:none}
.eyebrow--light{color:var(--gold-lt)}
.sectionHead--center .eyebrow{justify-content:center}

.lead{font-size:clamp(1.12rem,1.05rem + .32vw,1.3rem);color:var(--ink-soft);font-weight:450}
p+p{margin-top:1.1rem}

/* ── buttons ────────────────────────────────────────────────── */
.btn{
  --bg:var(--gold);--fg:var(--green-deep);--bd:transparent;
  position:relative;display:inline-flex;align-items:center;gap:.9rem;
  padding:.72rem .72rem .72rem 1.5rem;border-radius:999px;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;
  max-width:100%;
  transition:transform .5s var(--e-out),background-color .5s var(--e-out),color .5s var(--e-out),border-color .5s var(--e-out),box-shadow .5s var(--e-out);
  will-change:transform;
}
.btn__ico{
  display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:999px;
  background:rgba(10,29,32,.1);
  transition:transform .5s var(--e-out),background-color .5s var(--e-out);
}
.btn__ico svg{width:1.05rem;height:1.05rem;stroke:currentColor}
.btn:hover{box-shadow:0 10px 30px -12px rgba(15,47,49,.5)}
.btn:hover .btn__ico{transform:translate3d(3px,-2px,0) scale(1.06)}
.btn:active{transform:scale(.98)}

.btn--gold{--bg:var(--gold);--fg:var(--green-deep)}
.btn--gold:hover{--bg:var(--gold-lt)}
.btn--ghost{--bg:transparent;--fg:var(--cream);--bd:rgba(247,245,240,.34)}
.btn--ghost .btn__ico{background:rgba(247,245,240,.14)}
.btn--ghost:hover{--bg:rgba(247,245,240,.1);--bd:rgba(247,245,240,.6)}
.btn--outline{--bg:transparent;--fg:var(--green);--bd:rgba(15,47,49,.22)}
.btn--outline .btn__ico{background:rgba(15,47,49,.07)}
.btn--outline:hover{--bg:var(--green);--fg:var(--cream);--bd:var(--green)}
.btn--outline:hover .btn__ico{background:rgba(247,245,240,.16)}
.btn--sm{padding:.58rem .58rem .58rem 1.2rem;font-size:.755rem;gap:.7rem}
.btn--sm .btn__ico{width:1.75rem;height:1.75rem}
.btn--sm .btn__ico svg{width:.9rem;height:.9rem}
.btn--lg{padding:.95rem .95rem .95rem 1.9rem;font-size:.9rem}
.btn--lg .btn__ico{width:2.5rem;height:2.5rem}
.btn--full{width:100%;justify-content:space-between}
/* In de balk mag niets afbreken; in de content wél. */
.header .btn,.nav a{white-space:nowrap}

/* ── header ─────────────────────────────────────────────────── */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  padding:clamp(.85rem,1.8vw,1.6rem) 0;
  transition:padding .6s var(--e-out);
}
.header__bar{
  width:min(1400px, 100% - clamp(1.5rem, 4vw, 4rem));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.25rem);
  padding:.55rem .55rem .55rem 1.1rem;border-radius:999px;
  border:1px solid transparent;background:transparent;
  transition:background-color .6s var(--e-out),border-color .6s var(--e-out),box-shadow .6s var(--e-out),backdrop-filter .6s var(--e-out);
}
.header.is-stuck{padding-top:.7rem;padding-bottom:.7rem}
.header.is-stuck .header__bar{
  background:rgba(10,29,32,.78);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-color:var(--hair-light);
  box-shadow:0 18px 48px -24px rgba(0,0,0,.7);
}

/* Het logo krimpt nooit; liever eerder naar het mobiele menu. */
.brand{display:flex;align-items:center;gap:.85rem;margin-right:auto;flex:none}
.brand__mark{width:auto;height:2.2rem;flex:none}
.brand__txt{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.brand__name{
  font-family:var(--serif);font-size:1.02rem;line-height:1;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-lt);
}

.nav{display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.6rem)}
.nav a{
  position:relative;font-size:.775rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(247,245,240,.94);padding:.35rem 0;white-space:nowrap;
  transition:color .4s var(--e);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:.1rem;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out);
}
.nav a:hover{color:var(--gold-lt)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.header__end{display:flex;align-items:center;gap:.75rem}
.lang{display:flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--hair-light)}
.lang__btn{
  font-size:.72rem;font-weight:500;letter-spacing:.12em;color:rgba(247,245,240,.72);
  transition:color .4s var(--e);
}
.lang__btn.is-on{color:var(--gold)}
.lang__btn:hover{color:var(--gold-lt)}
.lang__sep{width:1px;height:.7rem;background:var(--hair-light)}

.burger{display:none;width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid var(--hair-light);position:relative}
.burger span{
  position:absolute;left:50%;width:1.05rem;height:1px;background:var(--gold-lt);
  transition:transform .55s var(--e-out),opacity .3s var(--e);
}
.burger span:nth-child(1){transform:translate(-50%,-4px)}
.burger span:nth-child(2){transform:translate(-50%,4px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,0) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translate(-50%,0) rotate(-45deg)}

/* ── mobile menu ────────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;
  justify-content:center;gap:2.5rem;padding:6rem clamp(1.5rem,7vw,4rem) 3rem;
  background:rgba(10,29,32,.94);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  opacity:0;transition:opacity .5s var(--e);
}
.menu.is-open{opacity:1}
.menu[hidden]{display:none}
.menu__nav{display:flex;flex-direction:column;gap:.4rem}
.menu__nav a,.menu__foot{
  opacity:0;transform:translateY(2.2rem);
  transition:opacity .6s var(--e-out),transform .7s var(--e-out);
  transition-delay:calc(var(--i) * 55ms + 90ms);
}
.menu.is-open .menu__nav a,.menu.is-open .menu__foot{opacity:1;transform:none}
.menu__nav a{
  font-family:var(--serif);font-size:clamp(2rem,9vw,3rem);line-height:1.22;
  color:var(--cream);letter-spacing:-.01em;
}
.menu__nav a:hover{color:var(--gold)}
.menu__foot{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;border-top:1px solid var(--hair-light);padding-top:2rem}
.menu__mail{color:var(--gold-lt);letter-spacing:.05em;font-size:.9rem}

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(9rem,18vh,12rem) 0 clamp(3.5rem,7vh,5.5rem);
  isolation:isolate;background:var(--green-deep);overflow:hidden;
}
.hero__media{position:absolute;inset:-8% 0 -8%;z-index:-2;will-change:transform}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(10,29,32,.96) 4%,rgba(10,29,32,.72) 38%,rgba(10,29,32,.34) 68%,rgba(10,29,32,.62) 100%),
    radial-gradient(120% 85% at 15% 90%,rgba(15,47,49,.85),transparent 62%);
}
.hero__inner{width:var(--wrap);margin-inline:auto;max-width:min(1240px,100%);position:relative}
.hero__title{
  font-family:var(--serif);font-weight:500;color:var(--cream);
  font-size:clamp(2.6rem,1.5rem + 5.1vw,6rem);
  line-height:1.02;letter-spacing:-.025em;margin:0 0 1.6rem;max-width:17ch;
}
.hero__title em{font-style:italic;color:var(--gold)}
.hero__lead{max-width:52ch;color:var(--light);font-size:clamp(1.08rem,1rem + .4vw,1.3rem);font-weight:450}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.hero__chips{
  display:flex;flex-wrap:wrap;gap:.6rem 1.9rem;margin-top:3rem;
  padding-top:1.6rem;border-top:1px solid rgba(230,212,170,.18);
}
.hero__chips li{
  display:flex;align-items:center;gap:.6rem;
  font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(230,212,170,.95);
}
.hero__chips li::before{content:"";width:.3rem;height:.3rem;border-radius:50%;background:var(--gold);flex:none}

.hero__scroll{
  position:absolute;right:clamp(1.5rem,6vw,7rem);bottom:clamp(3.5rem,7vh,5.5rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-size:.65rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(230,212,170,.8);
  writing-mode:vertical-rl;
}
.hero__scrollLine{width:1px;height:3.5rem;background:linear-gradient(to bottom,var(--gold),transparent);overflow:hidden}
.hero__scrollLine::after{
  content:"";display:block;width:100%;height:40%;background:var(--gold-lt);
  animation:trickle 2.4s var(--e-soft) infinite;
}
@keyframes trickle{0%{transform:translateY(-100%)}60%,100%{transform:translateY(350%)}}

/* ── sections ───────────────────────────────────────────────── */
.section{position:relative;padding:var(--pad-y) 0}
.section--cream{background:var(--cream);color:var(--ink)}
.section--white{background:var(--white);color:var(--ink)}
.section--green{background:var(--green);color:var(--cream)}
.section--green::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 85% 0%,rgba(212,187,134,.09),transparent 60%);
}
.section--green > .wrap{position:relative}

.sectionHead{max-width:62ch;margin-bottom:clamp(3rem,6vw,5rem)}
.sectionHead--center{margin-inline:auto;text-align:center}
.sectionHead--row{
  display:grid;grid-template-columns:1fr minmax(0,26rem);gap:2rem 4rem;
  align-items:end;max-width:none;
}
.sectionHead__lead{margin-top:1.4rem;color:var(--ink-soft);font-size:clamp(1.06rem,1rem + .25vw,1.18rem)}
.sectionHead--row .sectionHead__lead{margin-top:0;padding-bottom:.4rem}
.sectionHead__lead--light{color:var(--light)}

/* ── over (editorial split) ─────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.split__media{position:relative}
.frame{
  padding:.6rem;border-radius:var(--r-lg);
  background:rgba(15,47,49,.045);border:1px solid var(--hair);
  box-shadow:var(--shadow-soft);
}
.frame__in{overflow:hidden;border-radius:calc(var(--r-lg) - .6rem);background:var(--green-deep)}
.frame__in img{width:100%;aspect-ratio:49/61;object-fit:cover;transform:scale(1.001);transition:transform 1.4s var(--e-out)}
.split__media:hover .frame__in img{transform:scale(1.045)}
.split__body>.eyebrow{margin-bottom:1.4rem}
.split__body>.lead{margin-top:1.8rem}
.split__body>p{margin-top:1.1rem;color:var(--ink-soft)}

.ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.5rem;margin-top:2.4rem}
.ticks li{display:flex;align-items:center;gap:.75rem;font-size:1rem;color:var(--green);font-weight:550}
.ticks svg{width:1.05rem;height:1.05rem;flex:none;color:var(--gold);stroke:currentColor}

/* ── diensten cards (double bezel) ──────────────────────────── */
.cards{display:grid;gap:clamp(1rem,1.6vw,1.5rem)}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  padding:.55rem;border-radius:var(--r-lg);
  background:rgba(230,212,170,.045);border:1px solid rgba(230,212,170,.14);
  transition:transform .7s var(--e-out),background-color .7s var(--e-out),border-color .7s var(--e-out);
  will-change:transform;
}
.card:hover{transform:translateY(-6px);background:rgba(230,212,170,.08);border-color:rgba(230,212,170,.3)}
.card__in{
  height:100%;padding:clamp(1.5rem,2.2vw,2.1rem);border-radius:calc(var(--r-lg) - .55rem);
  background:linear-gradient(180deg,rgba(247,245,240,.055),rgba(247,245,240,.02));
  box-shadow:inset 0 1px 0 rgba(247,245,240,.09);
  display:flex;flex-direction:column;
}
.card__ico{
  display:grid;place-items:center;width:3rem;height:3rem;border-radius:999px;
  border:1px solid rgba(230,212,170,.28);color:var(--gold);margin-bottom:1.6rem;
  transition:background-color .6s var(--e-out),transform .6s var(--e-out);
}
.card:hover .card__ico{background:rgba(212,187,134,.12);transform:translateY(-2px)}
.card__ico svg{width:1.4rem;height:1.4rem}
.card__title{font-family:var(--serif);font-weight:500;font-size:1.6rem;line-height:1.2;color:var(--cream)}
.card__lead{margin-top:.7rem;font-size:.97rem;color:var(--light);line-height:1.6}
.card__list{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid rgba(230,212,170,.14);display:grid;gap:.6rem}
.card__list li{
  position:relative;padding-left:1.1rem;font-size:.91rem;color:var(--light);letter-spacing:.005em;
}
.card__list li::before{
  content:"";position:absolute;left:.1rem;top:.62em;width:.3rem;height:.3rem;border-radius:50%;background:var(--gold);
}

/* ── waarom ─────────────────────────────────────────────────── */
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,3.6vw,3.4rem)}
.reasons li{position:relative;padding-top:2rem;border-top:1px solid var(--hair)}
.reasons__n{
  position:absolute;top:1.4rem;right:0;
  font-family:var(--serif);font-size:2.6rem;line-height:1;color:rgba(212,187,134,.62);
}
.reasons h3{font-family:var(--serif);font-weight:500;font-size:1.45rem;color:var(--green);line-height:1.25;max-width:14ch}
.reasons p{margin-top:.8rem;font-size:1rem;color:var(--ink-soft);max-width:34ch}

/* ── projecten ──────────────────────────────────────────────── */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.75rem)}
.project__media{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-md);
  background:var(--green-deep);box-shadow:var(--shadow-soft);
  transition:box-shadow .8s var(--e-out);
}
.project__media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.5s var(--e-out),filter 1s var(--e-out)}
.project__media:hover{box-shadow:var(--shadow-lift)}
.project__media:hover img{transform:scale(1.06)}
.project__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,29,32,.6),transparent 45%);
  opacity:.85;transition:opacity .8s var(--e-out);
}
.project__media:hover::after{opacity:1}
.project__badge{
  position:absolute;left:1rem;top:1rem;z-index:2;
  padding:.5rem 1rem;border-radius:999px;
  background:rgba(10,29,32,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(230,212,170,.26);
  color:var(--gold-lt);font-size:.67rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.project__title{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,1.25rem + .5vw,1.8rem);
  color:var(--green);margin-top:1.6rem;line-height:1.2;
}
.project__meta{margin-top:1.1rem;display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.2rem;font-size:.92rem}
.project__meta dt{
  color:var(--ink-faint);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding-top:.3em;
}
.project__meta dd{margin:0;color:var(--ink-soft)}

/* ── werkwijze timeline ─────────────────────────────────────── */
.steps{
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(1.25rem,2.4vw,2.25rem);padding-top:3.6rem;
}
.steps::before,.steps::after{
  content:"";position:absolute;top:.5rem;left:0;height:1px;
}
.steps::before{width:100%;background:rgba(230,212,170,.16)}
.steps::after{
  width:100%;background:linear-gradient(to right,var(--gold),rgba(212,187,134,.35));
  transform:scaleX(0);transform-origin:left;transition:transform 1.9s var(--e-out);
}
.steps.is-drawn::after{transform:scaleX(1)}
.step{position:relative}
.step__dot{
  position:absolute;top:-3.1rem;left:0;width:.55rem;height:.55rem;border-radius:50%;
  background:var(--gold);transform:translateY(-50%) scale(0);
  transition:transform .6s var(--e-out);transition-delay:calc(var(--sd,0) * 260ms + 300ms);
}
.steps.is-drawn .step__dot{transform:translateY(-50%) scale(1)}
.step:nth-child(1){--sd:0}.step:nth-child(2){--sd:1}.step:nth-child(3){--sd:2}
.step:nth-child(4){--sd:3}.step:nth-child(5){--sd:4}
.step__n{
  display:block;font-family:var(--serif);font-size:1.05rem;letter-spacing:.16em;
  color:var(--gold);margin-bottom:1rem;
}
.step h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--cream);line-height:1.25}
.step p{margin-top:.7rem;font-size:.94rem;color:var(--light);line-height:1.65}

/* ── tarieven ───────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.6rem);align-items:stretch}
.plan{
  padding:.55rem;border-radius:var(--r-lg);
  background:rgba(15,47,49,.03);border:1px solid var(--hair);
  transition:transform .7s var(--e-out),box-shadow .7s var(--e-out);
  will-change:transform;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft)}
.plan__in{
  position:relative;height:100%;display:flex;flex-direction:column;
  padding:clamp(1.7rem,2.4vw,2.4rem);border-radius:calc(var(--r-lg) - .55rem);
  background:var(--white);box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.plan--feat{background:rgba(212,187,134,.16);border-color:rgba(212,187,134,.5);box-shadow:var(--shadow-soft)}
.plan--feat .plan__in{background:var(--green);color:var(--cream)}
.plan--feat .plan__kicker{color:var(--gold)}
.plan--feat .plan__name,.plan--feat .plan__price{color:var(--cream)}
.plan--feat .plan__desc{color:var(--light)}
.plan--feat .plan__list{border-color:rgba(230,212,170,.18)}
.plan--feat .plan__list li{color:var(--light)}
.plan--feat .plan__for{color:var(--light-faint);border-color:rgba(230,212,170,.18)}
.plan__flag{
  position:absolute;top:-.55rem;right:clamp(1.7rem,2.4vw,2.4rem);transform:translateY(-50%);
  padding:.45rem 1rem;border-radius:999px;background:var(--gold);color:var(--green-deep);
  font-size:.67rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.plan__kicker{font-size:.69rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.plan__name{font-family:var(--serif);font-weight:500;font-size:1.65rem;line-height:1.2;color:var(--green);margin-top:.85rem}
.plan__price{font-family:var(--serif);font-size:2.5rem;line-height:1;color:var(--green);margin-top:1.2rem;letter-spacing:-.02em}
.plan__from{display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5rem}
.plan--feat .plan__from{color:var(--gold)}
.plan__price--ask{font-size:2rem;font-style:italic}
.plan__desc{margin-top:1.1rem;font-size:.97rem;color:var(--ink-soft);line-height:1.6}
.plan__list{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--hair);display:grid;gap:.65rem}
.plan__list li{position:relative;padding-left:1.35rem;font-size:.94rem;color:var(--ink-soft)}
.plan__list li::before{
  content:"";position:absolute;left:0;top:.5em;width:.45rem;height:.45rem;border-radius:50%;
  border:1px solid var(--gold);
}
.plan__for{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--hair);
  font-size:.85rem;color:var(--ink-soft);line-height:1.6;
}
.plan__for span:first-child{letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;font-weight:600;color:var(--ink-faint)}
.plan--feat .plan__for span:first-child{color:var(--gold)}
.plan__for{margin-bottom:1.8rem}
.plan__in .btn{margin-top:auto}

/* ── aanvraagformulier ─────────────────────────────────────── */
.enquiry{
  max-width:52rem;margin-inline:auto;padding:clamp(1.6rem,3.5vw,2.8rem);
  border-radius:var(--r-lg);background:var(--cream);border:1px solid var(--hair);
}
.enquiry__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.enquiry__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 1.4rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field__label{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  padding:.85rem 1rem;border-radius:var(--r-sm);border:1px solid var(--hair);background:var(--white);
  transition:border-color .3s var(--e),box-shadow .3s var(--e);
}
.field textarea{resize:vertical;min-height:7.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,187,134,.25)}
.enquiry__foot{margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem}
.enquiry__note{flex:1 1 16rem;font-size:.85rem;color:var(--ink-faint)}
.enquiry__note a{color:var(--green);border-bottom:1px solid var(--gold)}
.enquiry button[disabled]{opacity:.6;pointer-events:none}
.enquiry__status{margin-top:1rem;font-size:.95rem;min-height:1.2em}
.enquiry__status.is-ok{color:var(--green);font-weight:600}
.enquiry__status.is-err{color:#9b3b2e}
.enquiry__or{
  margin:clamp(3rem,5vw,4rem) 0 1.6rem;text-align:center;
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
@media (max-width:640px){
  .enquiry__grid{grid-template-columns:1fr}
  .enquiry__foot .btn{width:100%;justify-content:space-between}
}

/* ── reviews ────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.quote{
  padding:clamp(2rem,3.2vw,3rem);border-radius:var(--r-lg);
  background:var(--white);border:1px solid var(--hair);box-shadow:var(--shadow-soft);
}
.quote__stars{display:flex;gap:.35rem;margin-bottom:1.6rem;color:var(--gold)}
.quote__stars svg{width:1rem;height:1rem}
.quote blockquote p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);line-height:1.5;color:var(--green);
  text-wrap:pretty;
}

/* ── cta band ───────────────────────────────────────────────── */
.cta{position:relative;isolation:isolate;background:var(--green);padding:clamp(4.5rem,9vw,8rem) 0;overflow:hidden;text-align:center}
.cta__bg{position:absolute;inset:0;z-index:-1;opacity:.14}
.cta__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4)}
.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 100% at 50% 100%,rgba(212,187,134,.14),transparent 65%);
}
.cta__inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.cta__inner .h2{max-width:20ch}
.cta__inner p{max-width:52ch;color:var(--light)}
.cta__inner>div{margin-top:1.2rem}

/* ── contact ────────────────────────────────────────────────── */
.contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,1.6vw,1.4rem)}
.contactCard{
  display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(1.6rem,2.4vw,2.2rem) clamp(1.3rem,2vw,1.8rem);
  border-radius:var(--r-md);border:1px solid var(--hair);background:var(--cream);
  transition:transform .6s var(--e-out),background-color .6s var(--e-out),border-color .6s var(--e-out),box-shadow .6s var(--e-out);
  will-change:transform;
}
a.contactCard:hover{transform:translateY(-5px);background:var(--green);border-color:var(--green);box-shadow:var(--shadow-soft)}
a.contactCard:hover .contactCard__label{color:rgba(230,212,170,.6)}
a.contactCard:hover .contactCard__value{color:var(--cream)}
a.contactCard:hover .contactCard__ico{color:var(--gold);border-color:rgba(230,212,170,.35)}
.contactCard__ico{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:999px;
  border:1px solid var(--hair);color:var(--green);margin-bottom:.8rem;
  transition:color .6s var(--e-out),border-color .6s var(--e-out);
}
.contactCard__ico svg{width:1.2rem;height:1.2rem}
.contactCard__label{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);transition:color .6s var(--e-out)}
.contactCard__value{font-family:var(--serif);font-weight:500;font-size:1.22rem;color:var(--green);line-height:1.3;transition:color .6s var(--e-out);word-break:break-word}

/* ── footer ─────────────────────────────────────────────────── */
.footer{background:var(--green-deep);color:var(--light);padding:clamp(3.5rem,7vw,6rem) 0 2.5rem}
.footer__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(2.5rem,4vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid rgba(230,212,170,.14);
}
.footer__brand img{width:min(15rem,70%);height:auto}
.footer__tag{margin-top:1.6rem;max-width:34ch;font-size:.94rem;color:var(--light);line-height:1.7}
.footer__h{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem;font-weight:600}
.footer__list{display:grid;gap:.8rem;font-size:.96rem}
.footer__list a{color:var(--light);transition:color .4s var(--e)}
.footer__list a:hover{color:var(--gold-lt)}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;
  padding-top:2rem;font-size:.82rem;letter-spacing:.06em;color:rgba(247,245,240,.62);
}
.footer__bottom p{margin:0}

/* ── scroll reveal ──────────────────────────────────────────── */
[data-reveal]{
  opacity:0;transform:translate3d(0,2.2rem,0);filter:blur(6px);
  transition:opacity .9s var(--e-out),transform 1s var(--e-out),filter .9s var(--e-out);
}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
[data-reveal-delay="1"]{transition-delay:.09s}
[data-reveal-delay="2"]{transition-delay:.18s}
[data-reveal-delay="3"]{transition-delay:.27s}
[data-reveal-delay="4"]{transition-delay:.36s}
[data-reveal-delay="5"]{transition-delay:.45s}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1419px){
  .brand__name{font-size:.95rem}
}
@media (max-width:1180px){
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.75rem}
}
/* Onder 1280px past het menu niet meer naast het logo: hamburger. */
@media (max-width:1279px){
  .nav{display:none}
  .burger{display:block}
}
@media (max-width:1024px){
  .header__end .btn--sm{display:none}
  .plans{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}
  .plan--feat{order:-1}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:3rem}
  .split__media{max-width:32rem}
  .reasons{grid-template-columns:repeat(3,minmax(0,1fr))}
  .projects{grid-template-columns:1fr;max-width:32rem;margin-inline:auto}
  .sectionHead--row{grid-template-columns:1fr;align-items:start}
  .quotes{grid-template-columns:1fr}
  .hero__scroll{display:none}
}
@media (max-width:768px){
  html{scroll-padding-top:5rem}
  .header__bar{padding:.5rem .5rem .5rem .85rem}
  .brand__mark{height:1.9rem}
  .cards--4{grid-template-columns:1fr}
  .reasons{grid-template-columns:1fr;gap:2rem}
  .reasons__n{font-size:2.1rem}
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:1.6rem;row-gap:2.4rem}
  .steps::before,.steps::after{top:0;left:.25rem;width:1px;height:100%}
  .steps::after{background:linear-gradient(to bottom,var(--gold),rgba(212,187,134,.35));transform:scaleY(0);transform-origin:top}
  .steps.is-drawn::after{transform:scaleY(1)}
  .step__dot{top:.55rem;left:-1.6rem;transform:translateX(0) scale(0)}
  .steps.is-drawn .step__dot{transform:translateX(0) scale(1)}
  .contacts{grid-template-columns:1fr}
  .ticks{grid-template-columns:1fr}
    .hero__chips{gap:.55rem 1.2rem}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:space-between}
}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
  }
  [data-reveal]{opacity:1;transform:none;filter:none}
  .steps::after{transform:scaleX(1)}
  .step__dot{transform:translateY(-50%) scale(1)}
  .hero__media{transform:none !important}
}

@media print{
  .header,.menu,.grain,.hero__scroll,.cta__bg{display:none !important}
  body{background:#fff;color:#000}
  [data-reveal]{opacity:1;transform:none;filter:none}
}