:root{
  --forest:#0b1f19;
  --forest-2:#132b23;
  --navy:#1c2242;
  --cream:#f7f3ea;
  --cream-dim:#ece5d6;
  --gold:#c9a44c;
  --muted:#aab3a9;
  --muted-dark:#6b6f68;
  --line:rgba(247,243,234,0.14);
  --line-dark:rgba(12,31,25,0.12);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:#2d2d2a;
  font-family:'Work Sans', sans-serif; font-size:16px; line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; line-height:1.04; margin:0; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
section{position:relative;}
::selection{background:var(--gold); color:var(--forest);}

.reveal{opacity:0; transform:translateY(42px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);}
.reveal.visible{opacity:1; transform:translateY(0);}
.reveal-mask{overflow:hidden; display:block;}
.reveal-mask .inner{transform:translateY(102%); display:inline-block; transition:transform 1s var(--ease);}
.reveal-mask.visible .inner{transform:translateY(0);}

/* ===== NAV ===== */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:28px 0;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
header.nav.on-dark .wordmark, header.nav.on-dark .nav-links a, header.nav.on-dark .nav-cta{color:var(--cream);}
header.nav.on-dark .nav-cta{border-color:rgba(247,243,234,.4);}
header.nav.scrolled{
  background:rgba(247,243,234,0.88); backdrop-filter:blur(14px); padding:16px 0; box-shadow:0 1px 0 var(--line-dark);
}
header.nav.scrolled.on-dark{background:rgba(11,31,25,0.88); box-shadow:0 1px 0 var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.wordmark{font-family:'Fraunces'; font-size:21px; font-weight:600; color:var(--forest); transition:color .4s;}
.wordmark .dot{color:var(--gold);}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{font-size:13.5px; font-weight:500; position:relative; color:var(--forest); transition:color .4s;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:currentColor; transition:width .35s var(--ease);}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  border:1px solid var(--line-dark); color:var(--forest); padding:10px 20px; border-radius:100px;
  font-size:13px; font-weight:600; transition:all .4s var(--ease);
}
.nav-cta:hover{background:var(--gold); border-color:var(--gold); color:var(--forest);}
@media (max-width:880px){.nav-links{display:none;}}

/* ===== HERO (home, full height) ===== */
.hero{
  min-height:100vh; background:var(--forest); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding-top:150px; padding-bottom:60px; overflow:hidden; position:relative;
}
.hero-grain{position:absolute; inset:0; opacity:.035; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;}
.hero-ring{
  position:absolute; top:50%; right:-18%; width:900px; height:900px; border-radius:50%;
  border:1px solid rgba(247,243,234,.08); transform:translateY(-50%);
}
.hero-ring.r2{width:650px; height:650px; border-color:rgba(247,243,234,.12);}
.hero-ring.r3{width:400px; height:400px; border-color:rgba(201,164,76,.22);}

.hero-grid{display:grid; grid-template-columns:1fr auto; align-items:flex-end; gap:40px; position:relative; z-index:1;}
.hero-eyebrow{display:flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:30px;}
.hero-eyebrow .ln{width:34px; height:1px; background:var(--gold);}
.hero h1{font-size:clamp(2.6rem, 6vw, 5.4rem); max-width:820px; font-weight:500;}
.hero h1 em{font-style:italic; font-weight:300; color:var(--gold);}
.hero-side{text-align:right; max-width:220px; padding-bottom:10px; opacity:0; transform:translateY(16px);}
.hero-side p{font-size:14px; color:var(--muted); line-height:1.7;}

.hero-bottom{margin-top:56px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; position:relative; z-index:1;}
.hero-lead{max-width:480px; font-size:1.08rem; color:var(--muted); opacity:0; transform:translateY(16px);}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; opacity:0; transform:translateY(16px);}

/* ===== PAGE HERO (subpages, shorter) ===== */
.page-hero{
  background:var(--forest); color:var(--cream); padding:170px 0 90px; overflow:hidden; position:relative;
}
.page-hero .hero-grain, .page-hero .hero-ring{ }
.page-hero .kicker-light{display:flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:26px; position:relative; z-index:1;}
.page-hero .kicker-light .ln{width:34px; height:1px; background:var(--gold);}
.page-hero h1{font-size:clamp(2.2rem,5vw,4.2rem); max-width:760px; font-weight:500; position:relative; z-index:1;}
.page-hero h1 em{font-style:italic; font-weight:300; color:var(--gold);}
.page-hero p.lead{margin-top:26px; max-width:560px; font-size:1.08rem; color:var(--muted); position:relative; z-index:1;}

/* ===== BUTTONS ===== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:100px;
  font-weight:600; font-size:14.5px; background:var(--cream); color:var(--forest); overflow:hidden; isolation:isolate;
}
.btn span{position:relative; z-index:2;}
.btn::before{content:''; position:absolute; inset:0; background:var(--gold); z-index:1; transform:translateX(-101%); transition:transform .5s var(--ease);}
.btn:hover::before{transform:translateX(0);}
.btn.ghost{background:transparent; color:var(--cream); border:1px solid rgba(247,243,234,.3);}
.btn.ghost::before{background:rgba(247,243,234,.12);}
.btn.on-light{background:var(--forest); color:var(--cream);}
.btn.on-light::before{background:var(--gold);}
.btn.on-light:hover{color:var(--forest);}
.btn.dark{background:var(--forest); color:var(--cream);}
.btn.dark::before{background:var(--gold);}
.btn.dark:hover{color:var(--forest);}
.btn.outline-dark{background:transparent; color:var(--forest); border:1.5px solid var(--line-dark);}
.btn.outline-dark::before{background:var(--forest);}
.btn.outline-dark:hover{color:var(--cream);}

/* ===== MARQUEE ===== */
.marquee-wrap{background:var(--forest-2); border-top:1px solid var(--line); overflow:hidden; padding:16px 0;}
.marquee{display:flex; gap:56px; width:max-content; animation:scroll 30s linear infinite;}
.marquee span{font-family:'Fraunces'; font-style:italic; font-weight:500; font-size:17px; color:rgba(247,243,234,.5); white-space:nowrap;}
.marquee span b{color:var(--gold); font-style:normal; font-weight:600; margin-right:10px;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ===== SECTION ===== */
.section-pad{padding:130px 0;}
.row-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:70px; flex-wrap:wrap;}
.kicker{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin-bottom:18px;}
.kicker .ln{width:24px; height:1px; background:var(--navy);}
.row-head h2{font-size:clamp(2.1rem,4.4vw,3.6rem); color:var(--forest);}
.row-head p{max-width:320px; font-size:14px; color:var(--muted-dark); line-height:1.7;}

/* ===== SERVICES / LIST ROWS ===== */
.services{border-top:1px solid var(--line-dark);}
.service-row{
  display:grid; grid-template-columns:100px 1.1fr 1fr 44px; align-items:center; gap:28px;
  padding:40px 0; border-bottom:1px solid var(--line-dark); transition:padding-left .4s var(--ease);
}
.service-row:hover{padding-left:14px;}
.service-num{font-family:'Fraunces'; font-style:italic; font-size:15px; color:var(--gold);}
.service-title{font-family:'Fraunces'; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500; color:var(--forest);}
.service-desc{color:var(--muted-dark); font-size:14.5px; max-width:420px;}
.service-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--forest);
  transition:all .4s var(--ease);
}
.service-row:hover .service-arrow{background:var(--forest); border-color:var(--forest); color:var(--cream); transform:rotate(45deg);}
@media (max-width:820px){.service-row{grid-template-columns:40px 1fr 36px;} .service-desc{display:none;} .service-row:hover{padding-left:0;}}

/* ===== STEPS (werkwijze) ===== */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
.step-box{background:var(--cream); padding:40px 30px;}
.step-box .n{font-family:'Fraunces'; font-style:italic; color:var(--gold); font-size:15px;}
.step-box h3{font-size:1.25rem; margin-top:14px; color:var(--forest); font-weight:500;}
.step-box p{font-size:13.5px; color:var(--muted-dark); margin-top:12px; line-height:1.6;}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;}}
@media (max-width:540px){.steps{grid-template-columns:1fr;}}

/* ===== ABOUT ===== */
.about-wrap{background:var(--forest); color:var(--cream);}
.about-split{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;}
.about-quote{font-family:'Fraunces'; font-size:clamp(1.6rem,3vw,2.4rem); font-weight:500; line-height:1.25;}
.about-quote em{font-style:italic; color:var(--gold); font-weight:300;}
.about-who{margin-top:28px; font-size:13px; color:var(--muted); letter-spacing:.04em;}
.about-body p{font-size:1.02rem; color:var(--muted); margin:0 0 20px; line-height:1.75;}
@media (max-width:860px){.about-split{grid-template-columns:1fr; gap:46px;}}

/* ===== PROSE (blog posts, privacy policy) ===== */
.prose{max-width:720px; margin:0 auto;}
.prose p{font-size:1.05rem; color:#4a4a45; line-height:1.85; margin:0 0 22px;}
.prose h2{font-size:1.7rem; color:var(--forest); margin:48px 0 18px; font-weight:500;}
.prose h3{font-size:1.3rem; color:var(--forest); margin:34px 0 14px; font-weight:500;}
.prose ul{padding-left:22px; margin:0 0 22px;}
.prose li{font-size:1.02rem; color:#4a4a45; line-height:1.8; margin-bottom:8px;}
.prose a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;}

/* ===== CARDS (klantcases) ===== */
.case-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
.case-card{background:var(--cream); padding:46px;}
.case-card .n{font-family:'Fraunces'; font-style:italic; color:var(--gold); font-size:14px;}
.case-card h3{font-size:1.5rem; margin-top:16px; color:var(--forest); font-weight:500;}
.case-card p{font-size:14.5px; color:var(--muted-dark); margin-top:16px; line-height:1.75;}
@media (max-width:860px){.case-grid{grid-template-columns:1fr;}}

/* ===== REGION STRIP ===== */
.region-strip{border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:26px 0; background:var(--cream-dim);}
.region-strip .wrap{display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:13.5px; color:var(--muted-dark);}
.region-strip a{color:var(--forest); border-bottom:1px solid transparent; transition:border-color .3s;}
.region-strip a:hover{border-color:var(--gold);}

/* ===== REGION GRID (full list, e.g. footer page or region overview) ===== */
.region-list{display:flex; flex-wrap:wrap; gap:10px;}
.region-list a{
  padding:9px 18px; border-radius:100px; border:1px solid var(--line-dark); background:var(--cream);
  font-size:13.5px; color:var(--forest); transition:all .3s var(--ease);
}
.region-list a:hover{background:var(--forest); color:var(--cream); border-color:var(--forest);}

/* ===== CONTACT ===== */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px;}
.contact-info{display:flex; flex-direction:column; gap:26px;}
.contact-item .label{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:8px;}
.contact-item .value{font-family:'Fraunces'; font-size:1.3rem; color:var(--forest); font-weight:500;}
.form-field{margin-bottom:22px;}
.form-field label{display:block; font-size:13px; color:var(--muted-dark); margin-bottom:8px; letter-spacing:.02em;}
.form-field input, .form-field textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--line-dark); border-radius:10px; font-family:'Work Sans';
  font-size:15px; background:var(--cream); color:#2d2d2a; transition:border-color .3s;
}
.form-field input:focus, .form-field textarea:focus{outline:none; border-color:var(--forest);}
.form-field textarea{resize:vertical; min-height:140px;}
.submit-btn{border:none; cursor:pointer; font-family:'Work Sans';}

/* ===== CTA ===== */
.cta{padding:160px 0; text-align:center;}
.cta h2{font-size:clamp(2.4rem,6.5vw,5.6rem); color:var(--forest); font-weight:500;}
.cta h2 em{font-style:italic; font-weight:300; color:var(--gold);}
.cta p{margin-top:24px; color:var(--muted-dark); font-size:1.05rem;}
.cta .btn{margin-top:40px; background:var(--forest); color:var(--cream);}
.cta .btn::before{background:var(--gold);}
.cta .btn:hover{color:var(--forest);}

/* ===== BLOG LIST ===== */
.post-list{border-top:1px solid var(--line-dark);}
.post-row{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:34px 0; border-bottom:1px solid var(--line-dark); transition:padding-left .4s var(--ease);}
.post-row:hover{padding-left:14px;}
.post-row h3{font-family:'Fraunces'; font-size:1.4rem; font-weight:500; color:var(--forest); max-width:600px;}
.post-row .arrow{font-size:16px; color:var(--forest);}

/* ===== BREADCRUMB ===== */
.crumb{font-size:12.5px; color:var(--muted); display:flex; gap:8px; align-items:center; position:relative; z-index:1; margin-bottom:20px;}
.crumb a{color:var(--muted); border-bottom:1px solid transparent;}
.crumb a:hover{border-color:var(--gold); color:var(--cream);}

/* ===== FOOTER ===== */
footer{background:var(--forest); color:var(--cream); padding:70px 0 34px;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:56px; border-bottom:1px solid var(--line);}
.footer-word{font-family:'Fraunces'; font-size:24px; font-weight:600;}
.footer-word .dot{color:var(--gold);}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:16px; font-weight:600;}
.footer-col a{display:block; font-size:14.5px; margin-bottom:11px; color:var(--cream);}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; gap:10px;}

@media (max-width:600px){
  .section-pad{padding:86px 0;}
  .cta{padding:100px 0;}
  .hero-side{display:none;}
  .contact-grid{grid-template-columns:1fr; gap:46px;}
}