.page-main { padding: 48px 0 80px; background: var(--cream); }
.article-body { max-width: 72ch; }
.article-body h3 { margin: 22px 0 8px; font-size: 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 1.2em; }
.article-body li { margin: 0 0 8px; line-height: 1.55; }
.article-body a { color: var(--leaf); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--pine); }
.article-body .ph { font-family: ui-monospace, monospace; font-size: 0.92em; background: var(--sand); padding: 0 4px; border-radius: 4px; }
.table-wrap { overflow-x: auto; margin: 0 0 20px; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.article-body th { background: var(--sand); }
.contact-form { margin-top: 36px; display: grid; gap: 12px; max-width: 36rem; }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.contact-form .btn-lime { justify-self: start; }
.form-note { color: var(--muted); }
.foot-copy { margin: 0; padding: 18px 0 28px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.foot-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,255,255,.35); }
.foot-copy a:hover, .foot-copy a:focus-visible { color: var(--white); text-decoration-color: var(--lime); }
.faq-intro { padding: 36px 0 0; background: var(--white); }
.faq-intro p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 16px; line-height: 1.55; }
.faq-intro p + p { margin-top: 12px; }
.blog-related { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.blog-related h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -0.02em; }
.blog-grid--page { margin-top: 36px; }
.page-main .blog-item { color: inherit; }
/* ——— Gedeelde paginastijl (wg-): werkgebied, diensten, over ons, prijs ——— */
.wg-hero, .wg-index, .wg-landschap, .wg-regels, .wg-grens, .wg-faq {
  --zand: #ecdcb6;
  --zand-ink: #7a5a22;
  --vallei: #d3e4de;
  --vallei-ink: #2d5f58;
  --stad: #efd2c3;
  --stad-ink: #8a4630;
}
.wg-hero {
  position: relative;
  padding: 56px 0 72px;
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(22, 56, 43, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 56, 43, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.wg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.wg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leaf);
}
.wg-eyebrow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px var(--pine);
}
.wg-hero h1 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--pine-deep);
  text-wrap: balance;
}
.wg-lede {
  max-width: 34ch;
  margin: 0 0 32px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}
.wg-hero-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.wg-tekstlink {
  font-weight: 600;
  color: var(--pine);
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.wg-tekstlink:hover { color: var(--leaf); }
.wg-hero .crumbs { margin: 0; }
.wg-hero .crumbs a, .wg-hero .crumbs li::after { color: var(--muted); }
.wg-hero .crumbs [aria-current="page"] { color: var(--pine); }

.wg-hero-kaart {
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(15, 36, 28, 0.35);
}
.werkgebied-kaart { margin: 0; }
.werkgebied-kaart a, .werkgebied-kaart a:hover { color: inherit; text-decoration: none; }
.werkgebied-kaart svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.kaart-bg { fill: #f3eee4; }
.arcering-bg { fill: #ebe3d3; }
.arcering-lijn { stroke: #c9bca4; stroke-width: 2.4; }
.werkgebied-kaart .region {
  stroke: var(--paper);
  stroke-width: 1.6;
  stroke-linejoin: round;
  fill-rule: evenodd;
  transition: fill 0.25s ease, opacity 0.25s ease;
}
.region--context { fill: #e6dfd1; }
.region--ede { fill: var(--pine); }
.region--barneveld, .region--renkum, .region--wageningen, .region--veenendaal, .region--scherpenzeel {
  fill: url(#kaart-arcering);
}
.werkgebied-kaart .map-place--focus { cursor: pointer; }
.werkgebied-kaart .map-place--focus:hover .region,
.werkgebied-kaart .map-place--focus:focus-visible .region,
.werkgebied-kaart .map-place--focus.is-actief .region { fill: var(--lime); }
.werkgebied-kaart .map-place--focus:focus-visible { outline: none; }
.werkgebied-kaart .map-place--focus:focus-visible .region { stroke: var(--pine-deep); stroke-width: 3; }
.werkgebied-kaart.heeft-actief .region--ede:not(:hover) { opacity: 0.92; }
.werkgebied-kaart .label { font-family: var(--font); pointer-events: none; }
.label--muni {
  fill: var(--pine);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #f3eee4;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.region--ede + .label--muni,
.map-place--focus[href="/werkgebied/ede/"] .label { fill: var(--paper); }
.map-place--focus[href="/werkgebied/ede/"] .label--muni {
  stroke: none;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
.label--sub { fill: rgba(247, 243, 236, 0.7); font-size: 11px; text-anchor: middle; letter-spacing: 0.14em; text-transform: uppercase; }
.label--context { fill: #a49a88; font-size: 12px; font-weight: 600; text-anchor: middle; font-style: italic; }
.label--kern {
  fill: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--pine-deep);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.kern-dot {
  fill: var(--lime);
  stroke: var(--pine-deep);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s var(--btn-ease), fill 0.2s ease;
}
.werkgebied-kaart .map-kern { cursor: pointer; }
.werkgebied-kaart .map-kern .label { pointer-events: auto; }
.werkgebied-kaart .map-kern:hover .kern-dot,
.werkgebied-kaart .map-kern:focus-visible .kern-dot,
.werkgebied-kaart .map-kern.is-actief .kern-dot { transform: scale(1.9); fill: var(--paper); }
.werkgebied-kaart .map-kern:focus-visible { outline: none; }
.wg-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 12px 6px 2px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--muted);
}
.wg-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.wg-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.wg-swatch--ede { background: var(--pine); }
.wg-swatch--dorp { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--pine-deep); }
.wg-swatch--aanvraag {
  background: repeating-linear-gradient(45deg, #ebe3d3 0 3px, #c9bca4 3px 5px);
  box-shadow: inset 0 0 0 1px #c9bca4;
}

.wg-index, .wg-landschap, .wg-grens, .wg-faq { padding: 104px 0; background: var(--paper); }
.wg-landschap, .wg-faq { background: var(--cream); }
.wg-kop {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 24px;
  max-width: 820px;
  margin-bottom: 56px;
}
.wg-nummer {
  grid-row: span 2;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 2px solid var(--pine);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--leaf);
}
.wg-kop h2 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--pine-deep);
}
.wg-kop h2 em { font-style: italic; color: var(--leaf); }
.wg-kop-tekst { grid-column: 2; margin: 0; max-width: 58ch; font-size: 17px; line-height: 1.6; color: var(--muted); }
.wg-kop-tekst a { color: var(--leaf); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.wg-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.wg-groep-titel {
  margin: 0;
  padding: 0 0 12px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.wg-groep-titel:not(:first-child) { margin-top: 48px; }
.wg-lijst { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pine); }
.wg-plaats {
  --tint: var(--sand);
  --ink-tint: var(--pine);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 4px 16px;
  padding: 20px 8px 20px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
  transition: padding 0.35s var(--btn-ease);
}
.wg-plaats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--btn-ease);
}
.wg-plaats::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 4px;
  border-radius: 2px;
  background: var(--ink-tint);
  opacity: 0.85;
}
.wg-plaats--zand { --tint: var(--zand); --ink-tint: var(--zand-ink); }
.wg-plaats--vallei { --tint: var(--vallei); --ink-tint: var(--vallei-ink); }
.wg-plaats--stad { --tint: var(--stad); --ink-tint: var(--stad-ink); }
.wg-plaats:hover, .wg-plaats:focus-visible, .wg-plaats.is-actief { padding-left: 28px; }
.wg-plaats:hover::before, .wg-plaats:focus-visible::before, .wg-plaats.is-actief::before { transform: scaleX(1); }
.wg-plaats-naam {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.15;
  color: var(--pine-deep);
}
.wg-plaats-naam small { font-family: var(--font); font-size: 14px; color: var(--muted); }
.wg-plaats-tekst { grid-column: 1; font-size: 15px; line-height: 1.5; color: var(--muted); }
.wg-pijl {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--pine);
  transition: background 0.3s ease, transform 0.35s var(--btn-ease), border-color 0.3s ease;
}
.wg-plaats:hover .wg-pijl, .wg-plaats:focus-visible .wg-pijl, .wg-plaats.is-actief .wg-pijl {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--lime);
  transform: translateX(-6px);
}

.wg-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wg-kaart {
  --tint: var(--sand);
  --ink-tint: var(--pine);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  padding: 0 28px 32px;
}
.wg-kaart--zand { --tint: var(--zand); --ink-tint: var(--zand-ink); }
.wg-kaart--vallei { --tint: var(--vallei); --ink-tint: var(--vallei-ink); }
.wg-kaart--stad { --tint: var(--stad); --ink-tint: var(--stad-ink); }
.wg-illu {
  display: block;
  margin: 0 -28px 28px;
  width: calc(100% + 56px);
  height: auto;
  background: var(--tint);
}
.wg-illu * { fill: none; stroke: var(--ink-tint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wg-illu .illu-grond { fill: var(--paper); stroke: none; opacity: 0.55; }
.wg-illu .illu-kroon { fill: var(--paper); }
.wg-illu .illu-zon { fill: var(--paper); stroke: none; opacity: 0.8; }
.wg-illu .illu-water { stroke-dasharray: 14 10; opacity: 0.7; }
.wg-illu .illu-knot { fill: var(--ink-tint); }
.wg-illu .illu-huis path:last-child { fill: var(--tint); }
.wg-kaart-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tint);
}
.wg-kaart h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--pine-deep);
}
.wg-kaart p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.wg-tussen {
  margin: 32px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--muted);
}

.wg-regels {
  padding: 104px 0 88px;
  background: var(--pine-deep);
  color: var(--cream);
}
.wg-kop--licht h2 { color: var(--cream); }
.wg-kop--licht .wg-nummer { border-color: var(--lime); color: var(--lime); }
.wg-cijfers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(247, 243, 236, 0.2);
}
.wg-cijfer { padding: 36px 32px 8px 0; }
.wg-cijfer + .wg-cijfer { padding-left: 32px; border-left: 1px solid rgba(247, 243, 236, 0.2); }
.wg-cijfer dt {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(64px, 7vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--lime);
  white-space: nowrap;
}
.wg-cijfer dt span {
  margin-left: 6px;
  font-family: var(--font);
  font-size: 18px;
  letter-spacing: 0.02em;
  color: rgba(247, 243, 236, 0.75);
}
.wg-cijfer dd { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.6; color: rgba(247, 243, 236, 0.8); }
.wg-cijfer dd strong { color: var(--cream); font-weight: 650; }
.wg-regels-voet {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 243, 236, 0.2);
  font-size: 15px;
  color: rgba(247, 243, 236, 0.75);
}
.wg-regels-voet p { margin: 0; }
.wg-diensten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wg-diensten a {
  padding: 6px 14px;
  border: 1px solid rgba(247, 243, 236, 0.3);
  border-radius: 999px;
  color: var(--cream);
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wg-diensten a:hover, .wg-diensten a:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--pine-deep); }

.wg-grens-grid, .wg-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.wg-grens-grid .wg-kop, .wg-faq-grid .wg-kop { margin-bottom: 0; }
.wg-grens-lijst { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wg-grens-lijst a {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 24px;
  padding: 20px 24px 20px 40px;
  border: 1.5px dashed #c9bca4;
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.wg-grens-lijst a::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(45deg, #ebe3d3 0 2px, #b3a58a 2px 4px);
}
.wg-grens-lijst a:hover, .wg-grens-lijst a:focus-visible, .wg-grens-lijst a.is-actief { border-color: var(--pine); background: var(--cream); }
.wg-grens-naam { font-family: var(--serif); font-size: 22px; color: var(--pine-deep); }
.wg-grens-tekst { font-size: 15px; color: var(--muted); }
.wg-faq-lijst .faq-item:not([open]) { background: var(--paper); }

.wg-reveal--klaar { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.8s var(--btn-ease); }
.wg-reveal--klaar.is-zichtbaar { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .wg-hero { padding: 36px 0 48px; }
  .wg-hero-grid, .wg-grens-grid, .wg-faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .wg-hero-acties { margin-bottom: 28px; }
  .wg-index, .wg-landschap, .wg-grens, .wg-faq, .wg-regels { padding: 72px 0; }
  .wg-index-grid { grid-template-columns: 1fr; }
  .wg-index-grid .wg-groep + .wg-groep { margin-top: 48px; }
  .wg-kaarten { grid-template-columns: 1fr; }
  .wg-cijfers { grid-template-columns: 1fr; }
  .wg-cijfer, .wg-cijfer + .wg-cijfer { padding: 28px 0; border-left: 0; }
  .wg-cijfer + .wg-cijfer { border-top: 1px solid rgba(247, 243, 236, 0.2); }
}
@media (max-width: 560px) {
  .wg-kop { grid-template-columns: 1fr; }
  .wg-nummer { grid-row: auto; width: 48px; margin-bottom: 14px; }
  .wg-kop-tekst { grid-column: 1; }
  .wg-hero-kaart { padding: 8px; border-radius: 16px; }
  .wg-legenda { font-size: 12px; gap: 6px 14px; }
  .wg-grens-lijst a { grid-template-columns: 1fr; }
  .wg-plaats-naam { font-size: 23px; }
  .label--kern { font-size: 25px; stroke-width: 6px; }
  .label--muni { font-size: 27px; }
  .map-place--focus[href="/werkgebied/ede/"] .label--muni { font-size: 52px; transform: translate(96px, 66px); }
  .label--sub, .label--context { display: none; }
  .kern-dot { transform: scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
  .werkgebied-kaart .region, .kern-dot, .wg-plaats, .wg-plaats::before, .wg-pijl { transition: none; }
}
.wg-lede a { color: var(--leaf); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wg-calc-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
}
.wg-calc-kop .wg-kop { margin-bottom: 0; }
.wg-calc-kop .calc-skip { flex-shrink: 0; }
.wg-regels-voet .btn-lime { flex-shrink: 0; }
.wg-mozaiek {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  aspect-ratio: 7 / 5;
}
.wg-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--sand);
}
.wg-foto--groot { grid-row: span 2; }
.wg-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-foto figcaption,
.wg-rij-foto + .wg-rij-tekst .wg-tags span {
  font-size: 12px;
  font-weight: 650;
}
.wg-foto figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 252, 247, 0.92);
  color: var(--pine-deep);
  letter-spacing: 0.02em;
}

.wg-portret { position: relative; margin: 0 0 40px; }
.wg-portret img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
}
.wg-citaat {
  position: absolute;
  left: -28px;
  bottom: -40px;
  max-width: 330px;
  margin: 0;
  padding: 24px 26px;
  background: var(--pine-deep);
  border-radius: 18px;
  box-shadow: 0 24px 48px -24px rgba(15, 36, 28, 0.6);
}
.wg-citaat p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.25;
  color: var(--cream);
}
.wg-citaat::before {
  content: "“";
  display: block;
  height: 26px;
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  color: var(--lime);
}

.wg-rijen { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pine); }
.wg-rij {
  display: grid;
  grid-template-columns: 56px 200px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 32px;
  padding: 28px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.35s ease;
}
.wg-rij:hover, .wg-rij:focus-visible { background: var(--cream); }
.wg-rij-nr {
  align-self: start;
  padding-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--leaf);
}
.wg-rij-foto {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--sand);
}
.wg-rij-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--btn-ease);
}
.wg-rij:hover .wg-rij-foto img, .wg-rij:focus-visible .wg-rij-foto img { transform: scale(1.06); }
.wg-rij-tekst { display: grid; gap: 10px; }
.wg-rij-naam {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--pine-deep);
}
.wg-rij-uitleg { max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.wg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-tags span {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--pine);
  background: var(--paper);
}
.wg-rij .wg-pijl { grid-column: auto; grid-row: auto; width: 40px; height: 40px; }
.wg-rij:hover .wg-pijl, .wg-rij:focus-visible .wg-pijl {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--lime);
  transform: translateX(-6px);
}

.wg-symptomen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wg-symptomen a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  height: 100%;
  min-height: 190px;
  padding: 26px 26px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.35s var(--btn-ease), color 0.35s var(--btn-ease), transform 0.35s var(--btn-ease);
}
.wg-symptoom { font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--pine-deep); transition: color 0.35s ease; }
.wg-symptoom-dienst {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf);
  transition: color 0.35s ease, border-color 0.35s ease;
}
.wg-symptomen a:hover, .wg-symptomen a:focus-visible { background: var(--pine); transform: translateY(-4px); }
.wg-symptomen a:hover .wg-symptoom, .wg-symptomen a:focus-visible .wg-symptoom { color: var(--cream); }
.wg-symptomen a:hover .wg-symptoom-dienst, .wg-symptomen a:focus-visible .wg-symptoom-dienst { color: var(--lime); border-color: rgba(247, 243, 236, 0.25); }

.wg-stappen, .wg-doelgroepen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(247, 243, 236, 0.2);
}
.wg-stappen li, .wg-doelgroepen li { padding: 36px 32px 8px 0; }
.wg-stappen li + li, .wg-doelgroepen li + li { padding-left: 32px; border-left: 1px solid rgba(247, 243, 236, 0.2); }
.wg-stap-nr {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  border: 1.5px solid var(--lime);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--lime);
}
.wg-stappen h3, .wg-doelgroepen h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--cream);
}
.wg-doelgroepen h3 { font-size: clamp(30px, 3vw, 40px); color: var(--lime); }
.wg-stappen p, .wg-doelgroepen p { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.6; color: rgba(247, 243, 236, 0.8); }
.wg-stappen a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }

.wg-prijskaarten { display: grid; gap: 16px; }
.wg-prijskaart {
  display: grid;
  gap: 8px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.35s var(--btn-ease), box-shadow 0.35s ease;
}
.wg-prijskaart .wg-kaart-label { margin: 0; color: var(--leaf); }
.wg-prijskaart-titel { font-family: var(--serif); font-size: 28px; line-height: 1.15; color: var(--pine-deep); }
.wg-prijskaart-tekst { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.wg-prijskaart-cta { margin-top: 8px; font-weight: 650; color: var(--pine); }
.wg-prijskaart:hover, .wg-prijskaart:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(15, 36, 28, 0.5); }
.wg-prijskaart--donker { background: var(--pine); border-color: var(--pine); }
.wg-prijskaart--donker .wg-kaart-label, .wg-prijskaart--donker .wg-prijskaart-cta { color: var(--lime); }
.wg-prijskaart--donker .wg-prijskaart-titel { color: var(--cream); }
.wg-prijskaart--donker .wg-prijskaart-tekst { color: rgba(247, 243, 236, 0.78); }

.wg-beloftes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wg-beloftes li {
  padding: 32px 30px 34px;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid var(--line);
}
.wg-beloftes .wg-belofte-groot {
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--leaf);
}
.wg-belofte-groot span { margin-left: 6px; font-family: var(--font); font-size: 15px; letter-spacing: 0; color: var(--muted); }
.wg-belofte-icoon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  fill: none;
  stroke: var(--leaf);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wg-beloftes h3, .wg-tijdlijn h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--pine-deep);
}
.wg-beloftes p, .wg-tijdlijn p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.wg-tijdlijn a { color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; }

.wg-tijdlijn {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wg-tijdlijn::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  right: calc((100% - 96px) / 5 - 28px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--pine) 0 8px, transparent 8px 14px);
  opacity: 0.35;
}
.wg-tijdlijn li { position: relative; }
.wg-tijdlijn-nr {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--lime);
  font-family: var(--serif);
  font-size: 26px;
  box-shadow: 0 0 0 8px var(--cream);
}
.wg-tijdlijn li:last-child .wg-tijdlijn-nr { background: var(--lime); color: var(--pine-deep); }

.wg-grens-lijst--niet > li > div {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 24px;
  padding: 20px 24px 20px 48px;
  border: 1.5px dashed #c9bca4;
  border-radius: 14px;
}
.wg-grens-lijst--niet > li > div::before {
  content: "×";
  position: absolute;
  left: 16px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--sand);
  color: var(--stad-ink);
  font-size: 15px;
  line-height: 1;
}

.wg-welniet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wg-welniet-kaart {
  padding: 32px 32px 30px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.wg-welniet-kaart--niet { background: transparent; border-style: dashed; border-color: #c9bca4; border-width: 1.5px; }
.wg-welniet-kaart h3 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--pine-deep); }
.wg-welniet-kaart ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.wg-welniet-kaart li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.wg-welniet-kaart li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--pine-deep);
  font-size: 12px;
  font-weight: 700;
}
.wg-welniet-kaart--niet li::before { content: "×"; background: var(--sand); color: var(--stad-ink); font-size: 16px; font-weight: 400; }
.wg-welniet-kaart p { margin: 20px 0 0; font-size: 15px; color: var(--muted); }
.wg-welniet-kaart a { color: var(--leaf); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.wg-factoren {
  margin: 0;
  padding: 28px 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(15, 36, 28, 0.35);
}
.wg-factoren-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px dashed var(--line);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.wg-factoren ol { margin: 0; padding: 0; list-style: none; counter-reset: factor; }
.wg-factoren li {
  counter-increment: factor;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.wg-factoren li::before {
  content: counter(factor, decimal-leading-zero);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--leaf);
}
.wg-factor-naam { font-family: var(--serif); font-size: 21px; color: var(--pine-deep); }
.wg-factor-uitleg { font-size: 13.5px; color: var(--muted); text-align: right; }
.wg-factoren-voet {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.wg-factoren-voet strong { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--pine-deep); }

@media (max-width: 960px) {
  .wg-calc-kop { flex-direction: column; align-items: flex-start; }
  .wg-mozaiek { aspect-ratio: 4 / 3; }
  .wg-portret { margin-bottom: 56px; }
  .wg-citaat { left: 16px; right: 16px; bottom: -44px; max-width: none; }
  .wg-rij { grid-template-columns: 120px minmax(0, 1fr) 40px; gap: 20px; }
  .wg-rij-nr { display: none; }
  .wg-symptomen, .wg-beloftes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-stappen, .wg-doelgroepen { grid-template-columns: 1fr; }
  .wg-stappen li, .wg-stappen li + li, .wg-doelgroepen li, .wg-doelgroepen li + li { padding: 28px 0; border-left: 0; }
  .wg-stappen li + li, .wg-doelgroepen li + li { border-top: 1px solid rgba(247, 243, 236, 0.2); }
  .wg-tijdlijn { grid-template-columns: 1fr; gap: 0; }
  .wg-tijdlijn::before { top: 28px; bottom: 56px; left: 27px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--pine) 0 8px, transparent 8px 14px); }
  .wg-tijdlijn li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding-bottom: 28px; }
  .wg-tijdlijn-nr { grid-row: span 2; margin: 0; }
  .wg-tijdlijn h3 { align-self: center; margin-top: 12px; }
  .wg-welniet { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wg-mozaiek { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
  .wg-foto--groot { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
  .wg-foto:not(.wg-foto--groot) { aspect-ratio: 1; }
  .wg-rij { grid-template-columns: 1fr 40px; padding: 24px 0; }
  .wg-rij-foto { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .wg-symptomen, .wg-beloftes { grid-template-columns: 1fr; }
  .wg-symptomen a { min-height: 0; }
  .wg-grens-lijst--niet > li > div { grid-template-columns: 1fr; }
  .wg-factor-uitleg { display: none; }
  .wg-factoren { padding: 22px 20px; }
  .wg-factoren-kop, .wg-factoren-voet { flex-direction: column; align-items: flex-start; gap: 4px; }
  .wg-factoren-voet br { display: none; }
  .wg-citaat p { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-rij-foto img, .wg-symptomen a, .wg-prijskaart { transition: none; }
}