:root{
  --ground:#F1F3EF;
  --surface:#FFFFFF;
  --surface-2:#E7EBE5;
  --ink:#16241F;
  --body:#2C3B35;
  --muted:#697A72;
  --line:#D3DAD3;
  --primary:#2E5E52;
  --primary-deep:#1D423A;
  --primary-ink:#F3F6F1;
  --accent:#C8871A;
  --accent-bright:#DFA02C;
  --focus:#2E5E52;

  --shell:1120px;
  --measure:66ch;

  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem;
  --fs-lg:1.1875rem; --fs-xl:1.5rem; --fs-2xl:2rem;
  --fs-3xl:2.75rem; --fs-hero:clamp(2.6rem,6.2vw,4.6rem);

  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem;
  --s5:3rem; --s6:4.5rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1714; --surface:#17211D; --surface-2:#1D2925;
    --ink:#E9EFE9; --body:#C3CFC8; --muted:#8C9C94; --line:#2C3A34;
    --primary:#6FAE9C; --primary-deep:#12241F; --primary-ink:#0F1714;
    --accent:#E9B653; --accent-bright:#F0C36B; --focus:#6FAE9C;
  }
}
:root[data-theme="dark"]{
  --ground:#0F1714; --surface:#17211D; --surface-2:#1D2925;
  --ink:#E9EFE9; --body:#C3CFC8; --muted:#8C9C94; --line:#2C3A34;
  --primary:#6FAE9C; --primary-deep:#12241F; --primary-ink:#0F1714;
  --accent:#E9B653; --accent-bright:#F0C36B; --focus:#6FAE9C;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--body);
  font-family:"Karla","Segoe UI",system-ui,sans-serif;
  font-size:var(--fs-base);line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  color:var(--ink);margin:0;line-height:1.13;text-wrap:balance;
  font-weight:600;letter-spacing:-.015em;
}
p{margin:0}
a{color:inherit}
img{max-width:100%}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem)}
.prose{max-width:var(--measure)}
.eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--accent)}

.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:66px}
.brand{display:flex;align-items:baseline;gap:.5rem;text-decoration:none}
.brand__mark{font-family:"Fraunces",serif;font-weight:700;font-size:1.3rem;color:var(--ink);letter-spacing:-.02em}
.brand__sub{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.nav__links{display:none;gap:var(--s3);align-items:center}
.nav__links a{text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:var(--body);padding-block:.35rem;border-bottom:2px solid transparent}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--accent)}
@media(min-width:900px){.nav__links{display:flex}}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:var(--fs-sm);padding:.7rem 1.15rem;border-radius:2px;text-decoration:none;border:1.5px solid transparent;transition:background .18s,color .18s,border-color .18s}
.btn--onDark{background:var(--accent-bright);color:#20180A;border-color:var(--accent-bright)}
.btn--onDark:hover{background:#fff;border-color:#fff}
.btn--outlineDark{border-color:rgba(255,255,255,.4);color:#fff}
.btn--outlineDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
a:focus-visible,button:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:2px}

.hero{background:#16342D;color:#E8F0EC;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -55% 45%;height:60vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(223,160,44,.20),rgba(223,160,44,0) 62%);pointer-events:none}
.hero__inner{padding-block:clamp(3.5rem,10vw,6.5rem);position:relative;z-index:1}
.hero h1{font-size:var(--fs-hero);color:#fff;max-width:15ch;margin-block:var(--s3)}
.hero h1 em{font-style:normal;color:var(--accent-bright)}
.hero__lead{font-size:var(--fs-lg);color:#CBDBD3;max-width:54ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16);font-size:var(--fs-sm);color:#A9C0B7}
.hero__meta strong{color:#fff;font-weight:600}

section{padding-block:clamp(3rem,7vw,var(--s6))}
.sec-head{margin-bottom:var(--s4)}
.sec-head h2{font-size:var(--fs-3xl);margin-top:.6rem;max-width:19ch}
.sec-head p{margin-top:var(--s2);color:var(--muted);max-width:var(--measure)}

.doors{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:760px){.doors{grid-template-columns:1fr 1fr}}
.door{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--primary);padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;gap:var(--s2)}
.door--ref{border-top-color:var(--accent)}
.door h3{font-size:var(--fs-xl)}
.door p{color:var(--body)}
.door a{margin-top:auto;padding-top:var(--s2);font-weight:600;font-size:var(--fs-sm);color:var(--primary);text-decoration:none;border-bottom:1.5px solid transparent;align-self:flex-start}
.door a:hover{border-bottom-color:var(--primary)}

/* stance */
.stance{background:var(--surface-2);border-block:1px solid var(--line)}
.stance__inner{display:grid;gap:var(--s3) var(--s5);grid-template-columns:1fr}
@media(min-width:840px){.stance__inner{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
.stance h2{font-size:var(--fs-2xl);max-width:14ch}
.stance p{max-width:60ch}
.stance p + p{margin-top:var(--s3)}

.services{border-top:1px solid var(--line)}
.svc{display:grid;gap:var(--s2) var(--s4);grid-template-columns:1fr;padding-block:var(--s4);border-bottom:1px solid var(--line)}
@media(min-width:820px){.svc{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}}
.svc h3{font-size:var(--fs-xl)}
.svc__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.tag{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted);border:1px solid var(--line);padding:.15rem .45rem;border-radius:2px}
.tag--remote{color:var(--primary);border-color:var(--primary)}
.svc__body p + p{margin-top:var(--s2)}
.svc__body ul{margin:var(--s2) 0 0;padding-left:1.1rem}
.svc__body li{margin-bottom:.35rem}

.steps{counter-reset:step;display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:720px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{padding-top:var(--s3);border-top:2px solid var(--primary)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:"Fraunces",serif;font-size:var(--fs-sm);font-weight:700;color:var(--accent);letter-spacing:.06em;display:block;margin-bottom:.5rem}
.step h3{font-size:var(--fs-lg);margin-bottom:.4rem}
.step p{font-size:var(--fs-sm);color:var(--muted)}

.about{background:var(--surface-2)}
.about__grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:900px){.about__grid{grid-template-columns:minmax(0,21rem) minmax(0,1fr);align-items:start}}
.portrait--filled{padding:0;border:1px solid var(--line);overflow:hidden}
.portrait--filled img{width:100%;height:100%;object-fit:cover;display:block}
.portrait{aspect-ratio:4/5;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:var(--s3);color:var(--muted);font-size:var(--fs-sm)}
.about__body p + p{margin-top:var(--s3)}

/* timeline */
.tl{margin-top:var(--s4);border-top:1px solid var(--line)}
.tl__row{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--s3);padding-block:var(--s2);border-bottom:1px solid var(--line);align-items:baseline}
.tl__yr{font-family:"Fraunces",serif;font-weight:600;color:var(--accent);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.tl__what{font-size:var(--fs-sm)}
.tl__what strong{color:var(--ink);font-weight:600}

.creds{margin-top:var(--s4);padding-top:var(--s3);border-top:2px solid var(--primary)}
.creds h3{font-size:var(--fs-lg);margin-bottom:.5rem}
.creds__intro{font-size:var(--fs-sm);color:var(--muted);max-width:58ch}
.creds__list{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.creds__list li{font-size:var(--fs-sm);padding-left:1.1rem;position:relative}
.creds__list li::before{content:"";position:absolute;left:0;top:.62em;width:.4rem;height:.4rem;background:var(--accent);border-radius:50%}
.creds__list strong{color:var(--ink);font-weight:600}

.facts{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:700px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{border-top:1px solid var(--line);padding-top:var(--s2)}
.fact dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
.fact dd{margin:.4rem 0 0;color:var(--ink);font-weight:500}

.contact{background:#16342D;color:#DCE8E2}
.contact h2{color:#fff;font-size:var(--fs-3xl);max-width:17ch}
.contact__lead{margin-top:var(--s2);color:#B4C8C0;max-width:52ch}
.contact__grid{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s4)}
@media(min-width:820px){.contact__grid{grid-template-columns:1.1fr .9fr}}
.ways{display:flex;flex-direction:column;gap:var(--s3)}
.way{border-top:1px solid rgba(255,255,255,.18);padding-top:var(--s2)}
.way dt{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;color:#8FAAA0;font-weight:700}
.way dd{margin:.35rem 0 0}
.way a{color:var(--accent-bright);text-decoration:none;font-weight:600;font-size:var(--fs-lg)}
.way a:hover{color:#fff;text-decoration:underline}
.way small{display:block;color:#9DB5AB;font-size:var(--fs-sm);margin-top:.2rem}
.note{border:1px solid rgba(255,255,255,.2);padding:var(--s3);font-size:var(--fs-sm);color:#C3D6CE;background:rgba(255,255,255,.04)}
.note strong{color:#fff;display:block;margin-bottom:.4rem;font-size:var(--fs-base)}

footer{padding-block:var(--s4);border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;align-items:flex-end}

.todo{display:inline-block;background:var(--accent);color:#1B1206;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .45rem;border-radius:2px;vertical-align:middle}
.contact .todo{background:var(--accent-bright);color:#20180A}

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

/* contactformulier */
.cform{display:flex;flex-direction:column;gap:.35rem}
.cform__intro{color:#B4C8C0;font-size:var(--fs-sm);margin-bottom:var(--s2)}
.cform label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.12em;
color:#8FAAA0;font-weight:700;margin-top:var(--s2)}
.cform label span{text-transform:none;letter-spacing:0;font-weight:400;color:#7C948B}
.cform input,.cform textarea{
  font:inherit;font-size:var(--fs-base);color:#fff;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:.6rem .7rem;width:100%}
.cform textarea{resize:vertical;min-height:7rem}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--accent-bright);outline-offset:1px;
background:rgba(255,255,255,.12)}
.cform button{
  margin-top:var(--s3);align-self:flex-start;cursor:pointer;
  font:inherit;font-weight:600;font-size:var(--fs-sm);padding:.75rem 1.5rem;border-radius:2px;
  background:var(--accent-bright);color:#20180A;border:1.5px solid var(--accent-bright)}
.cform button:hover{background:#fff;border-color:#fff}
.cform__note{margin-top:var(--s2);font-size:var(--fs-sm);color:#9DB5AB}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* bedankt- en foutmelding */
.melding{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);
padding:var(--s3);margin-bottom:var(--s3)}
.melding strong{display:block;color:#fff;font-size:var(--fs-lg);
font-family:"Fraunces",Georgia,serif;margin-bottom:.35rem}
.melding--fout{border-color:#E08A7E}
.contact__col{display:flex;flex-direction:column;align-self:start}
.melding{align-self:start}
.about__body a,.svc__body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.about__body a:hover,.svc__body a:hover{color:var(--ink)}