/* GVN Hub: één stylesheet voor website, formulieren en dashboard.
   Huisstijl: diep Waal-groen met messing, koel papierwit, serif koppen (ontwerp directie, uitgewerkt). */

:root {
  --ink: #1f2420;
  --muted: #5d625a;
  --paper: #f4efe5;
  --mist: #e9e0cf;
  --mist-2: #efe8da;
  --surface: #ffffff;
  --ivory: #efe8db;          /* neutraal ivoor uit het ontwerp, zonder roze zweem */
  --ivory-line: #e0d6c3;
  --teal-deep: #173f32;   /* diepgroen uit het palet van de directie (29 okt) */
  --teal: #1f4a3b;
  --teal-2: #2d5a49;
  --teal-3: #7d9488;
  --brass: #a7864d;
  --brass-light: #cfb88d;
  --brass-ink: #75592b;
  --brass-soft: #f1e8d6;
  --knop: #8f713d;           /* gedempt goud, donker genoeg voor witte tekst op knoppen */
  --knop-hover: #7b6033;
  --line: #e2dacb;
  --line-strong: #c2b7a2;
  --danger: #a23b2a;
  --danger-soft: #f8e7e3;
  --warn: #8a6116;
  --warn-soft: #faf0dc;
  --ok: #2d6a4f;
  --ok-soft: #e3f1ea;
  --focus: #1a73e8;

  /* namen die formulieren en dashboard gebruiken */
  --green: var(--teal);
  --green-2: var(--teal-2);
  --green-soft: var(--mist);
  --gold: var(--brass);
  --gold-ink: var(--brass-ink);
  --gold-soft: var(--brass-soft);
  --cream: var(--mist-2);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --r-sm: 6px;
  --r: 10px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; interpolate-size: allow-keywords; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); }
img { max-width: 100%; display: block; }
a { color: var(--teal-2); text-underline-offset: 3px; }
a:hover { color: var(--teal); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; }
code { font-size: .9em; background: var(--mist); padding: 1px 5px; border-radius: 4px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--teal); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); z-index: 100; }
.skip:focus { top: 12px; color: #fff; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.eyebrow { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 14px; }
.eyebrow-light { color: var(--brass-light); }
.arrow { width: 18px; height: 11px; flex: none; transition: transform .25s var(--ease); }

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 999px;
  font: 500 .98rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .9rem; }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 1.05rem; }
.btn-dark, .btn-primary { background: var(--teal); color: #fff; }
.btn-dark:hover, .btn-primary:hover { background: var(--teal-2); color: #fff; box-shadow: 0 8px 20px -10px rgba(23,63,50,.6); }
.btn-primary:disabled { opacity: .7; cursor: wait; }
.btn-gold { background: var(--brass); color: #fff; border-radius: 2px; }
.btn-gold:hover { background: #b5955c; color: #fff; box-shadow: 0 10px 24px -12px rgba(167,134,77,.8); }
.btn-outline, .btn-secondary { color: var(--teal); border-color: var(--teal); background: transparent; }
.btn-outline:hover, .btn-secondary:hover { background: var(--teal); color: #fff; }
.btn-ghost-light { color: #fff; border-color: rgba(255,255,255,.45); border-radius: 2px; }
.btn-ghost-light:hover { border-color: #fff; color: var(--teal); background: #fff; }
.btn-quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-quiet:hover { color: var(--ink); border-color: var(--muted); }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--teal-2); font: 500 .88rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--teal); }

/* ---------- woordmerk ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--teal); }
.wm-gvn { font: 600 2rem/1 var(--serif); letter-spacing: -.02em; }
.wm-bar { width: 1px; height: 30px; background: var(--brass); }
.wm-adv { font: 400 .92rem/1 var(--sans); letter-spacing: .34em; }

/* ---------- kop ---------- */
.site-head { position: sticky; top: 0; z-index: 30; background: rgba(244,239,229,.95); backdrop-filter: blur(10px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.site-head.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(23,63,50,.5); }
.head-row { display: flex; align-items: center; gap: 28px; min-height: 80px; }
.main-nav { display: flex; gap: 30px; margin-left: auto; }
.main-nav a { position: relative; color: var(--ink); text-decoration: none; font-size: .95rem; padding: 8px 0; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.main-nav a:hover::after, .main-nav a[aria-current]::after { transform: scaleX(1); }
.main-nav a:hover { color: var(--teal); }
.nav-extra { display: none; }
.head-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch { font-weight: 600; font-size: .85rem; letter-spacing: .06em; color: var(--muted); text-decoration: none; padding: 6px 8px; border-radius: var(--r-sm); }
.lang-switch:hover { background: var(--mist); color: var(--teal); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: var(--ink); margin: 0 auto; position: relative; transition: transform .2s; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: clamp(480px, 36vw, 620px); display: flex; background: #262b25; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero-media img { width: 100%; height: 108%; object-fit: cover; object-position: 60% 35%; will-change: transform; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); }
/* doorschijnend paneel links, zoals in het ontwerp: de ruimte blijft zichtbaar */
.hero-panel { position: relative; width: min(44%, 660px); background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); display: flex; align-items: center; }
.hero-inner { padding: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 56px) clamp(48px, 7vw, 88px) clamp(32px, 7vw, 60px); }
.hero h1 { color: #fff; font-size: clamp(2.8rem, 5.6vw, 4.6rem); line-height: 1.02; margin-bottom: 26px; }
.hero-lede { color: #e4dac7; font-size: 1.06rem; line-height: 1.7; max-width: 44ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* één ingetogen openingsmoment */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-inner > * { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) forwards; }
  .js .hero-inner > :nth-child(2) { animation-delay: .08s; }
  .js .hero-inner > :nth-child(3) { animation-delay: .16s; }
  .js .hero-inner > :nth-child(4) { animation-delay: .24s; }
  .js .hero-media img { animation: settle 1.8s var(--ease) both; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { from { scale: 1.06; } to { scale: 1; } }

/* ---------- kernwaarden ---------- */
.features { background: var(--ivory); border-bottom: 1px solid var(--ivory-line); }
.features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature { padding: 48px 28px 48px 0; }
.feature + .feature { padding-left: 28px; border-left: 1px solid var(--ivory-line); }
.feature svg { width: 46px; height: 46px; fill: none; stroke: var(--teal); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 20px; transition: stroke .3s, transform .4s var(--ease); }
.feature:hover svg { stroke: var(--brass); transform: translateY(-3px); }
.feature h3 { font: 400 1.3rem/1.25 var(--serif); margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: .95rem; margin: 0; max-width: 30ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .feature svg * { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.4s var(--ease); }
  .js .feature.in-view svg * { stroke-dashoffset: 0; }
  .js .feature:nth-child(2) svg * { transition-delay: .12s; }
  .js .feature:nth-child(3) svg * { transition-delay: .24s; }
  .js .feature:nth-child(4) svg * { transition-delay: .36s; }
}

/* ---------- over ons ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--ivory); border-bottom: 1px solid var(--ivory-line); }
.about-media { position: relative; min-height: clamp(300px, 34vw, 460px); overflow: hidden; }
.about-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; transition: transform 1.2s var(--ease); }
.about:hover .about-media img { transform: scale(1.02); }
.about-text { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 36px; align-items: start; align-self: center;
  padding: clamp(40px, 5vw, 72px) max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px); }
.about h2 { font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: 1.1; margin: 0; }
.about-copy { border-left: 1px solid var(--line-strong); padding-left: 32px; font-size: .98rem; color: #33362f; }
.more summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; color: var(--teal); border-bottom: 1px solid var(--brass); padding-bottom: 2px; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover .arrow { transform: translateX(4px); }
.more[open] summary .arrow { transform: rotate(90deg); }
.more-body { padding-top: 16px; }
.more::details-content, .svc::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
.more[open]::details-content, .svc[open]::details-content { height: auto; }

/* ---------- secties ---------- */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section-tint { background: var(--mist-2); }
.section-deep { background: var(--teal-deep); color: #e4dac7; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); margin: 0; }
.section-head > p { color: var(--muted); margin: 0; max-width: 54ch; }
.section-head.on-dark h2 { color: #fff; }
.section-head.on-dark > p { color: #c4bdab; }

/* ---------- voor wie wij werken: tabbladen + diensten ---------- */
.segments { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.seg-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); position: sticky; top: 104px; }
.seg-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 20px 20px 20px 22px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; color: var(--ink); transition: background-color .25s; }
.seg-tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--brass); transform: scaleY(0); transition: transform .35s var(--ease); }
.seg-tab:hover { background: var(--mist-2); }
.seg-tab[aria-selected="true"] { background: var(--surface); }
.seg-tab[aria-selected="true"]::before { transform: scaleY(1); }
.seg-name { font: 400 1.45rem/1.2 var(--serif); }
.seg-tab[aria-selected="true"] .seg-name { color: var(--teal); }
.seg-meta { font-size: .82rem; color: var(--muted); }
.seg-panel { background: var(--surface); border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }
.js .seg-panel[data-inactive], .js .price-panel[data-inactive], .js .proc-panel[data-inactive] { display: none; }
.js .seg-panel, .js .price-panel, .js .proc-panel { animation: fadein .45s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.seg-panel + .seg-panel { margin-top: 20px; }
.js .seg-panel + .seg-panel { margin-top: 0; }
.seg-panel-title { font: 400 2rem/1.15 var(--serif); margin-bottom: 6px; }
.seg-intro { color: var(--muted); max-width: 60ch; margin-bottom: 24px; }
.svc-list { border-top: 1px solid var(--line); }
.svc { border-bottom: 1px solid var(--line); }
.svc summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 16px; padding: 18px 6px; cursor: pointer; transition: background-color .2s, padding .3s var(--ease); }
.svc summary::-webkit-details-marker { display: none; }
.svc summary:hover { background: var(--mist-2); padding-left: 14px; }
.svc-name { font-weight: 500; font-size: 1.05rem; }
.svc-price { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chev { width: 16px; height: 16px; justify-self: end; color: var(--teal); transition: transform .35s var(--ease); }
.svc[open] .chev { transform: rotate(180deg); }
.svc[open] summary .svc-name { color: var(--teal); }
.svc-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; padding: 4px 6px 28px; }
.svc-text p { color: #33362f; font-size: .98rem; }
.svc-points { list-style: none; padding: 0; margin: 0; }
.svc-points li { position: relative; padding: 4px 0 4px 22px; font-size: .95rem; }
.svc-points li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 1.5px; background: var(--brass); }
.svc-side { background: var(--mist-2); border-top: 2px solid var(--brass); padding: 20px; align-self: start; }
.svc-side h4 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); }
.svc-note { font-size: .88rem; color: var(--muted); margin: 10px 0 16px; }
.price-lines { list-style: none; margin: 0; padding: 0; }
.price-lines li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: .93rem; }
.price-lines .dots { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); min-width: 16px; }
.price-lines strong { font-weight: 600; color: var(--teal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-lines strong.todo { color: var(--brass-ink); border: 1px dashed var(--brass); padding: 0 8px; border-radius: 4px; }

/* ---------- werkwijze ---------- */
.process { background: var(--surface); border: 1px solid var(--line); }
.proc-track { position: relative; padding: 36px clamp(20px, 4vw, 48px) 28px; border-bottom: 1px solid var(--line); }
.proc-track ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.proc-line { position: absolute; left: calc(clamp(20px, 4vw, 48px) + 12.5% * 1 - 12.5% + 22px); right: calc(clamp(20px, 4vw, 48px) + 25% - 22px); top: 58px; height: 2px; background: var(--line); }
.proc-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--step, 0) * 33.333%); background: var(--brass); transition: width .6s var(--ease); }
.proc-step { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: none; border: 0; padding: 0 10px 0 0; cursor: pointer; text-align: left; color: var(--ink); }
.proc-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--line-strong); font: 400 1.15rem/1 var(--serif); color: var(--muted); transition: all .35s var(--ease); }
.proc-step:hover .proc-dot { border-color: var(--teal); color: var(--teal); }
.proc-step.is-past .proc-dot { border-color: var(--brass); color: var(--brass-ink); }
.proc-step[aria-selected="true"] .proc-dot { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 0 0 6px var(--mist); }
.proc-label { font-weight: 600; margin-top: 8px; }
.proc-when { font-size: .82rem; color: var(--muted); }
.proc-step[aria-selected="true"] .proc-when { color: var(--brass-ink); }
.proc-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; padding: clamp(24px, 3vw, 40px) clamp(20px, 4vw, 48px); }
.proc-panel + .proc-panel { border-top: 1px solid var(--line); }
.proc-count { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 8px; }
.proc-main h3 { font: 400 1.9rem/1.15 var(--serif); }
.proc-main p:last-child { color: var(--muted); margin: 0; max-width: 52ch; }
.proc-roles { margin: 0; display: grid; gap: 14px; align-content: start; }
.proc-roles div { padding: 14px 18px; background: var(--mist-2); border-left: 2px solid var(--teal-2); }
.proc-roles div:last-child { border-left-color: var(--brass); }
.proc-roles dt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.proc-roles dd { margin: 0; font-size: .96rem; }

/* ---------- tarieven ---------- */
.toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--mist); border-radius: 999px; padding: 4px; margin-bottom: 28px; }
.toggle button { position: relative; z-index: 1; border: 0; background: none; padding: 10px 26px; font: 500 .95rem var(--sans); color: var(--muted); cursor: pointer; border-radius: 999px; transition: color .3s; }
.toggle button[aria-selected="true"] { color: #fff; }
.toggle-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: var(--teal); border-radius: 999px; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .45s var(--ease); }
.no-js-hide { display: none; }
.price-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: stretch; }
.price-panel + .price-panel { margin-top: 20px; }
.js .price-panel + .price-panel { margin-top: 0; }
#pp-part { grid-template-columns: minmax(0, 720px); }
.plans { display: contents; }
.plan { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); padding: 30px 28px; transition: transform .35s var(--ease), box-shadow .35s; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -32px rgba(23,63,50,.5); }
.plan h3 { font: 400 1.4rem var(--serif); margin-bottom: 14px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan-price .from, .plan-price .per { font-size: .88rem; color: var(--muted); }
.plan-price .amount { font: 400 3rem/1 var(--serif); color: var(--teal); }
.plan-list { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.plan-list li { position: relative; padding: 6px 0 6px 26px; font-size: .95rem; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 11px; height: 6px; border-left: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg); }
.plan .btn { align-self: flex-start; }
.plan.is-featured { background: var(--teal); border-color: var(--teal); color: #ebe3d4; }
.plan.is-featured h3, .plan.is-featured .amount { color: #fff; }
.plan.is-featured .from, .plan.is-featured .per { color: #c4bdab; }
.plan.is-featured .plan-price { border-bottom-color: rgba(255,255,255,.15); }
.plan.is-featured .btn-primary { background: var(--brass); }
.plan.is-featured .btn-primary:hover { background: #b5955c; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); padding: 28px; }
.price-card h3 { font: 400 1.35rem var(--serif); margin-bottom: 10px; }
.price-card h3 span { font: 400 .85rem var(--sans); color: var(--muted); margin-left: 6px; }
.price-lines.big li { font-size: .97rem; padding: 9px 0; }
.price-foot { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }

/* ---------- actueel ---------- */
.act-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: stretch; }
.calendar { background: var(--teal); color: #ebe3d4; padding: clamp(26px, 3.5vw, 44px); border: 1px solid rgba(217,191,134,.2); }
.calendar h3 { color: #fff; font: 400 1.9rem var(--serif); margin-bottom: 4px; }
.calendar-sub { font-size: .95rem; color: #c4bdab; margin-bottom: 22px; }
.calendar ol { list-style: none; margin: 0 0 24px; padding: 0; }
.calendar li { display: grid; grid-template-columns: 86px 1fr auto; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.13); }
.cal-q { font-size: .88rem; font-weight: 600; color: #b2a993; letter-spacing: .04em; }
.cal-date { font: 400 1.35rem/1.2 var(--serif); color: #fff; }
.calendar li.is-past .cal-date { color: #949d8c; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); text-decoration-thickness: 1px; }
.calendar li.is-past .cal-q { color: #848d7d; }
.calendar li.is-next { border-top: 2px solid var(--brass); padding: 18px 0; }
.calendar li.is-next .cal-date { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.calendar li.is-next .cal-q { color: var(--brass-light); }
.cal-count { font-size: .88rem; color: var(--teal-deep); background: var(--brass-light); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.cal-count b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-progress { margin-bottom: 22px; }
.cal-bar { height: 4px; background: rgba(255,255,255,.14); border-radius: 4px; overflow: hidden; }
.cal-bar span { display: block; height: 100%; width: var(--pct); background: var(--brass); border-radius: 4px; }
.js .cal-bar span { width: 0; transition: width 1.4s var(--ease); }
.js .calendar.in-view .cal-bar span { width: var(--pct); }
.cal-progress p { display: flex; justify-content: space-between; font-size: .82rem; color: #b2a993; margin: 8px 0 0; }
.calendar-note { font-size: .92rem; color: #c4bdab; margin: 0; }
.calendar-note a { color: var(--brass-light); font-weight: 500; }
.join { display: flex; flex-direction: column; align-items: flex-start; background: var(--surface); color: var(--ink); padding: clamp(26px, 3.5vw, 44px); border-top: 2px solid var(--brass); }
.join-kicker { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 10px; }
.join h3 { font: 400 clamp(1.8rem, 2.6vw, 2.3rem)/1.1 var(--serif); }
.join > p { color: var(--muted); }
.join-points { list-style: none; margin: 0 0 28px; padding: 0; }
.join-points li { position: relative; padding: 7px 0 7px 28px; border-top: 1px solid var(--line); font-size: .95rem; }
.join-points li:last-child { border-bottom: 1px solid var(--line); }
.join-points li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 11px; height: 6px; border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok); transform: rotate(-45deg); }
.join .btn { margin-top: auto; }
.join-small { font-size: .88rem; color: var(--muted); margin: 14px 0 0; }

.vacancy-band { background: var(--paper); padding: 48px 0; border-bottom: 1px solid var(--line); }
.vacancy h2 { font-size: 1.6rem; }
.vacancy p { color: var(--muted); max-width: 70ch; margin: 0; }

/* ---------- keuzehulp "Word klant" ---------- */
.sheet { width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px -20px rgba(23,63,50,.5); overflow: auto; }
.sheet::backdrop { background: rgba(12, 31, 30, .6); backdrop-filter: blur(3px); }
.sheet[open] { animation: sheetin .35s var(--ease); }
@keyframes sheetin { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.sheet-body { padding: clamp(28px, 5vw, 56px); border-top: 3px solid var(--brass); }
.dlg-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.8rem; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 50%; transition: background-color .2s, transform .3s var(--ease); }
.dlg-close:hover { background: var(--mist); color: var(--ink); transform: rotate(90deg); }
.chooser-title { font: 400 clamp(2rem, 4vw, 2.8rem)/1.1 var(--serif); }
.chooser-lede { color: var(--muted); max-width: 56ch; margin-bottom: 28px; }
.chooser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.choice-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px 26px 24px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); overflow: hidden; transition: border-color .3s, transform .35s var(--ease), box-shadow .35s; }
.choice-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.choice-card:hover { border-color: var(--teal); transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(23,63,50,.6); color: var(--ink); }
.choice-card:hover::before { transform: scaleX(1); }
.choice-kicker { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); }
.choice-name { font: 400 1.7rem/1.15 var(--serif); color: var(--teal); }
.choice-text { color: #33362f; }
.choice-eg { font-size: .9rem; color: var(--muted); padding: 10px 12px; background: var(--mist-2); border-left: 2px solid var(--line-strong); margin: 6px 0 10px; }
.choice-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 600; color: var(--teal); }
.choice-card:hover .arrow { transform: translateX(5px); }
.chooser-rule { margin: 22px 0 6px; padding: 14px 18px; background: var(--brass-soft); font-size: .95rem; }
.chooser-existing { font-size: .9rem; color: var(--muted); margin: 14px 0 0; }
.chooser-page .chooser-title { margin-bottom: 10px; }

/* losse dienstpagina (zonder JavaScript) */
.svc-page h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.svc-page .price-card { margin: 20px 0; }
.svc-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- contact en voet ---------- */
.contact-band { background: var(--mist-2); padding: clamp(56px, 7vw, 88px) 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.contact-band h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.contact-band p { color: var(--muted); max-width: 52ch; margin: 0; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.site-foot { background: var(--teal-deep); color: #d3c8b2; padding: clamp(56px, 7vw, 80px) 0 24px; font-size: .95rem; }
.site-foot a { color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
.foot-brand { font: 400 1.5rem var(--serif); color: #fff; }
.foot-brand strong { font-weight: 600; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; }
.foot-nav a { font-weight: 500; text-decoration: none; }
.foot-nav a:hover { color: var(--brass-light); }
.foot-small { font-size: .85rem; color: #b2a993; }
.foot-small a { color: #d3c8b2; }
.site-foot h3 { color: var(--brass-light); font: 500 .8rem var(--sans); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.site-foot address { font-style: normal; margin-bottom: 12px; color: #fff; }
.foot-contact { list-style: none; margin: 0 0 18px; padding: 0; }
.foot-contact li { display: flex; gap: 10px; padding: 3px 0; color: #fff; }
.ico { width: 18px; color: var(--brass-light); }
.map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #355847; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.1); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.social { display: flex; gap: 8px; margin: 4px 0 26px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; text-decoration: none; font-weight: 600; font-size: .85rem; transition: background-color .2s, color .2s, border-color .2s; }
.social a:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.foot-base { margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: #b2a993; }
.mobile-bar { display: none; }

/* ---------- formulieren ---------- */
.form-page { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.page-title { font-size: clamp(2rem, 4vw, 2.8rem); }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }
.form-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.form-intro { position: sticky; top: 110px; }
.form-intro h1 { font-size: clamp(2rem, 4vw, 2.7rem); }
.form-intro > p { color: var(--muted); }
.back { display: inline-block; margin-bottom: 18px; font-size: .92rem; }
.back::before { content: "‹ "; }
.trust { list-style: none; padding: 0; margin: 24px 0 0; }
.trust li { padding: 10px 0 10px 30px; border-top: 1px solid var(--line); position: relative; font-size: .95rem; }
.trust li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.replaces { font-size: .85rem; color: var(--muted); margin-top: 16px; }


.intake { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: clamp(20px, 3.5vw, 40px); }
.progress { height: 3px; background: var(--green-soft); overflow: hidden; display: none; }
.progress span { display: block; height: 100%; width: 25%; background: var(--green); transition: width .3s ease; }
.js .progress { display: block; }
.step-tabs { display: none; list-style: none; margin: 10px 0 0; padding: 0; gap: 4px; counter-reset: tab; }
.js .step-tabs { display: flex; flex-wrap: wrap; }
.step-tabs li { counter-increment: tab; font-size: .82rem; color: var(--muted); padding: 2px 10px 2px 0; }
.step-tabs li::before { content: counter(tab) ". "; }
.step-tabs li.is-current { color: var(--green); font-weight: 600; }
.step-tabs li.is-done { color: var(--ok); }
.step-tabs li.is-done::before { content: "✓ "; }
.required-note { font-size: .85rem; color: var(--muted); margin: 10px 0 18px; }
fieldset { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
legend { font: 400 1.7rem/1.2 var(--serif); margin-bottom: 18px; padding: 0; }
.js [data-steps] fieldset.step:not(.is-active) { display: none; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .label { font-weight: 600; font-size: .95rem; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=time], input[type=search], input[type=number], input[type=password], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: 400 1rem/1.4 var(--sans); color: var(--ink);
  background: var(--surface); border: 1.5px solid #c2b7a2; border-radius: var(--r-sm);
}
textarea { min-height: 0; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,63,50,.18); }
.hint { font-size: .87rem; color: var(--muted); margin: 0; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.has-error .hint { color: var(--danger); font-weight: 500; }
.has-error .hint::before { content: "! "; font-weight: 700; }
.is-valid input, .is-valid select { border-color: var(--ok); }
.is-valid .hint.ok-msg { color: var(--ok); font-weight: 500; }
.alert { background: var(--danger-soft); border-left: 4px solid var(--danger); padding: 14px 18px; border-radius: var(--r-sm); margin-bottom: 22px; }
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.alert a { color: var(--danger); }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice label { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1.5px solid #c2b7a2; border-radius: var(--r-sm); cursor: pointer; font-weight: 500; }
.choice label:has(input:checked) { border-color: var(--green); background: var(--gold-soft); }
.choice-stack { flex-direction: column; }
.choice-stack label { padding: 12px 18px; }
.has-error .choice label { border-color: var(--danger); }
input[type=radio], input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--green); flex: none; }
.callout { background: var(--gold-soft); border-radius: var(--r); padding: 18px 20px; margin-bottom: 18px; }
.callout h3 { margin-bottom: 6px; }
.callout p { margin: 0; font-size: .96rem; }
h3.sub { margin-top: 8px; }
.checklist { padding-left: 20px; margin: 0 0 8px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; cursor: pointer; font-weight: 400 !important; }
.consent input { margin-top: 3px; }
.hours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.hours label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); text-align: center; }
.hours input { min-height: 44px; padding: 6px 4px; text-align: center; }
.form-nav { display: flex; gap: 12px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 22px; }
.form-nav [data-prev], .form-nav [data-next] { display: none; }
.js .form-nav [data-prev], .js .form-nav [data-next] { display: inline-flex; }
.js .form-nav [data-submit] { display: none; }
.js .form-nav.is-last [data-next] { display: none; }
.js .form-nav.is-last [data-submit] { display: inline-flex; }
.js .form-nav.is-first [data-prev] { visibility: hidden; }
[data-show-if][hidden] { display: none !important; }
.summary { background: #f7f2e9; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 22px; }
.summary h3 { margin-bottom: 8px; }
.summary-group { border-top: 1px solid var(--line); padding: 10px 0; }
.summary-group:first-child { border-top: 0; padding-top: 0; }
.summary-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.summary dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2px 14px; font-size: .9rem; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; overflow-wrap: anywhere; }

.done { padding-top: 24px; }
.done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-soft); position: relative; margin-bottom: 24px; }
.done-mark::after { content: ""; position: absolute; left: 18px; top: 18px; width: 20px; height: 10px; border-left: 3px solid var(--ok); border-bottom: 3px solid var(--ok); transform: rotate(-45deg); }
.done h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.next-steps { padding-left: 22px; margin: 24px 0; }
.next-steps li { margin: 8px 0; }
div.demo-note { margin-top: 32px; padding: 14px 18px; background: var(--gold-soft); border-radius: var(--r-sm); font-size: .95rem; }
div.demo-note p { margin: 4px 0 0; }
.howto { padding-left: 22px; }
.howto li { margin-bottom: 14px; }
.howto h3 { margin-bottom: 2px; }

/* ---------- uploadpagina ---------- */
.portal-head .head-row { justify-content: space-between; min-height: 68px; }
.portal-head .wm-gvn { font-size: 1.6rem; }
.portal-for { color: var(--gold-ink); font-weight: 600; margin-bottom: 8px; }
.portal h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.up-deadline { color: var(--muted); }
.up-status { font-size: 1.05rem; padding: 12px 16px; border-radius: var(--r-sm); background: var(--warn-soft); }
.up-status.is-complete { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.uploads { list-style: none; margin: 20px 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.up-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); min-height: 72px; }
.up-item:first-child { border-top: 0; }
.up-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-name { font-weight: 600; }
.up-note { font-size: .88rem; color: var(--warn); }
.up-files { list-style: none; margin: 4px 0 0; padding: 0; font-size: .85rem; color: var(--muted); }
.up-files li::before { content: "📎 "; }
.up-state { color: var(--ok); font-weight: 600; font-size: .9rem; }
.up-state.is-nvt { color: var(--muted); }
.up-act { flex: none; }
.up-form { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.up-btn { cursor: pointer; }
.up-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.up-form .link-btn { font-size: .82rem; color: var(--muted); }

/* ---------- dashboard ---------- */
body.dash { background: #f1ebdf; font-size: 15px; }
.dash-head { background: var(--green); color: #fff; position: sticky; top: 0; z-index: 20; }
.dash-head-row { display: flex; align-items: center; gap: 24px; padding: 0 var(--gutter); min-height: 60px; flex-wrap: wrap; }
.dash-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.dash-brand .wm-gvn { font-size: 1.5rem; }
.dash-brand .wm-bar { height: 22px; background: var(--gold); opacity: 1; }
.dash-hub { font: 400 1.2rem var(--serif); }
.dash-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.dash-nav a { color: #dcd2bf; text-decoration: none; padding: 8px 11px; border-radius: var(--r-sm); font-weight: 500; }
.dash-nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.dash-nav a[aria-current] { color: #fff; background: rgba(255,255,255,.14); }
.dash-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mail-state { font-size: .8rem; color: #dcd2bf; border: 1px solid rgba(255,255,255,.3); padding: 4px 10px; border-radius: 999px; text-decoration: none; }
.mail-state.is-on { color: var(--green); background: var(--gold); border-color: var(--gold); font-weight: 600; }
.demo-date { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.demo-date label { color: #dcd2bf; }
.demo-date input { min-height: 34px; width: auto; padding: 4px 8px; font-size: .9rem; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; color-scheme: dark; }
.demo-date .btn-quiet { color: #fff; border-color: rgba(255,255,255,.35); min-height: 34px; }

.dash-main { padding: 28px 0 64px; }
.dash-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow-dash { max-width: 880px; }
.dash-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.dash h1 { font-size: 2rem; margin-bottom: 4px; }
.dash h2 { font-size: 1.35rem; }
.dash-title p { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .87rem; font-weight: 500; }
.chip span { color: var(--muted); font-weight: 400; margin-left: 2px; }
.chip:hover { border-color: var(--green-2); color: var(--green); }
.chip.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.chip.is-on span { color: #dcd2bf; }
.notice { padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 18px; }
.notice.is-ok { background: var(--ok-soft); color: var(--ok); }
.notice.is-err { background: var(--danger-soft); color: var(--danger); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 24px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stats div { background: var(--surface); padding: 14px 18px; }
.stats dt { font-size: .85rem; color: var(--muted); }
.stats dd { margin: 2px 0 0; font: 400 1.9rem/1.1 var(--serif); }
.stats .is-alert dd { color: var(--danger); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.queue, .worklist { min-width: 0; }
.msg { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green-2); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 10px; }
.msg.is-task { border-left-color: var(--gold); }
.msg-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; }
.msg-klant { font-weight: 600; color: var(--ink); }
.msg-rule { color: var(--muted); }
.msg-top .avatar { margin-left: auto; }
.msg-subject { font-size: 1rem; font-weight: 500; margin: 8px 0 6px; }
.msg details summary { cursor: pointer; color: var(--green-2); font-size: .88rem; font-weight: 500; padding: 4px 0; }
.mail-meta { font-size: .83rem; color: var(--muted); margin: 8px 0 4px; }
.mail { white-space: pre-wrap; font: 400 .9rem/1.55 var(--sans); background: #f7f2e9; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin: 4px 0 6px; overflow-wrap: anywhere; }
.msg-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.b-mail { background: var(--green-soft); color: var(--green); }
.b-task { background: var(--gold-soft); color: var(--gold-ink); }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: .72rem; font-weight: 600; flex: none; }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 18px; color: var(--muted); }

.legend { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 6px; margin: -6px 0 8px; }
.legend .dot { margin-left: 8px; }
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.work { width: 100%; border-collapse: collapse; font-size: .92rem; }
.work th, .work td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.work thead th { border-top: 0; font-size: .8rem; color: var(--muted); font-weight: 600; background: #f7f2e9; }
.work tbody th { font-weight: 500; }
.work tbody th a { color: var(--ink); text-decoration: none; }
.work tbody th a:hover { color: var(--green); text-decoration: underline; }
.work tbody tr:hover { background: #f7f2e9; }
.work td[data-label="Periode"], .work td[data-label="Stukken"] { white-space: nowrap; }
.work td[data-label="Medewerker"] { width: 44px; padding-left: 0; }
.when { white-space: nowrap; }
.when.late { color: var(--danger); font-weight: 600; }
.when.soon { color: var(--warn); font-weight: 600; }
.when.new { color: var(--gold-ink); font-weight: 600; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #9fb3ae; }
.dot.on { background: var(--green-2); border-color: var(--green-2); }
.dot.na { background: repeating-linear-gradient(45deg, #cfc4ae 0 2px, transparent 2px 4px); border-color: #cfc4ae; }
.dots-n { font-size: .78rem; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.s-plan { background: #ece6da; color: var(--muted); }
.s-wait { background: var(--warn-soft); color: var(--warn); }
.s-ok { background: var(--ok-soft); color: var(--ok); }
.s-work { background: var(--green-soft); color: var(--green); }
.s-done { background: #e8ecf6; color: #34497a; }
.s-new { background: var(--gold-soft); color: var(--gold-ink); }

.dossier-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.dossier-head p { margin: 0; }
.assign { display: flex; align-items: center; gap: 10px; }
.assign label { font-size: .85rem; color: var(--muted); }
.assign select { min-height: 38px; width: auto; }
.dossier-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.dossier-main { display: grid; gap: 16px; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.card > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card > header h3 { margin: 0; font: 400 1.25rem var(--serif); }
.card-foot { margin: 10px 0 0; font-size: .88rem; }
.work-card > .muted { font-size: .88rem; margin: 4px 0 10px; }
.stukken { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stuk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 6px 10px; background: #f7f2e9; border: 1px solid var(--line); border-radius: var(--r-sm); }
.stuk form { margin: 0; }
.stuk .stuk-note, .stuk .files { grid-column: 1; }
.stuk-more { grid-column: 2; grid-row: 1; display: flex; gap: 10px; }
.stuk-more .link-btn { font-size: .78rem; color: var(--muted); }
.tick { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0; text-align: left; font: 500 .93rem var(--sans); color: var(--ink); background: none; border: 0; cursor: pointer; }
.box { width: 18px; height: 18px; border: 1.5px solid #8aa09a; border-radius: 4px; position: relative; flex: none; background: #fff; }
.st-ontvangen { background: var(--ok-soft); border-color: #bcdccb; }
.st-ontvangen .box { background: var(--ok); border-color: var(--ok); }
.st-ontvangen .box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 6px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.st-nvt { opacity: .7; }
.st-nvt .tick span:last-child { text-decoration: line-through; }
.st-nvt .box { background: repeating-linear-gradient(45deg, #cfc4ae 0 2px, #fff 2px 4px); }
.stuk-note { margin: 0 0 4px 28px; font-size: .84rem; color: var(--warn); }
.files { list-style: none; margin: 0 0 4px 28px; padding: 0; font-size: .85rem; }
.files span { color: var(--muted); font-size: .78rem; }
.add-stuk { margin-top: 10px; font-size: .9rem; }
.add-stuk summary { cursor: pointer; color: var(--green-2); font-weight: 500; }
.add-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 10px; }
.add-form label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.add-form input { min-height: 40px; font-size: .92rem; padding: 7px 10px; }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts.compact { margin-bottom: 10px; }
.facts.compact div { padding: 4px 0; }
.dossier-side { position: sticky; top: 80px; }

.log-form { background: #f7f2e9; border-radius: var(--r-sm); padding: 14px; margin: 12px 0 18px; display: grid; gap: 10px; }
.log-form label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.log-form select, .log-form input, .log-form textarea { min-height: 40px; font-size: .92rem; padding: 7px 10px; }
.log-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.log-row label { flex: 1 1 140px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 10px 0 10px 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--green-2); }
.timeline li.k-systeem::before, .timeline li.k-upload::before { border-color: var(--gold); }
.timeline li.k-telefoon::before { background: var(--green-2); }
.tl-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.tl-meta time { font-weight: 600; color: var(--ink); }
.timeline p { margin: 2px 0 0; }
.follow { display: inline-block; margin-top: 6px; font-size: .8rem; font-weight: 600; color: var(--warn); background: var(--warn-soft); padding: 2px 8px; border-radius: 4px; }

.rules { list-style: none; margin: 20px 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.rule { display: flex; justify-content: space-between; gap: 20px; padding: 16px 20px; border-top: 1px solid var(--line); }
.rule:first-child { border-top: 0; }
.rule h3 { margin-bottom: 4px; }
.rule p { margin: 0; color: var(--muted); font-size: .92rem; }
.rule-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: .82rem; white-space: nowrap; }
.settings { display: grid; gap: 18px; margin-bottom: 20px; }
.switch { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.howto-card ol { padding-left: 20px; }
.howto-card li { margin-bottom: 8px; }
.prose { font-size: 1rem; }
.prose h2 { margin-top: 32px; }
.prose p, .prose li { max-width: 72ch; }


.facts.compact div { grid-template-columns: 170px minmax(0, 1fr); }
.klant-cell { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.klant-cell .avatar { width: 26px; height: 26px; }

/* lijn van de werkwijze: van het eerste tot het laatste bolletje */
.proc-track { --pad: clamp(20px, 4vw, 48px); }
.proc-line { left: calc(var(--pad) + 22px); right: auto; width: calc((100% - 2 * var(--pad)) * .75); top: 58px; }

/* dashboard-kleuren (koel) */
body.dash { background: #f1ebdf; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .dash-grid, .dossier-grid { grid-template-columns: 1fr; }
  .dossier-side { position: static; order: -1; }
  .main-nav { gap: 20px; }
  .price-panel { grid-template-columns: 1fr 1fr; }
  .price-panel .price-card { grid-column: 1 / -1; }
  #pp-part { grid-template-columns: 1fr; }
  .segments { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .main-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(23,63,50,.1);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .main-nav a::after { display: none; }
  .nav-extra { display: block; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .head-actions { margin-left: auto; }
  .hero { flex-direction: column; min-height: 0; }
  .hero-media { position: relative; inset: auto; height: 300px; z-index: 0; }
  .hero-media img { height: 100%; object-position: 70% 50%; }
  .hero-media::after { background: linear-gradient(0deg, #112f25 0, rgba(23,63,50,0) 40%); }
  .hero-panel { width: 100%; background: #112f25; backdrop-filter: none; }
  .about { grid-template-columns: 1fr; }
  .about-media { min-height: 240px; }
  .about-text { grid-template-columns: 1fr; padding: 36px var(--gutter) 48px; gap: 18px; }
  .hero-inner { padding: 32px var(--gutter) 48px; }
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(3) { padding-left: 0; border-left: 0; }
  .feature:nth-child(n+3) { border-top: 1px solid var(--line); }
  .about-card { grid-template-columns: 1fr; gap: 20px; }
  .about-copy { border-left: 0; padding-left: 0; }
  .section-head, .form-wrap, .act-grid, .contact-grid { grid-template-columns: 1fr; }
  .section-head { gap: 12px; }
  .contact-actions { justify-content: flex-start; }
  .segments { grid-template-columns: 1fr; gap: 16px; }
  .seg-tabs { position: static; flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .seg-tab { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; background: var(--surface); }
  .seg-tab::before { display: none; }
  .seg-tab[aria-selected="true"] { background: var(--teal); border-color: var(--teal); }
  .seg-tab[aria-selected="true"] .seg-name { color: #fff; }
  .seg-tab[aria-selected="true"] .seg-meta { color: #c4bdab; }
  .seg-name { font-size: 1.1rem; }
  .svc-body { grid-template-columns: 1fr; gap: 18px; }
  .proc-panel { grid-template-columns: 1fr; gap: 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid .foot-col:first-child { grid-column: 1 / -1; }
  .form-intro { position: static; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .head-row { min-height: 66px; gap: 12px; }
  .wm-gvn { font-size: 1.6rem; }
  .wm-adv { font-size: .76rem; letter-spacing: .26em; }
  .wm-bar { height: 24px; }
  .hide-sm, .head-actions .lang-switch { display: none; }
  .portal-head .lang-switch { display: inline-block; }
  .hero-media { height: 230px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .features-grid, .chooser, .foot-grid, .price-panel, .grid { grid-template-columns: 1fr; }
  .feature, .feature + .feature { padding: 26px 0; border-left: 0; }
  .feature + .feature { border-top: 1px solid var(--line); }
  .about-wrap { margin-top: -40px; }
  .seg-panel { padding: 20px 16px; margin: 0 calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
  .svc summary { grid-template-columns: minmax(0, 1fr) 20px; gap: 4px 10px; }
  .svc-price { grid-column: 1; grid-row: 2; }
  .chev { grid-column: 2; grid-row: 1 / 3; }
  .proc-track { padding-top: 24px; }
  .proc-line { top: 46px; }
  .proc-label { font-size: .85rem; }
  .proc-when { display: none; }
  .toggle { display: grid; width: 100%; }
  .toggle button { padding: 10px 8px; }
  .plan-price .amount { font-size: 2.5rem; }
  .calendar li { grid-template-columns: 68px 1fr; }
  .cal-count { grid-column: 2; justify-self: start; }
  .site-foot { padding-bottom: 96px; }
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(247,249,248,.97); border-top: 1px solid var(--line);
  }
  .mobile-bar a { display: grid; place-items: center; min-height: 48px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--teal); color: var(--teal); }
  .mobile-bar a.is-primary { background: var(--teal); color: #fff; }
  .form-page ~ .mobile-bar { display: none; }
  .sheet { width: 100vw; max-width: 100vw; max-height: 94vh; margin: auto 0 0; }
  .intake { border-radius: 0; border-left: 0; border-right: 0; margin: 0 calc(var(--gutter) * -1); }
  .form-nav .btn { flex: 1; }
  .js .form-nav.is-first [data-prev] { display: none; }
  .hours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .up-item { flex-direction: column; align-items: stretch; }
  .up-form { align-items: stretch; }
  .up-btn { width: 100%; }
  .summary dl { grid-template-columns: 1fr; }
  .summary dd { margin-bottom: 6px; }

  .demo-date label { display: none; }
  .dash-head-row { gap: 8px 14px; padding-top: 8px; padding-bottom: 8px; }
  .dash-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .dash h1 { font-size: 1.6rem; }
  .work thead { display: none; }
  .work, .work tbody, .work tr, .work th, .work td { display: block; }
  .work tr { padding: 12px 14px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
  .work tbody th, .work td { border: 0; padding: 0; }
  .work tbody th { grid-column: 1 / -1; }
  .work td[data-label="Periode"] { grid-column: 1 / -1; color: var(--muted); font-size: .85rem; }
  .work td[data-label="Aanleveren"] { grid-column: 1 / -1; }
  .work td[data-label="Stukken"] { grid-column: 1; }
  .work td[data-label="Status"] { grid-column: 2; justify-self: end; }
  .add-form { grid-template-columns: 1fr; }
  .stuk { grid-template-columns: 1fr; }
  .stuk-more { grid-column: 1; grid-row: auto; margin-left: 28px; }
  .rule { flex-direction: column; }
  .rule-meta { align-items: flex-start; flex-direction: row; }
  .facts div { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* verfijning na visuele controle */
.hero .eyebrow { letter-spacing: .14em; font-size: .74rem; white-space: nowrap; margin-bottom: 40px; }
@media (max-width: 1100px) { .hero .eyebrow { white-space: normal; } }
.svc-side .price-lines li { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
.svc-side .price-lines li:last-child { border-bottom: 0; }
.svc-side .price-lines .dots { display: none; }
.svc-side .price-lines li span:first-child { display: block; font-size: .85rem; color: var(--muted); }
.svc-side .price-lines strong { display: block; white-space: normal; font-size: 1rem; }
.about { padding-bottom: clamp(24px, 4vw, 48px); }

/* hero zoals het ontwerp: witte kleine kop, zandgouden knop met donkere tekst */
.hero .eyebrow-light { color: #ece8df; }
.hero .btn-gold { background: #c8ad7c; color: #173f32; border-radius: 2px; }
.hero .btn-gold:hover { background: #d3bd92; color: #173f32; }

/* over ons: kop op twee regels zoals in het ontwerp */
.about-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.about h2 { font-size: clamp(1.8rem, 2.3vw, 2.35rem); line-height: 1.12; }
@media (min-width: 961px) and (max-width: 1280px) { .about-text { grid-template-columns: 1fr; gap: 20px; } .about-copy { border-left: 0; padding-left: 0; } }
@media (min-width: 961px) {
  .about-text { padding-right: clamp(28px, 5vw, 96px); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; }
  .about h2 { font-size: clamp(1.7rem, 2vw, 2.15rem); }
  .about-media { min-height: clamp(300px, 27vw, 420px); }
}
.about { align-items: stretch; padding-bottom: 0; } .about-media { align-self: stretch; }

/* hero: alleen de knop "Ontdek onze diensten" tonen */
.hero .btn-ghost-light { display: none; }

/* =====================================================================
   Homepage volgens de webteksten van de directie (docx)
   ===================================================================== */

.hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); line-height: 1.06; }
.hero-lede-2 { font-size: .98rem; opacity: .88; margin-top: -4px; }

/* drie waarden onder de hero */
.values { background: var(--ivory); border-bottom: 1px solid var(--ivory-line); }
.values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.value { display: block; padding: 44px 32px 40px 0; color: var(--ink); position: relative; outline: none; cursor: default;
  transition: opacity .5s var(--ease); }
.value + .value { padding-left: 32px; border-left: 1px solid var(--ivory-line); }
.value svg { width: 44px; height: 44px; fill: none; stroke: var(--teal); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px;
  transition: stroke .5s var(--ease), transform .6s var(--ease); }
.value h3 { font: 400 1.45rem/1.2 var(--serif); margin-bottom: 10px; transition: color .5s var(--ease); }
.value-rule { display: block; width: 28px; height: 1px; background: var(--brass); margin-bottom: 14px; opacity: .55;
  transform-origin: left; transition: width .7s var(--ease), opacity .5s var(--ease); }
.value p { color: var(--muted); font-size: .95rem; max-width: 38ch; margin: 0; }
/* uitklappende toelichting: hoogte via grid-rows, zodat de overgang vloeiend is */
.value-extra { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-6px);
  transition: grid-template-rows .65s var(--ease), opacity .45s ease, transform .65s var(--ease); }
.value-extra > div { overflow: hidden; min-height: 0; }
.value-extra p { font-size: .9rem; line-height: 1.65; color: #5d6a66; }
.value-extra p:first-child { padding-top: 14px; }
.value-extra p + p { margin-top: 10px; }
.value.is-open svg { stroke: var(--brass); transform: translateY(-3px); }
.value.is-open h3 { color: var(--teal); }
.value.is-open .value-rule { width: 64px; opacity: 1; }
.value.is-open .value-extra { grid-template-rows: 1fr; opacity: 1; transform: none;
  transition: grid-template-rows .65s var(--ease), opacity .6s ease .12s, transform .65s var(--ease); }
.values-grid.has-open .value:not(.is-open) { opacity: .55; }
.value:focus-visible { box-shadow: inset 0 0 0 1px var(--brass-light); }
@media (prefers-reduced-motion: reduce) { .value, .value *, .value-extra { transition: none !important; } }

/* intro naast de foto */
.about-text-single { display: block; max-width: 640px; }
.about-text-single h2 { margin: 0 0 18px; }
.about-text-single p:not(.eyebrow) { color: #33362f; }

.head-copy p { color: var(--muted); margin: 0 0 12px; max-width: 58ch; }
.head-copy p:last-child { margin-bottom: 0; }

/* Waarmee kunnen we u helpen? */
#helpen .audiences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aud { background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.aud:hover { border-color: var(--line-strong); }
.aud.is-open { border-color: var(--teal); box-shadow: 0 18px 40px -30px rgba(23,63,50,.6); }
.aud-head { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px 16px; align-items: start; text-align: left;
  background: none; border: 0; padding: 26px 26px 24px; cursor: pointer; color: var(--ink); font: inherit; }
.aud-title { font: 400 1.5rem/1.2 var(--serif); grid-column: 1; }
.aud-text { grid-column: 1; color: var(--muted); font-size: .97rem; }
.aud-plus { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); position: relative; transition: transform .35s var(--ease), background-color .3s, border-color .3s; }
.aud-plus::before, .aud-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--teal); transform: translate(-50%, -50%); }
.aud-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.aud-head:hover .aud-plus { border-color: var(--teal); }
.aud.is-open .aud-plus { background: var(--teal); border-color: var(--teal); transform: rotate(180deg); }
.aud.is-open .aud-plus::before, .aud.is-open .aud-plus::after { background: #fff; }
.aud.is-open .aud-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.aud-body { padding: 0 26px 24px; border-top: 1px solid var(--line); margin: 0 26px; padding: 18px 0 24px; animation: aud-in .35s var(--ease); }
@keyframes aud-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.aud-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 10px; }
.aud-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aud-chips a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--mist-2); color: var(--teal); text-decoration: none; font-size: .92rem; font-weight: 500; transition: background-color .25s, color .25s; }
.aud-chips a::after { content: "↓"; margin-left: 8px; font-size: .85em; opacity: .7; }
.aud-chips a:hover { background: var(--teal); color: #fff; }

/* oproepbalk */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 48px); padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); background: var(--teal); color: #e4dac7; }
.cta-band h3 { font: 400 1.6rem/1.2 var(--serif); color: #fff; margin-bottom: 6px; }
.cta-band p { margin: 0; max-width: 60ch; }
.cta-band .btn-dark { background: var(--brass); color: #fff; }
.cta-band .btn-dark:hover { background: #b5955c; }
.cta-band.cta-quiet { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); color: var(--muted); }
.cta-band.cta-quiet h3 { color: var(--ink); }
.cta-band.cta-quiet .btn-dark { background: var(--teal); }

/* Over: uitgangspunten als tabbladen */
.principles { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 0; background: var(--surface); border: 1px solid var(--line); }
.pr-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.pr-tab { display: flex; align-items: center; gap: 16px; text-align: left; padding: 22px 24px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font: 400 1.2rem/1.25 var(--serif); color: var(--muted); position: relative; transition: color .25s, background-color .25s; }
.pr-tab:last-child { border-bottom: 0; }
.pr-tab svg { width: 34px; height: 34px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pr-tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brass); transform: scaleY(0); transition: transform .35s var(--ease); }
.pr-tab:hover { color: var(--ink); background: var(--mist-2); }
.pr-tab[aria-selected="true"] { color: var(--teal); background: var(--mist-2); }
.pr-tab[aria-selected="true"]::before { transform: scaleY(1); }
.pr-panels { padding: clamp(24px, 3.5vw, 44px); }
.pr-panel h3 { font: 400 1.8rem/1.15 var(--serif); margin-bottom: 14px; }
.pr-panel p { color: #33362f; max-width: 62ch; }
.pr-panel[data-inactive] { display: none; }
.pr-panel:not([data-inactive]) { animation: aud-in .4s var(--ease); }

.partner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-strong); }
.partner h3 { font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.15 var(--serif); }
.partner-lead { font: 400 1.3rem/1.5 var(--serif); color: var(--teal); }
.partner-copy p:not(.partner-lead) { color: #33362f; max-width: 62ch; }

/* Onze diensten */
.diensten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dienst { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--teal); transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.dienst:hover { box-shadow: 0 20px 40px -32px rgba(23,63,50,.6); transform: translateY(-2px); }
.dienst[open] { border-top-color: var(--brass); }
.dienst summary { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 20px; cursor: pointer; min-height: 230px; }
.dienst summary::-webkit-details-marker { display: none; }
.dienst-title { font: 400 1.4rem/1.2 var(--serif); color: var(--ink); }
.dienst-lead { color: var(--muted); font-size: .95rem; flex: 1; }
.dienst-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.range { font: 400 1.25rem/1 var(--serif); color: var(--teal); white-space: nowrap; }
.range span[aria-hidden] { color: var(--brass); margin: 0 4px; }
.dienst-toggle { font-size: .85rem; font-weight: 600; color: var(--teal); display: inline-flex; align-items: center; gap: 6px; }
.dienst-toggle::after { content: "+"; font-size: 1.1rem; line-height: 1; transition: transform .3s var(--ease); }
.dienst[open] .dienst-toggle::after { transform: rotate(45deg); }
.dienst-body { padding: 0 24px 24px; animation: aud-in .35s var(--ease); }
.dienst-body p { margin: 0; color: #33362f; font-size: .96rem; }
.dienst:target, .dienst.is-flash { box-shadow: 0 0 0 3px var(--brass-light); }
.range-note { font-size: .85rem; color: var(--muted); margin: 16px 0 0; }

/* Werkwijze & tarieven */
.sub-title { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 16px; }
#werkwijze .proc-panel { grid-template-columns: 1fr; }
#werkwijze .proc-label { max-width: 16ch; }
.tariff { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.tariff-copy p { color: #33362f; max-width: 62ch; }
.quote-card { background: var(--teal); color: #e4dac7; padding: clamp(24px, 3vw, 36px); border-top: 2px solid var(--brass); }
.quote-card h3 { font: 400 1.6rem/1.2 var(--serif); color: #fff; }
.quote-card p { margin-bottom: 22px; }
.closing-line { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; font: italic 400 clamp(1.3rem, 2.2vw, 1.75rem)/1.4 var(--serif); color: var(--teal); }
.closing-line::before, .closing-line::after { content: ""; display: inline-block; width: 40px; height: 1px; background: var(--brass); vertical-align: middle; margin: 0 16px; }

/* Werken bij */
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.job-col { padding: 26px 28px 8px 0; }
.job-col + .job-col { padding-left: 28px; border-left: 1px solid var(--line); }
.job-col h3 { font: 400 1.35rem/1.2 var(--serif); }
.job-col p { color: #33362f; font-size: .96rem; }
.job-cta .btn { margin-top: 6px; }

/* Contact */
.contact-sec { background: var(--ivory); border-top: 1px solid var(--ivory-line); }
.contact-grid2 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.contact-card { background: var(--teal); color: #e4dac7; padding: clamp(24px, 3vw, 36px); }
.contact-card h3 { font: 400 1.5rem/1.2 var(--serif); color: #fff; margin-bottom: 16px; }
.contact-list { margin: 0 0 20px; }
.contact-list div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.contact-list dt { color: var(--brass-light); font-size: .88rem; }
.contact-list dd { margin: 0; color: #fff; }
.contact-list a { color: #fff; }
.contact-call { margin-bottom: 14px; }
.contact-card .btn-dark { background: var(--brass); }
.contact-form { background: var(--surface); border: 1px solid var(--line); padding: clamp(24px, 3vw, 36px); }
.contact-form h3 { font: 400 1.5rem/1.2 var(--serif); margin-bottom: 6px; }
.contact-form .muted { font-size: .95rem; margin-bottom: 18px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-weight: 600; font-size: .92rem; }
.cf-field input, .cf-field textarea { font-weight: 400; }
.form-ok { background: var(--ok-soft); color: var(--ok); padding: 12px 16px; margin-bottom: 16px; border-left: 3px solid var(--ok); }
.form-err { background: var(--danger-soft); color: var(--danger); padding: 12px 16px; margin-bottom: 16px; border-left: 3px solid var(--danger); }

.foot-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot-tag { font-family: var(--serif); font-style: italic; color: #d8dccf; }

@media (max-width: 960px) {
  .values-grid, .diensten, .jobs { grid-template-columns: 1fr; }
  .value, .value + .value { padding: 28px 0; border-left: 0; }
  .value + .value { border-top: 1px solid var(--ivory-line); }
  #helpen .audiences, .principles, .partner, .tariff, .contact-grid2 { grid-template-columns: 1fr; }
  .pr-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .pr-tab { border-bottom: 0; border-right: 1px solid var(--line); white-space: nowrap; font-size: 1.05rem; padding: 16px 18px; }
  .pr-tab::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; transform: scaleX(0); }
  .pr-tab[aria-selected="true"]::before { transform: scaleX(1); }
  .job-col, .job-col + .job-col { padding: 22px 0 6px; border-left: 0; }
  .job-col + .job-col { border-top: 1px solid var(--line); }
  .dienst summary { min-height: 0; }
}
@media (max-width: 640px) {
  .cf-row { grid-template-columns: 1fr; }
  .contact-list div { grid-template-columns: 100px minmax(0, 1fr); }
  .closing-line::before, .closing-line::after { display: none; }
  .cta-band .btn { width: 100%; }
  .aud-head { padding: 20px; }
  .aud-body { margin: 0 20px; }
}
#helpen .audiences { align-items: start; }
.main-nav { gap: 22px; }
.main-nav a, .site-head .btn { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1240px) {
  .main-nav { gap: 16px; }
  .main-nav a { font-size: .9rem; }
  .site-head .lang-switch { display: none; }
}
/* intro naast de foto: docx-openingstekst + "Deskundig advies" */
.about-text-single h2 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.15; }
.intro-sub { font: 400 1.35rem/1.25 var(--serif); color: var(--teal); margin: 26px 0 10px; padding-top: 22px; border-top: 1px solid var(--ivory-line); }
.hero h1 { font-size: clamp(2.8rem, 5.6vw, 4.6rem); line-height: 1.02; }


/* =====================================================================
   Ronde 23 okt: waarden-scheiding, captcha, e-mail als beeld, nieuwe footer
   ===================================================================== */

/* drie waarden: geen harde kaders meer, maar korte vervagende lijnen ertussen */
.values { border-bottom: 0; }
.value + .value { border-left: 0; }
.value + .value::before { content: ""; position: absolute; left: 0; top: 46px; height: 150px; width: 1px;
  background: linear-gradient(180deg, rgba(167,134,77,0), rgba(167,134,77,.45) 35%, rgba(167,134,77,.45) 65%, rgba(167,134,77,0)); }
.value-sub { display: block; font-style: italic; font-size: .82em; color: var(--brass-ink); max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .5s ease; }
.value.is-open .value-sub { max-height: 1.6em; opacity: 1; }
@media (max-width: 960px) {
  .value + .value { border-top: 0; }
  .value + .value::before { top: 0; left: 0; height: 1px; width: 120px; background: linear-gradient(90deg, rgba(167,134,77,.45), rgba(167,134,77,0)); }
}

/* e-mailadres als vectorbeeld (geen tekst, geen mailto) */
.mail-beeld { display: inline-flex; align-items: center; line-height: 1; vertical-align: middle; }
.mail-img { display: block; height: 1.21em; transform: translateY(.04em); }

/* captcha: 'Ik ben geen robot' */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.captcha { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; padding: 14px 18px; max-width: 420px;
  background: #fbfaf7; border: 1px solid var(--ivory-line); border-radius: 10px; transition: border-color .4s, box-shadow .4s; }
.captcha.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.captcha-box { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid var(--line-strong);
  background: #fff; cursor: pointer; padding: 0; transition: border-color .3s, background .4s var(--ease), transform .2s; }
.captcha-box:hover { border-color: var(--teal-2); }
.captcha-box:active { transform: scale(.94); }
.captcha-box:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.captcha-ring { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--brass-light); border-top-color: var(--brass);
  opacity: 0; transition: opacity .2s; }
.captcha.is-busy .captcha-box { border-color: transparent; background: transparent; }
.captcha.is-busy .captcha-ring { opacity: 1; animation: cap-spin .8s linear infinite; }
.captcha-tick { position: absolute; inset: 3px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s var(--ease) .1s; }
.captcha.is-ok .captcha-box { background: var(--teal); border-color: var(--teal); cursor: default; }
.captcha.is-ok .captcha-tick { stroke-dashoffset: 0; }
.captcha-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.captcha-label { font-weight: 500; color: var(--ink); }
.captcha-status { font-size: .8rem; color: var(--muted); }
.captcha.is-ok .captcha-status { color: var(--teal-2); }
.captcha.is-err .captcha-status { color: var(--danger); }
.captcha-seal svg { width: 26px; height: 26px; fill: none; stroke: var(--brass); stroke-width: 1.3; stroke-linejoin: round; opacity: .8; }
@keyframes cap-spin { to { transform: rotate(360deg); } }
.contact-form .captcha { margin: 6px 0 18px; }

/* ---------- footer ---------- */
.site-foot { background: var(--teal-deep); color: #cfc6b4; padding: clamp(64px, 8vw, 104px) 0 28px; font-size: .94rem; position: relative; }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(167,134,77,0), rgba(167,134,77,.7) 50%, rgba(167,134,77,0)); }
.site-foot a { color: #efe8db; text-decoration: none; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: end; }
.foot-brand { font: 400 1.25rem var(--serif); color: #fff; letter-spacing: .02em; margin: 0 0 22px; }
.foot-brand strong { font-weight: 600; }
.foot-claim { font: 400 clamp(2rem, 3.6vw, 3rem)/1.08 var(--serif); color: #fff; margin: 0 0 18px; letter-spacing: -.01em; }
.foot-about { max-width: 52ch; color: #b9beb2; margin: 0; line-height: 1.7; }
.foot-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.foot-phone { display: flex; flex-direction: column; align-items: flex-end; font: 400 1.35rem var(--serif); color: #fff; }
.foot-phone span { font: 500 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-light); margin-bottom: 4px; }
.foot-phone:hover { color: var(--brass-light); }
.foot-rule { position: relative; height: 1px; margin: clamp(40px, 5vw, 56px) 0; background: rgba(255,255,255,.12); }
.foot-rule span { position: absolute; left: 0; top: 0; width: 72px; height: 1px; background: var(--brass); }
.site-foot .foot-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: 40px; align-items: start; }
.site-foot h3 { color: var(--brass-light); font: 500 .72rem var(--sans); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 14px; }
.site-foot address, .foot-col > p { font-style: normal; color: #ece6da; margin: 0 0 28px; line-height: 1.7; }
.foot-dl { margin: 0; display: grid; gap: 12px; }
.foot-dl div { display: grid; gap: 2px; }
.foot-dl dt { font-size: .74rem; color: #a39a86; letter-spacing: .04em; }
.foot-dl dd { margin: 0; color: #ece6da; }
.foot-dl .mail-beeld { color: #ece6da; font-size: .94rem; }
.site-foot .foot-nav { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.site-foot .foot-nav a { color: #e2dacb; font-weight: 400; width: fit-content; background: linear-gradient(var(--brass-light), var(--brass-light)) 0 100% / 0 1px no-repeat;
  transition: color .3s, background-size .45s var(--ease); }
.site-foot .foot-nav a:hover { color: #fff; background-size: 100% 1px; }

/* kaart: rustige, getinte kaart met eigen speld; hele kaart linkt naar routeplanner */
.foot-map { display: block; position: relative; border-radius: 4px; overflow: hidden; background: #284438; color: var(--ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -28px rgba(0,0,0,.6); isolation: isolate; }
.foot-map-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.foot-map iframe { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; border: 0; pointer-events: none;
  filter: grayscale(1) contrast(.9) brightness(1.06); transition: transform 1.2s var(--ease), filter .8s; }
.foot-map-frame::after { content: ""; position: absolute; inset: 0; background: rgba(23,63,50,.22); mix-blend-mode: multiply; pointer-events: none; }
.foot-pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 34px; transform: translate(-50%, -100%); z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); transition: transform .6s var(--ease); }
.foot-pin svg { width: 100%; height: 100%; }
.foot-pin path { fill: var(--brass); }
.foot-pin circle { fill: #fff; }
.foot-pin::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 10px; height: 4px; margin-left: -5px; border-radius: 50%;
  background: rgba(0,0,0,.25); }
.foot-map-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: #efe8db; }
.foot-map-bar strong { display: block; font: 500 1rem var(--serif); color: var(--teal-deep); }
.foot-map-bar small { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.foot-map-go { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 500; color: var(--teal); white-space: nowrap; }
.foot-map-go .arrow { width: 16px; transition: transform .4s var(--ease); }
.foot-map-credit { position: absolute; right: 6px; top: 6px; font-size: .62rem; color: rgba(31,36,32,.65); background: rgba(244,239,229,.75);
  padding: 1px 5px; border-radius: 2px; z-index: 2; }
.foot-map:hover iframe { transform: scale(1.04); filter: grayscale(.85) contrast(.92) brightness(1.06); }
.foot-map:hover .foot-pin { transform: translate(-50%, -112%); }
.foot-map:hover .foot-map-go .arrow { transform: translateX(4px); }
.foot-map:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 4px; }

.site-foot .foot-base { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap;
  margin-top: clamp(48px, 6vw, 72px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: #a39a86; }
.foot-base p { margin: 0; }
.foot-base .fsep { margin: 0 .7em; opacity: .6; }
.foot-meta a { color: #cfc6b4; }
.foot-meta a:hover { color: #fff; }
.site-foot .social { display: flex; gap: 10px; margin: 0; }
.site-foot .social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  transition: border-color .3s, background .3s; }
.site-foot .social svg { width: 16px; height: 16px; fill: none; stroke: #e2dacb; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.site-foot .social a:hover { border-color: var(--brass-light); background: rgba(167,134,77,.12); }

@media (max-width: 1100px) {
  .site-foot .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-map { grid-column: 1 / -1; }
  .foot-map-frame { aspect-ratio: 21 / 8; }
}
@media (max-width: 720px) {
  .foot-top { grid-template-columns: 1fr; align-items: start; }
  .foot-cta, .foot-phone { align-items: flex-start; }
  .site-foot .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .site-foot .foot-grid .foot-col:first-child { grid-column: auto; }
  .foot-map-frame { aspect-ratio: 4 / 3; }
  .site-foot .foot-base { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .foot-map iframe, .foot-pin { transition: none; } }
.foot-intro .foot-tag { margin: 14px 0 0; font: italic 400 1rem var(--serif); color: var(--brass-light); opacity: .9; }
.site-foot .foot-base { border-top: 0; background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; }

/* =====================================================================
   Over ons doorlopend naast de foto met het uitzicht (foto blijft staan, tekst loopt door)
   ===================================================================== */
.about-story { align-items: start; padding-bottom: 0; }
.about-story .about-media { align-self: stretch; min-height: 0; overflow: visible; }
.about-sticky { position: sticky; top: 80px; height: calc(100vh - 80px); max-height: 860px; min-height: 420px; overflow: hidden; }
.about-story .about-media img { transform: scale(var(--story-zoom, 1.06)); transform-origin: 50% 60%; transition: transform .25s linear; will-change: transform; }
.about-story:hover .about-media img { transform: scale(var(--story-zoom, 1.06)); }
.about-story .about-text { position: relative; align-self: start; max-width: 680px;
  padding: clamp(56px, 7vw, 96px) clamp(28px, 5vw, 88px) clamp(56px, 7vw, 96px) clamp(44px, 5vw, 80px); }
/* dunne leeslijn: vult zich met messing terwijl je door het verhaal scrolt */
.story-rail { position: absolute; left: clamp(20px, 2.2vw, 36px); top: clamp(64px, 7.5vw, 104px); bottom: clamp(64px, 7.5vw, 104px); width: 1px; background: var(--ivory-line); }
.story-rail span { position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--story-p, 0) * 100%); background: var(--brass); }
.story-rail span::after { content: ""; position: absolute; left: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
  box-shadow: 0 0 0 4px rgba(167,134,77,.14); }
.story-block { margin: 0; }
.story-block + .story-block { margin-top: 8px; }
.story-chapter { margin-top: clamp(48px, 6vw, 72px) !important; padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--ivory-line); scroll-margin-top: 96px; }
.story-chapter h2 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.15; margin: 0 0 18px; }
.story-lead { font: 400 1.22rem/1.5 var(--serif); color: var(--teal) !important; }
.story-cta { margin-top: clamp(36px, 4vw, 48px) !important; padding: 26px 28px; background: #fbfaf7; border: 1px solid var(--ivory-line); border-top: 2px solid var(--brass); }
.story-cta h3 { font: 400 1.35rem/1.25 var(--serif); margin: 0 0 8px; color: var(--ink); }
.story-cta p { color: var(--muted) !important; margin: 0 0 18px; }
.js .story-block { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .story-block.is-in { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .about-sticky { position: relative; top: 0; height: 280px; min-height: 0; }
  .about-story .about-text { padding: 40px var(--gutter) 56px calc(var(--gutter) + 18px); }
  .story-rail { left: calc(var(--gutter) - 2px); top: 44px; bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .story-block { opacity: 1; transform: none; transition: none; }
  .about-story .about-media img { transform: none; transition: none; }
}

/* diensten: rustiger kader, messing lijn groeit bij hover, nummering, vloeiend openklappen */
.dienst { position: relative; border-top: 1px solid var(--line); overflow: hidden;
  transition: box-shadow .5s var(--ease), transform .5s var(--ease), background-color .5s var(--ease); }
.dienst::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.dienst:hover, .dienst[open] { background: #fdfcf9; }
.dienst:hover::before, .dienst[open]::before { transform: scaleX(1); }
.dienst:hover { transform: translateY(-3px); box-shadow: 0 26px 48px -36px rgba(23,63,50,.55); }
.dienst[open] { border-top-color: var(--line); }
.dienst summary { position: relative; }
.dienst-nr { font: italic 400 .95rem/1 var(--serif); color: var(--brass); letter-spacing: .04em; opacity: .85; }
.dienst-title { transition: color .4s var(--ease); }
.dienst:hover .dienst-title { color: var(--teal); }
.dienst-foot { transition: border-color .5s var(--ease); }
.dienst:hover .dienst-foot { border-top-color: var(--brass-light); }
.dienst-toggle::after { transition: transform .5s var(--ease); }
.dienst:hover .dienst-toggle::after { transform: rotate(90deg); }
.dienst[open] .dienst-toggle::after { transform: rotate(45deg); }
.js .dienst-body { animation: none; overflow: hidden; }
.dienst-body p { padding-top: 2px; }

/* werken bij: geen harde kaders; zachte messing accenten zoals bij de drie waarden */
.jobs { border-top: 0; margin-top: clamp(8px, 2vw, 20px); }
.job-col { position: relative; padding-top: 34px; }
.job-col + .job-col { border-left: 0; }
.job-col::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 1px; background: var(--brass); transition: width .7s var(--ease); }
.job-col + .job-col::before { left: 28px; }
.job-col + .job-col::after { content: ""; position: absolute; left: 0; top: 30px; height: 150px; width: 1px;
  background: linear-gradient(180deg, rgba(167,134,77,0), rgba(167,134,77,.4) 35%, rgba(167,134,77,.4) 65%, rgba(167,134,77,0)); }
.job-col:hover::before { width: 72px; }
@media (max-width: 960px) {
  .job-col + .job-col { border-top: 0; }
  .job-col + .job-col::before { left: 0; }
  .job-col + .job-col::after { display: none; }
  .job-col { padding-top: 30px; }
}

/* Google Maps in de footer: rustig getint, kleurt op bij aanwijzen; gewoon te verschuiven en in te zoomen */
.foot-map { color: var(--ink); }
.foot-map-frame { aspect-ratio: 16 / 10; background: #e9e7e0; }
.foot-map iframe { left: 0; top: 0; width: 100%; height: 100%; pointer-events: auto;
  filter: grayscale(.6) sepia(.12) contrast(.95) brightness(1.03); transition: filter .9s var(--ease); }
.foot-map-frame::after { background: rgba(23,63,50,.10); transition: opacity .9s var(--ease); }
.foot-map:hover iframe, .foot-map:focus-within iframe { transform: none; filter: none; }
.foot-map:hover .foot-map-frame::after, .foot-map:focus-within .foot-map-frame::after { opacity: 0; }
.foot-map-go { color: var(--teal) !important; text-decoration: none; padding: 6px 0; }
.foot-map-go:hover .arrow { transform: translateX(4px); }
.site-foot .foot-base { justify-content: space-between; }

/* logo: dieper, elegant donkergroen (alleen het merk zelf) */
:root { --logo-green: #173f32; }
.site-head .wordmark, .portal-head .wordmark { color: var(--logo-green); }

/* formulieren (de oude PDF's) als rustige, klikbare lijst */
.form-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ivory-line); }
.form-list li { border-bottom: 1px solid var(--ivory-line); }
.form-row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 40px; align-items: center; gap: 20px;
  padding: 24px 12px 24px 4px; color: var(--ink); text-decoration: none; transition: background-color .5s var(--ease), padding .5s var(--ease); }
.form-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.form-row:hover, .form-row:focus-visible { background: rgba(255,255,255,.55); padding-left: 16px; }
.form-row:hover::before, .form-row:focus-visible::before { transform: scaleX(1); }
.fr-nr { font: italic 400 1rem/1 var(--serif); color: var(--brass); }
.fr-main { display: flex; flex-direction: column; gap: 4px; }
.fr-title { font: 400 1.3rem/1.25 var(--serif); transition: color .4s var(--ease); }
.form-row:hover .fr-title { color: var(--teal); }
.fr-desc { color: var(--muted); font-size: .94rem; }
.fr-meta { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fr-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--teal);
  transition: background .4s var(--ease), border-color .4s, color .4s, transform .5s var(--ease); }
.fr-go .arrow { width: 16px; }
.form-row:hover .fr-go { background: var(--teal); border-color: var(--teal); color: #fff; transform: translateX(4px); }
.form-list-note { margin: 18px 0 0; font-size: .86rem; color: var(--muted); }
@media (max-width: 720px) {
  .form-row { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 12px; }
  .fr-meta { grid-column: 2; grid-row: 2; }
  .fr-go { width: 36px; height: 36px; grid-column: 3; grid-row: 1 / span 2; }
}

/* Demo-band (online demo) */
.demo-band { background: #1d2e28; color: #e9dfc8; font-size: .78rem; letter-spacing: .02em; text-align: center; padding: 6px 16px; line-height: 1.4; }

/* Kaart in de footer: geen groene laag of filter meer, en groter */
.foot-map-frame::after { display: none; }
.foot-map iframe, .foot-map:hover iframe, .foot-map:focus-within iframe { filter: none; transform: none; }
.foot-map-frame { aspect-ratio: 4 / 3; }
.site-foot .foot-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, .7fr) minmax(0, 2.1fr); }
@media (max-width: 1100px) { .site-foot .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-map-frame { aspect-ratio: 16 / 8; } }
@media (max-width: 720px) { .site-foot .foot-grid { grid-template-columns: 1fr 1fr; } .foot-map-frame { aspect-ratio: 1 / 1; } }

/* Contact: twee wegen (direct bellen of adviesgesprek aanvragen) */
.contact-way { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-ink); }
.contact-way span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brass-soft); color: var(--brass-ink); font-size: .78rem; letter-spacing: 0; }
.contact-card .contact-way { color: var(--brass-light); }
.contact-card .contact-way span { background: rgba(255,255,255,.12); color: #fff; }
.cf-field select { font: inherit; font-weight: 400; }
.cf-hint { margin: -6px 0 14px; font-size: .84rem; color: var(--muted); }
.cf-optional { border-left: 2px solid var(--brass-light); padding: 4px 0 2px 16px; margin: 0 0 16px; }
.js .cf-optional[hidden] { display: none; }
.cf-opt-title { margin: 0 0 10px; font-weight: 600; font-size: .92rem; }
.cf-opt-title span, .cf-field em { font-weight: 400; font-style: normal; color: var(--muted); font-size: .84rem; }
.cf-opt-title span::before { content: "· "; }
.cf-field em::before { content: "· "; }
.cf-belofte { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .9rem; color: var(--teal); }
.cf-belofte::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }

/* =====================================================================
   Dashboard: alle klanten, afspraken, e-mail opstellen
   ===================================================================== */
.nav-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px;
  background: var(--brass); color: #fff; font-size: .7rem; font-weight: 700; vertical-align: 1px; }
.title-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px !important; }
.stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.list-tools { display: flex; gap: 8px; margin-bottom: 12px; max-width: 620px; }
.list-tools input[type=search] { flex: 1; min-width: 0; }
.chips-status { margin-bottom: 14px; }
.klanten-tabel .sub { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
.mw-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.klanten-tabel td:last-child { text-align: right; }
.small { font-size: .85rem; }

.afs-strip { margin: 0 0 26px; }
.afs-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.afs-strip-head h2 { margin: 0; font-size: 1.3rem; }
.afs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.afs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.afs-grid section { margin-bottom: 26px; }
.afs-grid h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 8px; }
.count { font: 600 .78rem var(--sans); background: var(--mist); color: var(--teal); padding: 2px 8px; border-radius: 999px; }
.afs-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brass); border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 10px; }
.afs-card.st-bevestigd { border-left-color: var(--ok); }
.afs-card.st-afgerond, .afs-card.st-geannuleerd { border-left-color: var(--line-strong); opacity: .8; }
.afs-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.afs-naam { font-weight: 600; color: var(--ink); text-decoration: none; margin-right: auto; }
.afs-naam:hover { color: var(--teal); text-decoration: underline; }
.afs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 16px; margin: 0 0 12px; font-size: .9rem; }
.afs-facts dt { font-size: .76rem; color: var(--muted); }
.afs-facts dd { margin: 0; overflow-wrap: anywhere; }
.afs-facts .wide { grid-column: 1 / -1; }
.afs-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.afs-bevestig { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.afs-bevestig label { display: flex; flex-direction: column; gap: 3px; font-size: .76rem; color: var(--muted); }
.afs-bevestig input { padding: 6px 8px; font-size: .88rem; }
.afs-more { display: flex; gap: 12px; }
.afs-oud summary { cursor: pointer; color: var(--teal-2); font-weight: 500; margin-bottom: 10px; }
.agenda { position: sticky; top: 80px; }
.agenda h2 { font-size: 1.3rem; }
.agenda-list { list-style: none; margin: 0; padding: 0; }
.ag-dag h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brass-ink); margin: 14px 0 6px; }
.ag-dag ul { list-style: none; margin: 0; padding: 0; }
.ag-dag li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.ag-dag li .muted { grid-column: 2; font-size: .8rem; }
.ag-tijd { font-weight: 600; color: var(--teal); grid-row: span 2; }
.ag-dag a { color: var(--ink); }

.mail-compose textarea { font: inherit; line-height: 1.55; }
.readonly { margin: 0; padding: 10px 12px; background: var(--mist-2); border-radius: var(--r-sm); }
.test-mail { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px 6px; display: grid; gap: 12px; margin: 0; }
.test-mail legend { font-weight: 600; padding: 0 6px; }
.test-mail .hint { margin: 0; }

@media (max-width: 980px) {
  .afs-grid { grid-template-columns: 1fr; }
  .agenda { position: static; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-tools { flex-wrap: wrap; }
}
.klanten-tabel .btn { white-space: nowrap; }
.contact-cell { font-size: .86rem; overflow-wrap: anywhere; }
.test-mail legend { font: 600 1rem var(--sans); color: var(--ink); margin: 0; }

/* =====================================================================
   Contact: twee gelijkwaardige opties (direct bellen | afspraak maken)
   ===================================================================== */
.optie-grid { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; }
.optie { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--ivory-line); border-top: 4px solid var(--teal);
  border-radius: 6px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 18px 40px -32px rgba(23,63,50,.45); }
.optie-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.optie-icoon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mist); flex: none; }
.optie-icoon svg { width: 22px; height: 22px; fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.optie-label { margin: 0 0 2px; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); }
.optie h3 { margin: 0; font: 400 1.55rem/1.2 var(--serif); color: var(--ink); }
.optie-intro { color: var(--muted); font-size: .97rem; margin: 0 0 22px; }
.optie-nummer { display: block; font: 400 clamp(2rem, 3.4vw, 2.6rem)/1.1 var(--serif); color: var(--teal); text-decoration: none; margin: 0 0 22px; letter-spacing: .01em; }
.optie-nummer:hover { color: var(--teal-deep); }
.optie-gegevens { margin: 0 0 24px; border-top: 1px solid var(--line); }
.optie-gegevens div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.optie-gegevens dt { color: var(--muted); }
.optie-gegevens dd { margin: 0; }
.optie-voet { margin-top: auto; padding-top: 6px; }
.optie-knop { width: 100%; justify-content: center; }
.optie-noot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: .86rem; color: var(--muted); text-align: center; }
.optie-noot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.optie-of { position: relative; display: grid; place-items: center; }
.optie-of::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; border-left: 1px dashed var(--line-strong); }
.optie-of span { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ivory);
  border: 1px solid var(--line-strong); font: italic 400 1rem var(--serif); color: var(--muted); }

.gf-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.gf-breed { grid-column: 1 / -1; }
.gf-veld { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; min-width: 0; }
.gf-veld input, .gf-veld textarea { font-weight: 400; width: 100%; }
.gf-hint { margin: -4px 0 0; font-size: .8rem; color: var(--muted); }
.gf-vorm { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.gf-vorm legend { font-size: .88rem; font-weight: 600; margin-bottom: 8px; padding: 0; }
.vorm-tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vorm-tegel { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 14px 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; background: var(--surface); transition: border-color .2s, background .2s, box-shadow .2s; }
.vorm-tegel input { position: absolute; opacity: 0; pointer-events: none; }
.vorm-tegel svg { width: 22px; height: 22px; fill: none; stroke: var(--teal-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.vorm-tegel strong { font-size: .9rem; font-weight: 600; color: var(--ink); }
.vorm-tegel small { font-size: .76rem; color: var(--muted); }
.vorm-tegel:hover { border-color: var(--teal-2); }
.vorm-tegel:has(input:checked) { border-color: var(--teal); background: var(--mist-2); box-shadow: inset 0 0 0 1px var(--teal); }
.vorm-tegel:has(input:checked) svg { stroke: var(--teal); }
.vorm-tegel:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.gesprek-form .cf-optional { margin: 18px 0 0; }
.gesprek-form .captcha { max-width: none; margin: 20px 0 18px; padding: 10px 14px; }
.gesprek-form .form-ok, .gesprek-form .form-err { margin: 0 0 16px; }

@media (max-width: 900px) {
  .optie-grid { grid-template-columns: 1fr; gap: 0; }
  .optie-of { height: 56px; }
  .optie-of::before { top: 8px; bottom: 8px; }
}
@media (max-width: 520px) {
  .gf-velden { grid-template-columns: 1fr; }
  .vorm-tegels { gap: 6px; }
  .vorm-tegel { padding: 12px 4px 10px; }
  .vorm-tegel small { font-size: .7rem; }
  .optie-gegevens div { grid-template-columns: 1fr; gap: 2px; }
}
.gf-vorm legend { font-family: var(--sans); color: var(--ink); }

/* Bedankt-pop-up na "Gesprek aanvragen" */
.has-dialog .zonder-js { display: none; }
.bedankt-dlg { width: min(520px, calc(100vw - 24px)); }
.bedankt-body { text-align: center; }
.bedankt-vink { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); margin-bottom: 18px; }
.bedankt-vink svg { width: 30px; height: 30px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; animation: vink .5s .25s var(--ease) forwards; }
@keyframes vink { to { stroke-dashoffset: 0; } }
.bedankt-body h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 10px; }
.bedankt-lead { font-size: 1.05rem; margin-bottom: 10px; }
.bedankt-body .btn { margin-top: 10px; min-width: 160px; justify-content: center; }
@media (max-width: 720px) { .bedankt-dlg { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { .bedankt-vink svg { animation: none; stroke-dashoffset: 0; } }

/* =====================================================================
   Ronde 23 okt (2): tarieven, sollicitatie, mobiele knop, werkwijze, hero
   ===================================================================== */

/* tarieven per dienst, onder 'Onze tarieven' */
.tarief-lijst { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--ivory-line); }
.tl-kop h3 { font: 400 1.4rem/1.2 var(--serif); color: var(--teal-deep); margin-bottom: 8px; }
.tl-kop p { color: var(--muted); font-size: .92rem; max-width: 38ch; }
.tarief-lijst ul { list-style: none; margin: 0; padding: 0; }
.tarief-lijst li { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.tarief-lijst li:first-child { border-top: 1px solid var(--line); }
.tl-naam { font-weight: 500; }
.tl-lijn { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); min-width: 20px; }
.tl-bedrag { font: 400 1.15rem/1 var(--serif); color: var(--teal); white-space: nowrap; }
.tl-bedrag span[aria-hidden] { color: var(--brass); margin: 0 3px; }
@media (max-width: 760px) { .tarief-lijst { grid-template-columns: 1fr; gap: 16px; } .tl-lijn { display: none; } .tarief-lijst li { justify-content: space-between; } }
.dienst-foot { justify-content: flex-end; }

/* sollicitatie: e-mailadres in de footer licht even op */
#footer-mail { scroll-margin-top: 110px; border-radius: 4px; transition: box-shadow .4s, background-color .4s; }
#footer-mail.is-gewezen { background: rgba(205,176,122,.12); box-shadow: 0 0 0 10px rgba(205,176,122,.12), 0 0 0 11px rgba(205,176,122,.55); }
#footer-mail.is-gewezen .mail-beeld { color: #f1dfb6; }

/* mobiel: één kleine knop 'Afspraak maken' die verdwijnt tijdens typen en bij contact/formulieren */
@media (max-width: 960px) {
  .mobile-bar { display: block; position: fixed; left: auto; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30;
    padding: 0; background: none; border: 0; grid-template-columns: none; transition: transform .35s var(--ease), opacity .35s; }
  .mobile-bar.is-weg { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .mobile-bar .mobile-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 11px 18px; border-radius: 999px;
    background: var(--teal); color: #fff; border: 0; font-size: .9rem; font-weight: 600; text-decoration: none;
    box-shadow: 0 10px 26px -8px rgba(23,63,50,.55); }
  .mobile-pill svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .site-foot { padding-bottom: 72px; }
}

/* werkwijze op mobiel: alleen genummerde bolletjes, de titel staat in het paneel eronder */
@media (max-width: 640px) {
  #werkwijze .proc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #werkwijze .proc-track ol { justify-items: center; }
  #werkwijze .proc-step { align-items: center; padding: 0; }
  #werkwijze .proc-line { left: calc(var(--pad) + (100% - 2 * var(--pad)) * .125); right: auto; width: calc((100% - 2 * var(--pad)) * .75); top: 46px; }
  #werkwijze .proc-main h3 { font-size: 1.5rem; }
}

/* ---------- hero: rustiger, dieper, meer 'boutique' ---------- */
.hero { min-height: clamp(520px, 40vw, 680px); }
.hero-media::after { background:
  linear-gradient(90deg, rgba(18,24,21,.58) 0%, rgba(18,24,21,.34) 26%, rgba(18,24,21,.08) 44%, rgba(18,24,21,0) 56%),
  linear-gradient(0deg, rgba(18,24,21,.28) 0%, rgba(18,24,21,0) 26%); }
.hero h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -.018em; margin-bottom: 22px;
  text-shadow: 0 2px 30px rgba(0,0,0,.18); }
.hero-lede { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,.86); max-width: 42ch; }
.hero .eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; font-size: .7rem; letter-spacing: .2em; }
.hero .eyebrow::before { content: ""; width: 34px; height: 1px; background: #c8ad7c; flex: none; }
.hero-cta { margin-top: 30px; }
.hero .btn-gold { padding: 15px 26px; letter-spacing: .01em; box-shadow: 0 14px 30px -16px rgba(0,0,0,.55);
  transition: background-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.hero .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(0,0,0,.6); }
.hero .btn-gold .arrow { transition: transform .35s var(--ease); }
.hero .btn-gold:hover .arrow { transform: translateX(4px); }
.hero-scroll { position: absolute; left: 50%; bottom: 22px; width: 22px; height: 36px; margin-left: -11px; border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 12px; z-index: 2; opacity: .8; transition: opacity .3s; }
.hero-scroll:hover { opacity: 1; }
.hero-scroll span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff;
  animation: scrollcue 2.2s var(--ease) infinite; }
@keyframes scrollcue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-media img { animation: settle 2.6s var(--ease) both; }
  .js .hero .eyebrow::before { animation: lijn 1.2s .3s var(--ease) both; transform-origin: left; }
}
@keyframes lijn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* hero op tablet en telefoon: foto ingezoomd op de GVN-wand, tekst loopt eroverheen naar beneden */
@media (max-width: 960px) {
  .hero { background: #112f25; }
  .hero-media { height: min(64svh, 540px); }
  .hero-media img { height: 100%; object-position: 73% 45%; }
  .hero-media::after { background: linear-gradient(0deg, #112f25 0%, rgba(23,63,50,.82) 22%, rgba(23,63,50,.2) 50%, rgba(23,63,50,0) 70%),
    linear-gradient(180deg, rgba(18,24,21,.25) 0%, rgba(18,24,21,0) 20%); }
  .hero-panel { margin-top: -190px; background: linear-gradient(180deg, rgba(23,63,50,0) 0, #112f25 190px); z-index: 1; }
  .hero-inner { padding: 0 var(--gutter) 44px; }
  .hero .eyebrow { margin-bottom: 14px; font-size: .64rem; letter-spacing: .16em; }
  .hero .eyebrow::before { width: 22px; }
  .hero h1 { font-size: clamp(2.3rem, 9.4vw, 3rem); margin-bottom: 16px; }
  .hero-lede { font-size: .95rem; line-height: 1.65; }
  .hero-cta { margin-top: 24px; }
  .hero .btn-gold { width: 100%; justify-content: center; }
  .hero-scroll { display: none; }
}
@media (max-width: 640px) { .hero-media { height: min(60svh, 460px); } }
.hero h1 { text-wrap: balance; max-width: 11em; }
@media (max-width: 960px) {
  .hero .eyebrow { font-size: .6rem; letter-spacing: .13em; gap: 10px; white-space: nowrap; }
  .hero h1 { max-width: none; }
}
@media (max-width: 360px) { .hero .eyebrow::before { display: none; } }
@media (max-width: 960px) { .hero h1 { font-size: clamp(2.4rem, 11vw, 3.1rem); max-width: 8.6em; } }

/* =====================================================================
   Ronde 23 okt (3): leesbare hero-tekst, 'Bekijk tarief', werken-bij-pagina
   ===================================================================== */

/* hero: zachte, wazige laag achter de tekst; plant en pot blijven zichtbaar maar storen niet */
@media (min-width: 961px) {
  .hero-panel::before { content: ""; position: absolute; inset: 0 -14% 0 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 90% at 22% 50%, rgba(16,22,19,.52) 0%, rgba(16,22,19,.34) 45%, rgba(16,22,19,0) 78%);
    -webkit-backdrop-filter: blur(5px) saturate(.9); backdrop-filter: blur(5px) saturate(.9);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 96%);
            mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 96%); }
  .hero-inner { position: relative; }
  .hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
  .hero-lede { text-shadow: 0 1px 12px rgba(0,0,0,.45); color: rgba(255,255,255,.92); }
  .hero .eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
}

/* diensten: link naar het tarief */
.dienst-tarief { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .88rem; font-weight: 600; color: var(--teal);
  text-decoration: none; border-bottom: 1px solid var(--brass-light); padding-bottom: 2px; }
.dienst-tarief .arrow { width: 16px; transition: transform .35s var(--ease); }
.dienst-tarief:hover .arrow { transform: translateX(4px); }

/* tarievenlijst: de aangewezen regel licht op en schuift zacht in */
.tarief-lijst li { position: relative; scroll-margin-top: 40vh; transition: color .4s; }
.tarief-lijst li::before { content: ""; position: absolute; inset: 0 -14px; border-radius: 4px; background: var(--brass-soft);
  opacity: 0; transform: scaleX(.96); transform-origin: left; transition: opacity .5s var(--ease), transform .6s var(--ease); z-index: -1; }
.tarief-lijst ul { position: relative; z-index: 0; }
.tarief-lijst li.is-gewezen::before, .tarief-lijst li:target::before { opacity: 1; transform: none; }
.tarief-lijst li.is-gewezen .tl-naam, .tarief-lijst li:target .tl-naam { color: var(--teal-deep); font-weight: 600; }
.tarief-lijst li.is-gewezen .tl-bedrag, .tarief-lijst li:target .tl-bedrag { color: var(--brass-ink); }
.tarief-lijst li.is-gewezen .tl-lijn { border-bottom-color: var(--brass); }
.tarief-lijst li.is-gewezen { animation: tariefin .9s var(--ease); }
@keyframes tariefin { 0% { transform: translateX(0); } 35% { transform: translateX(10px); } 100% { transform: translateX(0); } }

/* sollicitatie: geen kader meer om het e-mailadres, alleen het adres licht even op */
#footer-mail.is-gewezen { background: none; box-shadow: none; }
#footer-mail .mail-beeld { transition: color .6s; }

/* werken bij: eigen pagina */
.werken-beeld { height: clamp(200px, 26vw, 340px); overflow: hidden; }
.werken-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.werken-sec h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; }

/* hero (nieuwe foto): geen gouden lijntje; plant achter de tekst zacht vervaagd en iets donkerder */
.hero .eyebrow::before { display: none !important; }
.hero .eyebrow { gap: 0; }
@media (min-width: 961px) {
  .hero-panel::before { inset: 0 -18% 0 0;
    background: linear-gradient(90deg, rgba(14,20,17,.62) 0%, rgba(14,20,17,.5) 50%, rgba(14,20,17,.18) 80%, rgba(14,20,17,0) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(.85); backdrop-filter: blur(14px) saturate(.85);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 62%, transparent 100%); }
}
@media (max-width: 960px) { .hero-media img { object-position: 64% 42%; } }
/* hero: smallere alinea, eyebrow dichter bij de kop */
@media (min-width: 961px) {
  .hero-lede { max-width: 36ch; }
  .hero .eyebrow { margin-bottom: 14px; }
}
/* hero: tekstblok iets naar rechts, eyebrow even breed als de kop */
@media (min-width: 961px) {
  .hero-inner { padding-left: clamp(40px, 7.4vw, 118px); }
  .hero .eyebrow { font-size: .62rem; letter-spacing: .15em; }
  .hero-lede { max-width: 34ch; }
}
/* hero: lettertype zoals het ontwerp van de directie (ronde, open schreefloze letter onder de kop) */
.hero .eyebrow, .hero-lede, .hero .btn-gold { font-family: "Nunito Sans", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; }
.hero .eyebrow { font-weight: 500; }
.hero-lede { font-weight: 400; font-size: 1.02rem; line-height: 1.72; letter-spacing: .005em; }
.hero .btn-gold { font-weight: 600; letter-spacing: .01em; }
.hero h1 { font-weight: 400; letter-spacing: -.012em; }
/* hero-alinea iets kleiner, zodat hij compacter op de wand past */
@media (min-width: 961px) { .hero-lede { font-size: .92rem; line-height: 1.68; max-width: 38ch; } }

/* drie waarden op telefoon/tablet: tikken om te openen, met een rustig plus-teken als hint */
@media (hover: none), (pointer: coarse) {
  .value { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .value h3 { display: flex; align-items: baseline; gap: 12px; padding-right: 34px; position: relative; }
  .value h3::after { content: ""; position: absolute; right: 2px; top: .35em; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: linear-gradient(var(--teal), var(--teal)) center / 9px 1.3px no-repeat, linear-gradient(var(--teal), var(--teal)) center / 1.3px 9px no-repeat;
    transition: transform .4s var(--ease), border-color .3s, background-color .3s; }
  .value.is-open h3::after { transform: rotate(45deg); border-color: var(--brass); background-color: var(--brass-soft); }
  .values-grid.has-open .value:not(.is-open) { opacity: 1; }
  .value:active { background: rgba(255,255,255,.35); }
}

.btn-agenda { display: inline-flex; align-items: center; gap: 7px; }
.btn-agenda svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   GVN Hub, ronde 23 okt (4): rustige, heldere vormgeving
   - kop: merk | hoofdnavigatie | hulpmiddelen (e-mailstatus, demo-datum, website)
   - telefoon: tabbalk onderin zoals een app
   - zachte kleuraccenten per soort informatie
   ===================================================================== */
body.dash { --hub-bg: #f3eee4; --hub-ink-2: #44504a; --acc-mail: #3f6f8f; --acc-mail-soft: #e7f0f6; --acc-task: #9a7428; --acc-task-soft: #f7efdc;
  --acc-late: #b04a36; --acc-late-soft: #f9e9e5; --acc-new: #1f4a3b; --acc-new-soft: #ece4d4; --acc-ok: #2f7a55; --acc-ok-soft: #e2f2e9;
  background: var(--hub-bg); }
.dash-head { background: linear-gradient(180deg, #2f5242 0%, #2a4a3c 100%); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px -18px rgba(20,40,30,.6); }
.dash-head-row { flex-wrap: nowrap; gap: 28px; min-height: 64px; max-width: 1400px; margin: 0 auto; }
.dash-nav { flex-wrap: nowrap; gap: 2px; align-items: center; }
.dash-nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: .92rem; color: #ddd3c0; border-radius: 8px; white-space: nowrap; }
.dash-nav a[aria-current] { background: rgba(255,255,255,.13); color: #fff; }
.dash-nav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -12px; height: 2px; background: var(--brass-light); border-radius: 2px; }
.dash-nav .nav-sub { color: #a9bdb3; font-size: .86rem; }
.nav-sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); margin: 0 6px; }
.nav-n { background: var(--brass); }
.nav-n.is-late { background: #c9644f; }
.dash-tools { flex-wrap: nowrap; gap: 10px; }
.mail-state { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; padding: 6px 12px; color: #ddd3c0; border-color: rgba(255,255,255,.22); white-space: nowrap; }
.mail-state .dot-led { width: 7px; height: 7px; border-radius: 50%; background: #9fb3a9; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.mail-state.is-on { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); font-weight: 500; }
.mail-state.is-on .dot-led { background: #7fd3a2; box-shadow: 0 0 0 3px rgba(127,211,162,.2); }
.demo-pop { position: relative; }
.demo-pop summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: .8rem; color: #fff;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); white-space: nowrap; }
.demo-pop summary::-webkit-details-marker { display: none; }
.demo-pop summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo-pop[open] summary { background: rgba(255,255,255,.2); }
.demo-pop .demo-date { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; display: grid; gap: 8px; width: 260px; padding: 16px;
  background: var(--surface); color: var(--ink); border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(20,40,30,.45); border: 1px solid var(--line); }
.demo-pop .demo-date label { display: block; color: var(--ink); font-weight: 600; font-size: .9rem; }
.demo-pop .demo-date p { margin: 0; }
.demo-pop .demo-date input { width: 100%; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); color-scheme: light; min-height: 40px; }
.demo-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-pop .demo-date .btn-quiet { color: var(--teal); border-color: var(--line-strong); }
.dash-site { font-size: .82rem; color: #ddd3c0; text-decoration: none; white-space: nowrap; }
.dash-site:hover { color: #fff; }
.dash-tabbar { display: none; }

/* titels en tekst iets rustiger */
.dash .dash-title h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.01em; }
.dash .muted { color: #5f6b65; }

/* filterchips: op één regel, horizontaal te vegen */
.chips-scroll, .dash-title .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.chips-scroll::-webkit-scrollbar, .dash-title .chips::-webkit-scrollbar { display: none; }
.chip { white-space: nowrap; flex: none; }
.chip.is-on { background: var(--teal); border-color: var(--teal); }

/* kerncijfers met een zacht kleuraccent */
.stats { gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
.stats div { position: relative; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 16px 18px 14px; overflow: hidden; }
.stats div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong); }
.stats div:nth-child(1)::before { background: var(--acc-mail); }
.stats div:nth-child(2)::before { background: var(--acc-task); }
.stats div:nth-child(3)::before { background: var(--acc-late); }
.stats div:nth-child(4)::before { background: var(--acc-new); }
.stats div:nth-child(5)::before { background: var(--brass); }
.stats .is-alert { background: linear-gradient(0deg, var(--acc-late-soft), var(--surface) 70%); }
.stats dd { font-size: 2rem; }

/* berichten: kleur per soort */
.msg { border-radius: 10px; border-left-width: 4px; }
.msg.is-mail { border-left-color: var(--acc-mail); }
.msg.is-task { border-left-color: var(--acc-task); }
.b-mail { background: var(--acc-mail-soft); color: var(--acc-mail); }
.b-task { background: var(--acc-task-soft); color: var(--acc-task); }
.table-wrap, .card, .afs-card, .empty { border-radius: 12px; }
.s-late { background: var(--acc-late-soft); color: var(--acc-late); }
.when.ok { color: var(--acc-ok); font-weight: 600; }

/* ---------- facturen ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line-strong); }
.kpi dt { font-size: .82rem; color: var(--muted); }
.kpi dd { margin: 4px 0 2px; font: 400 1.65rem/1.15 var(--serif); color: var(--ink); white-space: nowrap; }
.kpi span { font-size: .78rem; color: var(--muted); }
.k-open::before { background: var(--acc-new); }
.k-soon::before { background: var(--acc-task); }
.k-late::before { background: var(--acc-late); }
.k-late dd { color: var(--acc-late); }
.k-ok::before { background: var(--acc-ok); }
.fac-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.fac-grid .chips { margin-bottom: 12px; }
.fac-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fac { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr) auto; gap: 8px 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 10px; padding: 12px 16px; }
.fac.st-binnenkort { border-left-color: var(--acc-task); }
.fac.st-verlopen { border-left-color: var(--acc-late); background: linear-gradient(90deg, var(--acc-late-soft), var(--surface) 40%); }
.fac.st-betaald { border-left-color: var(--acc-ok); opacity: .78; }
.fac.st-open { border-left-color: var(--acc-new); }
.fac-main { min-width: 0; }
.fac-klant { display: block; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-klant:hover { color: var(--teal); text-decoration: underline; }
.fac-oms { display: block; font-size: .84rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-nr { font-variant-numeric: tabular-nums; }
.fac-bedrag { font: 400 1.2rem/1 var(--serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fac-verval { font-size: .86rem; display: flex; flex-direction: column; gap: 2px; }
.fac-lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fac-status { display: flex; align-items: center; gap: 8px; }
.fac-acties { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.fac-acties form { margin: 0; }
.fac-list.compact .fac { grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1.2fr); }
.fac-list.compact .fac-status, .fac-list.compact .fac-acties { grid-column: 1 / -1; justify-content: flex-start; }
.fac-side { display: grid; gap: 14px; position: sticky; top: 84px; }
.fac-side h2 { font-size: 1.2rem; margin-bottom: 10px; }
.fac-instel { display: grid; gap: 8px; margin-bottom: 14px; }
.fac-instel label { font-weight: 600; font-size: .9rem; }
.inline-field { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); }
.inline-field input { width: 74px; text-align: center; }
.fac-instel .btn { justify-self: start; }
.fac-tijdlijn { list-style: none; margin: 0 0 10px; padding: 0 0 0 16px; border-left: 2px solid var(--line); display: grid; gap: 10px; }
.fac-tijdlijn li { position: relative; display: grid; font-size: .86rem; }
.fac-tijdlijn li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--acc-task); }
.fac-tijdlijn li:nth-child(2)::before, .fac-tijdlijn li:nth-child(3)::before { border-color: var(--acc-late); }
.fac-tijdlijn li:nth-child(4)::before { border-color: var(--acc-late); background: var(--acc-late); }
.fac-tijdlijn strong { font-size: .8rem; color: var(--ink); }
.fac-tijdlijn span { color: var(--muted); }
.fac-nieuw summary { cursor: pointer; font-weight: 600; color: var(--teal); }
.fac-form { display: grid; gap: 10px; margin-top: 12px; }
.fac-form label { display: grid; gap: 4px; font-size: .84rem; font-weight: 600; }
.fac-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fac-form .btn { justify-self: start; }

/* ---------- klantenlijst ---------- */
.klanten-tabel tbody tr:has(.s-wait) th a { color: var(--teal-deep); }

/* =========================== tablet / telefoon =========================== */
@media (max-width: 1180px) {
  .dash-nav .nav-sub, .nav-sep { display: none; }
  .fac-grid { grid-template-columns: 1fr; }
  .fac-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  body.dash { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .dash-head-row { min-height: 54px; gap: 10px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
  .dash-nav, .dash-site { display: none; }
  .dash-tools { width: auto; margin-left: auto; justify-content: flex-end; gap: 8px; }
  .mail-state { padding: 5px 10px; }
  .demo-pop summary { padding: 5px 10px; }
  .demo-pop .demo-date { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .dash-brand .wm-gvn { font-size: 1.3rem; }
  .dash-main { padding-top: 18px; }

  .dash-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -18px rgba(20,40,30,.4); }
  .dash-tabbar > a, .tab-meer > summary { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px;
    color: #6a776f; text-decoration: none; font-size: .7rem; font-weight: 600; border-radius: 10px; list-style: none; cursor: pointer; }
  .tab-meer > summary::-webkit-details-marker { display: none; }
  .dash-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .dash-tabbar > a[aria-current], .tab-meer > summary[aria-current] { color: var(--teal); }
  .dash-tabbar > a[aria-current]::before, .tab-meer > summary[aria-current]::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal); }
  .tab-n { position: absolute; top: 1px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
    background: var(--brass); color: #fff; font-size: .64rem; font-weight: 700; border: 2px solid #fff; }
  .tab-n.is-late { background: #c9644f; }
  .tab-meer { position: relative; }
  .tab-meer-menu { position: absolute; right: 6px; bottom: calc(100% + 12px); min-width: 180px; display: grid; padding: 6px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(20,40,30,.45); }
  .tab-meer-menu a { padding: 11px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .92rem; }
  .tab-meer-menu a:active, .tab-meer-menu a:hover { background: var(--mist-2); }

  .dash-title { margin-bottom: 14px; gap: 12px; }
  .dash-title > div { width: 100%; }
  .dash-title .chips { width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 2px; }
  .title-actions { display: none !important; }
  .stats { display: flex; overflow-x: auto; scrollbar-width: none; gap: 10px; margin: 0 calc(var(--gutter) * -1) 20px; padding: 0 var(--gutter); }
  .stats::-webkit-scrollbar { display: none; }
  .stats div { flex: 0 0 auto; min-width: 140px; padding: 12px 14px 10px 16px; }
  .stats dd { font-size: 1.6rem; }
  .kpis { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) 18px; padding: 0 var(--gutter); }
  .kpis::-webkit-scrollbar { display: none; }
  .kpi { flex: 0 0 auto; min-width: 170px; }
  .fac-side { grid-template-columns: 1fr; }

  /* facturen als kaart */
  .fac { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .fac-main { grid-column: 1; }
  .fac-bedrag { grid-column: 2; grid-row: 1; justify-self: end; }
  .fac-verval { grid-column: 1; flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .fac-lbl { display: none; }
  .fac-status { grid-column: 2; grid-row: 2; justify-self: end; }
  .fac-acties { grid-column: 1 / -1; justify-content: flex-start; padding-top: 6px; border-top: 1px dashed var(--line); }

  /* klanten als kaart */
  .klanten-tabel tr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; }
  .klanten-tabel tbody th { grid-column: 1; grid-row: 1; }
  .klanten-tabel td[data-label="Status"] { grid-column: 2; grid-row: 1; justify-self: end; }
  .klanten-tabel td[data-label="Soort"], .klanten-tabel td[data-label="Plaats"] { display: inline; font-size: .84rem; color: var(--muted); grid-column: 1 / -1; }
  .klanten-tabel td[data-label="Soort"] { grid-row: 2; }
  .klanten-tabel td[data-label="Plaats"] { display: none; }
  .klanten-tabel td[data-label="Contact"] { grid-column: 1 / -1; font-size: .84rem; color: var(--hub-ink-2); }
  .klanten-tabel td[data-label="Verantwoordelijk"] { grid-column: 1; font-size: .84rem; }
  .klanten-tabel td[data-label="Open stukken"] { grid-column: 2; justify-self: end; font-size: .84rem; }
  .klanten-tabel td[data-label="Open stukken"]::before { content: "Open stukken "; color: var(--muted); }
  .klanten-tabel td:last-child { grid-column: 1 / -1; text-align: left; }
  .klanten-tabel td:last-child:empty { display: none; }
  .klanten-tabel .sub { display: inline; margin-left: 6px; }
  .klanten-tabel tbody tr + tr { border-top: 1px solid var(--line); }
  .list-tools { max-width: none; }
  .list-tools input[type=search] { min-width: 0; }
  .chips-status { width: calc(100% + var(--gutter) * 2); margin-left: calc(var(--gutter) * -1); padding: 0 var(--gutter); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }

  /* werkvoorraad-rijen iets luchtiger */
  .work tr { padding: 14px 16px; }
  .afs-row { grid-template-columns: 1fr; }
  .afs-bevestig { width: 100%; }
  .afs-bevestig label { flex: 1 1 120px; }
  .dossier-head { align-items: flex-start; }
}
@media (max-width: 1180px) { .fac-grid { grid-template-columns: minmax(0, 1fr); } }
.fac-grid > section { min-width: 0; }
.afs-strip-head .btn { white-space: nowrap; }
@media (max-width: 860px) {
  .dash .dash-title p.muted { font-size: .9rem; line-height: 1.5; }
  .afs-strip-head h2 { font-size: 1.15rem; }
}
@media (min-width: 861px) {
  .fac { grid-template-columns: minmax(0, 1.5fr) 104px minmax(130px, 1fr) 128px auto; gap: 6px 16px; }
  .fac-verval { white-space: nowrap; }
  .fac-status { justify-content: flex-start; }
  .fac-status .pill { white-space: nowrap; }
  .fac-acties { flex-wrap: nowrap; }
  .fac-acties .btn { padding-left: 12px; padding-right: 12px; }
  .fac-bedrag { text-align: right; }
}
@media (min-width: 861px) and (max-width: 1320px) {
  .fac { grid-template-columns: minmax(0, 1.5fr) 104px minmax(130px, 1fr) auto; }
  .fac-acties { grid-column: 1 / -1; justify-content: flex-start; padding-top: 8px; border-top: 1px dashed var(--line); }
}
@media (min-width: 861px) {
  .fac { grid-template-columns: minmax(0, 1.6fr) 110px minmax(150px, 1fr) auto; row-gap: 10px; }
  .fac-acties { grid-column: 1 / -1; justify-content: flex-start; padding-top: 10px; border-top: 1px dashed var(--line); }
  .fac.st-betaald .fac-acties { border-top: 0; padding-top: 0; }
}
@media (min-width: 861px) { .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stats div:nth-child(6)::before { background: var(--acc-late); }
.stat-link dt a { color: inherit; text-decoration: none; }
.stat-link dt a::after { content: ""; position: absolute; inset: 0; }
.stat-link:hover { border-color: var(--line-strong); }
.stats .stat-link.is-alert dd { color: var(--acc-late); }
picture { display: contents; }

/* =====================================================================
   Hub, stap 1 + 2: demo-notities, persona, scenario's, Vandaag-actielijst, Planning
   ===================================================================== */
:root { --demo-ink: #4b4896; --demo-bg: #f3f2fb; --demo-line: #b9b6e6; }
.uitleg-uit .demo-note { display: none !important; }
.demo-label { display: inline-block; font: 600 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--demo-ink);
  background: #e6e4f7; border-radius: 4px; padding: 4px 6px; margin-right: 8px; vertical-align: 1px; font-style: normal; }
.demo-gids { background: var(--demo-bg); border: 1px dashed var(--demo-line); border-radius: 12px; padding: 0; margin: 0 0 18px; color: #3f3d6e; }
.demo-gids summary { cursor: pointer; padding: 12px 16px; font-weight: 600; color: var(--demo-ink); list-style: none; display: flex; align-items: center; }
.demo-gids summary::-webkit-details-marker { display: none; }
.demo-gids summary::after { content: "+"; margin-left: auto; font-size: 1.1rem; transition: transform .3s; }
.demo-gids[open] summary::after { transform: rotate(45deg); }
.demo-gids dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; margin: 0; padding: 2px 16px 14px; }
.demo-gids dt { font: italic 600 .8rem var(--sans); color: var(--demo-ink); margin-bottom: 4px; }
.demo-gids dd { margin: 0; font-size: .86rem; line-height: 1.5; font-style: italic; }
.demo-gids a { color: var(--demo-ink); }
.demo-assume { margin: 0; padding: 10px 16px 14px; border-top: 1px dashed var(--demo-line); font-size: .84rem; font-style: italic; }
.demo-assume strong { font-style: normal; color: var(--demo-ink); }
@media (max-width: 1000px) { .demo-gids dl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .demo-gids dl { grid-template-columns: 1fr; } }
.demo-tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--demo-line); background: var(--demo-bg); color: var(--demo-ink); font: italic 700 .7rem/1 Georgia, serif; cursor: help; vertical-align: 2px; }
.demo-tip-txt { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); z-index: 50; width: 260px; padding: 10px 12px;
  background: #fff; color: #3f3d6e; border: 1px dashed var(--demo-line); border-radius: 10px; box-shadow: 0 14px 30px -14px rgba(40,38,90,.4);
  font: italic 400 .8rem/1.5 var(--sans); text-align: left; letter-spacing: 0; text-transform: none; opacity: 0; pointer-events: none; transition: opacity .2s; }
.demo-tip:hover .demo-tip-txt, .demo-tip:focus .demo-tip-txt, .demo-tip.is-open .demo-tip-txt { opacity: 1; pointer-events: auto; }
.demo-inline { color: var(--demo-ink); background: var(--demo-bg); border: 1px dashed var(--demo-line); padding: 1px 6px; border-radius: 4px; font-style: italic; }
.demo-label-big { font: 600 .74rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--demo-ink); margin: 0 0 6px; }

/* kop: navigatie met een kleine demo-regel onder elk label */
.dash-nav a { flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 12px; line-height: 1.15; }
.nav-l { display: inline-flex; align-items: center; gap: 6px; }
.nav-note { display: block; font: italic 400 .66rem/1.2 var(--sans); color: #c2c0f0; margin-top: 2px; white-space: nowrap; }
.dash-nav a[aria-current]::after { bottom: -9px; }
.dash-tools { gap: 8px; }
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: #fff;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); white-space: nowrap; }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pop[open] > summary { background: rgba(255,255,255,.22); }
.pop-persona .ik { color: #d8ccb6; font-weight: 400; }
.pop-meer > summary { padding: 6px 9px; }
.pop-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; width: 300px; padding: 12px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(20,40,30,.45); display: grid; gap: 6px; }
.pop-titel { margin: 0 0 4px; font-weight: 600; font-size: .9rem; }
.demo-inline-tag { font: italic 400 .74rem var(--sans); color: var(--demo-ink); margin-left: 4px; }
.pop-uitleg { margin: 0 0 6px; padding: 8px 10px; font: italic .8rem/1.45 var(--sans); color: #3f3d6e; background: var(--demo-bg); border: 1px dashed var(--demo-line); border-radius: 8px; }
.ps-optie, .scen { display: grid; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: none;
  cursor: pointer; font: inherit; color: var(--ink); }
.ps-optie:hover, .scen:hover { background: var(--mist-2); }
.ps-optie.is-on, .scen.is-on { border-color: var(--teal); background: var(--mist-2); }
.ps-optie small, .scen small { color: var(--muted); font-size: .76rem; }
.pop-panel form { margin: 0; }
.pop-datum { width: 340px; }
.scen-lijst { display: grid; gap: 2px; }
.scen-eigen { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .82rem; }
.scen-eigen input { flex: 1; min-height: 36px; padding: 4px 8px; }
.pop-links { width: 220px; }
.pop-links a { padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.pop-links a:hover { background: var(--mist-2); }
.pop-links a[aria-current] { background: var(--mist-2); font-weight: 600; }
.mail-link { border-top: 1px solid var(--line); border-radius: 0 !important; }
.dot-led { width: 8px; height: 8px; border-radius: 50%; background: #b4bdb8; }
.dot-led.is-on { background: #3fae74; }
.uitleg-knop { font: inherit; font-size: .78rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px dashed #c2c0f0; background: rgba(195,192,240,.16); color: #e6e5fb; }
.uitleg-knop .uk-uit { display: none; }
.uitleg-uit .uitleg-knop { border-style: solid; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #d8ccb6; }
.uitleg-uit .uitleg-knop .uk-aan { display: none; }
.uitleg-uit .uitleg-knop .uk-uit { display: inline; }
.datum-band { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 7px 16px;
  background: #ebe9fb; color: #3f3d6e; font-size: .84rem; border-top: 1px dashed var(--demo-line); }
.datum-band .link-btn { color: var(--demo-ink); font-weight: 600; }
.uitleg-uit .datum-band { display: flex !important; }

/* ---------- Vandaag ---------- */
.vd-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.vd-kop h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.vd-sam { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sam { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: .88rem; }
.sam strong { font: 400 1.2rem/1 var(--serif); }
.sam-nu { border-color: #e8b8ad; background: var(--acc-late-soft); color: var(--acc-late); }
.sam-vd { border-color: #e7d3a6; background: var(--acc-task-soft); color: var(--acc-task); }
.sam-later { color: var(--muted); border-style: dashed; }
.schakel { display: inline-flex; padding: 3px; border-radius: 999px; background: #e9e2d4; }
.schakel a, .schakel span { padding: 6px 14px; border-radius: 999px; color: var(--hub-ink-2); text-decoration: none; font-size: .86rem; font-weight: 600; }
.schakel [aria-current] { background: var(--surface); color: var(--teal); box-shadow: 0 1px 3px rgba(20,40,30,.15); }
.vd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; margin-top: 8px; }
.groep { margin-bottom: 26px; scroll-margin-top: 90px; }
.groep h2 { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; margin: 0 0 2px; }
.groep-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.groep-nu .groep-dot { background: var(--acc-late); box-shadow: 0 0 0 4px var(--acc-late-soft); }
.groep-vandaag .groep-dot { background: var(--acc-task); box-shadow: 0 0 0 4px var(--acc-task-soft); }
.groep-uitleg { margin: 0 0 10px 18px; font-size: .84rem; color: var(--muted); }
.kaart { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 12px; padding: 14px 16px 6px; margin-bottom: 10px; }
.kaart.g-nu { border-left-color: var(--acc-late); }
.kaart.g-vandaag { border-left-color: var(--acc-task); }
.kaart-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kaart-naam { font-weight: 600; font-size: 1.02rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.kaart-naam:hover { color: var(--teal); text-decoration: underline; }
.kaart-n { font-size: .78rem; color: var(--muted); }
.kaart-hint { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: var(--mist-2); font-size: .84rem; color: var(--teal-deep); }
.kaart-hint::before { content: "Tip · "; font-weight: 600; }
.act-lijst { list-style: none; margin: 4px 0 0; padding: 0; }
.act { padding: 12px 0 10px; border-top: 1px solid var(--line); }
.act:first-child { border-top: 0; }
.act-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.act-soort { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; flex: none; }
.t-mail .act-soort { background: var(--acc-mail-soft); color: var(--acc-mail); }
.t-bel .act-soort { background: var(--acc-task-soft); color: var(--acc-task); }
.t-taak .act-soort { background: #eceef0; color: #4f5a63; }
.t-aanvraag .act-soort { background: var(--acc-new-soft); color: var(--acc-new); }
.t-gesprek .act-soort { background: var(--acc-late-soft); color: var(--acc-late); }
.act-titel { font-weight: 500; }
.act-waarom { margin: 6px 0 8px; font-size: .88rem; color: var(--hub-ink-2); }
.wl { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.act-mail { margin: 0 0 8px; }
.act-mail summary { cursor: pointer; color: var(--teal-2); font-size: .85rem; font-weight: 500; }
.act-mail .mail { margin-top: 8px; }
.act-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.act-later { position: relative; }
.act-later > summary { list-style: none; }
.act-later > summary::-webkit-details-marker { display: none; }
.act-later-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; display: grid; padding: 6px; min-width: 160px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px -14px rgba(20,40,30,.4); }
.act-later-menu .link-btn { text-align: left; padding: 8px 10px; border-radius: 6px; text-decoration: none; }
.act-later-menu .link-btn:hover { background: var(--mist-2); }
.vd-zij { display: grid; gap: 12px; position: sticky; top: 92px; }
.zij-blok h2 { font-size: 1.05rem; margin: 0 0 8px; }
.zij-lijst { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.zij-lijst li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; font-size: .88rem; }
.zij-lijst li > a { color: var(--ink); font-weight: 500; }
.zij-lijst small { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; }
.zij-lijst li:has(.ag-t) small { grid-column: 2; }
.ag-t { font-weight: 700; color: var(--teal); min-width: 42px; }

/* ---------- Planning ---------- */
.pb-kaart { display: grid; gap: 14px; margin-bottom: 18px; }
.pb-rij { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.pb-naam { font-weight: 600; }
.pb-balk { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--mist); }
.pb-balk span { display: block; height: 100%; }
.pb-gepland { background: #c9d1cd; } .pb-wacht_op_klant { background: #d9b45f; } .pb-compleet { background: #6fb38d; }
.pb-in_behandeling { background: var(--acc-new); } .pb-ingediend { background: #4a6fa5; }
.pb-leg { grid-column: 2; font-size: .8rem; color: var(--muted); }

/* ---------- Start hier ---------- */
.start .lead { font-size: 1.05rem; color: var(--hub-ink-2); }
.start .card { margin-bottom: 14px; }
.start ul, .start ol { padding-left: 20px; display: grid; gap: 8px; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ps-kaart button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.ps-kaart button span { font-size: .8rem; color: var(--muted); }
.ps-kaart.is-on button { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--mist-2); }
.ps-kaart form, .ps-kaart { margin: 0; }

@media (max-width: 1180px) {
  .nav-note { display: none; }
  .uitleg-knop .uk-aan, .uitleg-knop .uk-uit { font-size: 0; }
  .uitleg-knop .uk-aan::before { content: "Uitleg aan"; font-size: .76rem; }
  .uitleg-uit .uitleg-knop .uk-uit::before { content: "Uitleg uit"; font-size: .76rem; }
  .vd-grid { grid-template-columns: 1fr; }
  .vd-zij { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 860px) {
  .pop-persona .ik { display: none; }
  .uitleg-knop { padding: 5px 9px; }
  .pop-meer { display: none; }
  .pop-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: 75vh; overflow: auto; }
  .vd-kop { align-items: flex-start; }
  .act-knoppen .btn { flex: 0 0 auto; }
  .pb-rij { grid-template-columns: 1fr; }
  .pb-leg { grid-column: 1; }
}
@media (max-width: 420px) {
  .demo-pop > summary span { display: none; }
}
.nav-note { white-space: normal; max-width: 120px; }
.dash-nav a { padding: 6px 10px; }
.dash-head-row { gap: 20px; }
.uitleg-knop .uk-aan, .uitleg-knop .uk-uit { font-size: 0; }
.uitleg-knop .uk-aan::before { content: "Uitleg aan"; font-size: .76rem; }
.uitleg-uit .uitleg-knop .uk-uit::before { content: "Uitleg uit"; font-size: .76rem; }
.groep h2 { flex-wrap: nowrap; }
.groep h2 .demo-tip { margin-left: 2px; }
@media (min-width: 1181px) and (max-width: 1360px) { .nav-note { max-width: 96px; } .pop-persona .ik { display: none; } }
.act-vraag { margin: -2px 0 8px; font: italic .88rem/1.5 var(--serif); color: var(--hub-ink-2); }

/* =====================================================================
   Contact: vijf varianten van het aanvraagformulier (app/aanvraag.py)
   ===================================================================== */
.fv-sprong ol { list-style: none; margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fv-sprong a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--ivory-line);
  border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; }
.fv-sprong a span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mist);
  color: var(--teal-deep); font-weight: 600; font-size: .82rem; }
.fv-sprong a:hover { border-color: var(--teal-2); }

.fv-lijst { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 64px); }
.fv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(24px, 4vw, 64px); align-items: start;
  padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--ivory-line); scroll-margin-top: 90px; }
.fv:first-child { border-top: 0; padding-top: 0; }
.fv-info { position: sticky; top: 110px; min-width: 0; }
.fv-label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-ink); font-weight: 600; }
.fv-nr { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--teal-deep);
  color: #fff; font: 600 1rem/1 var(--serif); letter-spacing: 0; }
.fv-badge { padding: 3px 10px; border-radius: 999px; background: var(--brass); color: #fff; letter-spacing: .06em; font-size: .72rem; }
.fv h3 { font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--serif); margin: 0 0 12px; color: var(--teal-deep); text-wrap: balance; }
.fv-uitleg { margin: 0 0 16px; color: var(--ink); max-width: 52ch; }
.fv-kenmerken { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.fv-kenmerken li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--muted); }
.fv-kenmerken li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; border-radius: 2px;
  border: 1.5px solid var(--brass); transform: rotate(45deg); }
.fv-meter { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: .85rem; }
.fv-meter div { display: flex; align-items: center; gap: 10px; }
.fv-meter dt { color: var(--muted); }
.fv-meter dd { margin: 0; }
.fv-stippen { display: inline-flex; gap: 4px; }
.fv-stip { width: 18px; height: 6px; border-radius: 3px; background: var(--ivory-line); }
.fv-stip.is-vol { background: var(--teal-2); }
.fv.is-aanbevolen .fv-kaart { box-shadow: 0 0 0 2px var(--brass), 0 24px 48px -28px rgba(31,36,32,.35); }

.fv-kaart { background: var(--surface); border: 1px solid var(--ivory-line); border-radius: 18px; padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 24px 48px -30px rgba(31,36,32,.3); min-width: 0; }
.af { margin: 0; }
.af-kop { display: grid; gap: 12px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.af-taal { display: inline-flex; justify-self: start; padding: 3px; border-radius: 999px; background: var(--mist-2); border: 1px solid var(--line); }
.af-taalknop { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: 500 .85rem var(--sans); color: var(--muted); cursor: pointer; }
.af-taalknop.is-aan { background: var(--surface); color: var(--teal-deep); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.af-balk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.af-balk span { height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; }
.af-balk span.is-vol { background: var(--teal); }
.af-stapnamen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.af-stapnamen li { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--muted); min-width: 0; }
.af-stapnamen li.is-nu, .af-stapnamen li.is-klaar { color: var(--ink); }
.af-stapnr { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-strong); font-size: .8rem; }
.af-stapnamen li.is-nu .af-stapnr, .af-stapnamen li.is-klaar .af-stapnr { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.af-stapnaam { overflow-wrap: anywhere; }
.af-stapkort { display: none; margin: 0; font-size: .9rem; font-weight: 600; color: var(--teal-deep); }

.af-titel { font: 600 1.3rem/1.3 var(--sans); margin: 0 0 6px; color: var(--ink); text-wrap: balance; }
.af-titel:focus { outline: none; }
.af-lead { margin: 0 0 18px; color: var(--muted); font-size: .98rem; }
.af-blok { min-width: 0; }
.af-kaarten { display: grid; gap: 10px; }
.af-kaart { position: relative; display: block; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.af-kaart input, .af-chip input { position: absolute; opacity: 0; pointer-events: none; }
.af-kaart:hover { border-color: var(--teal-3); }
.af-kaart.is-gekozen { border-color: var(--brass); background: #fbf8f1; box-shadow: 0 0 0 3px var(--brass-soft); }
.af-kaart:has(input:focus-visible), .af-chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.af-kaarttekst { display: grid; gap: 3px; }
.af-kaarttekst strong { font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.af-kaarttekst small { font-size: .9rem; color: var(--muted); line-height: 1.4; }
.af-prijs { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--brass-ink); margin-top: 4px; }
.af-noot { margin: 14px 0 0; font-size: .88rem; color: var(--muted); }

.af-vragen { display: grid; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.af-vragen.is-nieuw { animation: af-in .4s var(--ease); }
@keyframes af-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.af-vraaglabel { margin: 0 0 8px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.af-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.af-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--surface); font-size: .93rem; cursor: pointer; transition: border-color .2s, background .2s; }
.af-chip:hover { border-color: var(--teal-3); }
.af-chip.is-gekozen { border-color: var(--teal); background: var(--mist-2); color: var(--teal-deep); font-weight: 600; }
.af-chips-stapel { flex-direction: column; }
.af-chips-stapel .af-chip { width: 100%; }

.af-veld { margin-bottom: 16px; }
.af-label { display: block; margin: 0 0 6px; font-weight: 600; font-size: .95rem; color: var(--ink); }
.af-veld input, .af-veld textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--paper); font: 400 1rem/1.5 var(--sans); color: var(--ink); }
.af-veld textarea { resize: vertical; min-height: 120px; }
.af-veld input:focus, .af-veld textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--mist); background: var(--surface); }
.af-veld textarea::placeholder, .af-veld input::placeholder { color: #8b9087; }
.af-hint { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.af-teller { margin: 6px 0 0; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.af-teller.is-ok { color: var(--ok); }
.has-fout .af-kaart, .has-fout input, .has-fout textarea, .has-fout .af-chip { border-color: var(--danger); }
.af-fout { margin: 8px 0 0; font-size: .88rem; font-weight: 600; color: var(--danger); }

.af-samenvatting { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 6px 0 16px; padding: 12px 14px;
  border-radius: 10px; background: var(--mist-2); font-size: .9rem; }
.af-sv-label { font-weight: 600; color: var(--teal-deep); }
.af-link { margin-left: auto; border: 0; background: none; padding: 0; color: var(--teal-2); text-decoration: underline; font: inherit; cursor: pointer; }
.af .captcha { max-width: none; margin: 4px 0 12px; padding: 10px 14px; }
.af-privacy { margin: 0; font-size: .82rem; color: var(--muted); }

.af-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.af-nav .btn { min-height: 48px; }
.af-verder { flex: 1 1 auto; max-width: 260px; justify-content: center; }
.af-nav .af-fout { flex-basis: 100%; text-align: right; }

.af-klaar { text-align: center; padding: 12px 4px 4px; }
.af-klaar:focus { outline: none; }
.af-vink { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brass-soft);
  border: 1px solid var(--brass-light); margin-bottom: 14px; }
.af-vink svg { width: 30px; height: 30px; fill: none; stroke: var(--brass); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.af-klaar p { color: var(--muted); max-width: 44ch; margin: 0 auto 10px; }
.af-extra { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 8px; text-align: left; }
.af-extra li { padding: 10px 14px; border-left: 3px solid var(--brass); background: #fbf8f1; border-radius: 0 8px 8px 0; font-size: .92rem; }
.af-klaar .btn { margin-top: 6px; }

@media (max-width: 960px) {
  .fv { grid-template-columns: 1fr; }
  .fv-info { position: static; }
}
@media (max-width: 520px) {
  .fv-kaart { padding: 18px 16px; border-radius: 14px; }
  .af-stapnamen { display: none; }
  .af-stapkort { display: block; }
  .af-nav { justify-content: stretch; }
  .af-nav .btn { flex: 1 1 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .af-vragen.is-nieuw { animation: none; } }

/* Hover: elke keuze kleurt al mee zodra de muis erboven is, niet pas na de klik */
.af-kaart:hover { border-color: var(--brass-light); background: #fdfbf6; box-shadow: 0 6px 16px -12px rgba(31,36,32,.4); }
.af-kaart.is-gekozen:hover { border-color: var(--brass); background: #fbf8f1; }
.af-chip:hover { border-color: var(--teal-2); background: var(--mist-2); color: var(--teal-deep); }
.af-taalknop:hover { color: var(--teal-deep); background: rgba(255,255,255,.7); }
.af-link:hover { color: var(--teal); }
.fv-sprong a:hover { background: var(--mist-2); color: var(--teal-deep); }
.fv-sprong a:hover span { background: var(--teal-deep); color: #fff; }
.choice label:hover, .vorm-tegel:hover { border-color: var(--teal-2); background: var(--mist-2); }
.choice label { transition: border-color .2s, background .2s; }
.aud-head:hover .aud-title { color: var(--teal); }
.pr-tab:hover { color: var(--teal-deep); background: var(--mist-2); }
.proc-step:hover .proc-label { color: var(--teal); }
.value:hover h3 { color: var(--teal); }
.captcha-box:hover { border-color: var(--teal-2); background: var(--mist-2); }
@media (hover: none) { .af-kaart:hover, .af-chip:hover { box-shadow: none; } }

.fv-bron { margin: 0 0 14px; font-size: .9rem; color: var(--muted); }
.fv-bron code { font-size: .85em; }
.fv-detail { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--brass-light); background: var(--surface); border-radius: 0 8px 8px 0; }
.fv-detail p { margin: 0; font-size: .93rem; }
.fv-detail-kop { font-weight: 600; color: var(--teal-deep); margin-bottom: 4px !important; }
.fv-overzicht-link { font-weight: 600; }
.fv-overzicht-link .arrow { width: 16px; vertical-align: middle; }
.af-kaarten.is-meer .af-kaart { padding-left: 50px; }
.af-kaarten.is-meer .af-kaart::before { content: ""; position: absolute; left: 18px; top: 18px; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.af-kaarten.is-meer .af-kaart.is-gekozen::before { background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--brass); }

/* Overzicht van alle klikpaden: /formulieren/overzicht */
.ov-pagina { padding-block: clamp(32px, 5vw, 64px); }
.ov-pagina h1 { font: 500 clamp(2rem, 4vw, 3rem)/1.1 var(--serif); margin: 0 0 16px; color: var(--teal-deep); }
.ov-lead { max-width: 70ch; margin: 0 0 12px; }
.ov-h2 { font: 500 1.6rem/1.2 var(--serif); margin: 36px 0 14px; color: var(--teal-deep); }
.ov-tabel-wrap { overflow-x: auto; border: 1px solid var(--ivory-line); border-radius: 12px; background: var(--surface); }
.ov-tabel { width: 100%; min-width: 900px; border-collapse: collapse; font-size: .9rem; }
.ov-tabel th, .ov-tabel td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ov-tabel thead th { background: var(--mist-2); font-weight: 600; }
.ov-tabel thead th a { color: var(--teal-deep); text-decoration: none; }
.ov-tabel thead th a:hover { text-decoration: underline; }
.ov-tabel tbody th { font-weight: 600; color: var(--muted); white-space: nowrap; }
.ov-tabel tbody tr:hover { background: #fbfaf6; }
.ov-tabel tr:last-child th, .ov-tabel tr:last-child td { border-bottom: 0; }
.ov-ja { color: var(--ok); font-weight: 600; }
.ov-nee { color: var(--muted); }
.ov-variant { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--ivory-line); scroll-margin-top: 90px; }
.ov-kop { max-width: 75ch; margin-bottom: 20px; }
.ov-kop h2 { font: 500 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--serif); margin: 0 0 10px; color: var(--teal-deep); }
.ov-kolomkop, .ov-rij { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 0; }
.ov-kolomkop span { padding: 8px 14px; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); font-weight: 600; }
.ov-rijen { display: grid; gap: 10px; }
.ov-rij { background: var(--surface); border: 1px solid var(--ivory-line); border-radius: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.ov-rij:hover { border-color: var(--brass-light); box-shadow: 0 10px 24px -18px rgba(31,36,32,.45); }
.ov-variant.is-aanbevolen .ov-rij { border-color: var(--brass-light); }
.ov-cel { padding: 14px; min-width: 0; font-size: .88rem; border-left: 1px solid var(--line); }
.ov-cel:first-child { border-left: 0; }
.ov-s1 { background: var(--mist-2); display: flex; flex-direction: column; gap: 4px; }
.ov-s1 strong { font-size: .98rem; color: var(--teal-deep); line-height: 1.3; }
.ov-s1 small { color: var(--muted); }
.ov-stap { display: none; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); font-weight: 600; margin-bottom: 6px; }
.ov-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ov-chips li { padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: .84rem; line-height: 1.35; }
.ov-vraag { margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--teal-3); background: var(--mist-2); border-radius: 0 8px 8px 0; }
.ov-vraag p { margin: 0; }
.ov-opties { font-size: .85rem; }
.ov-noot { margin: 0 0 6px; font-size: .8rem; color: var(--muted); }
.ov-vraag .ov-noot { margin-top: 2px; }
.ov-velden { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.ov-velden small { color: var(--muted); }
.ov-veld { font-weight: 600; }
.ov-tag { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--brass-soft); color: var(--brass-ink); }
.ov-tag-opt { background: var(--mist); color: var(--teal-deep); }
.ov-tag-int { background: #e6eef7; color: #2b4e72; }
.ov-extra { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.ov-extra li { padding: 8px 10px; border-left: 3px solid var(--brass); background: #fbf8f1; border-radius: 0 8px 8px 0; }
.ov-extra small { color: var(--muted); }
.ov-int { margin: 8px 0 0; padding: 6px 8px; border-radius: 6px; background: #e6eef7; color: #2b4e72; font-size: .8rem; }
.ov-pagina > .wrap > p:last-child { margin-top: 40px; }
@media (max-width: 900px) {
  .ov-kolomkop { display: none; }
  .ov-rij { grid-template-columns: 1fr; }
  .ov-cel { border-left: 0; border-top: 1px solid var(--line); }
  .ov-cel:first-child { border-top: 0; }
  .ov-stap { display: block; }
}

/* =====================================================================
   Ronde 26 okt: referentieontwerp directie, één vormtaal, ruimte en hover
   - Kaarten: afgeronde hoeken van 16px, dunne lijn, zachte schaduw bij hover.
   - Knoppen blijven pil-vormig; keuzes in formulieren 12px.
   - Elke klikbare of informatieve kaart reageert op de muis (kleur + lichte lift).
   ===================================================================== */
:root { --r-kaart: 16px; --r-klein: 12px; --kaart-lijn: #e6decf;
  --schaduw-hover: 0 18px 40px -26px rgba(31,36,32,.42); --lift: translateY(-3px);
  --sectie: clamp(80px, 9vw, 128px); --rij: clamp(20px, 2vw, 28px); }
.section { padding-block: var(--sectie); }
.section-head { margin-bottom: clamp(40px, 5vw, 64px); gap: clamp(24px, 4vw, 64px); }
.section-head > p, .section-head .head-copy p { color: var(--muted); }
.head-copy p + p { margin-top: 12px; }
.btn-gold, .hero .btn-gold { border-radius: 999px; }

/* --- vier kernwaarden onder de hero (tekst: referentie directie) --- */
.kernen { background: var(--ivory); border-bottom: 1px solid var(--ivory-line); }
.kern-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: clamp(44px, 5vw, 64px); }
.kern { position: relative; padding: 8px clamp(18px, 2.4vw, 36px); border-left: 1px solid var(--ivory-line); border-radius: var(--r-klein);
  transition: background-color .3s, transform .35s var(--ease); }
.kern:first-child { border-left: 0; padding-left: 0; }
.kern svg { width: 42px; height: 42px; fill: none; stroke: var(--teal-deep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 20px; transition: stroke .3s, transform .35s var(--ease); }
.kern h3 { font: 400 1.32rem/1.25 var(--serif); margin: 0 0 12px; color: var(--ink); transition: color .3s; }
.kern p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.65; max-width: 30ch; }
.kern:hover svg { stroke: var(--brass); transform: translateY(-3px); }
.kern:hover h3 { color: var(--teal); }

/* --- 'Over GVN Adviseurs' naast de foto (tekst: referentie directie) --- */
.over-ref { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); border-bottom: 1px solid var(--ivory-line); }
.over-ref-media { position: relative; min-height: clamp(320px, 34vw, 520px); overflow: hidden; }
.over-ref-media picture, .over-ref-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.over-ref-media img { transition: transform 1.2s var(--ease); }
.over-ref:hover .over-ref-media img { transform: scale(1.03); }
.over-ref-tekst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 48px); align-items: start;
  align-self: center; padding: clamp(48px, 6vw, 96px) clamp(24px, 5vw, 80px); }
.over-ref-kop h2 { font: 400 clamp(1.9rem, 2.8vw, 2.6rem)/1.15 var(--serif); margin: 0; color: var(--teal-deep); }
.over-ref-copy { padding-left: clamp(20px, 2.5vw, 36px); border-left: 1px solid var(--ivory-line); }
.over-ref-copy p { margin: 0 0 20px; font-size: .97rem; line-height: 1.7; color: #3a413c; }
.link-pijl { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--brass-light); padding-bottom: 3px; transition: color .25s, border-color .25s; }
.link-pijl .arrow { width: 18px; transition: transform .3s var(--ease); }
.link-pijl:hover { color: var(--teal); border-color: var(--teal); }
.link-pijl:hover .arrow { transform: translateX(4px); }

/* --- inleiding uit de docx --- */
.intro-sec { padding-bottom: clamp(32px, 4vw, 56px); }
.intro-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.intro-rij h2 { font: 400 clamp(2rem, 3.4vw, 2.9rem)/1.15 var(--serif); margin: 0; color: var(--ink); text-wrap: balance; }
.intro-rij-sub { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.intro-rij-sub h3 { font: 400 1.5rem/1.25 var(--serif); color: var(--teal); margin: 0; }
.intro-copy p { margin: 0 0 14px; color: #3a413c; max-width: 60ch; }
.intro-copy p:last-child { margin-bottom: 0; }
#helpen { padding-top: clamp(48px, 6vw, 80px); }

/* --- kaarten: één vormtaal --- */
.audiences { gap: var(--rij); }
.aud, .dienst, .process, .quote-card, .principe, .contact-kaart, .fv-kaart, .tarief-lijst, .cta-band {
  border-radius: var(--r-kaart); }
.aud, .dienst, .principe, .contact-kaart { border: 1px solid var(--kaart-lijn); background: var(--surface);
  transition: border-color .3s, box-shadow .35s, transform .35s var(--ease), background-color .3s; }
.aud { overflow: hidden; }
.aud:hover, .dienst:hover, .principe:hover, .contact-kaart:hover { border-color: var(--brass-light); box-shadow: var(--schaduw-hover); transform: var(--lift); }
.aud.is-open { border-color: var(--teal-2); }
.aud-head:hover .aud-title { color: var(--teal); }
.dienst { border-top: 1px solid var(--kaart-lijn); overflow: hidden; }
.dienst::before { border-radius: var(--r-kaart) var(--r-kaart) 0 0; }
.diensten { gap: var(--rij); }
.dienst[open] { border-color: var(--teal-2); }
.process { border: 1px solid var(--kaart-lijn); overflow: hidden; }
.proc-step { border-radius: var(--r-klein); transition: background-color .25s; padding: 8px 10px 8px 0; }
.proc-step:hover .proc-label { color: var(--teal); }
.proc-step:hover .proc-dot { border-color: var(--brass); }
.cta-band { overflow: hidden; transition: box-shadow .35s, transform .35s var(--ease); }
.cta-band:hover { box-shadow: var(--schaduw-hover); }
.quote-card { border-top: 0; transition: box-shadow .35s, transform .35s var(--ease); }
.quote-card:hover { box-shadow: var(--schaduw-hover); transform: var(--lift); }
.tariff { gap: clamp(28px, 4vw, 64px); }
.tarief-lijst { background: var(--surface); border: 1px solid var(--kaart-lijn); padding: clamp(24px, 3vw, 36px); margin-top: clamp(32px, 4vw, 48px); }
.tarief-lijst li { border-radius: 8px; transition: background-color .25s; }
.tarief-lijst li:hover { background: var(--mist-2); }
.tarief-lijst li:hover .tl-naam { color: var(--teal-deep); }
.tl-bedrag small { font-size: .78em; color: var(--muted); margin-right: 4px; font-family: var(--sans); }

/* --- over ons: drie uitgangspunten voluit (docx) --- */
.principes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rij); align-items: stretch; }
.principe { padding: clamp(24px, 2.6vw, 36px); }
.principe svg { width: 40px; height: 40px; fill: none; stroke: var(--teal); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 18px; transition: stroke .3s; }
.principe:hover svg { stroke: var(--brass); }
.principe h3 { font: 400 1.4rem/1.25 var(--serif); margin: 0 0 14px; }
.principe p { margin: 0 0 12px; color: #4a514c; font-size: .95rem; line-height: 1.7; }
.principe p:first-of-type { color: var(--ink); }
.principe p:last-child { margin-bottom: 0; }
.partner-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.partner-rij h3 { font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1.2 var(--serif); margin: 0; color: var(--teal-deep); }
.partner-rij p { margin: 0 0 14px; color: #3a413c; }
.partner-lead { font: 400 1.2rem/1.5 var(--serif); color: var(--teal) !important; }
#over .cta-band { margin-top: clamp(40px, 5vw, 64px); }

/* --- contact: gegevens + formulier --- */
.contact-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.contact-kaart { padding: clamp(24px, 3vw, 40px); position: sticky; top: 110px; }
.contact-kaart h3 { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 20px; color: var(--teal-deep); }
.contact-dl { margin: 0 0 24px; display: grid; gap: 16px; }
.contact-dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.contact-dl dt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); padding-top: 3px; }
.contact-dl dd { margin: 0; }
.contact-dl a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--brass-light); }
.contact-dl a:hover { color: var(--teal); border-color: var(--teal); }
.contact-bel-tekst { margin: 0 0 14px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.contact-bel svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.contact-formkolom .contact-form-kop { margin-bottom: 18px; }
.contact-formkolom .contact-form-kop h3 { font: 400 1.5rem/1.2 var(--serif); margin: 0 0 8px; color: var(--teal-deep); }
.contact-formkolom .contact-form-kop p { margin: 0; color: var(--muted); max-width: 56ch; }
.contact-formkolom .fv-kaart { transition: box-shadow .35s; }
.contact-formkolom .fv-kaart:hover { box-shadow: 0 28px 56px -32px rgba(31,36,32,.4); }

/* --- responsief --- */
@media (max-width: 1100px) {
  .over-ref-tekst { grid-template-columns: 1fr; }
  .over-ref-copy { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--ivory-line); }
}
@media (max-width: 960px) {
  .kern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .kern:nth-child(3) { border-left: 0; padding-left: 0; }
  .over-ref { grid-template-columns: 1fr; }
  .over-ref-media { min-height: 0; aspect-ratio: 16 / 10; }
  .intro-rij, .partner-rij, .contact-raster { grid-template-columns: 1fr; }
  .principes { grid-template-columns: 1fr; }
  .contact-kaart { position: static; }
}
@media (max-width: 560px) {
  .kern-grid { grid-template-columns: 1fr; row-gap: 0; padding-block: 28px; }
  .kern { border-left: 0; padding: 22px 0; border-top: 1px solid var(--ivory-line); border-radius: 0; }
  .kern:first-child { border-top: 0; }
  .contact-dl div { grid-template-columns: 1fr; gap: 2px; }
}
@media (hover: none) {
  .aud:hover, .dienst:hover, .principe:hover, .contact-kaart:hover, .quote-card:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aud, .dienst, .principe, .contact-kaart, .quote-card, .kern svg, .over-ref-media img { transition: none; }
  .aud:hover, .dienst:hover, .principe:hover, .contact-kaart:hover, .quote-card:hover { transform: none; }
}

/* =====================================================================
   Ronde 26 okt (2): vanafprijzen, uitgangspunten, contact, menu, telefoon
   ===================================================================== */

/* --- vanafprijzen: 'vanaf' één keer in de kop, bedragen in een rustig raster --- */
.tarief-lijst { grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.tarief-lijst .tl-kop .eyebrow { margin-bottom: 8px; }
/* 26 okt (2): weer onder elkaar met stippellijn, zoals het eerdere ontwerp */
.tarief-lijst ul { display: block; }
.tarief-lijst li { justify-content: flex-start; gap: 12px; padding: 14px 12px; margin: 0 -12px; border-top: 0; border-bottom: 1px solid var(--line); }
.tarief-lijst li:first-child { border-top: 0; }
.tarief-lijst li:last-child { border-bottom: 0; }
.tl-bedrag { font: 500 1.3rem/1 var(--serif); color: var(--teal-deep); }

/* --- uitgangspunten: even hoog, volledige tekst bij muis (overlapt rustig) of tik --- */
.principes { --principe-h: 340px; align-items: start; }
.principe-houder { position: relative; height: var(--principe-h); }
.principe { position: absolute; inset: 0 0 auto 0; max-height: var(--principe-h); overflow: hidden; cursor: pointer; z-index: 1;
  transition: max-height .55s var(--ease), box-shadow .35s, border-color .3s, transform .35s var(--ease); }
.principe:hover, .principe:focus-visible, .principe.is-open { max-height: 1200px; z-index: 6; box-shadow: 0 30px 60px -30px rgba(31,36,32,.45);
  border-color: var(--brass-light); transform: none; outline: none; }
.principe-tekst { position: relative; }
.principe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0), var(--surface) 72%); transition: opacity .35s; }
.principe-meer { position: absolute; left: clamp(24px, 2.6vw, 36px); bottom: 18px; z-index: 2; font-size: .85rem; font-weight: 600; color: var(--teal);
  display: inline-flex; align-items: center; gap: 8px; transition: opacity .3s; }
.principe-meer::after { content: "↓"; font-size: .9em; }
.principe:hover::after, .principe:focus-visible::after, .principe.is-open::after,
.principe:hover .principe-meer, .principe:focus-visible .principe-meer, .principe.is-open .principe-meer { opacity: 0; }
.principe:focus-visible { box-shadow: 0 0 0 3px var(--focus), 0 30px 60px -30px rgba(31,36,32,.45); }

/* --- contact: links tekst en gegevens, rechts het formulier --- */
.contact-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-links { position: sticky; top: 104px; }
.contact-links h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); margin: 0 0 18px; }
.contact-intro { color: var(--muted); margin: 0 0 12px; max-width: 46ch; }
.contact-links .contact-kaart { position: static; margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 2.4vw, 32px); }
.contact-kaart h3 { font-size: 1.35rem; margin-bottom: 18px; }
.contact-dl { gap: 14px; margin-bottom: 20px; }
.contact-dl div { grid-template-columns: 104px minmax(0, 1fr); }
.contact-bel-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact-bel-rij .contact-bel-tekst { margin: 0; padding: 0; border: 0; flex: 1 1 200px; font-size: .95rem; }
.contact-bel { min-height: 44px; white-space: nowrap; }
.contact-formkaart { padding: clamp(24px, 3vw, 40px); }
.contact-formkaart .contact-form-kop { margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.contact-formkaart .contact-form-kop h3 { font: 400 1.6rem/1.2 var(--serif); margin: 0 0 8px; color: var(--teal-deep); }
.contact-formkaart .contact-form-kop p { margin: 0; color: var(--muted); font-size: .95rem; }
.contact-formkaart .af-kop { padding-bottom: 16px; margin-bottom: 18px; }

/* --- menu: actief onderdeel ook op de telefoon zichtbaar --- */
.main-nav a[aria-current] { color: var(--teal-deep); }

/* --- telefoon --- */
@media (max-width: 960px) {
  .contact-links { position: static; }
  .principes { --principe-h: auto; gap: 14px; }
  .principe-houder { height: auto; }
  .principe { position: relative; max-height: 250px; }
  .principe:hover { max-height: 250px; box-shadow: none; }
  .principe.is-open { max-height: 1600px; }
  .tarief-lijst { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --sectie: 64px; --rij: 14px; }
  body { font-size: 16px; }
  .section-head { gap: 14px; margin-bottom: 28px; }
  .section-head h2, .intro-rij h2, .contact-links h2 { font-size: clamp(1.75rem, 7.4vw, 2.2rem); line-height: 1.15; }
  .eyebrow { margin-bottom: 10px; font-size: .72rem; }
  .hero-inner { padding: 36px 20px 40px; }
  .hero-lede { font-size: .97rem; line-height: 1.65; }
  /* kernwaarden: 2 x 2, compact */
  .kern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-block: 8px; }
  .kern, .kern:nth-child(3) { padding: 22px 14px; border-left: 0; border-top: 0; border-radius: 0; }
  .kern:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--ivory-line); }
  .kern:nth-child(-n+2) { border-bottom: 1px solid var(--ivory-line); }
  .kern svg { width: 32px; height: 32px; margin-bottom: 10px; }
  .kern h3 { font-size: 1.08rem; margin-bottom: 6px; }
  .kern p { font-size: .84rem; line-height: 1.5; }
  .over-ref-tekst { padding: 32px 20px 40px; gap: 18px; }
  .over-ref-media { aspect-ratio: 4 / 3; }
  .intro-rij-sub { margin-top: 28px; padding-top: 24px; }
  .intro-sec { padding-bottom: 24px; }
  #helpen { padding-top: 40px; }
  .aud-head { padding: 18px 18px; }
  .aud-title { font-size: 1.25rem; }
  .diensten { grid-template-columns: 1fr; gap: 12px; }
  .dienst summary { min-height: 0; padding: 18px 18px 16px; }
  .cta-band { padding: 22px 20px; gap: 16px; }
  .cta-band h3 { font-size: 1.3rem; }
  .cta-band .btn { width: 100%; }
  .partner-rij { margin-top: 36px; padding-top: 28px; gap: 12px; }
  .tarief-lijst { padding: 20px; gap: 16px; }
  .tarief-lijst li { padding: 12px 8px; margin: 0 -8px; justify-content: space-between; }
  .tarief-lijst .tl-lijn { display: none; }
  .quote-card { padding: 22px 20px; }
  .quote-card .btn { width: 100%; }
  .closing-line::before, .closing-line::after { width: 18px; margin: 0 8px; }
  .contact-formkaart { padding: 20px 16px; border-radius: 14px; }
  .contact-links .contact-kaart { padding: 20px; }
  .contact-dl div { grid-template-columns: 1fr; gap: 2px; }
  .contact-bel { width: 100%; }
  .aud:hover, .dienst:hover, .contact-kaart:hover { transform: none; }
}
@media (max-width: 380px) {
  .kern-grid { grid-template-columns: 1fr; }
  .kern, .kern:nth-child(odd) { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--ivory-line); }
}
@media (max-width: 960px) {
  .contact-raster { grid-template-columns: 1fr; gap: 28px; }
}
/* telefoon: eerst de tekst, dan het formulier (het doel), daarna de kantoorgegevens */
@media (max-width: 960px) {
  .contact-links { display: contents; }
  .contact-links > .eyebrow, .contact-links > h2, .contact-links > .contact-intro, .contact-links > .form-ok { order: 1; margin-top: 0; }
  .contact-raster { row-gap: 0; }
  .contact-links > h2 { margin-bottom: 14px; }
  .contact-rechts { order: 2; margin-top: 18px; }
  .contact-links .contact-kaart { order: 3; margin-top: 18px; }
}

/* =====================================================================
   Ronde 26 okt (3): rustige, eenduidige beweging
   - Eén curve voor alles (zacht uitlopend), kleuren .4s, verplaatsingen .6–.7s.
   - Kleine afstanden (2–3px lift, 14px bij binnenkomen), niets verspringt.
   ===================================================================== */
:root { --ease: cubic-bezier(.22, .61, .36, 1); --ease-uit: cubic-bezier(.4, 0, .2, 1); --t-kleur: .4s; --t-beweging: .65s; }

/* kaarten en knoppen: dezelfde timing overal */
.aud, .dienst, .principe, .contact-kaart, .quote-card, .cta-band, .kern, .af-kaart, .af-chip, .fv-kaart, .tarief-lijst li {
  transition: border-color var(--t-kleur) var(--ease), background-color var(--t-kleur) var(--ease), color var(--t-kleur) var(--ease),
              box-shadow var(--t-beweging) var(--ease), transform var(--t-beweging) var(--ease); }
.btn { transition: background-color var(--t-kleur) var(--ease), border-color var(--t-kleur) var(--ease), color var(--t-kleur) var(--ease),
       box-shadow var(--t-beweging) var(--ease), transform var(--t-beweging) var(--ease); }
.btn .arrow, .link-pijl .arrow { transition: transform var(--t-beweging) var(--ease); }
.kern svg, .principe svg { transition: stroke var(--t-kleur) var(--ease), transform var(--t-beweging) var(--ease); }
.aud:hover, .dienst:hover, .contact-kaart:hover, .quote-card:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -30px rgba(31,36,32,.38); }
.over-ref-media img { transition: transform 1.6s var(--ease); }
.over-ref:hover .over-ref-media img { transform: scale(1.025); }
.main-nav a::after { transition: transform .5s var(--ease); }

/* uitgangspunten: hoogte wordt gemeten (app.js), dus het openen en sluiten loopt even soepel */
.principe { transition: max-height .7s var(--ease), box-shadow .6s var(--ease), border-color .4s var(--ease); }
.principe:hover, .principe:focus-visible { max-height: var(--principe-h); box-shadow: 0 22px 44px -30px rgba(31,36,32,.38); }
.principe.is-open { z-index: 6; box-shadow: 0 34px 64px -34px rgba(31,36,32,.45); border-color: var(--brass-light); }
.principe::after { transition: opacity .5s var(--ease); }
.principe-meer { transition: opacity .35s var(--ease); }
.principe:hover::after, .principe:hover .principe-meer, .principe:focus-visible::after, .principe:focus-visible .principe-meer { opacity: 1; }
.principe.is-open::after, .principe.is-open .principe-meer { opacity: 0; }
.principe-tekst p { transition: color .4s var(--ease); }

/* binnenkomen bij het scrollen */
.in-wacht { opacity: 0; transform: translateY(14px); }
.in-wacht.in-beeld { opacity: 1; transform: none;
  transition: opacity .9s var(--ease) var(--in-delay, 0ms), transform .9s var(--ease) var(--in-delay, 0ms); }

/* formulier: zachte overgang tussen de stappen */
.af-body.is-nieuw { animation: af-stap .5s var(--ease) both; }
@keyframes af-stap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.af-vragen.is-nieuw { animation: af-stap .5s var(--ease) both; }

/* bevestiging als venster */
.af-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 20px;
  background: var(--surface); color: var(--ink); box-shadow: 0 40px 90px -30px rgba(20,28,24,.55); overflow: auto;
  animation: af-dlg-in .55s var(--ease) both; }
.af-dialog::backdrop { background: rgba(28,36,31,.42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: af-fade .45s var(--ease) both; }
.af-dialog.is-weg { animation: af-dlg-uit .32s var(--ease-uit) both; }
.af-dialog.is-weg::backdrop { animation: af-fade-uit .32s var(--ease-uit) both; }
@keyframes af-dlg-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes af-dlg-uit { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes af-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes af-fade-uit { to { opacity: 0; } }
.af-dialog .af-klaar { position: relative; padding: clamp(32px, 5vw, 48px) clamp(24px, 5vw, 44px) clamp(28px, 4vw, 40px); text-align: center; }
.af-dialog .af-titel { font: 400 clamp(1.5rem, 3vw, 1.9rem)/1.2 var(--serif); color: var(--teal-deep); margin: 0 0 12px; }
.af-dialog .af-klaar p { color: var(--muted); margin: 0 auto 10px; max-width: 40ch; }
.af-dialog .af-vink { animation: af-vink-in .7s var(--ease) .15s both; }
.af-dialog .af-vink path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: af-vink-lijn .6s var(--ease) .45s forwards; }
@keyframes af-vink-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes af-vink-lijn { to { stroke-dashoffset: 0; } }
.af-dlg-ok { margin-top: 14px; min-width: 160px; }
.af-dlg-sluit { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
  font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; transition: background-color .4s var(--ease), color .4s var(--ease); }
.af-dlg-sluit:hover { background: var(--mist-2); color: var(--teal-deep); }

@media (prefers-reduced-motion: reduce) {
  .in-wacht { opacity: 1; transform: none; }
  .af-dialog, .af-dialog::backdrop, .af-dialog .af-vink, .af-body.is-nieuw { animation: none; }
  .af-dialog .af-vink path { stroke-dashoffset: 0; animation: none; }
  .principe { transition: none; }
}

/* =====================================================================
   Ronde 26 okt (4): uitgangspunten duwen de inhoud omlaag; diensten in dezelfde kaartstijl
   ===================================================================== */
/* uitgangspunten: in de stroom, dus wat eronder staat schuift mee (geen overlap meer) */
.principes { align-items: start; }
.principe-houder { height: auto; }
.principe { position: relative; inset: auto; max-height: var(--principe-h); z-index: auto; }
.principe.is-open { z-index: auto; }

/* gedeelde kaartstijl: uitgangspunten en diensten */
.dienst { padding: 0; }
.dienst summary { padding: clamp(24px, 2.6vw, 36px); padding-bottom: 22px; gap: 12px; min-height: 0; }
.dienst-title { font: 400 1.4rem/1.25 var(--serif); }
.dienst-lead { color: #4a514c; font-size: .95rem; line-height: 1.7; }
.dienst::before { display: none; }
.dienst:hover, .dienst[open] { background: var(--surface); }
.dienst[open], .dienst.is-open { border-color: var(--brass-light); box-shadow: 0 34px 64px -34px rgba(31,36,32,.45); transform: none; }
.dienst:hover { border-color: var(--brass-light); transform: none; box-shadow: 0 22px 44px -30px rgba(31,36,32,.38); }
.dienst:hover .dienst-title { color: var(--ink); }
.dienst-foot { border-top: 0; padding-top: 4px; justify-content: flex-start; }
.dienst-body { padding: 0 clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 32px); }
.dienst-body p { color: #4a514c; font-size: .95rem; line-height: 1.7; }

/* 'Lees verder ↓' overal gelijk */
.dienst-toggle, .principe-meer { font-size: .85rem; font-weight: 600; color: var(--teal); display: inline-flex; align-items: center; gap: 8px; }
.dienst-toggle::after, .principe-meer::after { content: "↓"; font-size: .9em; transition: transform .6s var(--ease); }
.dienst:hover .dienst-toggle::after { transform: translateY(2px); }
.dienst[open] .dienst-toggle::after { transform: rotate(180deg); }
.dt-minder { display: none; }
.dienst[open] .dt-meer { display: none; }
.dienst[open] .dt-minder { display: inline; }
.principe:hover .principe-meer::after { transform: translateY(2px); }
/* diensten: gesloten kaarten even hoog, 'Lees verder' onderaan op dezelfde lijn */
.dienst summary { min-height: 270px; }
.dienst-lead { flex: 1; }
.dienst-foot { margin-top: auto; }
@media (max-width: 720px) { .dienst summary { min-height: 0; } }

/* Ronde 26 okt (5): telefoon */
@media (max-width: 960px) {
  .principes .principe, .principes .principe:hover, .principes .principe:focus-visible { max-height: 250px; box-shadow: none; }
  .principes .principe.is-open { box-shadow: 0 22px 44px -30px rgba(31,36,32,.38); border-color: var(--brass-light); }
  .principe svg { width: 32px; height: 32px; margin-bottom: 12px; }
  .principe h3 { font-size: 1.25rem; margin-bottom: 10px; }
}
@media (max-width: 720px) {
  .cta-band .btn, .quote-card .btn { white-space: normal; line-height: 1.3; min-height: 52px; padding-block: 12px; text-align: center; }
  .main-nav .nav-extra[href="/#contact"] { margin-top: 18px; border: 0; justify-content: center; text-align: center; background: var(--teal); color: #fff;
    border-radius: 999px; padding: 14px 0; font-weight: 600; }
  .main-nav a { padding: 15px 0; }
  .hero h1 { margin-bottom: 16px; }
  .hero-cta { margin-top: 22px; }
}

/* 26 okt (2): uitzicht-sectie weer met de verhouding en animatie van het eerdere ontwerp; eerste blok = referentietekst */
.story-ref h2 { margin: 0 0 18px; }
.story-ref .link-pijl { display: inline-flex; margin: 4px 0 36px; }

/* prijsindicatie: 'vanaf' één keer boven de bedragen */
.tl-tabel { min-width: 0; }
.tl-vanaf { margin: 0 0 8px; text-align: right; font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); }
/* 'Uw partner in vertrouwen' met de foto van het bureau (plant.jpg) */
.partner-rij.met-foto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.partner-rij.met-foto h3 { margin-bottom: 14px; }
.partner-foto { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--mist-2);
  box-shadow: 0 18px 40px -24px rgba(31, 42, 36, .45); }
.partner-foto picture, .partner-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.partner-foto img { transition: transform 1.2s var(--ease); }
.partner-foto:hover img { transform: scale(1.03); }
@media (max-width: 960px) { .partner-rij.met-foto { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .partner-foto img { transition: none; } }
/* ===== Werkwijze: rustig-luxe stappen (26 okt) ===== */
#werkwijze .process { border-radius: 22px; overflow: hidden; border-color: #e6e2d8; box-shadow: 0 30px 60px -40px rgba(31, 42, 36, .35); }
#werkwijze .proc-track { background: linear-gradient(180deg, #fff 0%, #fbfaf6 100%); }
#werkwijze .proc-line { height: 2px; background: #e8e4da; border-radius: 2px; }
#werkwijze .proc-fill { background: linear-gradient(90deg, var(--brass-light), var(--brass)); box-shadow: 0 0 10px rgba(167, 134, 77, .45); transition: width .9s cubic-bezier(.22, .61, .36, 1); }
#werkwijze .proc-dot { width: 48px; height: 48px; font: 400 1.2rem/1 var(--serif); background: #fff; border: 1px solid #d5d1c6;
  transition: background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
#werkwijze .proc-step:hover .proc-dot { transform: translateY(-2px); border-color: var(--brass); color: var(--brass-ink); }
#werkwijze .proc-step[aria-selected="true"] .proc-dot { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(167, 134, 77, .14), 0 10px 24px -10px rgba(31, 58, 48, .6); }
#werkwijze .proc-step[aria-selected="true"] .proc-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(167, 134, 77, .55);
  animation: proc-ring 2.8s ease-out infinite; }
@keyframes proc-ring { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.28); opacity: 0; } }
#werkwijze .proc-vink { position: absolute; width: 20px; height: 20px; fill: none; stroke: var(--brass-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; transition: stroke-dashoffset .6s .15s var(--ease), opacity .2s; }
#werkwijze .proc-step.is-past .proc-nr { opacity: 0; }
#werkwijze .proc-step.is-past .proc-vink { opacity: 1; stroke-dashoffset: 0; }
#werkwijze .proc-step.is-past .proc-dot { background: var(--brass-soft); border-color: var(--brass-light); }
#werkwijze .proc-nr { transition: opacity .3s; }
#werkwijze .proc-label { transition: color .4s var(--ease); color: #5d625a; font-weight: 500; }
#werkwijze .proc-step[aria-selected="true"] .proc-label { color: var(--teal-deep); font-weight: 600; }
/* dun tijdslijntje onder de actieve stap tijdens automatisch doorlopen */
#werkwijze .proc-tijd { display: block; width: 72px; height: 2px; margin-top: 10px; background: transparent; border-radius: 2px; overflow: hidden; }
#werkwijze .proc-tijd i { display: block; height: 100%; width: 0; background: var(--brass); }
#werkwijze .process.is-loopt .proc-step[aria-selected="true"] .proc-tijd { background: #ece7da; }
#werkwijze .process.is-loopt .proc-step[aria-selected="true"] .proc-tijd i { animation: proc-tijd var(--duur, 6500ms) linear forwards; }
@keyframes proc-tijd { from { width: 0; } to { width: 100%; } }
/* paneel: groot sierlijk cijfer + tekst + knoppen */
#werkwijze .proc-panel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); background: radial-gradient(120% 140% at 0% 0%, #fbf7ee 0%, #fff 55%); }
#werkwijze .proc-groot { font: 300 clamp(4.5rem, 9vw, 7.5rem)/.9 var(--serif); color: transparent; -webkit-text-stroke: 1px var(--brass-light);
  background: linear-gradient(180deg, rgba(167, 134, 77, .22), rgba(167, 134, 77, 0)); -webkit-background-clip: text; background-clip: text; letter-spacing: -.02em; }
.js #werkwijze .proc-panel:not([data-inactive]) .proc-groot { animation: proc-in .8s var(--ease) both; }
.js #werkwijze .proc-panel:not([data-inactive]) .proc-main > * { animation: proc-in .7s var(--ease) both; }
.js #werkwijze .proc-panel:not([data-inactive]) .proc-main > :nth-child(2) { animation-delay: .06s; }
.js #werkwijze .proc-panel:not([data-inactive]) .proc-main > :nth-child(3) { animation-delay: .12s; }
.js #werkwijze .proc-panel:not([data-inactive]) .proc-main > :nth-child(4) { animation-delay: .18s; }
@keyframes proc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#werkwijze .proc-main h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--teal-deep); margin-bottom: 10px; }
#werkwijze .proc-main p:not(.proc-count) { font-size: 1.05rem; line-height: 1.7; color: #4a504b; max-width: 56ch; margin: 0; }
#werkwijze .proc-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
#werkwijze .proc-knop { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; font: 600 .9rem/1 var(--sans);
  background: #fff; color: var(--teal-deep); border: 1px solid #d9d4c7; cursor: pointer; text-decoration: none;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
#werkwijze .proc-knop:hover { border-color: var(--brass); color: var(--brass-ink); transform: translateY(-1px); }
#werkwijze .proc-knop.is-terug { border-color: transparent; background: transparent; color: var(--muted); padding-left: 4px; }
#werkwijze .proc-knop.is-cta { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
#werkwijze .proc-knop.is-cta:hover { background: var(--teal); color: #fff; }
@media (max-width: 760px) {
  #werkwijze .proc-panel { grid-template-columns: 1fr; gap: 6px; }
  #werkwijze .proc-groot { font-size: 4rem; }
  #werkwijze .proc-dot { width: 42px; height: 42px; }
  #werkwijze .proc-tijd { width: 36px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #werkwijze .proc-step[aria-selected="true"] .proc-dot::after { animation: none; display: none; }
  .js #werkwijze .proc-panel .proc-groot, .js #werkwijze .proc-panel .proc-main > * { animation: none !important; }
}
.js #werkwijze .proc-panel[data-inactive] { display: none; }

/* 27 okt: kernwaarden op de telefoon als rustige rijen (icoon in cirkel links, tekst rechts) */
@media (max-width: 720px) {
  .kern-grid { grid-template-columns: 1fr !important; gap: 0; padding-block: 10px 14px; }
  .kern, .kern:nth-child(odd), .kern:nth-child(3) { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start;
    padding: 20px 0; border: 0; border-bottom: 1px solid var(--ivory-line); border-radius: 0; }
  .kern:last-child { border-bottom: 0; }
  .kern svg { grid-row: 1 / span 2; width: 52px; height: 52px; padding: 13px; margin: 0; box-sizing: border-box;
    border-radius: 50%; background: #fff; border: 1px solid var(--ivory-line); stroke-width: 1.5; }
  .kern h3 { font-size: 1.16rem; margin: 3px 0 4px; }
  .kern p { font-size: .9rem; line-height: 1.55; max-width: none; }
}

/* plant-foto net als de uitzicht-foto: rechte hoeken, geen schaduw */
.partner-foto { border-radius: 0; box-shadow: none; }

/* 27 okt: zwevende knop 'Stel uw vraag' met korte regel eronder */
.mobile-pill .mp-tekst { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.mobile-pill .mp-tekst b { font-weight: 600; font-size: .92rem; }
.mobile-pill .mp-tekst small { font-weight: 400; font-size: .72rem; opacity: .85; }
@media (max-width: 960px) { .mobile-bar .mobile-pill { padding: 9px 18px 9px 15px; gap: 10px; } .mobile-pill svg { width: 20px; height: 20px; } }

/* 27 okt (2): plant-foto op de telefoon van rand tot rand, net als de uitzicht-foto */
@media (max-width: 960px) {
  .partner-rij.met-foto { overflow: visible; }
  .partner-foto { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); aspect-ratio: 4 / 3; }
}

/* 27 okt (2): nummers 01-06 bij de diensten - groot, ingetogen cijfer rechtsboven met messing omlijning */
.dienst summary { position: relative; }
.dienst-nr { position: absolute; top: clamp(18px, 2.2vw, 28px); right: clamp(22px, 2.4vw, 32px); margin: 0;
  font: 400 clamp(2.4rem, 3.4vw, 3.1rem)/1 var(--serif); font-style: normal; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1px var(--brass); opacity: .55;
  transition: color .5s var(--ease), opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.dienst:hover .dienst-nr, .dienst[open] .dienst-nr { color: var(--brass); opacity: .9; transform: translateY(-2px); }
.dienst-title { padding-right: clamp(64px, 6vw, 84px); }
.dienst-title::before { content: ""; display: block; width: 28px; height: 1.5px; background: var(--brass); margin: 6px 0 16px;
  transition: width .6s var(--ease); }
.dienst:hover .dienst-title::before, .dienst[open] .dienst-title::before { width: 56px; }
@supports not (-webkit-text-stroke: 1px black) { .dienst-nr { color: var(--brass); opacity: .35; } }
@media (hover: none) { .dienst-nr { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .dienst-nr, .dienst-title::before { transition: none; } }

/* 27 okt (2): formulier - gekozen optie duidelijk zichtbaar, de rest wordt rustiger */
.af-kaart, .af-chip { transition: background-color .25s, border-color .25s, color .25s, opacity .25s, box-shadow .25s; }
.af-kaarten:not(.is-meer):has(.is-gekozen) .af-kaart:not(.is-gekozen),
.af-chips:not(.af-multi):has(.is-gekozen) .af-chip:not(.is-gekozen) { opacity: .5; }
.af-kaarten:not(.is-meer):has(.is-gekozen) .af-kaart:not(.is-gekozen):hover,
.af-chips:has(.is-gekozen) .af-chip:not(.is-gekozen):hover { opacity: 1; }
.af-kaarten:not(.is-meer) .af-kaart.is-gekozen, .af-kaarten:not(.is-meer) .af-kaart.is-gekozen:hover {
  background: var(--teal); border-color: var(--teal); box-shadow: 0 14px 28px -16px rgba(23,63,50,.6); padding-right: 52px; }
.af-kaarten:not(.is-meer) .af-kaart.is-gekozen strong { color: #fff; }
.af-kaarten:not(.is-meer) .af-kaart.is-gekozen small { color: rgba(255,255,255,.82); }
.af-kaarten:not(.is-meer) .af-kaart.is-gekozen::after { content: ""; position: absolute; right: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
  border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%232f5a48' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.af-kaarten.is-meer .af-kaart.is-gekozen { background: #f6efdf; border-color: var(--brass); }
.af-chip.is-gekozen, .af-chip.is-gekozen:hover { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600;
  box-shadow: 0 10px 22px -14px rgba(23,63,50,.6); }

/* 27 okt (3): kop van het formulier duidelijk als formulier: groene kopbalk met label */
.contact-formkaart { overflow: hidden; }
.contact-formkaart .contact-form-kop { margin: calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 3vw, 40px)) 24px;
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 40px); background: var(--teal); border-bottom: 3px solid var(--brass); }
.contact-formkaart .contact-form-kop h3 { color: #fff; font-size: clamp(1.55rem, 2.2vw, 1.85rem); }
.contact-formkaart .contact-form-kop p { color: rgba(255,255,255,.84); }
.contact-formkaart .cf-label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px !important;
  font-size: .76rem !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff !important; }
.cf-label svg { width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 8px; background: rgba(255,255,255,.14);
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cf-label .cf-stappen { margin-left: auto; padding: 4px 11px; border-radius: 999px; background: var(--brass); color: #fff;
  letter-spacing: .04em; text-transform: none; font-size: .78rem; }
@media (max-width: 720px) {
  .contact-formkaart .contact-form-kop { margin: -20px -16px 20px; padding: 20px 16px 18px; }
  .contact-formkaart .cf-label { flex-wrap: nowrap; gap: 8px; letter-spacing: .1em; }
  .cf-label .cf-stappen { font-size: .72rem; padding: 4px 9px; white-space: nowrap; }
}
@media (max-width: 720px) {
  .contact-formkaart .contact-form-kop h3 { font-size: 1.75rem; line-height: 1.15; margin-bottom: 6px; }
  .contact-formkaart .contact-form-kop p:not(.cf-label) { font-size: .86rem; line-height: 1.45; }
  .contact-formkaart .cf-label { margin-bottom: 10px !important; }
}

/* 27 okt (4): titel 'Stuur ons een bericht' in een eigen letter: Newsreader cursief, met zachte schaduw */
.contact-formkaart .contact-form-kop h3 { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.005em;
  font-size: clamp(2rem, 2.8vw, 2.4rem); line-height: 1.1; margin-bottom: 10px; text-shadow: 0 2px 14px rgba(0,0,0,.28); }
@media (max-width: 720px) { .contact-formkaart .contact-form-kop h3 { font-size: 1.95rem; margin-bottom: 8px; } }

/* 27 okt (5): regels in de prijsindicatie zijn klikbaar en openen de dienst */
.tarief-lijst li .tl-link { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; position: relative; }
.tarief-lijst li .tl-link:hover .tl-naam { color: var(--teal); text-decoration: underline; text-decoration-color: var(--brass-light); text-underline-offset: 4px; }
.tl-pijl { color: var(--brass); font-size: .85em; opacity: .55; transition: opacity .3s, transform .3s var(--ease); }
.tl-link:hover .tl-pijl, .tl-link:focus-visible .tl-pijl { opacity: 1; transform: translate(2px, -2px); }
@media (max-width: 760px) { .tarief-lijst li .tl-link { justify-content: space-between; } .tl-pijl { opacity: .8; } }

/* =====================================================================
   29 okt: wensen directie (palet, uitlijning, iconen, prijzen)
   Palet: diepgroen #173f32 · warm ivoor #f4efe5 · gedempt goud #a7864d
   ===================================================================== */

/* knoppen in gedempt goud (donkere tint voor leesbare witte tekst) */
.btn-dark, .btn-primary, .cta-band .btn-dark, .cta-band.cta-quiet .btn-dark, .contact-card .btn-dark, .btn-gold, .plan.is-featured .btn-primary {
  background: var(--knop); color: #fff; border-color: var(--knop); }
.btn-dark:hover, .btn-primary:hover, .cta-band .btn-dark:hover, .cta-band.cta-quiet .btn-dark:hover, .contact-card .btn-dark:hover, .btn-gold:hover,
.plan.is-featured .btn-primary:hover { background: var(--knop-hover); color: #fff; border-color: var(--knop-hover); box-shadow: 0 10px 24px -12px rgba(123,96,51,.7); }
.mobile-bar .mobile-pill { background: var(--knop); }
#werkwijze .proc-knop.is-cta { background: var(--knop); border-color: var(--knop); }
#werkwijze .proc-knop.is-cta:hover { background: var(--knop-hover); border-color: var(--knop-hover); }
/* de lichte gouden knop in de hero blijft licht met donkergroene tekst */
.hero .btn-gold { background: #c8ad7c; border-color: #c8ad7c; color: #173f32; }
.hero .btn-gold:hover { background: #d3bd92; border-color: #d3bd92; color: #173f32; }

/* sectiekoppen: tekst rechts verticaal gecentreerd naast de titel links */
.section-head { align-items: center; }

/* diensten: eigen icoon in plaats van het nummer */
.dienst-nr { display: none; }
.dienst-title::before { content: none; }
.dienst-title { padding-right: 0; }
.dienst-ic { display: block; margin: 0 0 18px; line-height: 0; }
.dienst-ic svg { width: 44px; height: 44px; fill: none; stroke: var(--teal-deep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .4s var(--ease), transform .5s var(--ease); }
.dienst:hover .dienst-ic svg, .dienst[open] .dienst-ic svg { stroke: var(--brass); transform: translateY(-3px); }
@media (max-width: 720px) { .dienst-ic { margin-bottom: 14px; } .dienst-ic svg { width: 38px; height: 38px; } }

/* werkwijze: icoon in een ronde ivoren plaat in plaats van het grote cijfer */
#werkwijze .proc-groot { display: none; }
#werkwijze .proc-ic { display: grid; place-items: center; width: clamp(96px, 10vw, 128px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fbf8f1, #efe6d4); box-shadow: inset 0 0 0 1px #e2d5bb, 0 18px 36px -24px rgba(23,63,50,.45); }
#werkwijze .proc-ic svg { width: 46%; height: 46%; fill: none; stroke: var(--teal-deep); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.js #werkwijze .proc-panel:not([data-inactive]) .proc-ic { animation: proc-in .8s var(--ease) both; }
@media (max-width: 760px) {
  #werkwijze .proc-ic { width: 76px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .js #werkwijze .proc-panel .proc-ic { animation: none !important; } }

/* offertekaart: korte vraag + knop */
.quote-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; }
.quote-card h3 { margin: 0; }

/* prijsindicatie: euroteken in één kolom, bedrag rechts uitgelijnd met ",-" */
.tl-bedrag { display: inline-grid; grid-template-columns: auto 4.6ch; column-gap: 6px; align-items: baseline; font-variant-numeric: tabular-nums lining-nums; }
.tl-euro { text-align: left; }
.tl-getal { text-align: right; }
.tl-vanaf { padding-right: calc(1.15rem + 12px); }
@media (max-width: 760px) { .tl-bedrag { grid-template-columns: auto 4.4ch; } }
/* prijsindicatie op de telefoon: vaste kolommen zodat alle eurotekens onder elkaar staan */
@media (max-width: 760px) {
  .tarief-lijst li .tl-link { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; column-gap: 12px; align-items: baseline; }
  .tarief-lijst li .tl-lijn { display: none; }
  .tl-vanaf { padding-right: 26px; }
  .tl-naam { font-size: .95rem; line-height: 1.35; }
}

/* =====================================================================
   29 okt (2): tweede ronde wensen directie
   ===================================================================== */
/* palet: helder, zacht ivoor als achtergrond; diepgroen, gedempt goud, zwart en wit als basis */
:root {
  --paper: #fbf8f2;        /* lichte, zachte ivoortint voor de pagina */
  --ivory: #f6f1e7;        /* warm ivoor (palet) voor rustige banden */
  --mist-2: #f6f1e7;
  --mist: #ede5d5;
  --ivory-line: #e7dece;
  --line: #e8e1d3;
  --line-strong: #cdc3b0;
  --kaart-lijn: #ebe4d6;
  --ink: #161a17;          /* bijna zwart voor tekst */
  --muted: #5b5f58;
}

/* alle knoppen: gedempt goud, ook bij muis, focus en klik (nooit groen) */
.btn-dark, .btn-primary, .btn-gold, .site-head .btn, .cta-band .btn-dark, .cta-band.cta-quiet .btn-dark, .contact-card .btn-dark,
.af-nav .btn-dark, .af-dlg-ok, .main-nav .nav-extra[href="/#contact"], .mobile-bar a.is-primary {
  background: var(--knop) !important; border-color: var(--knop) !important; color: #fff !important; }
.btn-dark:is(:hover, :focus-visible, :active), .btn-primary:is(:hover, :focus-visible, :active), .btn-gold:is(:hover, :focus-visible, :active),
.site-head .btn:is(:hover, :focus-visible, :active), .af-nav .btn-dark:is(:hover, :focus-visible, :active), .af-dlg-ok:is(:hover, :focus-visible, :active),
.cta-band .btn-dark:is(:hover, :focus-visible, :active), .main-nav .nav-extra[href="/#contact"]:is(:hover, :focus-visible, :active) {
  background: var(--knop-hover) !important; border-color: var(--knop-hover) !important; color: #fff !important; }
.btn-dark:disabled, .btn-primary:disabled { background: var(--knop) !important; opacity: .75; }
/* omlijnde knoppen (Terug, Bel ons): goud bij muis in plaats van groen */
.btn-outline, .btn-secondary { border-color: #d5c9b2; color: var(--teal-deep); background: #fff; }
.btn-outline:is(:hover, :focus-visible, :active), .btn-secondary:is(:hover, :focus-visible, :active) {
  background: var(--brass-soft) !important; border-color: var(--brass) !important; color: var(--brass-ink) !important; }

/* hero-knop: rechthoekig met zachte hoeken */
.hero .btn-gold { border-radius: 4px !important; background: #c8ad7c !important; border-color: #c8ad7c !important; color: #173f32 !important; }
.hero .btn-gold:is(:hover, :focus-visible, :active) { background: #d3bd92 !important; border-color: #d3bd92 !important; color: #173f32 !important; }

/* diensten: geen vaste hoogte meer (per rij gelijk via script), compacte ruimte boven 'Lees verder' */
.dienst summary { min-height: 0; }
.dienst-foot { padding-top: 14px; }
.dienst-ic svg { width: 46px; height: 46px; }
@media (max-width: 720px) { .dienst-ic svg { width: 40px; height: 40px; } }

/* werkwijze: stappen over de volle breedte, inhoud gecentreerd zonder lege rechterkant */
#werkwijze .proc-track ol { justify-items: center; }
#werkwijze .proc-step { align-items: center; text-align: center; padding: 0; }
#werkwijze .proc-label { text-align: center; }
#werkwijze .proc-line { left: calc(var(--pad) + (100% - 2 * var(--pad)) * .125) !important; right: auto !important;
  width: calc((100% - 2 * var(--pad)) * .75) !important; }
#werkwijze .proc-panel { grid-template-columns: auto minmax(0, 620px); justify-content: center; column-gap: clamp(28px, 4vw, 56px); }
#werkwijze .proc-ic svg { width: 48%; height: 48%; stroke-width: 1.3; }
@media (max-width: 760px) {
  #werkwijze .proc-panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  #werkwijze .proc-main p:not(.proc-count) { margin-inline: auto; }
  #werkwijze .proc-nav { justify-content: center; }
}

/* telefoonnummers nooit afbreken */
.nobr, a[href^="tel:"] { white-space: nowrap; }

/* bevestigingsvenster in GVN-huisstijl */
.af-dialog { border-radius: 14px; }
.af-dialog .af-klaar { padding: 0 0 clamp(26px, 4vw, 36px); }
.af-klaar-kop { display: flex; justify-content: center; align-items: center; padding: 22px 24px 20px; background: var(--teal-deep);
  border-bottom: 3px solid var(--brass); margin-bottom: 0; }
.af-klaar-kop .wordmark { color: #f6f1e7; gap: 12px; }
.af-klaar-kop .wm-gvn { font-size: 1.7rem; }
.af-klaar-kop .wm-bar { height: 24px; background: var(--brass); }
.af-klaar-kop .wm-adv { font-size: .78rem; letter-spacing: .3em; }
.af-dialog .af-vink { width: 56px; height: 56px; margin: -28px auto 14px; position: relative; background: #fff; box-shadow: 0 0 0 1px #e2d5bb, 0 10px 24px -14px rgba(23,63,50,.5); }
.af-dialog .af-vink svg { width: 26px; height: 26px; }
.af-dialog .af-titel, .af-dialog .af-klaar p, .af-dialog .af-extra, .af-dialog .af-dlg-ok { margin-left: clamp(22px, 5vw, 40px); margin-right: clamp(22px, 5vw, 40px); }
.af-dialog .af-klaar p { max-width: none; }
.af-dialog .af-extra li { background: #f8f4ec; border-left-color: var(--brass); color: var(--ink); }
.af-dialog .af-dlg-ok { margin-top: 18px; }
.af-dlg-sluit { color: #e9e1d0 !important; z-index: 2; top: 14px !important; }
.af-dlg-sluit:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.dienst-ic { margin-bottom: 8px; }
@media (max-width: 720px) { .dienst-ic { margin-bottom: 4px; } }

/* =====================================================================
   29 okt (3): iconen (Phosphor light, gevulde omtrek), knoppen groen waar gevraagd
   ===================================================================== */
svg.ph { fill: currentColor !important; stroke: none !important; color: var(--teal-deep); overflow: visible;
  transition: color .4s var(--ease), transform .5s var(--ease); }
.kern svg.ph { width: 46px; height: 46px; padding: 0; }
.kern:hover svg.ph { color: var(--brass); transform: translateY(-3px); }
.principe svg.ph, .value svg.ph, .pr-tab svg.ph { color: var(--teal-deep); }
.dienst-ic svg.ph { width: 48px; height: 48px; }
.dienst:hover .dienst-ic svg.ph, .dienst[open] .dienst-ic svg.ph { color: var(--brass); }
@media (max-width: 720px) {
  .kern svg.ph { width: 52px; height: 52px; padding: 12px; }   /* in de ronde plaat op de telefoon */
  .dienst-ic svg.ph { width: 42px; height: 42px; }
}

/* werkwijze: icoon zonder achtergrondplaat */
#werkwijze .proc-ic { background: none !important; box-shadow: none !important; width: auto !important; aspect-ratio: auto !important; border-radius: 0; }
#werkwijze .proc-ic svg.ph { width: clamp(64px, 6vw, 80px) !important; height: clamp(64px, 6vw, 80px) !important; color: var(--teal-deep); }
@media (max-width: 760px) { #werkwijze .proc-ic svg.ph { width: 60px !important; height: 60px !important; } }

/* knoppen in diepgroen: bovenste menuknop en de knoppen in het formulier (Volgende stap, Aanvraag versturen) */
.site-head .btn, .af-nav .btn-dark, .af-verder, .af-dlg-ok, .main-nav .nav-extra[href="/#contact"] {
  background: var(--teal-deep) !important; border-color: var(--teal-deep) !important; color: #fff !important; }
.site-head .btn:is(:hover, :focus-visible, :active), .af-nav .btn-dark:is(:hover, :focus-visible, :active), .af-verder:is(:hover, :focus-visible, :active), .af-dlg-ok:is(:hover, :focus-visible, :active),
.main-nav .nav-extra[href="/#contact"]:is(:hover, :focus-visible, :active) {
  background: #0f2e24 !important; border-color: #0f2e24 !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(15,46,36,.7); }
.af-verder:disabled { background: var(--teal-deep) !important; opacity: .75; }
@media (max-width: 720px) { .kern svg.ph { width: 56px; height: 56px; padding: 12px; } .kern { grid-template-columns: 56px minmax(0, 1fr) !important; } }

/* =====================================================================
   29 okt (4): dieper groen, champagnegoud met lichte glans, werkwijze-compositie
   ===================================================================== */
:root {
  --teal-deep: #12352a;     /* diepgroen, iets donkerder */
  --teal: #173f32;
  --teal-2: #24503f;
  --groen-hover: #0b261d;
  --goud-1: #dcc28d; --goud-2: #c6a463; --goud-3: #b8924f;   /* champagnegoud (licht, midden, schaduw) */
  --goud-tekst: #12352a;
}
.cta-band, .quote-card, .contact-card, .contact-formkaart .contact-form-kop, .af-klaar-kop { background: var(--teal-deep) !important; }

/* gouden knoppen: champagne met zachte metaalglans en donkergroene tekst */
.btn-gold, .btn-dark, .btn-primary, .cta-band .btn-dark, .cta-band.cta-quiet .btn-dark, .contact-card .btn-dark, .hero .btn-gold, .mobile-bar .mobile-pill {
  background: linear-gradient(135deg, var(--goud-1) 0%, var(--goud-2) 50%, var(--goud-3) 100%) !important;
  border-color: transparent !important; color: var(--goud-tekst) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 22px -14px rgba(18,32,26,.55) !important; }
.btn-gold:is(:hover, :focus-visible, :active), .btn-dark:is(:hover, :focus-visible, :active), .btn-primary:is(:hover, :focus-visible, :active),
.cta-band .btn-dark:is(:hover, :focus-visible, :active), .contact-card .btn-dark:is(:hover, :focus-visible, :active),
.hero .btn-gold:is(:hover, :focus-visible, :active), .mobile-bar .mobile-pill:is(:hover, :focus-visible, :active) {
  background: linear-gradient(135deg, #e4cd9c 0%, #cdac6c 50%, #bf9a56 100%) !important; color: var(--goud-tekst) !important; border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 14px 26px -14px rgba(18,32,26,.6) !important; }
.mobile-bar .mobile-pill svg { stroke: var(--goud-tekst); }

/* groene knoppen (menubalk, formulier, laatste werkwijze-stap): dieper groen */
.site-head .btn, .af-nav .btn-dark, .af-verder, .af-dlg-ok, .main-nav .nav-extra[href="/#contact"], #werkwijze .proc-knop.is-cta {
  background: var(--teal-deep) !important; border-color: var(--teal-deep) !important; color: #fff !important; box-shadow: none !important; }
.site-head .btn:is(:hover, :focus-visible, :active), .af-nav .btn-dark:is(:hover, :focus-visible, :active), .af-verder:is(:hover, :focus-visible, :active),
.af-dlg-ok:is(:hover, :focus-visible, :active), .main-nav .nav-extra[href="/#contact"]:is(:hover, :focus-visible, :active), #werkwijze .proc-knop.is-cta:is(:hover, :focus-visible, :active) {
  background: var(--groen-hover) !important; border-color: var(--groen-hover) !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(11,38,29,.7) !important; }

/* werkwijze: rustige, symmetrische compositie - icoon, titel, tekst en knoppen gecentreerd onder elkaar */
#werkwijze .proc-panel { grid-template-columns: 1fr !important; justify-items: center; text-align: center; row-gap: 0;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 5vw, 64px) clamp(36px, 4vw, 52px); min-height: 330px; align-content: center; }
#werkwijze .proc-ic { margin: 0 0 18px; }
#werkwijze .proc-ic svg.ph { width: 56px !important; height: 56px !important; }
#werkwijze .proc-main { display: flex; flex-direction: column; align-items: center; }
#werkwijze .proc-main h3 { margin: 0 0 10px; }
#werkwijze .proc-main p:not(.proc-count) { margin: 0 auto; max-width: 58ch; }
#werkwijze .proc-nav { justify-content: center; margin-top: 24px; }
#werkwijze .proc-ic::after { content: ""; display: block; width: 36px; height: 1px; margin: 16px auto 0; background: var(--brass-light); }
@media (max-width: 760px) {
  #werkwijze .proc-panel { min-height: 0; padding: 28px 20px 30px; }
  #werkwijze .proc-ic svg.ph { width: 48px !important; height: 48px !important; }
  #werkwijze .proc-ic { margin-bottom: 14px; }
}
#werkwijze .proc-ic::after { content: none; }
.cta-band.cta-quiet { background: #fff !important; }

/* 29 okt (5): gouden knoppen effen, precies tussen licht- en donkergoud in */
:root { --goud: #caaa6e; --goud-hover: #bd9b5c; }
.btn-gold, .btn-dark, .btn-primary, .cta-band .btn-dark, .cta-band.cta-quiet .btn-dark, .contact-card .btn-dark, .hero .btn-gold, .mobile-bar .mobile-pill {
  background: var(--goud) !important; box-shadow: none !important; }
.btn-gold:is(:hover, :focus-visible, :active), .btn-dark:is(:hover, :focus-visible, :active), .btn-primary:is(:hover, :focus-visible, :active),
.cta-band .btn-dark:is(:hover, :focus-visible, :active), .contact-card .btn-dark:is(:hover, :focus-visible, :active),
.hero .btn-gold:is(:hover, :focus-visible, :active), .mobile-bar .mobile-pill:is(:hover, :focus-visible, :active) {
  background: var(--goud-hover) !important; box-shadow: 0 10px 22px -14px rgba(18,32,26,.55) !important; }

/* ===== 2 nov: privacyverklaring ===== */
.pv-page { padding-top: clamp(40px, 6vw, 80px); }
.pv-kop { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.pv-kop h1 { font: 400 clamp(2.2rem, 4.4vw, 3.4rem)/1.1 var(--serif); color: var(--teal-deep); margin: 0 0 18px; }
.pv-lead { font-size: 1.08rem; line-height: 1.7; color: #3a3f3a; margin: 0 0 12px; }
.pv-datum { font-size: .86rem; color: var(--muted); margin: 0; }
.pv-en { margin-top: 16px; padding: 12px 16px; background: #fff; border-left: 3px solid var(--brass); border-radius: 0 8px 8px 0; font-size: .92rem; }
.pv-raster { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.pv-inhoud { position: sticky; top: 110px; background: #fff; border: 1px solid var(--kaart-lijn); border-radius: 14px; padding: 20px 22px; }
.pv-inhoud-kop { margin: 0 0 10px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }
.pv-inhoud ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; }
.pv-inhoud a { color: var(--teal-deep); text-decoration: none; }
.pv-inhoud a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pv-tekst { max-width: 760px; }
.pv-sectie { scroll-margin-top: 110px; padding: 0 0 clamp(26px, 3vw, 36px); margin-bottom: clamp(26px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.pv-sectie:last-child { border-bottom: 0; }
.pv-sectie h2 { display: flex; align-items: baseline; gap: 14px; font: 400 clamp(1.45rem, 2.4vw, 1.8rem)/1.2 var(--serif); color: var(--teal-deep); margin: 0 0 14px; }
.pv-nr { font: 600 .8rem/1 var(--sans); color: var(--brass-ink); letter-spacing: .08em; }
.pv-sectie p, .pv-sectie li { color: #3a3f3a; line-height: 1.7; }
.pv-sectie ul { padding-left: 20px; display: grid; gap: 6px; margin: 0 0 1em; }
.pv-sectie a { color: var(--teal-deep); text-underline-offset: 3px; white-space: nowrap; }
.pv-dl { display: grid; gap: 8px; margin: 0 0 1em; padding: 18px 20px; background: #fff; border: 1px solid var(--kaart-lijn); border-radius: 12px; }
.pv-dl div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.pv-dl dt { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); padding-top: 3px; }
.pv-dl dd { margin: 0; }
.pv-tabel { width: 100%; border-collapse: collapse; margin: 0 0 1em; background: #fff; border: 1px solid var(--kaart-lijn); border-radius: 12px; overflow: hidden; font-size: .94rem; }
.pv-tabel th { text-align: left; padding: 12px 16px; background: var(--teal-deep); color: #fff; font-weight: 600; }
.pv-tabel td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.pv-tabel td:first-child { width: 48%; }
.foot-meta a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .pv-raster { grid-template-columns: 1fr; }
  .pv-inhoud { position: static; }
}
@media (max-width: 560px) {
  .pv-dl div { grid-template-columns: 1fr; gap: 2px; }
  .pv-tabel thead { display: none; }
  .pv-tabel, .pv-tabel tbody, .pv-tabel tr, .pv-tabel td { display: block; width: 100% !important; }
  .pv-tabel tr { border-top: 1px solid var(--line); padding: 12px 16px; }
  .pv-tabel tr:first-child { border-top: 0; }
  .pv-tabel td { padding: 0; border: 0; }
  .pv-tabel td:first-child { font-weight: 600; color: var(--teal-deep); margin-bottom: 4px; }
}