:root{
  --bg: #ECEAE0;
  --paper: #F8F7F1;
  --ink: #1F2A22;
  --moss: #3C6E47;
  --moss-dark: #2A4E33;
  --rust: #A64B2A;
  --line: #C9C6B2;
  --line-soft: #DEDBCB;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.display{font-family:'Fraunces', serif;}
.mono{font-family:'IBM Plex Mono', monospace;}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--moss-dark);
}
.tag::before{content:"·"; color:var(--rust); font-size:18px; line-height:0;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(236,234,224,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; gap:20px; flex-wrap:wrap;
}
.logo{
  font-family:'Fraunces', serif; font-weight:600; font-size:19px;
  display:flex; align-items:center; gap:8px; text-decoration:none;
}
.logo-img{height:38px; width:auto; display:block;}
.logo .sci{font-style:italic; font-weight:400; color:var(--moss); font-size:13px;}
.navlinks{display:flex; gap:26px; font-size:14px; align-items:center;}
.navlinks a{text-decoration:none; position:relative; padding-bottom:2px; color:var(--ink);}
.navlinks a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--rust); transition:width .25s ease;
}
.navlinks a:hover::after, .navlinks a.active::after{width:100%;}
.navlinks a.active{color:var(--moss-dark);}
.navlinks a:focus-visible, .btn:focus-visible, .card:focus-visible, .specimen:focus-visible{outline:2px solid var(--moss); outline-offset:3px;}
.navcta{
  font-family:'IBM Plex Mono', monospace; font-size:13px;
  border:1px solid var(--ink); padding:8px 16px; border-radius:2px;
  text-decoration:none; transition:background .2s, color .2s; white-space:nowrap;
}
.navcta:hover{background:var(--ink); color:var(--paper);}
.navwrap{display:flex; align-items:center; gap:18px;}

@media (max-width:800px){
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 0;
  }
  .navlinks.open{display:flex;}
  .navlinks a{width:100%; padding:12px 32px;}
  .navtoggle{display:block !important;}
}
.navtoggle{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink); font-family:'IBM Plex Mono',monospace;}

/* ---------- DROPDOWN (Diensten submenu) ---------- */
.has-dropdown{position:relative;}
.has-dropdown > a{display:flex; align-items:center; gap:5px;}
.caret{
  font-size:9px; position:relative; top:1px; cursor:pointer;
  padding:4px; margin:-4px; border-radius:2px;
}
.dropdown-menu{
  display:none; position:absolute; top:100%; left:-16px; margin-top:0; padding-top:8px;
  z-index:60; width:max-content; max-width:min(340px, 85vw);
}
.dropdown-menu::before{
  /* invisible bridge so the mouse never fully leaves the hover area between trigger and panel */
  content:""; position:absolute; top:-8px; left:0; right:0; height:8px;
}
.dropdown-menu-box{
  background:var(--paper); border:1px solid var(--line); box-shadow:0 10px 28px rgba(31,42,34,0.10);
  padding:10px 8px;
}
.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu,
.has-dropdown.open > .dropdown-menu{display:block;}

.dropdown-row{
  display:flex; flex-direction:column; align-items:stretch; gap:1px;
}
.dropdown-row a{
  display:block; padding:9px 14px; font-size:13.5px; text-decoration:none;
  color:var(--ink); white-space:nowrap; border-radius:2px;
}
.dropdown-row a::after{content:none;}
.dropdown-row a:hover{background:var(--bg); color:var(--moss-dark);}

/* Nested flyout (Soortspecifiek onderzoek) — opens to the right of the whole Diensten
   panel (not just its own trigger), and lists species as a downward/vertical list. */
.has-dropdown-nested{display:block;}
.has-dropdown-nested > a{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.has-dropdown-nested > .dropdown-menu{
  top:0; left:100%; margin-top:0; padding-top:0; padding-left:8px; max-width:min(260px, 90vw);
}
.has-dropdown-nested > .dropdown-menu::before{
  top:0; left:-8px; right:auto; bottom:0; width:8px; height:auto;
}

@media (max-width:800px){
  .has-dropdown{position:static;}
  .dropdown-menu{
    position:static; padding:0 0 10px; width:auto; max-width:none;
  }
  .dropdown-menu::before{content:none;}
  .dropdown-menu-box{background:transparent; border:none; box-shadow:none; padding:0;}
  .dropdown-row a{padding:8px 32px;}
  .has-dropdown-nested > a{padding:8px 32px; justify-content:space-between;}
  .has-dropdown-nested > .dropdown-menu{padding-left:16px; padding-top:0;}
}

/* ---------- HERO (home) ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 72px;
  border-bottom:1px solid var(--line);
}
.contours{position:absolute; inset:0; opacity:0.35; pointer-events:none;}
.hero-inner{position:relative; z-index:2;}
.logbook{
  display:flex; flex-wrap:wrap; gap:22px; margin-bottom:28px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--moss-dark);
}
.logbook span{border-right:1px solid var(--line); padding-right:22px;}
.logbook span:last-child{border-right:none;}
h1.display{
  font-size:clamp(36px, 5.6vw, 64px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.01em;
  max-width:820px;
}
h1.display em{font-style:italic; font-weight:400; color:var(--moss);}
.lede{
  max-width:540px; margin-top:22px; font-size:17px; color:#3A3F35;
}
.hero-ctas{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.btn{
  font-family:'IBM Plex Mono', monospace; font-size:13.5px;
  padding:13px 24px; border-radius:2px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.btn-primary{background:var(--moss); color:var(--paper); border:1px solid var(--moss);}
.btn-primary:hover{background:var(--moss-dark); transform:translateY(-1px);}
.btn-rust{background:var(--rust); color:var(--paper); border:1px solid var(--rust);}
.btn-rust:hover{background:#8A3E22; transform:translateY(-1px);}
.btn-ghost{border:1px solid var(--ink); color:var(--ink); background:transparent;}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  padding:64px 0 52px; border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.page-hero h1{
  font-family:'Fraunces', serif; font-weight:500; font-size:clamp(32px,4.4vw,52px);
  margin-top:10px; max-width:720px;
}
.page-hero .lede{margin-top:16px;}

/* ---------- SECTION HEADERS ---------- */
section{padding:88px 0;}
.sec-head{margin-bottom:52px; max-width:640px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.sec-head h2{
  font-family:'Fraunces', serif; font-weight:500; font-size:clamp(28px,3.4vw,40px);
  margin-top:10px;
}
.sec-head-text{max-width:640px;}

/* ---------- SPECIMEN / TEAM CARDS ---------- */
.people{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media (max-width:760px){.people{grid-template-columns:1fr;}}
.specimen{
  background:var(--paper); border:1px solid var(--line);
  padding:30px; position:relative;
}
.specimen::before{
  content:""; position:absolute; top:0; left:24px; width:36px; height:6px;
  background:var(--line-soft); border-radius:0 0 3px 3px;
}
.specimen-tab{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--rust);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
}
.avatar{
  width:88px; height:88px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg, var(--moss), var(--moss-dark));
  margin-bottom:18px; display:flex; align-items:center; justify-content:center;
  color:var(--paper); font-family:'Fraunces',serif; font-size:26px; font-weight:600;
}
.specimen h3{font-family:'Fraunces', serif; font-size:22px; font-weight:600;}
.specimen .sci{font-style:italic; color:var(--moss); font-size:14px; display:block; margin-top:2px; margin-bottom:14px;}
.specimen p{font-size:14.5px; color:#3A3F35; margin-bottom:16px;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  border:1px solid var(--line); padding:5px 10px; border-radius:20px; color:var(--moss-dark);
}
.zzp-note{
  display:flex; gap:14px; align-items:flex-start; background:var(--paper);
  border:1px solid var(--line); border-left:3px solid var(--rust);
  padding:20px 22px; margin-top:36px; max-width:720px; font-size:14.5px; color:#3A3F35;
}

/* ---------- SERVICES ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr;}}
.service{
  background:var(--paper); padding:30px 26px; transition:background .2s ease;
}
.service:hover{background:#F1EFE4;}
.service .num{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--rust);}
.service h3{font-family:'Fraunces', serif; font-size:19px; font-weight:600; margin:10px 0 8px;}
.service p{font-size:14px; color:#3A3F35;}
.service-cat{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--moss-dark); margin:56px 0 0px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.service-cat:first-child{margin-top:0;}

/* ---------- PROCESS ---------- */
.process{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
@media (max-width:900px){.process{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.process{grid-template-columns:1fr;}}
.step{position:relative; padding-top:20px; border-top:2px solid var(--moss);}
.step .stepnum{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--rust); display:block; margin-bottom:10px;
}
.step h4{font-family:'Fraunces', serif; font-size:18px; font-weight:600; margin-bottom:8px;}
.step p{font-size:14px; color:#3A3F35;}

/* ---------- CASES / PROJECTS ---------- */
.cases{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.case{
  background:var(--paper); padding:26px 28px;
  display:grid; grid-template-columns:140px 1fr auto; gap:22px; align-items:center;
  text-decoration:none; color:inherit; transition:background .2s;
}
.case:hover{background:#F1EFE4;}
@media (max-width:700px){.case{grid-template-columns:1fr; gap:8px;}}
.case .loc{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--moss-dark);}
.case h4{font-family:'Fraunces', serif; font-size:18px; font-weight:600;}
.case p{font-size:13.5px; color:#3A3F35; margin-top:4px;}
.case .result{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--rust); white-space:nowrap;
}
.project-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
@media (max-width:760px){.project-grid{grid-template-columns:1fr;}}
.project-card{background:var(--paper); border:1px solid var(--line);}
.project-photo{
  height:180px; background:linear-gradient(135deg, var(--line-soft), var(--line));
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:#8B8875; text-transform:uppercase; letter-spacing:0.08em;
}
.project-body{padding:24px 26px;}
.project-body .loc{margin-bottom:8px;}
.project-body h3{font-family:'Fraunces', serif; font-size:20px; font-weight:600; margin-bottom:8px;}
.project-body p{font-size:14px; color:#3A3F35; margin-bottom:14px;}

/* ---------- NEWS ---------- */
.news-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.news-item{
  background:var(--paper); padding:28px; display:grid; grid-template-columns:130px 1fr; gap:24px;
  text-decoration:none; color:inherit; transition:background .2s;
}
.news-item:hover{background:#F1EFE4;}
@media (max-width:640px){.news-item{grid-template-columns:1fr; gap:8px;}}
.news-date{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--rust);}
.news-item h3{font-family:'Fraunces', serif; font-size:19px; font-weight:600; margin-bottom:8px;}
.news-item p{font-size:14px; color:#3A3F35;}
.news-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--moss-dark); margin-bottom:6px; display:block;}

/* ---------- CONTACT ---------- */
.contact-box{
  background:var(--ink); color:var(--paper); border-radius:4px;
  padding:56px 44px; position:relative; overflow:hidden;
}
.contact-box h2{font-family:'Fraunces', serif; font-weight:500; font-size:clamp(26px,3.2vw,38px); max-width:520px;}
.contact-box p.lede2{color:#C7CBC0; max-width:480px; margin-top:14px; font-size:15px;}
form{margin-top:34px; display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:640px;}
form .full{grid-column:1 / -1;}
@media (max-width:600px){form{grid-template-columns:1fr;}}
label{font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:#9CA396; display:block; margin-bottom:6px;}
input, textarea, select{
  width:100%; background:transparent; border:1px solid #445045; color:var(--paper);
  padding:11px 12px; font-family:'IBM Plex Sans', sans-serif; font-size:14px; border-radius:2px;
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--moss);}
textarea{resize:vertical; min-height:90px;}
select option{background:var(--ink);}
.contact-info{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
@media (max-width:700px){.contact-info{grid-template-columns:1fr;}}
.contact-info-item{border-top:2px solid var(--moss); padding-top:16px;}
.contact-info-item .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--rust); display:block; margin-bottom:8px;}
.contact-info-item p{font-size:14.5px;}

footer{padding:40px 0; font-family:'IBM Plex Mono', monospace; font-size:12px; color:#6B7264;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line);}

/* ---------- PHOTO PLACEHOLDER ---------- */
.photo{
  background:
    repeating-linear-gradient(135deg, transparent, transparent 18px, rgba(31,42,34,0.05) 18px, rgba(31,42,34,0.05) 19px),
    linear-gradient(135deg, #DAD6C4, #B9C2AC);
  display:flex; align-items:flex-end; position:relative; overflow:hidden;
}
.photo-label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--moss-dark); background:rgba(248,247,241,0.85); padding:7px 12px; margin:14px;
  border:1px solid var(--line);
}

/* ---------- PHOTO HERO (ecoresult-style) ---------- */
.photo-hero{
  height:min(78vh, 640px); min-height:420px;
  position:relative; display:flex; align-items:flex-end;
  border-bottom:1px solid var(--line);
}
.photo-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(31,42,34,0.82) 0%, rgba(31,42,34,0.35) 45%, rgba(31,42,34,0.05) 75%);
}
.photo-hero .photo-label{position:absolute; top:0; right:0; margin:20px;}
.photo-hero-inner{position:relative; z-index:2; padding:0 0 56px; color:var(--paper); width:100%;}
.photo-hero .logbook{color:#CBD3C4;}
.photo-hero .logbook span{border-right-color:rgba(255,255,255,0.2);}
.photo-hero h1.display{color:var(--paper);}
.photo-hero h1.display em{color:#B9D4BE;}
.photo-hero .lede{color:#D9DDD1;}

/* ---------- MISSION SPLIT ---------- */
.mission-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:800px){.mission-split{grid-template-columns:1fr; gap:32px;}}
.mission-split .photo{aspect-ratio:4/3; border:1px solid var(--line);}
.mission-split h2{font-family:'Fraunces', serif; font-weight:500; font-size:clamp(26px,3vw,36px); margin:12px 0 18px; line-height:1.15;}
.mission-split p{font-size:15.5px; color:#3A3F35; margin-bottom:14px;}

/* ---------- STATS BAR ---------- */
.stats-bar{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:700px){.stats-bar{grid-template-columns:1fr;}}
.stat{padding:40px 32px; border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat .num{font-family:'Fraunces', serif; font-weight:500; font-size:clamp(36px,4.4vw,54px); color:var(--moss);}
.stat .lbl{font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--moss-dark); margin-top:6px; display:block;}

/* ---------- HIGHLIGHT CARDS (3-up, photo topped) ---------- */
.highlight-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){.highlight-grid{grid-template-columns:1fr;}}
.highlight-card{background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column;}
.highlight-card .photo{aspect-ratio:16/10;}
.highlight-card-body{padding:22px 24px; display:flex; flex-direction:column; gap:8px; flex:1;}
.highlight-card-body h3{font-family:'Fraunces', serif; font-size:19px; font-weight:600;}
.highlight-card-body p{font-size:14px; color:#3A3F35; flex:1;}
.highlight-card-body a{font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--rust); text-decoration:none; margin-top:6px;}
.highlight-card-body a:hover{text-decoration:underline;}

/* ---------- QUOTE BLOCK ---------- */
.quote-block{
  max-width:760px; margin:28px 0 8px; position:relative; padding-left:28px;
  border-left:2px solid var(--moss);
}
.quote-block .mark{
  font-family:'Fraunces', serif; font-size:44px; color:var(--rust); line-height:0.5;
  display:block; margin-bottom:6px;
}
.quote-block p{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(20px,2.6vw,28px); line-height:1.35; color:var(--ink);
}
.quote-block cite{
  display:block; margin-top:14px; font-family:'IBM Plex Mono', monospace; font-style:normal;
  font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--moss-dark);
}
.page-hero .quote-block{border-left-color:var(--moss);}

/* ---------- FEATURED SERVICE (horizontal card) ---------- */
.featured-service{flex-direction:row; align-items:stretch;}
.featured-service .photo{aspect-ratio:auto; width:220px; flex:none;}
.featured-service .highlight-card-body{justify-content:center;}
@media (max-width:640px){
  .featured-service{flex-direction:column;}
  .featured-service .photo{width:100%; aspect-ratio:16/9;}
}