/* ============================================================
   Hanzehart Fonds: Basis & gedeelde componenten
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-text);
  line-height: var(--lh-text);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" on;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--pink); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible, .on-pink :focus-visible { outline-color: var(--cream); }
/* Programmatische focus (koppen, hoofdcontainer bij schermwissel): geen zichtbare rand */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link {
  position: fixed; top: var(--s-3); left: var(--s-3); z-index: 999;
  background: var(--hanze-deep); color: var(--cream); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill); transform: translateY(-200%); transition: transform var(--t-base) var(--ess-out, ease);
  text-decoration: none; font-weight: var(--fw-semi);
}
.skip-link:focus { transform: none; }

/* ---------- Typografie ---------- */
.display, .h1, .h2, .h3 {
  color: var(--title);
  font-weight: var(--fw-display);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: var(--track-tight); line-height: 1.05; }
.lead { font-size: var(--fs-lead); line-height: 1.4; letter-spacing: -0.01em; font-weight: var(--fw-medium); text-wrap: pretty; }
.prose p { max-width: var(--measure); text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.label {
  font-size: var(--fs-label); font-weight: var(--fw-semi); text-transform: uppercase;
  letter-spacing: var(--track-label); line-height: 1.2;
}
.muted { color: var(--ink-soft); }
.pink { color: var(--pink); }
.mark {
  background: linear-gradient(transparent 12%, var(--blue) 12%, var(--blue) 88%, transparent 88%);
  padding: 0 .08em; margin: 0 -.04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }

/* ---------- Knoppen ---------- */
.btn {
  --btn-bg: var(--hanze); --btn-fg: var(--cream);
  position: relative; display: inline-flex; align-items: center; gap: .7em;
  min-height: 52px; padding: 0 1.5em; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: var(--fw-bold); font-size: 1rem; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; isolation: isolate; overflow: hidden;
  transition: transform var(--t-base) var(--ease-out), background-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--btn-hover, var(--pink)); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: scale(.97); }
.btn .arrow { transition: transform var(--t-base) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--pink { --btn-bg: var(--pink); --btn-fg: var(--white); --btn-hover: var(--hanze); }
.btn--cream { --btn-bg: var(--cream); --btn-fg: var(--hanze); --btn-hover: var(--hanze); }
.btn--cream:hover { color: var(--cream); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--hanze); box-shadow: inset 0 0 0 2px currentColor; --btn-hover: var(--hanze); }
.btn--ghost:hover { color: var(--cream); }
.btn--lg { min-height: 64px; padding: 0 2em; font-size: 1.125rem; }
.btn--sm { min-height: 40px; padding: 0 1.1em; font-size: .9rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.link {
  font-weight: var(--fw-semi); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  transition: background-size var(--t-base) var(--ease-out);
  padding-bottom: 2px;
}
.link:hover { background-size: 0 2px; background-position: 100% 100%; }

/* ---------- Site-navigatie ---------- */
/* Merkstreep: de woordmerkverhouding Hanze (blauw) · hart (roze) · Fonds (zand) */
.brand-stripe { position: fixed; inset: 0 0 auto 0; height: 5px; z-index: calc(var(--z-nav) + 1); background: linear-gradient(90deg, var(--blue) 0 47%, var(--pink) 47% 82%, var(--sand) 82% 100%); pointer-events: none; }
.site-nav {
  position: fixed; inset: 5px 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-4) var(--gutter);
  transition: background-color var(--t-base), transform var(--t-slow) var(--ease-out), box-shadow var(--t-base);
}
.site-nav.is-scrolled { background: rgb(248 242 225 / .86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgb(34 24 27 / .06); }
.site-nav.is-hidden { transform: translateY(-110%); }
.site-nav__logo { display: block; width: clamp(190px, 15.5vw, 250px); transition: width var(--t-slow) var(--ease-out); }
.site-nav.is-scrolled .site-nav__logo { width: clamp(170px, 12vw, 200px); }
.site-nav__logo svg { width: 100%; height: auto; }
.site-nav__links { display: flex; gap: 2px; padding: 6px; border-radius: var(--r-pill); font-weight: var(--fw-semi); font-size: .95rem; color: var(--hanze); background: rgb(255 253 248 / .72); box-shadow: inset 0 0 0 1px var(--sand), var(--shadow-s); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-nav__links a { text-decoration: none; position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--r-pill); transition: background var(--t-base), color var(--t-base); }
.site-nav__links a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); transform: scale(0); margin-right: -15px; transition: transform var(--t-base) var(--ease-spring), margin var(--t-base) var(--ease-out); }
.site-nav__links a:hover { background: var(--sand-soft); }
.site-nav__links a.is-current { background: var(--blue-soft); }
.site-nav__links a.is-current::before { transform: scale(1); margin-right: 0; }
.site-nav__right { display: flex; align-items: center; gap: var(--s-3); }
.site-nav__contact { font-weight: var(--fw-semi); font-size: .95rem; text-decoration: none; padding: 9px 14px; border-radius: var(--r-pill); transition: background var(--t-base); }
.site-nav__contact:hover { background: var(--sand-soft); }
.site-nav__contact.is-current { background: var(--blue-soft); }
@media (max-width: 1240px) { .site-nav__contact { display: none; } }
.menu__list a[aria-current="page"] { color: var(--hanze-deep); }
.menu-btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream); color: var(--hanze); box-shadow: inset 0 0 0 2px var(--hanze);
  transition: background var(--t-base), color var(--t-base);
}
.menu-btn:hover { background: var(--hanze); color: var(--cream); }
.menu-btn span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform var(--t-base) var(--ease-out); }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform var(--t-base) var(--ease-out); }
.menu-btn span::before { transform: translateY(-6px); }
.menu-btn span::after { transform: translateY(6px); }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: rotate(45deg); }
.menu-open .menu-btn span::after { transform: rotate(-45deg); }
@media (max-width: 1080px) { .site-nav__links { display: none; } }
@media (max-width: 560px) { .site-nav .btn--nav-cta { display: none; } }

/* Menu overlay */
.menu {
  position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1);
  background: var(--pink); color: var(--cream);
  clip-path: circle(0% at calc(100% - 50px) 44px);
  transition: clip-path 800ms var(--ease-draw);
  display: grid; grid-template-rows: 1fr auto; padding: 120px var(--gutter) var(--s-6);
  visibility: hidden;
}
.menu-open .menu { clip-path: circle(150% at calc(100% - 50px) 44px); visibility: visible; }
.menu-open .site-nav { background: transparent; box-shadow: none; backdrop-filter: none; }
.menu-open .site-nav__logo svg .logo-blue, .menu-open .site-nav__logo svg .logo-pink, .menu-open .site-nav__logo svg .logo-sand { fill: var(--cream); }
.menu__list { align-self: center; display: grid; gap: .1em; }
.menu__list a {
  font-size: clamp(2.4rem, 1rem + 6vw, 6.5rem); font-weight: var(--fw-display); letter-spacing: var(--track-display);
  line-height: 1; text-decoration: none; display: inline-flex; align-items: baseline; gap: .3em;
  opacity: 0; transform: translateY(40px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), color var(--t-base);
}
.menu__list a small { font-size: .9rem; font-weight: var(--fw-semi); letter-spacing: var(--track-label); opacity: .7; }
.menu__list a:hover { color: var(--hanze-deep); }
.menu-open .menu__list a { opacity: 1; transform: none; }
.menu-open .menu__list li:nth-child(1) a { transition-delay: 200ms; }
.menu-open .menu__list li:nth-child(2) a { transition-delay: 260ms; }
.menu-open .menu__list li:nth-child(3) a { transition-delay: 320ms; }
.menu-open .menu__list li:nth-child(4) a { transition-delay: 380ms; }
.menu-open .menu__list li:nth-child(5) a { transition-delay: 440ms; }
.menu-open .menu__list li:nth-child(6) a { transition-delay: 500ms; }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-small); }
.menu-open .menu-btn { background: var(--cream); color: var(--ink); }
.menu-open .btn--nav-cta { --btn-bg: var(--cream); --btn-fg: var(--ink); }
.menu-open .site-nav__links { visibility: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--hanze-deep); color: var(--cream); padding: var(--s-9) 0 var(--s-6); position: relative; overflow: hidden; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--pink-soft); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-7); }
.footer-grid h3 { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--sand); margin-bottom: var(--s-4); font-weight: var(--fw-semi); }
.footer-grid li + li { margin-top: var(--s-2); }
.footer-grid address { font-style: normal; }
.footer-legal { margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid rgb(248 242 225 / .16); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between; font-size: var(--fs-small); color: var(--sand); }
.footer-mark { position: absolute; right: -4vw; bottom: -8vw; width: 38vw; opacity: .07; pointer-events: none; }
.anbi-pill { display: inline-flex; align-items: center; gap: .5em; padding: .35em .9em; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgb(248 242 225 / .3); font-size: var(--fs-small); margin-top: var(--s-4); }
.anbi-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px rgb(163 98 10 / .25); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Beeld ---------- */
.photo { position: relative; overflow: hidden; background: var(--sand); }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02); }
.photo::after { /* warme merktoon */
  content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgb(225 50 90 / .10), rgb(135 200 255 / .12)); mix-blend-mode: multiply; pointer-events: none;
}
.photo__credit {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; font-size: 11px; font-weight: var(--fw-semi);
  letter-spacing: .08em; text-transform: uppercase; background: rgb(248 242 225 / .9); color: var(--ink);
  padding: 4px 8px; border-radius: 6px;
}
.heart-clip { clip-path: url(#heartClip); }

/* ---------- Reveal-hulpklassen ---------- */
/* Masker voor regel-onthulling: ruimte onder de regel voor onderkasten (j, g, p) bij lage regelafstand */
.reveal-line { display: block; overflow: hidden; padding-bottom: .24em; margin-bottom: -.24em; }
.reveal-line > span { display: block; transform: translateY(140%); transition: transform var(--t-reveal) var(--ease-out); }
.is-in .reveal-line > span, .reveal-line.is-in > span { transform: none; }
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.fade-up.is-in, .is-in .fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-line > span, .fade-up { transform: none !important; opacity: 1 !important; }
}

/* ---------- Ontwerpnotities (prototype) ---------- */
.notes-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: var(--z-toast);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border-radius: var(--r-pill);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-m), inset 0 0 0 1px rgb(34 24 27 / .08);
  font-size: 13px; font-weight: var(--fw-semi);
}
.notes-toggle i { width: 10px; height: 10px; border-radius: 50%; background: var(--sand); transition: background var(--t-base); }
.show-notes .notes-toggle i { background: var(--pink); }
@media (max-width: 700px) { .notes-toggle { left: auto; right: 4px; bottom: auto; top: 40%; writing-mode: vertical-rl; padding: 12px 8px; } }
[data-note] { position: relative; }
.note-tag {
  display: none; position: absolute; z-index: 40; top: -10px; right: 0; transform: translateY(-100%);
  max-width: 280px; padding: 6px 10px; border-radius: 8px; font: 600 11px/1.35 var(--font); letter-spacing: .01em; text-transform: none;
  color: var(--ink); background: var(--white); box-shadow: var(--shadow-m); pointer-events: none; text-align: left;
}
.note-tag b { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.note-tag[data-kind="approved"] b { color: var(--success); }
.note-tag[data-kind="proposal"] b { color: var(--blue-ink); }
.note-tag[data-kind="approval"] b { color: var(--warning); }
.note-tag[data-kind="prototype"] b { color: var(--pink-ink); }
.show-notes .note-tag { display: block; }
.show-notes [data-note] { outline: 2px dashed rgb(30 92 148 / .45); outline-offset: 6px; }
.show-notes [data-note="approval"] { outline-color: rgb(163 98 10 / .55); }
.show-notes [data-note="approved"] { outline-color: rgb(46 125 91 / .55); }
.show-notes [data-note="prototype"] { outline-color: rgb(192 25 63 / .5); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); transform: translate(-50%, 140%);
  background: var(--hanze-deep); color: var(--cream); padding: 14px 20px; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: var(--fw-medium); box-shadow: var(--shadow-l);
  transition: transform var(--t-slow) var(--ease-spring); max-width: calc(100vw - 32px);
}
.toast.is-on { transform: translate(-50%, 0); }

/* ---------- Titelkleur: Hanze-blauw i.p.v. zwart ---------- */
.hero__payoff, .belofte__text, .steden__title, .steden__index a, .crit__t, .stap .h3,
.welkom__title, .regio-title, .intake__title, .setup__title, .q__title, .overzicht__title,
.welkom__steps strong, .intake__qs li, .place b, .pin__label b, .answer__q, .sheet__title, .footer-claim { color: var(--title); }
.on-dark .h2, .on-dark .footer-claim, .on-dark .h3 { color: var(--cream); }
.place[aria-checked="true"] b, .pin.is-selected .pin__label b { color: var(--white); }
.photo__credit[data-note] { position: absolute; }
/* Bewust grotere lijnen rond beeld (camerakader, hartcontour) niet begrenzen door de reset */
.frame__ring, .pijlers__outline, .pchap__outline, .dc-wrap > svg { max-width: none; }

/* ---------- Presentatiemodus: geen prototype-vermeldingen ---------- */
.is-presentation [data-proto], .is-presentation .proto-badge, .is-presentation .proto-bar,
.is-presentation .upload__proto, .is-presentation .sheet__proto, .is-presentation .privacy__flag,
.is-presentation .verstuurd__proto, .is-presentation .sent .proto, .is-presentation .tag--sample,
.is-presentation .tag--own, .is-presentation .notes-toggle { display: none !important; }