/* ============================================
   HOFFMANN VASTGOED — projectontwikkeling
   ============================================ */

:root{
  --ink:#14201c;          /* diep dennengroen-zwart */
  --forest:#1f3a30;       /* dennengroen */
  --forest-2:#2c5445;     /* iets lichter */
  --sand:#f6f3ec;         /* warm gebroken wit */
  --sand-2:#ece6d9;       /* iets dieper zand */
  --paper:#fbfaf6;        /* bijna wit */
  --clay:#b06a45;         /* terracotta accent */
  --clay-soft:#c98a67;
  --line:rgba(20,32,28,.12);
  --line-light:rgba(246,243,236,.16);
  --muted:#5c6b64;
  --muted-light:rgba(246,243,236,.7);
  --serif:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --wrap:1240px;
  --r:2px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* ---- Typography ---- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:clamp(1.3rem,2vw,1.75rem)}
.eyebrow{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--clay);
  display:inline-block;
}
.eyebrow.on-dark{color:var(--clay-soft)}
em{font-style:italic}
.lead{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;color:var(--muted)}
.on-dark .lead{color:var(--muted-light)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-size:.9rem;font-weight:600;
  letter-spacing:.01em;padding:15px 30px;border-radius:var(--r);
  cursor:pointer;border:1px solid transparent;
  transition:all .3s var(--ease);white-space:nowrap;
}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-solid{background:var(--forest);color:var(--sand)}
.btn-solid:hover{background:var(--ink)}
.btn-clay{background:var(--clay);color:#fff}
.btn-clay:hover{background:#9a5838}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--sand);border-color:var(--ink)}
.btn-ghost.on-dark{border-color:var(--line-light);color:var(--sand)}
.btn-ghost.on-dark:hover{background:var(--sand);color:var(--ink);border-color:var(--sand)}

/* ============================================
   NAV
   ============================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:22px 0;transition:all .4s var(--ease);
}
.nav.scrolled{
  padding:14px 0;background:rgba(251,250,246,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{
  display:flex;align-items:center;gap:13px;color:var(--sand);
  transition:color .4s var(--ease);
}
.nav.scrolled .brand{color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:38px}
.nav-links a{
  font-size:.9rem;font-weight:500;color:var(--sand);
  position:relative;transition:color .3s var(--ease);
}
.nav-links a:not(.nav-cta)::after{
  content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;
  background:currentColor;transition:width .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after{width:100%}
.nav.scrolled .nav-links a{color:var(--ink)}
.nav-cta{
  padding:10px 22px;border:1px solid var(--line-light);border-radius:var(--r);
  transition:all .3s var(--ease);
}
.nav.scrolled .nav-cta{border-color:var(--line)}
.nav-cta:hover{background:var(--clay);border-color:var(--clay);color:#fff!important}
.nav.scrolled .nav-cta:hover{color:#fff!important}
.burger{
  display:none;flex-direction:column;gap:5px;background:none;border:none;
  cursor:pointer;padding:6px;z-index:1100;
}
.burger span{width:26px;height:2px;background:var(--sand);transition:all .3s var(--ease)}
.nav.scrolled .burger span{background:var(--ink)}
.mobile-menu{
  position:fixed;inset:0;background:var(--forest);z-index:1050;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:28px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{font-family:var(--serif);font-size:2rem;color:var(--sand)}
.mobile-menu a:hover{color:var(--clay-soft)}

/* ============================================
   HERO
   ============================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,32,28,.55) 0%,rgba(20,32,28,.25) 40%,rgba(20,32,28,.85) 100%);
}
.hero-bg .ph,.hero-bg>img{width:100%;height:100%;object-fit:cover}
.hero-content{position:relative;z-index:2;padding-bottom:80px;padding-top:140px;width:100%}
.hero h1{color:var(--sand);max-width:16ch;margin:22px 0 28px}
.hero .lead{color:var(--sand);opacity:.92;max-width:52ch;margin-bottom:40px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.hero-scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--sand);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.8;
}
.hero-scroll .line{width:1px;height:44px;background:var(--sand);animation:scrollLine 2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================
   PLACEHOLDER IMAGES
   ============================================ */
.ph{
  background:
    radial-gradient(circle at 30% 25%, rgba(176,106,69,.10) 0%, transparent 45%),
    linear-gradient(150deg, var(--forest) 0%, var(--forest-2) 55%, var(--ink) 100%);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted-light);position:relative;overflow:hidden;
}
/* Subtiel Hoffmann-monogram als watermerk */
.ph::before{
  content:'H';
  position:absolute;
  font-family:var(--serif);
  font-size:min(38vw,220px);
  line-height:1;
  color:rgba(246,243,236,.05);
  z-index:0;
  user-select:none;
}
.ph-light{
  background:
    radial-gradient(circle at 30% 25%, rgba(176,106,69,.06) 0%, transparent 45%),
    linear-gradient(150deg, var(--sand) 0%, var(--sand-2) 100%);
  color:var(--muted);
}
.ph-light::before{color:rgba(31,58,48,.05)}
.ph-label{
  font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;
  gap:10px;text-align:center;padding:24px;opacity:.5;z-index:2;max-width:80%;
}
.ph-label svg{width:28px;height:28px;opacity:.5}

/* ============================================
   SECTIONS
   ============================================ */
.section{padding:120px 0}
.section-sm{padding:80px 0}
.dark{background:var(--forest);color:var(--sand)}
.dark h1,.dark h2,.dark h3{color:var(--sand)}
.ink-bg{background:var(--ink);color:var(--sand)}
.ink-bg h1,.ink-bg h2,.ink-bg h3{color:var(--sand)}
.sand-bg{background:var(--sand)}

/* Intro / two-col */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.two-col.narrow{gap:60px}
.stack>*+*{margin-top:24px}

/* Section heading block */
.head-block{max-width:640px;margin-bottom:64px}
.head-block.center{margin-left:auto;margin-right:auto;text-align:center}
.head-block h2{margin-top:18px}
.head-block p{margin-top:20px}

/* ---- Pillars (drie pijlers) ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.pillar{
  background:var(--paper);padding:52px 40px;position:relative;
  transition:background .4s var(--ease);
}
.dark .pillars{background:var(--line-light)}
.dark .pillar{background:var(--forest)}
.pillar:hover{background:var(--sand)}
.dark .pillar:hover{background:var(--forest-2)}
.pillar-num{
  font-family:var(--serif);font-size:.9rem;color:var(--clay);
  display:block;margin-bottom:24px;font-style:italic;
}
.dark .pillar-num{color:var(--clay-soft)}
.pillar h3{margin-bottom:14px}
.pillar p{font-size:.98rem;color:var(--muted)}
.dark .pillar p{color:var(--muted-light)}

/* ---- Stats strip ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center}
.stat .num{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--clay)}
.dark .stat .num{color:var(--clay-soft)}
.stat .lbl{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.dark .stat .lbl{color:var(--muted-light)}

/* ---- Projects grid ---- */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.proj-card{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--forest);aspect-ratio:4/3;cursor:pointer;
  display:block;
}
.proj-card.wide{grid-column:span 2;aspect-ratio:16/9}
.proj-card .ph{position:absolute;inset:0;transition:transform .8s var(--ease)}
.proj-card:hover .ph{transform:scale(1.05)}
.proj-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(20,32,28,.9) 100%);z-index:1;
}
.proj-card-body{position:absolute;left:0;bottom:0;z-index:2;padding:34px;width:100%}
.proj-status{
  display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);background:var(--clay-soft);
  padding:5px 12px;border-radius:var(--r);margin-bottom:14px;
}
.proj-status.op{background:var(--sand);color:var(--forest)}
.proj-card h3{color:var(--sand);margin-bottom:6px}
.proj-card .loc{color:var(--muted-light);font-size:.88rem;display:flex;align-items:center;gap:6px}
.proj-card .loc svg{width:16px;height:16px;flex-shrink:0}
.proj-hero .loc svg,.status-line .loc svg{width:16px;height:16px;flex-shrink:0}
.proj-card .go{
  position:absolute;top:30px;right:30px;z-index:2;width:46px;height:46px;
  border:1px solid var(--line-light);border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:var(--sand);
  transition:all .3s var(--ease);
}
.proj-card:hover .go{background:var(--clay);border-color:var(--clay);transform:rotate(-45deg)}

/* ---- Feature row (alternating) ---- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.feature+.feature{margin-top:2px}
.feature .visual{aspect-ratio:1/1;min-height:440px}
.feature .visual .ph{width:100%;height:100%}
.feature .text{
  display:flex;flex-direction:column;justify-content:center;
  padding:70px;background:var(--paper);
}
.feature.flip .visual{order:2}
.feature.flip .text{order:1}
.feature .text h3{margin:16px 0 18px}
.feature .text p{color:var(--muted);margin-bottom:18px}
.feature-meta{display:flex;gap:36px;margin-top:14px;padding-top:26px;border-top:1px solid var(--line)}
.feature-meta .m .n{font-family:var(--serif);font-size:1.5rem;color:var(--clay)}
.feature-meta .m .l{font-size:.78rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* ---- Quote / statement ---- */
.statement{text-align:center;max-width:900px;margin:0 auto}
.statement .q{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.28;font-weight:400}
.statement .q em{color:var(--clay-soft)}
.statement .attr{margin-top:34px;font-size:.9rem;letter-spacing:.06em;color:var(--muted-light)}

/* ---- Approach / process steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.step{background:var(--paper);padding:44px 32px}
.step .s-num{font-family:var(--serif);font-style:italic;color:var(--clay);font-size:2.4rem;line-height:1;display:block;margin-bottom:20px}
.step h4{font-family:var(--serif);font-size:1.2rem;margin-bottom:12px}
.step p{font-size:.92rem;color:var(--muted)}

/* ---- Team ---- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.team-card .photo{aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.team-card .photo .ph{width:100%;height:100%}
.team-card h3{font-size:1.35rem;margin-bottom:4px}
.team-card .role{color:var(--clay);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.team-card p{font-size:.95rem;color:var(--muted)}

/* ---- Values list ---- */
.val-list{display:grid;gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.val-row{
  background:var(--paper);padding:34px 0;display:grid;
  grid-template-columns:80px 1fr 2fr;gap:40px;align-items:baseline;
}
.val-row .vn{font-family:var(--serif);font-style:italic;color:var(--clay);font-size:1.3rem}
.val-row h4{font-family:var(--serif);font-size:1.4rem;font-weight:400}
.val-row p{color:var(--muted);font-size:.98rem}

/* ---- CTA band ---- */
.cta-band{padding:110px 0;text-align:center;position:relative;overflow:hidden}
.cta-band .ph,.cta-band>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.cta-band::after{content:'';position:absolute;inset:0;background:rgba(20,32,28,.82);z-index:1}
.cta-band .inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.cta-band h2{color:var(--sand);margin-bottom:24px}
.cta-band p{color:var(--muted-light);margin-bottom:38px;font-size:1.1rem}

/* ============================================
   CONTACT
   ============================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start}
.contact-info .row{padding:26px 0;border-bottom:1px solid var(--line)}
.contact-info .row:first-child{padding-top:0}
.contact-info .k{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:8px}
.contact-info .v{font-size:1.15rem;font-family:var(--serif)}
.form{display:grid;gap:20px}
.form .frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.04em;margin-bottom:8px;color:var(--ink)}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  font-family:var(--sans);font-size:.98rem;background:var(--paper);color:var(--ink);
  transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--clay)}
.field textarea{resize:vertical;min-height:130px}

/* ============================================
   FOOTER
   ============================================ */
.footer{background:var(--ink);color:var(--sand);padding:90px 0 40px}
.footer-top{display:grid;grid-template-columns:1.8fr 1fr 1.2fr;gap:56px;padding-bottom:60px;border-bottom:1px solid var(--line-light)}
.footer .brand{color:var(--sand);margin-bottom:20px;align-items:center}
.footer-col h5{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-soft);margin-bottom:20px}
.footer-col a,.footer-col p{display:block;color:var(--muted-light);font-size:.94rem;margin-bottom:12px;transition:color .3s var(--ease)}
.footer-col a:hover{color:var(--sand)}
.footer-about{max-width:34ch;color:var(--muted-light);font-size:.96rem;margin-bottom:24px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:34px;flex-wrap:wrap;gap:16px}
.footer-bottom p{font-size:.86rem;color:var(--muted-light)}
.footer-bottom .fb-links{display:flex;gap:26px}
.footer-bottom .fb-links a{font-size:.86rem;color:var(--muted-light)}
.footer-bottom .fb-links a:hover{color:var(--sand)}

/* ============================================
   REVEAL ANIMATION
   ============================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}

/* ============================================
   PAGE HEADER (sub-pages)
   ============================================ */
.page-head{padding:180px 0 90px;background:var(--forest);color:var(--sand);position:relative;overflow:hidden}
.page-head .ph,.page-head>img{position:absolute;inset:0;z-index:0;opacity:.4;width:100%;height:100%;object-fit:cover}
.page-head::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,58,48,.6),var(--forest));z-index:1}
.page-head .wrap{position:relative;z-index:2}
.page-head h1{color:var(--sand);max-width:18ch;margin-top:20px}
.page-head p{color:var(--muted-light);max-width:56ch;margin-top:22px;font-size:1.15rem}
.breadcrumb{font-size:.82rem;color:var(--muted-light);margin-bottom:8px}
.breadcrumb a:hover{color:var(--sand)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1024px){
  .two-col{grid-template-columns:1fr;gap:48px}
  .feature{grid-template-columns:1fr}
  .feature.flip .visual{order:0}
  .feature.flip .text{order:0}
  .feature .text{padding:50px 40px}
  .feature .visual{min-height:360px}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
  .team-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  body{font-size:16px}
  .wrap{padding:0 22px}
  .section{padding:80px 0}
  .nav-links{display:none}
  .burger{display:flex}
  .pillars{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:32px}
  .proj-grid{grid-template-columns:1fr}
  .proj-card.wide{grid-column:span 1;aspect-ratio:4/3}
  .steps{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .form .frow{grid-template-columns:1fr}
  .val-row{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .footer-top{grid-template-columns:1fr;gap:34px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .head-block{margin-bottom:44px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================
   PROJECT DETAIL — WONINGZOEKER
   ============================================ */
.proj-hero{position:relative;min-height:80vh;display:flex;align-items:flex-end;overflow:hidden}
.proj-hero .ph,.proj-hero>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.proj-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,28,.4) 0%,rgba(20,32,28,.3) 50%,rgba(20,32,28,.92) 100%);z-index:1}
.proj-hero-content{position:relative;z-index:2;padding-bottom:70px;padding-top:160px;width:100%}
.proj-hero .status-line{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.proj-hero h1{color:var(--sand);margin:0 0 18px;max-width:20ch}
.proj-hero .sub{color:var(--sand);opacity:.9;font-size:1.2rem;max-width:50ch}
.proj-hero .loc{color:var(--clay-soft);font-size:.9rem;display:flex;align-items:center;gap:6px}

/* Project fase-tijdlijn */
.phase-track{display:flex;gap:0;margin:0;background:var(--sand);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.phase{flex:1;padding:22px 20px;text-align:center;position:relative;border-right:1px solid var(--line)}
.phase:last-child{border-right:none}
.phase.done{background:var(--forest)}
.phase.done .ph-name{color:var(--sand)}
.phase.done .ph-ico{background:var(--clay-soft);color:var(--forest)}
.phase.current{background:var(--clay)}
.phase.current .ph-name{color:#fff}
.phase.current .ph-ico{background:#fff;color:var(--clay)}
.phase.current .ph-stage{color:rgba(255,255,255,.8)}
.ph-ico{width:34px;height:34px;border-radius:50%;background:var(--sand-2);color:var(--muted);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-family:var(--serif);font-size:.95rem;font-style:italic}
.ph-stage{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.ph-name{font-family:var(--serif);font-size:1.05rem}

/* Woningzoeker tabel */
.wz-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.wz-filters{display:flex;gap:10px;padding:20px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;background:var(--sand)}
.wz-filters .fl-label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.wz-chip{font-family:var(--sans);font-size:.85rem;font-weight:500;padding:8px 16px;border-radius:100px;border:1px solid var(--line);background:var(--paper);cursor:pointer;transition:all .25s;color:var(--ink)}
.wz-chip:hover{border-color:var(--clay)}
.wz-chip.active{background:var(--forest);color:var(--sand);border-color:var(--forest)}
.wz-legend{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.wz-legend span{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.beschikbaar{background:#4a7c59}
.dot.optie{background:var(--clay)}
.dot.verkocht{background:#9a9a9a}

.wz-table{width:100%;border-collapse:collapse}
.wz-table thead th{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:16px 24px;border-bottom:1px solid var(--line);font-weight:600;background:var(--paper)}
.wz-table td{padding:18px 24px;border-bottom:1px solid var(--line);font-size:.96rem}
.wz-table tbody tr{transition:background .2s}
.wz-table tbody tr:hover{background:var(--sand)}
.wz-table tbody tr:last-child td{border-bottom:none}
.wz-table tr.hidden{display:none}
.wz-bnr{font-family:var(--serif);font-size:1.15rem}
.wz-type-tag{display:inline-block;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:var(--r);background:var(--sand-2);color:var(--forest)}
.wz-status{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:500}
.wz-status.beschikbaar{color:#3d6b4a}
.wz-status.optie{color:var(--clay)}
.wz-status.verkocht{color:#8a8a8a}
.wz-cta{font-size:.85rem;font-weight:600;color:var(--clay);display:inline-flex;align-items:center;gap:5px;transition:gap .25s}
.wz-cta:hover{gap:9px}
.wz-empty{padding:50px 24px;text-align:center;color:var(--muted)}
.wz-count{font-size:.9rem;color:var(--muted);padding:16px 24px;background:var(--sand);border-top:1px solid var(--line)}
.wz-count b{color:var(--ink)}

/* Woningtype cards */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.type-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);transition:transform .3s,box-shadow .3s}
.type-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,32,28,.1)}
.type-card .tc-img{aspect-ratio:4/3}
.type-card .tc-img .ph{width:100%;height:100%}
.type-card .tc-body{padding:28px}
.type-card h3{margin-bottom:6px}
.type-card .tc-meta{display:flex;gap:24px;margin:18px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.type-card .tc-meta .m .n{font-family:var(--serif);font-size:1.3rem;color:var(--clay)}
.type-card .tc-meta .m .l{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.type-card .tc-price{font-family:var(--serif);font-size:1.15rem;color:var(--forest)}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:28px 60px 28px 0;font-family:var(--serif);font-size:1.25rem;color:var(--ink);position:relative;transition:color .25s;line-height:1.3}
.faq-q:hover{color:var(--clay)}
.faq-q::after{content:'+';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--clay);transition:transform .3s;font-family:var(--sans);font-weight:300}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a-inner{padding:0 60px 30px 0;color:var(--muted);font-size:1.02rem;line-height:1.65}
.faq-item.open .faq-a{max-height:400px}

/* ============================================
   NIEUWS / UPDATES
   ============================================ */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.news-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s,box-shadow .3s}
.news-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,32,28,.1)}
.news-card .nc-img{aspect-ratio:16/10;position:relative}
.news-card .nc-img .ph{width:100%;height:100%}
.news-card .nc-tag{position:absolute;top:16px;left:16px;z-index:2;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--sand);color:var(--forest);padding:5px 12px;border-radius:var(--r)}
.news-card .nc-body{padding:26px}
.news-card .nc-date{font-size:.8rem;color:var(--clay);letter-spacing:.06em;margin-bottom:12px}
.news-card h3{font-size:1.3rem;margin-bottom:10px;line-height:1.25}
.news-card p{font-size:.94rem;color:var(--muted);margin-bottom:16px}
.news-card .nc-more{font-size:.85rem;font-weight:600;color:var(--forest);display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.news-card:hover .nc-more{gap:10px}

/* ============================================
   GROND AANBIEDEN
   ============================================ */
.grond-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.grond-checklist{list-style:none;margin-top:28px}
.grond-checklist li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.grond-checklist li:last-child{border-bottom:none}
.grond-checklist .ck{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--forest);color:var(--sand);display:flex;align-items:center;justify-content:center;margin-top:2px}
.grond-checklist .ck svg{width:13px;height:13px}
.grond-checklist .txt strong{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:400;margin-bottom:3px}
.grond-checklist .txt span{font-size:.94rem;color:var(--muted)}
.grond-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);margin-top:10px}
.grond-form-wrap{background:var(--forest);border-radius:var(--r);padding:48px}
.grond-form-wrap h3{color:var(--sand);margin-bottom:8px}
.grond-form-wrap p{color:var(--muted-light);margin-bottom:28px;font-size:.98rem}
.grond-form-wrap .field label{color:var(--sand)}
.grond-form-wrap .field input,.grond-form-wrap .field textarea,.grond-form-wrap .field select{background:rgba(246,243,236,.06);border-color:rgba(246,243,236,.2);color:var(--sand)}
.grond-form-wrap .field input::placeholder,.grond-form-wrap .field textarea::placeholder{color:rgba(246,243,236,.4)}
.grond-form-wrap .field input:focus,.grond-form-wrap .field textarea:focus,.grond-form-wrap .field select:focus{border-color:var(--clay-soft)}
.grond-form-wrap .field select option{background:var(--forest);color:var(--sand)}

@media(max-width:1024px){
  .type-grid{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr 1fr}
  .grond-intro{grid-template-columns:1fr;gap:44px}
  .grond-steps{grid-template-columns:1fr}
}
@media(max-width:768px){
  .type-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .phase-track{flex-direction:column}
  .phase{border-right:none;border-bottom:1px solid var(--line)}
  .wz-legend{margin-left:0;width:100%}
  .wz-table thead{display:none}
  .wz-table td{display:block;padding:8px 20px;border:none}
  .wz-table tbody tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  .wz-table td[data-l]::before{content:attr(data-l);display:inline-block;width:90px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  .grond-form-wrap{padding:32px 24px}
  .proj-hero-content{padding-top:130px}
}

/* ============================================
   COOKIEBANNER
   ============================================ */
.cookie-banner{
  position:fixed;bottom:24px;left:24px;right:24px;max-width:480px;z-index:2000;
  background:var(--ink);color:var(--sand);border-radius:8px;padding:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);border:1px solid var(--line-light);
  transform:translateY(150%);transition:transform .5s var(--ease);
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner h4{font-family:var(--serif);font-size:1.25rem;color:var(--sand);margin-bottom:10px}
.cookie-banner p{font-size:.9rem;color:var(--muted-light);margin-bottom:20px;line-height:1.55}
.cookie-banner p a{color:var(--clay-soft);text-decoration:underline}
.cookie-btns{display:flex;gap:12px;flex-wrap:wrap}
.cookie-btns .btn{padding:12px 22px;font-size:.85rem}
.cookie-accept{background:var(--clay);color:#fff}
.cookie-accept:hover{background:#9a5838}
.cookie-decline{background:transparent;border:1px solid var(--line-light);color:var(--sand)}
.cookie-decline:hover{background:rgba(246,243,236,.1)}
@media(max-width:540px){.cookie-banner{left:16px;right:16px;bottom:16px;padding:22px}}

/* ============================================
   BROCHURE DOWNLOAD
   ============================================ */
.brochure{background:var(--forest);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.brochure .br-visual{position:relative;min-height:300px}
.brochure .br-visual .ph{width:100%;height:100%}
.brochure .br-body{padding:52px}
.brochure .br-body .eyebrow{color:var(--clay-soft)}
.brochure h3{color:var(--sand);margin:14px 0 14px}
.brochure p{color:var(--muted-light);margin-bottom:26px}
.brochure .br-form{display:flex;gap:12px;flex-wrap:wrap}
.brochure .br-form input{
  flex:1;min-width:200px;padding:15px 18px;border:1px solid rgba(246,243,236,.2);
  border-radius:var(--r);background:rgba(246,243,236,.06);color:var(--sand);font-family:var(--sans);font-size:.98rem;
}
.brochure .br-form input::placeholder{color:rgba(246,243,236,.4)}
.brochure .br-form input:focus{outline:none;border-color:var(--clay-soft)}
.brochure .br-note{font-size:.8rem;color:var(--muted-light);margin-top:14px;margin-bottom:0}
@media(max-width:768px){.brochure{grid-template-columns:1fr}.brochure .br-visual{min-height:200px}.brochure .br-body{padding:36px 28px}}

/* ============================================
   LEGAL PAGES (privacy, cookies)
   ============================================ */
.legal{max-width:760px;margin:0 auto}
.legal h2{font-size:1.6rem;margin:44px 0 16px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.2rem;margin:28px 0 12px}
.legal p{color:var(--muted);margin-bottom:16px;line-height:1.7}
.legal ul{margin:0 0 16px 22px;color:var(--muted)}
.legal ul li{margin-bottom:8px;line-height:1.6}
.legal a{color:var(--clay);text-decoration:underline}
.legal .updated{font-size:.88rem;color:var(--muted);font-style:italic;margin-bottom:36px}
.legal table.tbl{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:.92rem}
.legal table.tbl th,.legal table.tbl td{text-align:left;padding:12px 14px;border:1px solid var(--line)}
.legal table.tbl th{background:var(--sand);font-weight:600;color:var(--ink)}
.legal table.tbl td{color:var(--muted)}

/* ============================================
   VERHAAL — story pages (over-ons + personen)
   ============================================ */

/* Story hero (persoon) */
.story-hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.story-hero .sh-visual{position:absolute;inset:0;z-index:0}
.story-hero .sh-visual .ph,.story-hero .sh-visual>img{width:100%;height:100%;object-fit:cover}
.story-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,32,28,.35) 0%,rgba(20,32,28,.2) 45%,rgba(20,32,28,.95) 100%);z-index:1}
.story-hero-content{position:relative;z-index:2;padding-bottom:80px;padding-top:160px;width:100%}
.story-hero .sh-eyebrow{color:var(--clay-soft);margin-bottom:20px}
.story-hero h1{color:var(--sand);margin:0 0 20px;font-size:clamp(2.4rem,7vw,6rem)}
.story-hero .sh-role{color:var(--sand);font-size:1.3rem;font-family:var(--serif);font-style:italic;opacity:.9;margin-bottom:8px}
.story-hero .sh-tagline{color:var(--muted-light);font-size:1.1rem;max-width:46ch}

/* Grote openingsquote / statement */
.story-lead{padding:110px 0}
.story-lead .inner{max-width:920px;margin:0 auto}
.story-lead .big{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.3;font-weight:400;color:var(--ink)}
.story-lead .big em{font-style:italic;color:var(--clay)}
.story-lead.on-forest{background:var(--forest)}
.story-lead.on-forest .big{color:var(--sand)}
.story-lead.on-forest .big em{color:var(--clay-soft)}

/* Verhaal-hoofdstuk: tekst + beeld afwisselend */
.chapter{padding:90px 0}
.chapter .ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.chapter.flip .ch-visual{order:2}
.chapter .ch-num{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--clay);display:block;margin-bottom:16px}
.chapter h2{margin-bottom:24px}
.chapter .ch-text p{color:var(--muted);margin-bottom:18px;line-height:1.75;font-size:1.05rem}
.chapter .ch-text p:first-of-type{font-size:1.2rem;color:var(--ink);line-height:1.6}
.chapter .ch-visual{position:relative}
.chapter .ch-visual .ph{border-radius:var(--r);aspect-ratio:4/5;width:100%}
.chapter .ch-visual.wide .ph{aspect-ratio:4/3}
.chapter .ch-caption{font-size:.85rem;color:var(--muted);margin-top:14px;font-style:italic;text-align:center}

/* Pull quote binnen verhaal */
.pullquote{padding:80px 0;text-align:center}
.pullquote .pq{max-width:880px;margin:0 auto;font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.35;color:var(--ink)}
.pullquote .pq em{color:var(--clay)}
.pullquote .pq-attr{margin-top:28px;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}

/* Feiten/persoonlijk blokje ('goed om te weten') */
.person-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.person-facts .pf{background:var(--paper);padding:36px 28px}
.person-facts .pf .pf-k{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.person-facts .pf .pf-v{font-family:var(--serif);font-size:1.15rem;color:var(--ink);line-height:1.4}

/* Duo intro (op over-ons: Wendy + Martin naast elkaar) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.duo-card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--forest);display:block;aspect-ratio:3/4}
.duo-card .ph{position:absolute;inset:0;transition:transform .7s var(--ease)}
.duo-card:hover .ph{transform:scale(1.04)}
.duo-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(20,32,28,.92) 100%);z-index:1}
.duo-card .duo-body{position:absolute;left:0;bottom:0;z-index:2;padding:38px;width:100%}
.duo-card .duo-name{font-family:var(--serif);font-size:2rem;color:var(--sand);margin-bottom:6px}
.duo-card .duo-role{color:var(--clay-soft);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.duo-card .duo-link{color:var(--sand);font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:gap .3s}
.duo-card:hover .duo-link{gap:12px}

/* Timeline (geschiedenis) */
.timeline{max-width:820px;margin:0 auto;position:relative}
.timeline::before{content:'';position:absolute;left:120px;top:10px;bottom:10px;width:1px;background:var(--line)}
.tl-item{display:grid;grid-template-columns:100px 1fr;gap:44px;padding:22px 0;position:relative}
.tl-year{font-family:var(--serif);font-size:1.5rem;color:var(--clay);text-align:right;padding-top:2px}
.tl-item::before{content:'';position:absolute;left:116px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--clay);border:2px solid var(--paper);z-index:2}
.tl-content h4{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:8px}
.tl-content p{color:var(--muted);font-size:.98rem;line-height:1.6}

@media(max-width:1024px){
  .chapter .ch-grid{grid-template-columns:1fr;gap:44px}
  .chapter.flip .ch-visual{order:0}
  .chapter .ch-visual .ph{aspect-ratio:16/10}
  .person-facts{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .duo{grid-template-columns:1fr;gap:24px}
  .person-facts{grid-template-columns:1fr 1fr}
  .timeline::before{left:60px}
  .tl-item{grid-template-columns:50px 1fr;gap:24px}
  .tl-item::before{left:56px}
  .tl-year{font-size:1.1rem}
  .story-hero{min-height:80vh}
  .story-lead,.chapter,.pullquote{padding:60px 0}
}

/* ============================================
   PROJECT — verhaalsecties
   ============================================ */
/* Historische quote */
.hist-quote{padding:90px 0;background:var(--ink)}
.hist-quote .hq{max-width:900px;margin:0 auto;text-align:center}
.hist-quote .hq p{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.4;color:var(--sand);font-style:italic}
.hist-quote .hq p em{color:var(--clay-soft);font-style:italic}
.hist-quote .hq .attr{margin-top:26px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light);font-style:normal}

/* Beeld met bijschrift */
.figure{margin:0}
.figure img{width:100%;border-radius:var(--r);display:block}
.figure figcaption{font-size:.82rem;color:var(--muted);margin-top:12px;font-style:italic}
.dark .figure figcaption{color:var(--muted-light)}

/* Bereikbaarheid grid */
.reach{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.reach .r-item{background:var(--paper);padding:34px 26px;text-align:center}
.reach .r-place{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.reach .r-time{font-family:var(--serif);font-size:2rem;color:var(--clay);line-height:1;margin-bottom:8px}
.reach .r-detail{font-size:.84rem;color:var(--muted)}

/* Voorzieningen grid */
.amen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.amen .a-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:34px}
.amen .a-ico{font-size:1.5rem;color:var(--clay);margin-bottom:16px;display:block;line-height:1}
.amen .a-card h4{font-family:var(--serif);font-size:1.2rem;font-weight:400;margin-bottom:10px}
.amen .a-card p{font-size:.94rem;color:var(--muted);line-height:1.6}

/* Ontwerpprincipes met symbolen */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-light)}
.principle{background:var(--forest);padding:48px 36px}
.principle .p-sym{font-size:1.8rem;color:var(--clay-soft);margin-bottom:22px;display:block;line-height:1}
.principle h3{color:var(--sand);margin-bottom:14px;font-size:1.35rem}
.principle p{color:var(--muted-light);font-size:.96rem;line-height:1.65}

@media(max-width:1024px){
  .reach{grid-template-columns:1fr 1fr}
  .amen{grid-template-columns:1fr 1fr}
  .principles{grid-template-columns:1fr}
}
@media(max-width:768px){
  .reach{grid-template-columns:1fr 1fr}
  .amen{grid-template-columns:1fr}
  .hist-quote{padding:60px 0}
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */
/* 5-staps proces (kopen) — schaalt netjes mee */
.steps-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1200px){.steps-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.steps-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps-5{grid-template-columns:1fr}}

/* Voorkom horizontale overflow site-breed */
html,body{max-width:100%;overflow-x:hidden}
.feature .visual,.feature .visual img{max-width:100%}
img,iframe{max-width:100%}

/* Feature-blok: geen overflow op mobiel */
@media(max-width:768px){
  .feature{grid-template-columns:minmax(0,1fr)}
  .feature .visual{width:100%;max-width:100%}
  .two-col,.ch-grid{grid-template-columns:minmax(0,1fr)}
}

/* Tabellen nooit breder dan scherm */
.wz-wrap{max-width:100%;overflow-x:auto}
.wz-table{min-width:100%}
@media(max-width:900px){
  .wz-table{min-width:0}
}

/* Lange woorden/URLs breken */
h1,h2,h3,h4,p,td,th{overflow-wrap:break-word}

/* Filter-chips comfortabel tapbaar op mobiel */
@media(max-width:768px){
  .wz-chip{padding:11px 18px;font-size:.88rem}
  .wz-filters{gap:8px}
}

/* Status: binnenkort in verkoop */
.dot.binnenkort{background:var(--clay-soft)}
.wz-status.binnenkort{color:var(--clay)}

/* Feature-blok op zandkleur (voor ritme-afwisseling) */
.feature-alt .text{background:var(--sand)}

/* ============================================
   VANGNET: inline-icoontjes nooit uitrekken
   ============================================ */
.loc svg, .btn svg, .arw svg, .nav-cta svg, .wz-cta svg,
.duo-link svg, .nc-more svg, .a-ico svg, .feature-meta svg,
.hero-btns svg, .cta-band svg {
  width:1em; height:1em; flex-shrink:0;
}
.loc svg { width:16px; height:16px; }

/* ============================================
   LOGO — groter en beter leesbaar
   ============================================ */
.brand img{height:54px;width:auto;max-width:none;display:block;object-fit:contain;transition:height .4s var(--ease)}
.brand .logo-groen{display:none}
.nav.scrolled .brand img{height:44px}
.nav.scrolled .brand .logo-wit{display:none}
.nav.scrolled .brand .logo-groen{display:block}
.footer .brand img{height:62px}
.footer .brand .logo-groen{display:none}
.footer .brand .logo-wit{display:block}
@media(max-width:768px){
  .brand img{height:44px}
  .nav.scrolled .brand img{height:38px}
  .footer .brand img{height:52px}
}
@media(max-width:360px){.brand img,.nav.scrolled .brand img{height:34px}}

/* ============================================
   NAV — actieve pagina + eerder hamburgermenu
   ============================================ */
.nav-links{gap:32px}
.nav-links a[aria-current="page"]:not(.nav-cta){color:var(--clay-soft)}
.nav.scrolled .nav-links a[aria-current="page"]:not(.nav-cta){color:var(--clay)}
.mobile-menu a[aria-current="page"]{color:var(--clay-soft)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{z-index:999}
body.menu-open{overflow:hidden}
body.menu-open .nav{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
body.menu-open .nav .brand .logo-wit{display:block}
body.menu-open .nav .brand .logo-groen{display:none}
body.menu-open .burger span{background:var(--sand)}
@media(max-width:1080px){
  .nav-links{display:none}
  .burger{display:flex}
}

/* ============================================
   VIER FASES — iconen
   ============================================ */
.steps .step{position:relative;padding:48px 34px 44px}
.s-ico{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sand);color:var(--forest);
  border:1px solid var(--line);margin-bottom:26px;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.s-ico svg{width:30px;height:30px}
.step:hover .s-ico{background:var(--forest);color:var(--sand);border-color:var(--forest)}
.s-tag{position:absolute;top:44px;right:30px;font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--clay)}
.sand-bg .step{background:var(--paper)}

/* ============================================
   FAMILIE — drie generaties
   ============================================ */
.gens{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gen{background:var(--paper);padding:44px 36px}
.sand-bg .gen{background:var(--sand)}
.gen-year{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;color:var(--clay);margin-bottom:16px}
.gen h4{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin-bottom:10px}
.gen p{color:var(--muted);font-size:.97rem}
.dark .gens{background:var(--line-light);border-color:var(--line-light)}
.dark .gen{background:var(--forest)}
.dark .gen-year{color:var(--clay-soft)}
.dark .gen h4{color:var(--sand)}
.dark .gen p{color:var(--muted-light)}
@media(max-width:768px){.gens{grid-template-columns:1fr}.gen{padding:34px 4px}}

/* ============================================
   PROFIELKAARTEN (over ons)
   ============================================ */
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:980px;margin:0 auto}
.profile{display:block}
.profile .p-photo{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--sand-2);margin-bottom:24px}
.profile .p-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .7s var(--ease)}
.profile:hover .p-photo img{transform:scale(1.03)}
.profile .p-name{font-family:var(--serif);font-size:1.75rem;line-height:1.15}
.profile .p-role{color:var(--clay);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:8px 0 14px}
.profile .p-bio{color:var(--muted);font-size:.98rem;margin-bottom:18px}
.profile .p-mail{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem;color:var(--forest);border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .3s,border-color .3s}
.profile .p-mail svg{width:18px;height:18px}
.profile:hover .p-mail{color:var(--clay);border-color:var(--clay)}
@media(max-width:768px){.profiles{grid-template-columns:1fr;gap:56px}}

/* ============================================
   VERHAAL-TEKST (over ons)
   ============================================ */
.story-text{max-width:720px}
.story-text p{color:var(--muted);font-size:1.08rem;line-height:1.75}
.story-text p+p{margin-top:20px}
.story-text p.first{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.45;color:var(--ink)}
.chapter .ch-visual>img{border-radius:var(--r);aspect-ratio:4/5}
.chapter .ch-visual.wide>img{aspect-ratio:4/3}
@media(max-width:1024px){.chapter .ch-visual>img{aspect-ratio:16/10}}

/* ============================================
   NIEUWS — lege staat
   ============================================ */
.news-empty{max-width:640px;margin:0 auto;text-align:center;padding:30px 0}
.news-empty .ne-ico{width:72px;height:72px;border-radius:50%;margin:0 auto 28px;display:flex;align-items:center;justify-content:center;background:var(--sand);color:var(--forest);border:1px solid var(--line)}
.news-empty .ne-ico svg{width:32px;height:32px}
.news-empty h2{margin-bottom:18px}
.news-empty p{color:var(--muted);font-size:1.08rem}

/* Formulier-melding */
.form-note{font-size:.88rem;color:var(--muted);margin-top:-4px}
.grond-form-wrap .form-note{color:var(--muted-light)}

/* Iconen partners */
.a-ico svg{width:34px;height:34px}
/* Vier waarden naast elkaar */
.pillars.values-4{grid-template-columns:repeat(4,1fr)}
.values-4 .pillar{padding:44px 32px}
.values-4 .pillar h3{font-size:1.45rem}
@media(max-width:1024px){.pillars.values-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pillars.values-4{grid-template-columns:1fr}}
/* Ankers onder vaste nav */
#team{scroll-margin-top:90px}

/* Hero: tekst beter leesbaar op drukke foto */
.hero-bg::after{background:linear-gradient(90deg,rgba(20,32,28,.72) 0%,rgba(20,32,28,.35) 55%,rgba(20,32,28,.1) 100%),linear-gradient(180deg,rgba(20,32,28,.5) 0%,rgba(20,32,28,.15) 40%,rgba(20,32,28,.85) 100%)}
.hero .eyebrow,.hero h1,.hero .lead{text-shadow:0 1px 18px rgba(20,32,28,.45)}
@media(max-width:768px){.hero-scroll{display:none}.hero-bg::after{background:linear-gradient(180deg,rgba(20,32,28,.6) 0%,rgba(20,32,28,.45) 40%,rgba(20,32,28,.9) 100%)}}
/* Lead-tekst op donkere secties */
.dark .lead,.ink-bg .lead{color:rgba(246,243,236,.86)}
/* Logo iets groter op desktop */
@media(min-width:769px){.brand img{height:60px}.nav.scrolled .brand img{height:46px}}

/* ============================================
   INTRO — korte logo-animatie bij eerste bezoek
   (alleen 1x per sessie, puur CSS zodat hij altijd eindigt)
   ============================================ */
.intro{display:none}
.has-intro .intro{
  display:flex;position:fixed;inset:0;z-index:5000;
  align-items:center;justify-content:center;
  background:var(--forest);cursor:pointer;
  animation:introUp .95s cubic-bezier(.77,0,.18,1) 1.75s forwards;
}
.has-intro .intro::after{ /* subtiel 'zand' vlak dat mee omhoog schuift */
  content:'';position:absolute;left:0;right:0;bottom:-30vh;height:30vh;background:var(--ink);
}
.intro-inner{display:flex;flex-direction:column;align-items:center;gap:22px;transition:opacity .3s}
.intro-logo{
  height:clamp(64px,9vw,104px);width:auto;
  clip-path:inset(0 100% 0 0);
  animation:introWipe 1s cubic-bezier(.65,0,.35,1) .15s forwards;
}
.intro-line{display:block;height:1px;width:0;background:var(--clay-soft);animation:introLine .7s var(--ease) .75s forwards}
.intro-tag{
  font-size:.72rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--clay-soft);opacity:0;transform:translateY(8px);
  animation:introTag .6s var(--ease) .95s forwards;
}
.has-intro .intro.skip{animation:introUp .6s cubic-bezier(.77,0,.18,1) forwards}
@keyframes introWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes introLine{to{width:140px}}
@keyframes introTag{to{opacity:1;transform:none}}
@keyframes introUp{to{transform:translateY(-130%);visibility:hidden}}

/* Hero komt pas in beeld als de intro wegschuift */
.has-intro .hero .reveal{transition-delay:2.05s}
.has-intro .hero .reveal.d1{transition-delay:2.17s}
.has-intro .hero .reveal.d2{transition-delay:2.29s}
.has-intro .hero .reveal.d3{transition-delay:2.41s}
.has-intro .hero-bg>img,.has-intro .page-head>img{animation:heroSettle 2.4s cubic-bezier(.2,.7,.2,1) 1.75s both}
@keyframes heroSettle{from{transform:scale(1.1)}to{transform:scale(1)}}
.has-intro .page-head h1,.has-intro .page-head p,.has-intro .page-head .eyebrow{animation:headIn .9s var(--ease) 2.1s both}
@keyframes headIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ============================================
   MARQUEE — doorlopende band onder de hero
   ============================================ */
.marquee{background:var(--forest);color:var(--sand);overflow:hidden;border-top:1px solid var(--line-light);padding:22px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.5rem);white-space:nowrap;padding:0 28px;display:flex;align-items:center;gap:56px}
.marquee-track span::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--clay-soft);display:inline-block}
.marquee-track em{color:var(--clay-soft)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================
   WAAROM HOFFMANN — USP-strip
   ============================================ */
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.usp .u-ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sand);color:var(--forest);border:1px solid var(--line);margin-bottom:20px}
.usp .u-ico svg{width:24px;height:24px}
.usp h4{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:8px}
.usp p{font-size:.95rem;color:var(--muted)}
@media(max-width:1024px){.usps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.usps{grid-template-columns:1fr;gap:32px}}

/* ============================================
   CONTACT — kaart + directe lijnen
   ============================================ */
.contact-map{margin-top:80px;border-radius:var(--r);overflow:hidden;height:420px;box-shadow:0 16px 40px rgba(20,32,28,.1)}
.contact-map iframe{width:100%;height:100%;border:0;display:block}
.contact-info .v a{border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.contact-info .v a:hover{color:var(--clay);border-color:var(--clay)}
.contact-info .people{display:grid;gap:10px;margin-top:6px}
.contact-info .people a{font-family:var(--sans);font-size:.98rem}

@media(prefers-reduced-motion:reduce){
  .has-intro .intro{display:none}
  .marquee-track{animation:none}
}
/* Hero-lead doet ook mee met de reveal-animatie */
.hero .lead.reveal:not(.in){opacity:0}

/* ============================================
   LOCATIE-CHECK (grond aanbieden)
   ============================================ */
.lc fieldset{border:0;padding:0;margin:0;min-width:0}
.lc legend{font-family:var(--serif);font-size:1.35rem;color:var(--sand);margin-bottom:18px;padding:0}
.lc-step{display:grid;gap:18px}
.lc-progress,.lc-count,.lc-back,.lc-next{display:none}
.js .lc-progress{display:block;height:3px;background:rgba(246,243,236,.15);border-radius:3px;overflow:hidden}
.js .lc-bar{display:block;height:100%;width:33.33%;background:var(--clay-soft);transition:width .5s var(--ease)}
.js .lc-count{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light);margin-top:-8px}
.js .lc-step:not(.active){display:none}
.js .lc-step.active{animation:lcIn .45s var(--ease)}
@keyframes lcIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.lc-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lc-opt{position:relative;cursor:pointer}
.lc-opt input{position:absolute;opacity:0;pointer-events:none}
.lc-card{display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid rgba(246,243,236,.2);border-radius:var(--r);color:var(--sand);font-size:.93rem;background:rgba(246,243,236,.04);transition:all .25s var(--ease)}
.lc-card svg{width:24px;height:24px;flex-shrink:0;color:var(--clay-soft)}
.lc-opt:hover .lc-card{border-color:rgba(246,243,236,.45)}
.lc-opt input:checked+.lc-card{border-color:var(--clay-soft);background:rgba(201,138,103,.16)}
.lc-opt input:focus-visible+.lc-card{outline:2px solid var(--clay-soft);outline-offset:2px}
.lc-opts.invalid .lc-card{border-color:#e7a17f}
.lc-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.js .lc-submit{display:none}
.js .lc.last .lc-submit{display:inline-flex}
.js .lc.last .lc-next{display:none}
.js .lc-next{display:inline-flex}
.js .lc:not(.first) .lc-back{display:inline-flex}
.lc-back{background:transparent;border:1px solid rgba(246,243,236,.25);color:var(--sand)}
.lc-back:hover{background:rgba(246,243,236,.08)}
.lc .field input.invalid{border-color:#e7a17f}
.lc-done{text-align:left}
.lc-done h3{margin-bottom:10px}
@media(max-width:560px){.lc-opts{grid-template-columns:1fr}}

/* ============================================
   UPDATES-AANMELDING (nieuws)
   ============================================ */
.subscribe{max-width:560px;margin:40px auto 0;display:flex;gap:10px;flex-wrap:wrap}
.subscribe input{flex:1;min-width:220px;padding:15px 16px;border:1px solid var(--line);border-radius:var(--r);font-family:var(--sans);font-size:.98rem;background:var(--paper)}
.subscribe input:focus{outline:none;border-color:var(--clay)}
.subscribe-note{font-size:.84rem;color:var(--muted);margin-top:12px}

/* ============================================
   VASTE KNOP OP MOBIEL
   ============================================ */
.m-bar{display:none}
@media(max-width:768px){
  .m-bar{
    display:flex;gap:8px;position:fixed;left:12px;right:12px;bottom:12px;z-index:1400;
    padding:8px;background:rgba(20,32,28,.94);backdrop-filter:blur(10px);border-radius:10px;
    box-shadow:0 12px 34px rgba(0,0,0,.3);
    transform:translateY(140%);transition:transform .45s var(--ease);
  }
  .m-bar.show{transform:none}
  .m-bar a{flex:1;justify-content:center;padding:13px 10px;font-size:.88rem}
  .m-bar .mb-mail{background:transparent;border:1px solid var(--line-light);color:var(--sand)}
  .footer{padding-bottom:110px}
}

/* ============================================
   EFFECTEN
   ============================================ */
/* 1. Koppen schuiven per woord omhoog */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.split .w>span{display:inline-block;transform:translateY(108%);transition:transform .9s cubic-bezier(.2,.75,.2,1)}
.split.in .w>span{transform:none}

/* 2. Foto's openen als een gordijn */
.curtain{position:relative;overflow:hidden}
.curtain::after{content:'';position:absolute;inset:0;z-index:3;background:var(--forest);transform-origin:right center;transition:transform 1.15s cubic-bezier(.77,0,.18,1)}
.curtain.in::after{transform:scaleX(0)}
.curtain img{transform:scale(1.14);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.curtain.in img{transform:scale(1)}
.profile:hover .p-photo.curtain.in img{transform:scale(1.03)}

/* 3. Tijdlijn die zich tekent */
.gens{position:relative}
.gens-line{position:absolute;left:0;right:0;top:-1px;height:2px;z-index:2;pointer-events:none}
.gens-line span{display:block;height:100%;background:var(--clay);transform-origin:left;transform:scaleX(0)}
.gen{position:relative}
.gen::before{content:'';position:absolute;top:-6px;left:36px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--line);z-index:3;transition:background .4s,border-color .4s,transform .4s}
.gen.on::before{background:var(--clay);border-color:var(--clay);transform:scale(1.25)}
.gen .gen-year,.gen h4,.gen p{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .gen:not(.on) .gen-year,.js .gen:not(.on) h4,.js .gen:not(.on) p{opacity:.25}
@media(max-width:768px){
  .gens-line{left:-1px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .gens-line span{transform-origin:top;transform:scaleY(0);width:100%;height:100%}
  .gen{padding-left:28px}
  .gen::before{left:-5px;top:42px}
}

/* 4. Teller jaren ervaring */
.years{display:flex;align-items:baseline;gap:14px;margin-top:6px;padding-top:22px;border-top:1px solid var(--line)}
.years .yn{font-family:var(--serif);font-size:clamp(3rem,6vw,4.6rem);line-height:1;color:var(--clay)}
.years .yl{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);max-width:16ch;line-height:1.4}

/* Citaat: woorden lichten op tijdens scrollen */
.hl .hw{opacity:.22;transition:opacity .25s linear}
.hl .hw.lit{opacity:1}

/* 5. Paginaovergang */
.page-wipe{position:fixed;inset:0;z-index:4900;background:var(--forest);transform:translateY(100%);transition:transform .45s cubic-bezier(.77,0,.18,1);pointer-events:none}
.page-wipe.go{transform:none}
.wipe-in body::before{content:'';position:fixed;inset:0;z-index:4900;background:var(--forest);animation:wipeOut .7s cubic-bezier(.77,0,.18,1) .05s forwards;pointer-events:none}
@keyframes wipeOut{to{transform:translateY(-100%)}}

@media(prefers-reduced-motion:reduce){
  .split .w>span,.curtain img{transform:none!important}
  .curtain::after,.page-wipe,.wipe-in body::before{display:none}
  .hl .hw{opacity:1}
  .js .gen:not(.on) .gen-year,.js .gen:not(.on) h4,.js .gen:not(.on) p{opacity:1}
}

.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}
.footer-col .footer-about a.fa-link{display:inline;margin:0;color:var(--sand);border-bottom:1px solid var(--line-light)}
.footer-col .footer-about a.fa-link:hover{border-color:var(--clay-soft)}
/* Tijdlijn: geen grijze vlakken vóór de animatie */
.gens{background:transparent}
.gen+.gen{border-left:1px solid var(--line)}
@media(max-width:768px){.gen+.gen{border-left:0;border-top:1px solid var(--line)}}
/* Lange woorden in paginatitels passen op kleine schermen */
@media(max-width:480px){.page-head h1{font-size:2.1rem}.page-head{padding:150px 0 70px}}

/* ============================================
   HERO OP MOBIEL — foto als eigen blok, zodat
   Wendy én Martin allebei goed in beeld zijn
   ============================================ */
@media(max-width:768px){
  .hero{display:block;min-height:0;background:var(--ink)}
  .hero-bg{position:relative;inset:auto;aspect-ratio:1/1;height:auto}
  .hero-bg>img{object-position:50% 50%}
  .hero-bg::after{background:linear-gradient(180deg,rgba(20,32,28,.55) 0%,rgba(20,32,28,0) 28%,rgba(20,32,28,0) 62%,var(--ink) 100%)}
  .hero-content{padding:0 0 60px;margin-top:-34px}
  .hero h1{margin:14px 0 20px}
  .hero .lead{margin-bottom:30px}
}

/* ============================================
   PROJECTEN — project dat binnenkort volgt
   ============================================ */
.proj-soon{display:grid;grid-template-columns:1.25fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.ps-visual{position:relative;min-height:420px}
.ps-visual .ph,.ps-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ps-visual .proj-status{position:absolute;left:28px;bottom:28px;z-index:3;margin:0}
.ps-body{padding:56px 52px;display:flex;flex-direction:column;justify-content:center}
.ps-body h3{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:10px}
.ps-loc{display:flex;align-items:center;gap:6px;color:var(--clay);font-size:.9rem;margin-bottom:22px}
.ps-loc svg{width:16px;height:16px}
.ps-body p{color:var(--muted)}
.ps-sub{margin-top:22px;color:var(--ink)!important;font-weight:500}
.ps-form{margin:14px 0 0;max-width:none}
@media(max-width:900px){.proj-soon{grid-template-columns:1fr}.ps-visual{min-height:260px}.ps-body{padding:36px 26px}}

/* ============================================
   FOTO'S IN <picture> (aparte mobiele uitsnede)
   Het <picture>-element krijgt zelf de maat van de plek,
   de foto vult die altijd volledig (werkt in alle browsers).
   ============================================ */
picture{display:block}
picture>img{display:block;width:100%;height:100%;object-fit:cover}
.hero-bg>picture,.cta-band>picture,.ps-visual>picture,.proj-hero>picture{position:absolute;inset:0;z-index:0}
.page-head>picture{position:absolute;inset:0;z-index:0;opacity:.4}
.feature .visual>picture,.p-photo>picture,div[style*="aspect-ratio"]>picture{width:100%;height:100%}
.chapter .ch-visual>picture>img{border-radius:var(--r);aspect-ratio:4/5;height:auto}
.chapter .ch-visual.wide>picture>img{aspect-ratio:4/3}
@media(max-width:1024px){.chapter .ch-visual>picture>img{aspect-ratio:16/10}}
.has-intro .hero-bg>picture>img,.has-intro .page-head>picture>img{animation:heroSettle 2.4s cubic-bezier(.2,.7,.2,1) 1.75s both}
.curtain>picture{overflow:hidden}

/* Heijdewijck impressies */
.ps-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.ps-gallery figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:var(--sand)}
.ps-gallery picture{width:100%;height:100%}
.ps-gallery img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ps-gallery figure:hover img{transform:scale(1.03)}
.ps-note{margin-top:14px;font-size:.8rem;color:var(--muted)}
@media(max-width:768px){.ps-gallery{grid-template-columns:1fr;gap:14px}}

/* hero: links uitlijnen zodat Wendy en Martin rechts van de kop blijven */
@media(min-width:769px){.hero-bg>picture>img{object-position:0% 50%}}
/* tablet (liggend): foto boven, tekst eronder, zodat Wendy en Martin allebei in beeld blijven */
@media(min-width:769px) and (max-width:1100px){
  .hero{display:block;min-height:0;background:var(--ink)}
  .hero-bg{position:relative;inset:auto;aspect-ratio:16/9;height:auto}
  .hero-bg>picture>img{object-position:50% 50%}
  .hero-bg::after{background:linear-gradient(180deg,rgba(20,32,28,.55) 0%,rgba(20,32,28,0) 25%,rgba(20,32,28,0) 65%,var(--ink) 100%)}
  .hero-content{padding:0 0 70px;margin-top:-40px}
  .hero-scroll{display:none}
}

/* ============================================
   TYPOGRAFIE — Montserrat, gelijk aan het logo
   ============================================ */
body{font-size:16px;line-height:1.7}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em;line-height:1.12}
h1{font-size:clamp(2.3rem,5.2vw,4.3rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.85rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.5rem)}
h4{letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6}
/* nadruk: geen schuine serif meer, maar de koperkleur van het logo */
em{font-style:normal}
h1 em,h2 em,h3 em,h4 em{color:var(--clay)}
.hero h1 em,.page-head h1 em,.cta-band h2 em,.on-dark h1 em,.on-dark h2 em,.on-dark h3 em,.forest-bg h2 em,.duo-card em{color:var(--clay-soft)}
.step .s-num,.val-row .vn,.chapter .ch-num,.s-tag,.ph-ico,.story-hero .sh-role,.hist-quote .hq p,.story-lead .big em,.hist-quote .hq p em{font-style:normal}
.step .s-num,.val-row .vn,.chapter .ch-num{font-weight:600;letter-spacing:-.02em}
.stat .num,.years .yn,.gen-year,.tl-year,.reach .r-time,.feature-meta .m .n,.type-card .tc-meta .m .n{font-weight:600;letter-spacing:-.03em}
.statement .q,.pullquote .pq,.story-lead .big,.hist-quote .hq p,.story-text p.first{font-weight:500;letter-spacing:-.015em}
.statement .q{font-size:clamp(1.5rem,3vw,2.4rem)}
.pullquote .pq{font-size:clamp(1.4rem,2.6vw,2.05rem)}
.story-lead .big{font-size:clamp(1.6rem,3.1vw,2.6rem)}
.marquee-track span{font-weight:500;letter-spacing:-.01em}
.mobile-menu a{font-weight:600;letter-spacing:-.02em;font-size:1.8rem}
.faq-q,.profile .p-name,.duo-card .duo-name,.contact-info .v,.wz-bnr,.lc legend,.cookie-banner h4,.usp h4,.gen h4,.tl-content h4,.val-row h4,.step h4,.amen .a-card h4,.grond-checklist .txt strong,.ph-name,.person-facts .pf .pf-v,.type-card .tc-price{font-weight:600;letter-spacing:-.015em}
.faq-q{font-size:1.1rem}
.profile .p-name{font-size:1.6rem}
.contact-info .v{font-size:1.05rem}
.btn{font-weight:600;letter-spacing:.02em}
@media(max-width:480px){.page-head h1{font-size:1.95rem}}

/* ============================================
   HOMEPAGE — kort overzicht met doorklik-blokken
   ============================================ */
.home-links-sec{padding-top:96px;padding-bottom:96px}
.hl-head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;margin-bottom:48px}
.hl-head h2{margin-top:14px}
.hl-head .lead{margin:0}
.home-links{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hl-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hl-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,32,28,.12)}
.hl-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.hl-img picture{width:100%;height:100%}
.hl-img img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hl-card:hover .hl-img img{transform:scale(1.04)}
.hl-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.hl-body h3{font-size:1.25rem;margin-bottom:8px}
.hl-body p{color:var(--muted);font-size:.95rem;line-height:1.6;flex:1}
.hl-more{margin-top:16px;display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.88rem;color:var(--clay)}
.hl-more .arw svg{width:16px;height:16px}
.hl-card:hover .hl-more .arw{transform:translateX(4px)}
.hl-more .arw{display:inline-flex;transition:transform .3s var(--ease)}
@media(max-width:1100px){.home-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.hl-head{grid-template-columns:1fr;gap:16px;margin-bottom:32px}.home-links-sec{padding-top:64px;padding-bottom:64px}}
@media(max-width:560px){.home-links{grid-template-columns:1fr 1fr;gap:12px}.hl-body{padding:14px 14px 16px}.hl-body h3{font-size:1.02rem}.hl-body p{display:none}.hl-more{margin-top:8px;font-size:.8rem}}

/* ============================================
   HOMEPAGE v2 — rustig, drie blokken, compact
   ============================================ */
.home-links{grid-template-columns:repeat(3,1fr);gap:28px}
.hl-img{aspect-ratio:3/2}
.hl-body{padding:26px 26px 28px}
.hl-body h3{font-size:1.35rem}
.home-links-sec{padding-top:110px;padding-bottom:110px}
.home-fam{padding:100px 0}
.home-fam .lead{max-width:34ch}
.cta-band{padding:96px 0}
@media(max-width:1100px){.home-links{grid-template-columns:repeat(3,1fr);gap:18px}.hl-body{padding:20px}}
@media(max-width:768px){
  .hero-btns{gap:10px;flex-wrap:nowrap}
  .hero-btns .btn{padding:14px 20px;font-size:.88rem}
  .home-links-sec{padding-top:56px;padding-bottom:56px}
  .home-links{grid-template-columns:1fr;gap:12px}
  .hl-card{flex-direction:row;align-items:stretch}
  .hl-img{aspect-ratio:auto;width:38%;flex:none;min-height:118px}
  .hl-body{padding:16px 16px 16px}
  .hl-body h3{font-size:1.08rem;margin-bottom:4px}
  .hl-body p{display:block;font-size:.86rem;line-height:1.45}
  .hl-more{margin-top:8px;font-size:.82rem}
  .home-fam{padding:56px 0}
  .home-fam .two-col{gap:28px!important}
  .home-fam .reveal[style*="aspect-ratio"]{aspect-ratio:16/10!important}
  .cta-band{padding:72px 0}
}
@media(max-width:560px){.home-links{grid-template-columns:1fr}.hl-body p{display:block}}
/* footer compacter op mobiel: menu en contact naast elkaar */
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr 1fr;gap:28px 20px;padding-bottom:40px}
  .footer-top .footer-col:first-child{grid-column:1/-1}
  .footer-col a,.footer-col p{margin-bottom:9px;font-size:.9rem}
  .footer-col h5{margin-bottom:14px}
}
/* tablet: familiefoto op de homepage niet schermvullend hoog */
@media(min-width:769px) and (max-width:1100px){.home-fam .reveal[style*="aspect-ratio"]{aspect-ratio:16/9!important}}