/* Template 04 — Vergezicht. Zie DESIGN.md voor het Richtingscontract. */

@font-face { font-family:'Bricolage Grotesque'; font-weight:400 800; font-style:normal; font-display:swap; src:url('assets/fonts/bricolage-grotesque-variable.woff2') format('woff2'); }
@font-face { font-family:'Public Sans'; font-weight:400 600; font-style:normal; font-display:swap; src:url('assets/fonts/public-sans-variable.woff2') format('woff2'); }
@font-face { font-family:'Fragment Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/fragment-mono-400.woff2') format('woff2'); }

:root{
  --papier: oklch(0.96 0.02 90);
  --papier-dim: oklch(0.92 0.025 88);
  --bos: oklch(0.28 0.05 150);
  --bos-dim: oklch(0.45 0.04 150);
  --oker: oklch(0.62 0.13 65);
  --oker-dim: oklch(0.62 0.13 65 / 0.35);
  --oker-text: oklch(0.48 0.13 65); /* WCAG AA-conforme variant van --oker voor tekst op --papier (3.36:1 -> ~5.5:1) */
  --inkt: oklch(0.16 0.01 60);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'Fragment Mono', 'Courier New', monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --masthead-h: 4.5rem;
  --max: 1360px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } * { animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }

body{
  margin:0; background:var(--papier); color:var(--inkt);
  font-family:var(--font-body); font-size:1.05rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

.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; }

.skip-link{
  position:absolute; left:1rem; top:0; z-index:1000; background:var(--inkt); color:var(--papier);
  padding:0.75rem 1.25rem; font-family:var(--font-mono); font-size:0.85rem; text-decoration:none;
  transform:translateY(-150%); transition:transform 0.2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

:focus-visible{ outline:2px solid var(--oker); outline-offset:2px; }

/* ---------- Masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:60; height:var(--masthead-h);
  display:flex; align-items:center; background:color-mix(in oklch, var(--papier) 92%, transparent);
  backdrop-filter:blur(6px); border-bottom:2px solid var(--inkt);
}
.masthead__inner{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.masthead__logo{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-0.01em; text-decoration:none; color:var(--inkt); text-transform:uppercase; }
.masthead__logo span{ color:var(--oker-text); }
.btn{
  display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-display); font-weight:700;
  text-decoration:none; border:2px solid var(--inkt); cursor:pointer; padding:0.7rem 1.3rem; font-size:0.9rem;
  transition:transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn--sm{ padding:0.55rem 1.05rem; font-size:0.82rem; }
.btn--oker{ background:var(--oker); color:var(--inkt); box-shadow:4px 4px 0 var(--inkt); }
.btn--oker:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--inkt); }
.btn--ghost{ background:transparent; color:var(--inkt); }
.btn--ghost:hover{ background:var(--inkt); color:var(--papier); }

/* ---------- Hero (Comp C — kaartlegenda) ---------- */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  background:
    linear-gradient(0deg, rgba(18,15,9,0.12) 0%, transparent 42%),
    url('assets/images/hero-vergezicht.jpg') center 82%/cover no-repeat;
}
.hero__contours{
  position:absolute; inset:0 0 auto 0; height:46%; opacity:0.12; mix-blend-mode:multiply; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, black, transparent); mask-image:linear-gradient(180deg, black, transparent);
  background-image:
    repeating-radial-gradient(circle at 15% 120%, transparent 0, transparent 13px, var(--bos) 13.5px, transparent 14px);
}
.hero__top{
  position:absolute; top:clamp(1.25rem,4vw,2rem); left:0; right:0; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-start; padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.hero__wordmark{
  font-family:var(--font-mono); font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--papier); background:rgba(18,15,9,0.45); backdrop-filter:blur(3px); padding:0.55rem 0.95rem; border:1px solid rgba(244,240,228,0.4);
}
.hero__scale{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--papier);
  background:rgba(18,15,9,0.45); backdrop-filter:blur(3px); padding:0.55rem 0.85rem; display:none;
}
@media (min-width:720px){ .hero__scale{ display:block; } }

.legend{
  position:absolute; z-index:2; margin:0; width:min(460px, 90vw);
  left:clamp(1.25rem,6vw,4.5rem); bottom:clamp(1.5rem,6vw,4rem);
  background:var(--papier); border:2px solid var(--inkt); padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:9px 9px 0 rgba(18,15,9,0.22);
}
.legend::before, .legend::after{ content:""; position:absolute; width:16px; height:16px; border:2.5px solid var(--oker); }
.legend::before{ top:-3px; left:-3px; border-right:none; border-bottom:none; }
.legend::after{ bottom:-3px; right:-3px; border-left:none; border-top:none; }
.legend__id{ font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--bos); margin:0 0 0.9rem; }
.legend__id strong{ display:block; font-family:var(--font-display); font-size:1.15rem; font-weight:800; color:var(--inkt); text-transform:none; letter-spacing:-0.01em; margin-top:0.15rem; }
.kicker{ font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--oker-text, var(--bos)); margin:0 0 0.75rem; }
.legend h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,2.6vw,2.15rem); line-height:1.1; letter-spacing:-0.01em; margin:0 0 0.9rem; }
.legend p.lead{ margin:0 0 1.4rem; color:color-mix(in oklch, var(--inkt) 78%, transparent); font-size:0.98rem; }
.legend__coords{
  margin-top:1.25rem; padding-top:0.85rem; border-top:1px dashed var(--bos-dim);
  font-family:var(--font-mono); font-size:0.72rem; color:var(--bos); letter-spacing:0.03em;
}

/* ---------- Section shell ---------- */
.section{ max-width:var(--max); margin-inline:auto; padding:clamp(4rem,9vw,6.5rem) clamp(1.25rem,4vw,2.5rem); }
.section--divider{ border-top:2px solid var(--inkt); position:relative; }
.section--divider::before{
  content:""; position:absolute; top:-2px; left:0; right:0; height:2px;
  background-image:repeating-linear-gradient(90deg, var(--oker) 0 22px, transparent 22px 44px);
}
.section-eyebrow{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--bos); margin:0 0 0.6rem; }
.section-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 1rem; max-width:20ch; }
.section-title--on-dark{ color:var(--papier); }
.section--ink{ background:var(--inkt); color:var(--papier); }
.section--ink .section-eyebrow{ color:var(--oker); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Hoogteprofiel (proces) ---------- */
.profile{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:center; }
.profile__chart{ width:100%; height:auto; }
.profile__chart .baseline{ stroke:var(--bos-dim); stroke-width:1.5; stroke-dasharray:2 7; }
.profile__chart .path{ fill:none; stroke:var(--inkt); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.profile__chart .fill{ fill:color-mix(in oklch, var(--oker) 14%, transparent); }
.profile__chart circle{ fill:var(--papier); stroke:var(--oker); stroke-width:3; }
.profile__chart .peak-label{ font-family:var(--font-mono); font-size:13px; fill:var(--bos); }
.profile__steps{ display:grid; gap:1.75rem; grid-template-columns:repeat(3,1fr); margin-top:2rem; }
.profile__step{ position:relative; padding-top:1.3rem; }
.profile__step::before{ content:""; position:absolute; top:0; left:0; width:0.6rem; height:0.6rem; border-radius:50%; background:var(--papier); border:2px solid var(--oker); }
.profile__step::after{ content:""; position:absolute; top:0.3rem; left:0.6rem; width:2.75rem; height:1px; background:var(--bos-dim); }
.profile__step .num{ font-family:var(--font-mono); color:var(--oker-text); font-size:0.85rem; letter-spacing:0.03em; }
.profile__step h3{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin:0.4rem 0 0.5rem; }
.profile__step p{ margin:0; font-size:0.95rem; color:color-mix(in oklch, var(--inkt) 75%, transparent); }
@media (max-width:820px){ .profile__steps{ grid-template-columns:1fr; } }

/* ---------- Positionering (legenda-vergelijking) ---------- */
.legend-compare{ display:grid; gap:1.5rem; grid-template-columns:1fr 1fr; margin-top:2.5rem; }
.legend-compare__col{ padding:clamp(1.5rem,3vw,2rem); border:2px solid var(--inkt); background:var(--papier); }
.legend-compare__col--alt{ background:var(--papier-dim); border-style:dashed; }
.legend-compare__label{ font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; display:flex; align-items:center; gap:0.6rem; margin:0 0 1.1rem; }
.legend-compare__mark{ width:0.85rem; height:0.85rem; border-radius:50%; background:var(--oker); flex-shrink:0; display:inline-block; }
.legend-compare__col--alt .legend-compare__mark{ background:transparent; border:2px dashed var(--bos-dim); }
.legend-compare__col ul{ margin:0; padding:0; list-style:none; display:grid; gap:0.85rem; }
.legend-compare__col li{ font-size:0.95rem; padding-left:1.4rem; position:relative; }
.legend-compare__col li::before{ content:"—"; position:absolute; left:0; color:var(--oker-text); font-family:var(--font-mono); }
.legend-compare__col--alt li::before{ content:"·"; color:var(--bos-dim); font-weight:800; }
@media (max-width:720px){ .legend-compare{ grid-template-columns:1fr; } }

/* ---------- Over Renske ---------- */
.about{ display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:minmax(220px,320px) 1fr; align-items:start; }
.about__card{
  position:relative; background:var(--papier); border:2px solid var(--inkt); padding:1.75rem;
  box-shadow:7px 7px 0 rgba(18,15,9,0.16);
}
.about__card::before, .about__card::after{ content:""; position:absolute; width:14px; height:14px; border:2px solid var(--oker); }
.about__card::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
.about__card::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }
.about__mark{
  width:4.5rem; height:4.5rem; border-radius:50%; border:2px solid var(--inkt);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800;
  font-size:1.3rem; background:var(--papier-dim); margin-bottom:1rem;
}
.about__card p.role{ font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; color:var(--bos); margin:0 0 0.3rem; }
.about__card p.name{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; margin:0; }
.about__body p{ font-size:1.02rem; color:color-mix(in oklch, var(--inkt) 82%, transparent); max-width:56ch; }
.about__body p:first-child{ margin-top:0; }
@media (max-width:760px){ .about{ grid-template-columns:1fr; } .about__card{ max-width:320px; } }

/* ---------- FAQ ---------- */
.faq-list{ display:grid; gap:0; margin-top:2rem; }
.faq-list details{ border-top:1px dashed var(--bos-dim); padding:1.25rem 0; }
.faq-list details:last-child{ border-bottom:1px dashed var(--bos-dim); }
.faq-list summary{
  cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:1rem;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary .idx{ font-family:var(--font-mono); font-size:0.8rem; color:var(--oker-text); flex-shrink:0; }
.faq-list summary::after{ content:"+"; margin-left:auto; font-family:var(--font-mono); color:var(--bos); }
.faq-list details[open] summary::after{ content:"–"; }
.faq-list p{ margin:0.85rem 0 0; padding-left:2.4rem; color:color-mix(in oklch, var(--inkt) 78%, transparent); max-width:60ch; }

/* ---------- Contact ---------- */
.contact-lead{ max-width:52ch; }
.contact-cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin:1.75rem 0 2.25rem; }
.contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:0.6rem; font-family:var(--font-mono); font-size:0.9rem; color:color-mix(in oklch, var(--papier) 85%, transparent); }
.placeholder-inline{ opacity:0.65; font-size:0.85em; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--inkt); color:color-mix(in oklch, var(--papier) 70%, transparent); padding:2.5rem clamp(1.25rem,4vw,2.5rem) 3rem; border-top:3px solid var(--oker); }
.site-footer__inner{ max-width:var(--max); margin-inline:auto; }
.site-footer__brand{ font-family:var(--font-display); font-weight:800; color:var(--papier); margin:0 0 1rem; font-size:1.05rem; }
.footer__links{ margin:1.25rem 0; }
.footer__links ul{ list-style:none; padding:0; margin:0; display:flex; gap:1.25rem; font-family:var(--font-mono); font-size:0.8rem; }
.footer__links a{ color:inherit; }
.footer__fictief{ font-size:0.8rem; opacity:0.6; margin-top:1.5rem; max-width:60ch; }

/* ---------- Hoogte-rail (scroll voortgang) ---------- */
.altitude-rail{
  position:fixed; right:1.1rem; top:50%; transform:translateY(-50%); z-index:50;
  height:min(46vh, 340px); width:2px; background:var(--bos-dim); display:none;
}
.altitude-rail__fill{ position:absolute; bottom:0; left:0; width:100%; height:100%; background:var(--oker); transform-origin:bottom; transform:scaleY(0); }
.altitude-rail__marker{
  position:absolute; left:50%; bottom:0; width:0.7rem; height:0.7rem; border-radius:50%;
  background:var(--papier); border:2px solid var(--oker); transform:translate(-50%,50%);
}
.altitude-rail__label{
  position:absolute; right:1rem; bottom:0; transform:translateY(50%);
  font-family:var(--font-mono); font-size:0.68rem; color:var(--bos); white-space:nowrap;
}
@media (min-width:1080px){ .altitude-rail{ display:block; } }
@media (prefers-reduced-motion: reduce){ .altitude-rail{ display:none; } }