/* Vakwerk Bouw & Renovatie — diensten.html. Gedeelde componenten staan in style.css.
   Zes hoofdstukken, elk met een eigen compositie (DESIGN.md §13):
   01 beeld-geleid · 02 split · 03 donker tijdens/na (twee referenties) · 04 drie staande foto's · 05 tijdens met aanwijzingen · 06 dichte tabel.
   Feiten per dienst staan als één mono-regel (.svc-line), niet meer in een titelblok per hoofdstuk. */

.page-diensten { --chapter-h: 0px; }  /* --bleed (schermrand → inhoudskolom) staat in style.css */
html.js:has(.page-diensten) { scroll-padding-top: calc(var(--header-h) + 44px + 16px); }
@media (min-width: 1024px) {
  .page-diensten { --chapter-h: 48px; }
  html:has(.page-diensten) { scroll-padding-top: calc(var(--header-h) + 48px + 20px); }
}

/* Sheet-head-link: op smalle schermen alleen "P01 · Utrecht" */
@media (max-width: 479px) { .svc .sh-long { display: none; } }

/* Ankers landen op de sheet-head, niet op de lege sectierand erboven */
.svc { scroll-margin-top: calc(var(--section-y) * -1 + 8px); }

/* ---------- Pagina-kop ---------- */
.dh { padding-bottom: clamp(16px, 3vw, 48px); }
.dh__grid { display: grid; gap: clamp(40px, 5vw, 64px); }
.dh__title { margin-top: 16px; }
.dh__lead { margin-top: 24px; max-width: 30em; }
.dh__actions { margin-top: 32px; }
.dh__note { margin-top: 16px; color: var(--beton); }
@media (min-width: 1024px) {
  .dh__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: end; }
  .dh__title { font-size: clamp(4.5rem, .5rem + 7.4vw, 8.75rem); line-height: .86; letter-spacing: -.02em; }
}

/* Inhoudsopgave als titelblok */
.toc { border: 1.5px solid var(--grafiet); background: var(--papier); }
.toc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 16px;
  background: var(--grafiet); color: var(--kalk);
}
.toc__title { color: var(--kalk); }
.toc__col { color: var(--steen); }
.toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.toc__list li { border-top: 1px solid var(--lijn-sterk); min-width: 0; }
.toc__list li:first-child, .toc__list li:nth-child(2) { border-top: 0; }
.toc__list li:nth-child(odd) { border-right: 1px solid var(--lijn-sterk); }
.toc__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-template-areas: "no arrow" "name name" "time time";
  grid-template-rows: auto 1fr auto;
  gap: 4px 8px;
  height: 100%; min-height: 96px;
  padding: 12px 14px 14px;
  text-decoration: none; color: inherit;
  transition: background-color .2s var(--ease);
}
.toc__link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--oker);
  transform: scaleY(0); transform-origin: top center; transition: transform .3s var(--ease);
}
.toc__no { grid-area: no; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; color: var(--oker-donker); }
.toc__name { grid-area: name; align-self: start; font-weight: 750; font-stretch: 72%; font-size: 1.375rem; line-height: 1; letter-spacing: -.005em; }
.toc__desc { display: none; }
.toc__time { grid-area: time; margin-top: 2px; font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--beton); }
.toc__arrow { grid-area: arrow; justify-self: end; }
.toc__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; transition: transform .25s var(--ease); }
.toc__link:hover { background: #fff; }
.toc__link:hover::before { transform: scaleY(1); }
.toc__link:hover .toc__arrow svg { transform: translateY(3px); }
.toc__link:focus-visible { outline-offset: -3px; }
.toc__foot { padding: 10px 16px 12px; border-top: 1px solid var(--lijn-sterk); color: var(--beton); font-size: .8125rem; line-height: 1.45; }

@media (min-width: 600px) {
  .toc__list { grid-template-columns: 1fr; }
  .toc__list li:nth-child(2) { border-top: 1px solid var(--lijn-sterk); }
  .toc__list li:nth-child(odd) { border-right: 0; }
  .toc__link {
    grid-template-columns: 34px minmax(0, 1fr) auto 22px;
    grid-template-areas: "no name time arrow" "no desc time arrow";
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 14px; row-gap: 3px;
    min-height: 74px;
    padding: 12px 16px 12px 18px;
  }
  .toc__no { align-self: start; padding-top: .45em; }
  .toc__name { align-self: end; }
  .toc__desc { display: block; grid-area: desc; color: var(--beton); font-size: .9375rem; line-height: 1.3; }
  .toc__time { margin-top: 0; text-align: right; }
}

/* ---------- Hoofdstukbalk (verschijnt na de inhoudsopgave) ----------
   Mobiel en tablet: compacte strook met zes genummerde cellen onder de kop.
   Desktop: volledige balk met namen, sleutel en offerte-link. */
.chapter-bar { display: none; }
@media (max-width: 1023px) {
  .js .chapter-bar {
    display: block;
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 38;
    background: var(--kalk);
    border-bottom: 1px solid var(--grafiet);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .js .chapter-bar.is-visible { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  .chapter-bar__inner { display: flex; height: 44px; }
  .chapter-bar__key { display: flex; align-items: center; padding: 0 12px 0 var(--pad); border-right: 1px solid var(--lijn-sterk); font-size: .625rem; color: var(--beton); }
  .chapter-bar__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); flex: 1; min-width: 0; }
  .chapter-bar__list li + li { border-left: 1px solid var(--lijn); }
  .chapter-bar__list a { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; text-decoration: none; font-weight: 600; font-size: .875rem; }
  .chapter-bar__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--grafiet); transform: scaleX(0); transition: transform .25s var(--ease); }
  .chapter-bar__list a[aria-current="location"] { background: var(--grafiet); }
  .chapter-bar__list a[aria-current="location"] .chapter-bar__no { color: var(--oker); }
  .chapter-bar__no { font-family: var(--f-mono); font-weight: 500; font-size: .75rem; letter-spacing: .06em; color: var(--oker-donker); }
  .chapter-bar__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chapter-bar__cta { display: none; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .chapter-bar__name { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .8125rem; }
  .chapter-bar__list a[aria-current="location"] { color: var(--kalk); }
}
@media (min-width: 1024px) {
  .js .chapter-bar {
    display: block;
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 38;
    background: var(--kalk);
    border-bottom: 1px solid var(--grafiet);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .js .chapter-bar.is-visible { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  .chapter-bar__inner {
    display: flex; align-items: stretch;
    height: 48px;
    max-width: calc(var(--content) + 2 * var(--pad));
    margin-inline: auto;
    padding-inline: var(--pad);
  }
  .chapter-bar__key { display: none; align-items: center; padding-right: 20px; margin-right: 4px; border-right: 1px solid var(--lijn-sterk); color: var(--beton); }
  .chapter-bar__list { display: flex; align-items: stretch; min-width: 0; }
  .chapter-bar__list a {
    position: relative;
    display: flex; align-items: center; gap: 8px; height: 100%;
    padding: 0 clamp(10px, 1.1vw, 18px);
    font-weight: 560; font-size: .9375rem; white-space: nowrap; text-decoration: none;
    transition: background-color .2s var(--ease);
  }
  .chapter-bar__list a::after {
    content: ""; position: absolute; left: clamp(10px, 1.1vw, 18px); right: clamp(10px, 1.1vw, 18px); bottom: -1px; height: 3px;
    background: var(--oker); transform: scaleX(0); transform-origin: left center; transition: transform .3s var(--ease);
  }
  .chapter-bar__list a:hover { background: var(--kalk-2); }
  .chapter-bar__list a[aria-current="location"] { font-weight: 700; }
  .chapter-bar__list a[aria-current="location"]::after { transform: scaleX(1); background: var(--grafiet); }
  .chapter-bar__no { font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .07em; color: var(--oker-donker); }
  .chapter-bar__cta {
    display: none; align-items: center; gap: 10px;
    margin-left: auto; padding: 0 0 0 20px;
    border-left: 1px solid var(--lijn-sterk);
    font-weight: 650; font-size: .9375rem; text-decoration: none;
  }
  .chapter-bar__cta:hover { color: var(--oker-donker); }
  .chapter-bar__cta .i-arrow { width: 18px; height: 18px; transition: transform .25s var(--ease); }
  .chapter-bar__cta:hover .i-arrow { transform: translateX(3px); }
}
@media (min-width: 1280px) {
  .chapter-bar__key { display: flex; }
  .chapter-bar__cta { display: flex; }
}

/* ---------- Gedeeld binnen deze pagina ---------- */
/* Feiten per dienst: één mono-regel onder de intro, geen apart vak */
.svc-line { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 18px; color: var(--beton); }
.svc-line span { padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--lijn-sterk); }
.svc-line span:first-child { color: var(--oker-donker); }
.svc-line span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.section--dark .svc-line { color: var(--steen); }
.section--dark .svc-line span { border-right-color: var(--lijn-donker); }
.section--dark .svc-line span:first-child { color: var(--oker); }
.v-faq__text { margin-top: 4px; max-width: 26em; }

/* Vragen: op een telefoon eerst twee, de rest achter "Meer vragen" (alleen met JS) */
.faq-more { display: none; }
@media (max-width: 759px) {
  .js .faq--clip .faq__item:nth-child(n+3) { display: none; }
  .js .faq-more {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; padding: 0;
    background: none; border: 0; color: inherit; font-weight: 650;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: var(--lijn-sterk);
  }
  .js .faq-more span { font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; color: var(--oker-donker); text-decoration: none; }
  .section--dark .faq-more span { color: var(--oker); }
}
.svc-faq__title { margin: 8px 0 20px; }
.svc-faq .label:not(.label--accent) { color: var(--beton); }
.gain-list { border-top: 1px solid var(--lijn-sterk); }
.gain-list li {
  position: relative;
  padding: 12px 0 13px 26px;
  border-bottom: 1px solid var(--lijn-sterk);
  font-weight: 560; line-height: 1.4;
}
.gain-list li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 10px; height: 10px;
  background: var(--oker); border: 1.5px solid var(--grafiet);
}
.section--dark .gain-list, .section--dark .gain-list li { border-color: var(--lijn-donker); }
.section--dark .gain-list li::before { border-color: var(--oker); }

/* ---------- 01 Aanbouw: beeld-geleid ---------- */
.a-head { margin-bottom: clamp(32px, 4vw, 64px); }
.a-fig { margin: 0; }
.a-fig__media { aspect-ratio: 4 / 5; }
.a-fig__media img { object-position: 52% 62%; }
.a-fig__media .tag { top: 14px; right: 14px; }
.a-fig .a-fig__cap { padding-inline: var(--pad); }
.a-body { display: grid; gap: 48px; margin-top: 36px; }
.a-faq { margin-top: 8px; }
.a-panel__title { margin: 10px 0 24px; max-width: 18ch; }
.a-aside .tb { margin-top: 12px; }
.a-aside__title { margin-top: 32px; }
.a-aside .gain-list { margin-top: 12px; }
.svc-cta { display: grid; gap: 8px; margin-top: 28px; }
.svc-cta .link-arrow { justify-self: start; }
@media (min-width: 601px) {
  .a-fig__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .a-fig { position: relative; }
  .a-fig__media { aspect-ratio: auto; height: clamp(520px, 46vw, 780px); margin-left: var(--bleed); }
  .a-fig .a-fig__cap {
    position: absolute; top: 100%; right: var(--bleed);
    width: calc((min(100vw - 2 * var(--pad), var(--content)) - 11 * var(--gap)) / 12 * 4 + 3 * var(--gap));
    margin-top: 14px; padding: 0;
  }
  .a-body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap); row-gap: 0;
    margin-top: 0;
    align-items: start;
  }
  .a-panel {
    grid-column: 1 / span 7; grid-row: 1;
    position: relative; z-index: 2;
    margin-top: calc(-1 * clamp(150px, 13vw, 230px));
    padding: clamp(32px, 3vw, 48px) clamp(32px, 4vw, 64px) 0 0;
    background: var(--kalk);
  }
  .a-faq { grid-column: 1 / span 7; grid-row: 2; padding-right: clamp(32px, 4vw, 64px); margin-top: clamp(64px, 6vw, 96px); }
  .a-aside {
    /* ruimte voor het onderschrift van Fig. 01, dat absoluut onder de foto hangt */
    --cap-space: 100px;
    grid-column: 9 / -1; grid-row: 1 / span 2;
    position: sticky; top: calc(var(--header-h) + var(--chapter-h) + 24px - var(--cap-space));
    padding-top: var(--cap-space);
  }
}

@media (min-width: 1280px) { .a-aside { --cap-space: 76px; } }

/* ---------- 02 Verbouwing: split ---------- */
.v-grid { display: grid; gap: 44px; }
.v-lead { margin-top: 24px; }
.v-list-title { margin-top: 36px; }
.work-list { margin-top: 12px; border-top: 1px solid var(--lijn-sterk); }
.work-list__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 14px 0 15px; border-bottom: 1px solid var(--lijn-sterk); }
.work-list dt { padding-top: .35em; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; text-transform: uppercase; }
.work-list dd { margin: 0; }
.v-cta { margin-top: 32px; }
.v-note { margin-top: 14px; color: var(--beton); }
.v-fig { margin: 0 calc(-1 * var(--pad)); }
.v-fig__media { aspect-ratio: 4 / 5; }
.v-fig__media img { object-position: 50% 58%; }
.v-fig .tag { top: 14px; left: 14px; }
.v-fig figcaption { padding-inline: var(--pad); }
@media (min-width: 600px) and (max-width: 1023px) {
  .v-fig__media { aspect-ratio: 4 / 3; }
}
.v-gains { display: grid; margin-top: clamp(64px, 7vw, 112px); border-top: 2px solid var(--grafiet); }
.v-gain { padding: 20px 0 24px; border-bottom: 1px solid var(--lijn-sterk); }
.v-gain__title { margin-top: 10px; font-weight: 760; font-stretch: 74%; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); line-height: 1; letter-spacing: -.005em; text-wrap: balance; }
.v-gain p:last-child { margin-top: 12px; color: var(--beton); max-width: 30em; }
.v-faq { display: grid; gap: 32px; margin-top: clamp(56px, 6vw, 96px); }
.v-faq__side .tb { margin-top: 4px; }
@media (min-width: 760px) {
  .v-gains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-gain { padding: 24px 28px 4px 0; border-bottom: 0; }
  .v-gain + .v-gain { padding-left: 28px; border-left: 1px solid var(--lijn-sterk); }
}
@media (min-width: 1024px) {
  .v-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .v-text { grid-column: 1 / span 6; }
  .v-fig { grid-column: 8 / -1; margin: 0 calc(-1 * var(--bleed)) 0 0; }
  .v-fig__media { aspect-ratio: auto; height: clamp(600px, 54vw, 820px); }
  .v-fig figcaption { padding: 0; }
  .v-faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .v-faq__side { grid-column: 1 / span 4; }
  .v-faq > .faq { grid-column: 6 / -1; align-self: start; }
}

/* ---------- 03 Renovatie: donker, tijdens/na + fases ---------- */
.r-pair { display: grid; gap: 24px; }
.r-pair__dim { color: var(--steen); }
.r-pair__dim .dim__label { color: var(--kalk); }
.r-pair__tijdens { width: 82%; }
.r-pair__na { width: 90%; margin-left: auto; }
.r-pair .media { aspect-ratio: 3 / 2; }
.r-pair__na .media { aspect-ratio: 4 / 3; }
.r-pair .tag { left: 12px; top: 12px; }
@media (min-width: 1024px) {
  .r-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 22px; align-items: start; }
  .r-pair__dim { grid-column: 1 / -1; }
  .r-pair__tijdens { grid-column: 1 / span 5; width: auto; margin-top: clamp(72px, 9vw, 150px); }
  .r-pair__na { grid-column: 6 / -1; width: auto; margin: 0; padding: 0; background: none; }
}
.r-phases { margin-top: clamp(72px, 8vw, 128px); }
.r-phases__head { display: grid; gap: 8px; }
.r-phases__list { display: grid; gap: 30px; margin-top: 32px; }
.r-phase .dim { color: var(--kalk); }
.r-phase .dim__label { color: var(--oker); }
.r-phase--1 .dim { width: 50%; }
.r-phase--2 .dim, .r-phase--3 .dim { width: 75%; }
.r-phase__title { margin-top: 14px; font-weight: 750; font-stretch: 76%; font-size: 1.5rem; line-height: 1.05; }
.r-phase__text { margin-top: 8px; color: var(--steen); font-size: var(--fs-small); max-width: 32em; }
@media (min-width: 760px) {
  .r-phases__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--gap); }
}
@media (min-width: 1024px) {
  .r-phases__list { grid-template-columns: 2fr 3fr 3fr 4fr; column-gap: 0; }
  .r-phase .dim { width: 100%; }
  .r-phase + .r-phase .dim { border-left: 0; }
  .r-phase__title, .r-phase__text { padding-right: clamp(20px, 2.4vw, 36px); }
}
.r-foot { display: grid; gap: 56px; margin-top: clamp(72px, 8vw, 128px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--lijn-donker); }
.r-keep__text { margin-top: 14px; max-width: 36em; }
.r-keep .gain-list { margin-top: 24px; }
.r-keep .tb { margin-top: 28px; }
.r-cta { margin-top: 28px; }
@media (min-width: 1024px) {
  .r-foot { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .r-keep { grid-column: 1 / span 6; }
  .r-faq { grid-column: 8 / -1; }
}

/* ---------- 04 Badkamer: maatlijn onder de kop, drie staande foto's ---------- */
.b-head { display: grid; gap: 28px; }
.b-measure { width: fit-content; max-width: 100%; }
.b-dim { margin-top: 22px; }
.b-lead { max-width: 32em; }
@media (min-width: 1024px) {
  .b-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 44px; }
  .b-measure { grid-column: 1 / -1; }
  .b-lead { grid-column: 1 / span 6; }
  .b-facts { grid-column: 8 / -1; align-self: end; margin: 0; }
}
.b-photos {
  display: flex; gap: 12px;
  margin-top: clamp(44px, 5vw, 80px);
  padding: 0 var(--pad) 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: thin; scrollbar-color: var(--lijn-sterk) transparent;
}
.b-photos:focus-visible { outline-offset: -3px; }
.b-photo { flex: none; width: 76vw; max-width: 400px; margin: 0; scroll-snap-align: start; }
.b-photo .media { aspect-ratio: 3 / 4; }
.b-photo .tag { left: 12px; top: 12px; }
@media (min-width: 760px) {
  .b-photos {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
    max-width: calc(var(--content) + 2 * var(--pad)); margin-inline: auto;
    padding-bottom: 0; overflow: visible;
  }
  .b-photo { width: auto; max-width: none; }
  .b-photo:nth-child(2) { margin-top: clamp(56px, 8vw, 128px); }
  .b-photo:nth-child(3) { margin-top: clamp(28px, 4vw, 64px); }
}
.b-body { display: grid; gap: 56px; margin-top: clamp(56px, 6vw, 104px); }
.b-offer__intro { margin-top: 10px; }
.b-tb { margin-top: 24px; grid-template-columns: 1fr; background: var(--papier); }
.b-tb .tb__cell { padding: 16px 18px 20px; }
.b-tb dt {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--f-sans); font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: var(--grafiet);
}
.b-tb__no { font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .08em; color: var(--oker-donker); }
.b-tb dd { margin-top: 6px; font-weight: 400; font-size: .9375rem; line-height: 1.5; color: var(--beton); }
.b-offer__note { margin-top: 16px; max-width: 46em; }
.b-cta { margin-top: 28px; }
.b-aside .gain-list { margin-top: 14px; }
.b-faq { margin-top: 48px; }
@media (min-width: 600px) { .b-tb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .b-tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .b-offer { grid-column: 1 / span 7; }
  .b-aside { grid-column: 9 / -1; }
}

@media (min-width: 1280px) { .b-tb { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 05 Zolder: tijdens met aanwijzingen A–C, na ---------- */
.z-grid { display: grid; gap: 32px; }
.z-text .lead { margin-top: 20px; }
.z-tijdens { margin: 0; }
.z-tijdens__media { aspect-ratio: 3 / 4; }
.z-tijdens .tag { top: 12px; right: 12px; }
.z-tijdens figcaption a { color: var(--grafiet); text-underline-offset: 3px; }
.z-mark {
  position: absolute; z-index: 2;
  left: var(--x); top: var(--y);
  display: grid; place-items: center;
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  background: var(--oker); color: var(--grafiet);
  border: 1.5px solid var(--grafiet);
  font-family: var(--f-mono); font-weight: 500; font-size: .8125rem; line-height: 1;
  transition: transform .25s var(--ease);
}
.z-mark::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(248, 246, 242, .9); }
.z-parts { border-top: 1px solid var(--lijn-sterk); }
.z-part { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 16px; padding: 16px 0 18px; border-bottom: 1px solid var(--lijn-sterk); }
.z-part__key {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 30px; height: 30px; margin-top: 1px;
  background: var(--oker); color: var(--grafiet); border: 1.5px solid var(--grafiet);
  font-family: var(--f-mono); font-weight: 500; font-size: .75rem;
}
.z-part__title { font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.z-part p { color: var(--beton); font-size: var(--fs-small); }
.z-aside .btn-row { margin-top: 20px; }
@media (hover: hover) {
  .z-grid:has(.z-part:nth-child(1):hover) .z-mark--a,
  .z-grid:has(.z-part:nth-child(2):hover) .z-mark--b,
  .z-grid:has(.z-part:nth-child(3):hover) .z-mark--c { transform: scale(1.2); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .z-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .z-text, .z-aside { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .z-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; align-items: start; }
  .z-text { grid-column: 7 / -1; grid-row: 1; }
  .z-tijdens { grid-column: 1 / span 5; grid-row: 1 / span 3; }
  .z-parts { grid-column: 7 / -1; grid-row: 2; }
  .z-aside { grid-column: 7 / -1; grid-row: 3; }
}
/* vragen als notitieblok van de tekening (open tekst, geen accordeon) */
.z-notes { margin-top: clamp(64px, 7vw, 112px); border: 1.5px solid var(--grafiet); background: var(--papier); }
.z-notes__title { padding: 11px 16px; background: var(--grafiet); color: var(--kalk); }
.z-note { padding: 18px 16px 22px; }
.z-note + .z-note { border-top: 1px solid var(--lijn-sterk); }
.z-note dt { font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.z-note dt::before { content: "V"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border: 1.5px solid var(--grafiet); font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; vertical-align: 2px; }
.z-note dd { margin-top: 8px; color: var(--beton); }
@media (min-width: 900px) {
  .z-notes__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .z-note { padding: 22px 24px 26px; }
  .z-note + .z-note { border-top: 0; border-left: 1px solid var(--lijn-sterk); }
}

/* ---------- 06 Verduurzaming: dichte tabel op papier ---------- */
.d-grid { display: grid; gap: 40px; }
.d-table { width: 100%; border-collapse: collapse; }
.d-table caption { caption-side: top; padding-bottom: 12px; text-align: left; color: var(--oker-donker); }
.d-table thead th {
  padding: 10px 16px 10px 0;
  border-top: 2px solid var(--grafiet); border-bottom: 1px solid var(--grafiet);
  font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; color: var(--beton);
}
.d-table tbody th {
  width: 20%;
  padding: 18px 16px 20px 0;
  border-bottom: 1px solid var(--lijn-sterk);
  text-align: left; vertical-align: top;
  font-weight: 750; font-stretch: 76%; font-size: 1.375rem; line-height: 1.05;
}
.d-table td { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--lijn-sterk); vertical-align: top; font-size: .9375rem; line-height: 1.5; }
.d-table td:nth-of-type(2) { color: var(--beton); }
.d-table .d-time { width: 13%; padding-top: 22px; padding-right: 0; font-family: var(--f-mono); font-weight: 500; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.d-table tbody tr { transition: background-color .2s var(--ease); }
.d-figs { display: grid; gap: 24px; }
.d-fig { margin: 0; }
.d-fig .tag { left: 12px; top: 12px; }
@media (max-width: 759px) {
  .d-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .d-table, .d-table tbody, .d-table caption { display: block; }
  .d-table tbody { border-top: 2px solid var(--grafiet); }
  .d-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 0 15px; border-bottom: 1px solid var(--lijn-sterk); }
  .d-table tbody th, .d-table td { display: block; width: auto; padding: 0; border: 0; }
  .d-table tbody th { grid-column: 1; grid-row: 1; }
  .d-table .d-time { grid-column: 2; grid-row: 1; align-self: center; padding: 0; }
  .d-table td:not(.d-time) { grid-column: 1 / -1; margin-top: 6px; }
  /* "Zinvol als" loopt als één zin door achter het label; "Duur" staat rechts naast de maatregel.
     (td-volgorde: 1 wat we doen, 2 zinvol als, 3 duur — de th telt niet mee voor nth-of-type) */
  .d-table td:nth-of-type(2)::before,
  .d-table td.d-time::before {
    content: attr(data-label) " "; margin-right: 6px;
    font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--oker-donker);
  }
  .d-table td:nth-of-type(2) { color: var(--beton); }
}
@media (min-width: 600px) and (max-width: 1023px) { .d-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .d-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .d-table-wrap { grid-column: 1 / span 8; }
  .d-figs { grid-column: 10 / -1; padding-top: 30px; gap: 32px; }
  .d-table tbody tr:hover { background: var(--kalk); }
}
.d-foot { display: grid; gap: 48px; margin-top: clamp(64px, 7vw, 112px); }
.d-note { padding: 26px 22px 30px; background: var(--kalk-2); border-left: 6px solid var(--oker); }
.d-note__title { margin: 10px 0 14px; }
.d-note p:not(.label) + p { margin-top: 12px; }
.d-cta { margin-top: 26px; }
@media (min-width: 1024px) {
  .d-foot { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .d-note { grid-column: 1 / span 5; padding: 36px 40px 40px; }
  .d-faq { grid-column: 7 / -1; }
}

/* ---------- Afsluitende CTA: staande foto rechts naast grafiet vlak ---------- */
.cta-band--split .cta-band__media img { object-position: 50% 30%; }
/* mobiel/tablet: foto als strook boven het grafiet vlak, tekst nooit over de handen heen */
@media (max-width: 1023px) {
  .cta-band--split::before { display: none; }
  .cta-band--split .cta-band__media {
    position: relative; inset: auto; z-index: 0;
    height: clamp(220px, 60vw, 420px);
    border-bottom: 1px solid rgba(239, 236, 230, .25);
  }
  .cta-band--split .cta-band__media img { object-position: 50% 30%; }
  .cta-band--split .cta-band__inner { padding-block: clamp(44px, 8vw, 72px) clamp(56px, 9vw, 88px); }
}
@media (min-width: 1024px) {
  .cta-band--split::before { display: none; }
  .cta-band--split .cta-band__media { left: auto; width: 40%; }
  .cta-band--split .cta-band__media::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(239, 236, 230, .25);
  }
  .cta-band--split .cta-band__inner { padding-block: clamp(104px, 9vw, 160px); }
  .cta-band--split .cta-band__panel { max-width: min(44rem, calc(60vw - var(--bleed) - 64px)); }
  .cta-band--split .cta-band__title { font-size: clamp(2.75rem, 1.2rem + 3.4vw, 4.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  .js .chapter-bar { transition: none; }
}
@media (forced-colors: active) {
  .toc, .z-notes { border-color: CanvasText; }
  .z-mark, .z-part__key, .gain-list li::before { forced-color-adjust: none; }
}

/* ---------- Mobiel: korter, zonder inhoud weg te laten ---------- */
@media (max-width: 600px) {
  .a-fig__media { aspect-ratio: 4 / 3; }
  .v-fig__media { aspect-ratio: 1 / 1; }
  .v-fig__media img { object-position: 50% 62%; }
  .z-tijdens__media { aspect-ratio: 4 / 5; }
}
@media (max-width: 759px) {
  /* drie voordelen naast elkaar, met een kijkje op de volgende */
  .v-gains {
    display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
    border-top: 0; scrollbar-width: thin; scrollbar-color: var(--lijn-sterk) transparent;
  }
  .v-gains:focus-visible { outline-offset: -3px; }
  .v-gain { flex: none; width: 78%; padding: 20px 20px 16px 0; border-top: 2px solid var(--grafiet); border-bottom: 0; scroll-snap-align: start; }
  .v-gain + .v-gain { padding-left: 20px; border-left: 1px solid var(--lijn-sterk); }
  .b-tb .tb__cell { padding: 12px 14px 14px; }
  .b-tb dd { margin-top: 3px; font-size: .875rem; line-height: 1.45; }
  .d-figs .d-fig + .d-fig { display: none; }
  .r-phases__list { gap: 22px; }
  .r-phase__title { margin-top: 10px; }
}