/* Vakwerk Bouw & Renovatie — project-uitbouw-utrecht.html (uitgebreide case P01).
   Gedeelde componenten (sheet-head, split-head, tb, fig, tag, dim, btn, cta-band) staan in style.css.
   Opbouw van de pagina als een bouwdossier:
   hero met titelblok (rechtsonder, zoals op een tekening) → situatie (opname-bevindingen)
   → opdracht (bestek: eis ↔ uitvoering ↔ offertepost) → aanpak (bouwverslag met foto's, grafiet)
   → materialen (eigen doorsnede-tekening + materiaalstaat) → bouwplanning per week (signatuur)
   → eindresultaat (full-bleed) → volgend project → CTA. */

/* =========================================================================
   Hero
   ========================================================================= */
.case-hero { position: relative; padding-top: var(--head-top); }
.case-hero__crumbs { margin-bottom: clamp(28px, 4vw, 56px); }
.case-hero__kicker { margin-bottom: 18px; }
.case-hero__title {
  font-weight: 820;
  font-stretch: 64%;
  font-size: clamp(3rem, 1.15rem + 6.6vw, 8.25rem);
  line-height: var(--lh-display);
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 15ch;
}
.case-hero__side { display: grid; gap: 14px; margin-top: 24px; justify-items: start; }
.case-hero__side .lead { max-width: 30em; }
@media (min-width: 1024px) {
  .case-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: var(--gap);
    align-items: end;
  }
  .case-hero__side { margin-top: 0; padding-bottom: .5em; }
}

.case-hero__media {
  position: relative;
  margin: clamp(32px, 4vw, 64px) 0 0;
  overflow: hidden;
  background: var(--kalk-2);
  aspect-ratio: 4 / 5;
}
.case-hero__media--pair { display: grid; aspect-ratio: auto; gap: 0; background: var(--grafiet); }
.case-hero__shot { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--kalk-2); }
.case-hero__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.case-hero__shot--b { display: none; }
.case-hero__shot--b img { object-position: 40% 45%; }
.case-hero__shot picture { display: contents; }
.case-hero__tag { top: 14px; left: 14px; }
@media (min-width: 601px) {
  .case-hero__media--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; height: clamp(520px, 62vw, 900px); }
  .case-hero__shot { aspect-ratio: auto; }
  .case-hero__shot--b { display: block; }
}
@media (min-width: 1024px) {
  .case-hero__media--pair { height: clamp(600px, 58vw, 920px); }
  .case-hero__shot:first-child .case-hero__tag { left: max(var(--pad), calc((100vw - var(--content)) / 2)); }
}

/* Titelblok: rechtsonder op het beeld, met dubbele kaderlijn zoals op een bouwtekening */
.case-tb {
  position: relative; z-index: 2;
  margin-top: -40px;
  background: var(--kalk);
  border-color: var(--grafiet);
  outline: 1.5px solid var(--grafiet);
  outline-offset: 5px;
  box-shadow: 0 0 0 5px var(--kalk);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "sheet status"
    "plaats tijd"
    "woning woning"
    "werk werk"
    "opl uitv";
}
.case-tb .tb__cell { border-color: var(--grafiet); }
.case-tb dt { color: var(--beton); }
.case-tb > :nth-child(1) { grid-area: sheet; }
.case-tb > :nth-child(2) { grid-area: plaats; }
.case-tb > :nth-child(3) { grid-area: woning; }
.case-tb > :nth-child(4) { grid-area: werk; }
.case-tb > :nth-child(5) { grid-area: tijd; }
.case-tb > :nth-child(6) { grid-area: opl; }
.case-tb > :nth-child(7) { grid-area: uitv; }
.case-tb > :nth-child(8) { grid-area: status; }
.case-tb__sheet { background: var(--oker); }
.case-tb__sheet dt { color: var(--grafiet); }
.case-tb__sheet dd {
  margin-top: 2px;
  font-weight: 830; font-stretch: 64%; font-size: 2.75rem; line-height: .9; letter-spacing: -.01em;
}
.case-tb__status dd { display: flex; align-items: center; gap: 8px; }
.case-tb__status dd::before { content: ""; width: 10px; height: 10px; background: var(--oker); outline: 1.5px solid var(--grafiet); flex: none; }
@media (min-width: 760px) {
  .case-tb {
    margin-top: -64px;
    grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "sheet plaats woning woning"
      "sheet tijd werk werk"
      "status opl uitv uitv";
  }
  .case-tb__sheet { display: flex; flex-direction: column; justify-content: space-between; }
  .case-tb__sheet dd { font-size: clamp(3rem, 2rem + 2.6vw, 4.5rem); }
}
@media (min-width: 1024px) {
  .case-tb {
    width: min(100%, 980px);
    margin: -112px 0 0 auto;
    outline-offset: 6px;
    box-shadow: 0 0 0 6px var(--kalk);
    grid-template-columns: minmax(0, 1.05fr) repeat(5, minmax(0, 1fr));
    grid-template-areas:
      "sheet plaats woning woning tijd opl"
      "sheet werk werk uitv status status";
  }
}

/* =========================================================================
   01 · Situatie
   ========================================================================= */
.case-situation__grid { display: grid; gap: 40px; }
.plan-old { position: relative; margin: 0; padding: 40px 12px 0; background: var(--papier); border: 1px solid var(--grafiet); }
.plan-old__tag { left: -1px; top: -1px; }
.plan-old__svg { width: 100%; height: auto; font-family: var(--f-mono); }
.plan-old__cap { margin: 8px -12px 0; padding: 10px 14px 12px; border-top: 1px solid var(--grafiet); font-size: .875rem; color: var(--beton); }
.plan-old__cap b { font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; text-transform: uppercase; color: var(--oker-donker); margin-right: 6px; }
.po-room { fill: var(--kalk); }
.po-wall { fill: none; stroke: var(--grafiet); stroke-width: 7; }
.po-wall--in { stroke-width: 4; }
.po-wall--key { stroke: var(--oker-donker); stroke-width: 9; }
.po-win { stroke: var(--papier); stroke-width: 3; }
.po-thin { fill: none; stroke: var(--grafiet); stroke-width: 1.2; }
.po-new { fill: none; stroke: var(--oker-donker); stroke-width: 1.6; stroke-dasharray: 7 6; }
.po-old { stroke: var(--grafiet); stroke-width: 1.5; }
.po-hatch { stroke: var(--beton); stroke-width: 1; }
.po-dim { fill: none; stroke: var(--grafiet); stroke-width: 1.2; }
.po-drain { fill: var(--papier); stroke: var(--grafiet); stroke-width: 2; }
.po-t { font-size: 13px; font-weight: 500; letter-spacing: .06em; fill: var(--grafiet); }
.po-t--muted { fill: var(--beton); }
.po-t--accent { fill: var(--oker-donker); }
.po-lead { fill: none; stroke: var(--grafiet); stroke-width: 1.2; }
.po-co rect { fill: var(--oker); stroke: var(--grafiet); stroke-width: 1.5; }
.po-co text { font-size: 14px; font-weight: 500; text-anchor: middle; fill: var(--grafiet); }
@media (max-width: 599px) {
  .po-t { font-size: 19px; }
  .po-co text { font-size: 17px; }
}
@media (max-width: 400px) {
  .po-co text { font-size: 18.5px; }  /* B1–B3 ≥ 9px op 360 */
}
@media (max-width: 479px) {
  /* KEUKEN en B2 niet tegen elkaar (ook 401–479): blokje 24 omhoog (de verwijslijn verdwijnt onder het blokje), label iets van de muur af */
  .po-co--b2 rect, .po-co--b2 text { transform: translateY(-24px); }
  .po-t--keuken { transform: translateY(-4px); }
}
.case-situation__prose { margin-top: 24px; }
.findings { margin-top: 28px; counter-reset: find; border-top: 1.5px solid var(--grafiet); }
.findings__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--lijn-sterk);
}
.findings__item::before {
  counter-increment: find; content: "B" counter(find);
  grid-row: span 2; padding-top: .3em;
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; color: var(--oker-donker);
}
.findings__seen { font-weight: 680; line-height: 1.35; }
.findings__then { position: relative; padding-left: 26px; color: var(--beton); font-size: var(--fs-small); }
.findings__then::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 16px; height: 1.5px; background: var(--grafiet);
}
.findings__then::after {
  content: ""; position: absolute; left: 11px; top: calc(.72em - 3.5px); width: 6px; height: 6px;
  border-top: 1.5px solid var(--grafiet); border-right: 1.5px solid var(--grafiet); transform: rotate(45deg);
}
@media (min-width: 1024px) {
  .case-situation__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(48px, 5vw, 96px);
    align-items: start;
  }
  .case-situation__fig { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* =========================================================================
   02 · Opdracht: opdrachtomschrijving als bestek
   eis → randvoorwaarde → uitvoering → offertepost (zelfde posten als Doc. 01)
   Mobiel: elke eis een blok met mono-labels; vanaf 1024px een echte tabel.
   ========================================================================= */
.bestek-wrap { margin-top: clamp(8px, 1vw, 16px); }
.bestek__key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; color: var(--oker-donker); }
.bestek__key span + span { color: var(--beton); }
.bestek { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--grafiet); border-bottom: 1.5px solid var(--grafiet); }
.bestek thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bestek tbody, .bestek__row, .bestek__row > * { display: block; }
.bestek__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 18px 0 20px; border-top: 1px solid var(--lijn-sterk); }
.bestek__row:first-child { border-top: 0; }
.bestek__row > * { grid-column: 2; text-align: left; }
.bestek__no { grid-column: 1; grid-row: 1 / span 2; padding-top: .45em; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: var(--oker-donker); }
.bestek__eis { font-weight: 760; font-stretch: 72%; font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; }
.bestek__cell { margin-top: 10px; color: var(--beton); font-size: var(--fs-small); line-height: 1.5; }
.bestek__cell::before, .bestek__post::before {
  content: attr(data-label); display: block; margin-bottom: 2px;
  font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--grafiet);
}
.bestek__post { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--lijn-sterk); font-weight: 620; font-size: var(--fs-small); }
.bestek__post::before { display: inline; margin: 0 10px 0 0; color: var(--beton); }
.bestek__postno { font-family: var(--f-mono); font-weight: 500; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--oker-donker); margin-right: 4px; }
@media (min-width: 640px) and (max-width: 1023px) {
  .bestek__row { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); }
  .bestek__no { grid-row: 1 / span 3; }
  .bestek__eis { grid-column: 2 / -1; }
  .bestek__cell { grid-column: auto; }
  .bestek__post { grid-column: 2 / -1; }
}
@media (min-width: 1024px) {
  .bestek { display: table; table-layout: fixed; }
  .bestek thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: table-header-group; }
  .bestek tbody { display: table-row-group; }
  .bestek__row, .bestek thead tr { display: table-row; }
  .bestek__row > *, .bestek thead th { display: table-cell; vertical-align: top; }
  .bestek thead th {
    padding: 10px 16px 9px 0; border-bottom: 1px solid var(--grafiet); text-align: left;
    font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--beton);
  }
  .bestek thead th:nth-child(1) { width: 64px; }
  .bestek thead th:nth-child(2) { width: 28%; }
  .bestek thead th:nth-child(5) { width: 18%; }
  .bestek__row > * { padding: 22px 20px 24px 0; border-top: 1px solid var(--lijn-sterk); margin: 0; }
  .bestek__row:first-child > * { border-top: 0; }
  .bestek__no { padding-top: calc(22px + .5em); }
  .bestek__eis { font-size: clamp(1.5rem, 1rem + .9vw, 1.875rem); }
  .bestek__cell { font-size: 1rem; }
  .bestek__cell::before, .bestek__post::before { display: none; }
  .bestek__post { border-top-style: solid; padding-top: calc(22px + .2em); padding-right: 0; }
  .bestek__postno { display: block; margin: 0 0 2px; }
  .bestek__row:hover > * { background: var(--papier); }
}

/* =========================================================================
   03 · Aanpak: bouwverslag in twee spreads (grafiet)
   ========================================================================= */
.approach { display: grid; gap: 40px var(--gap); }
.approach__step { padding-top: 16px; border-top: 1px solid rgba(239, 236, 230, .4); max-width: 34em; }
.approach__no { color: var(--oker); }
.approach__title { margin-top: 10px; font-weight: 770; font-stretch: 70%; font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem); line-height: 1; letter-spacing: -.005em; }
.approach__step p:last-child { margin-top: 12px; color: var(--kalk-zacht); }
.approach__fig { margin: 0; }
.approach__fig .media { background: var(--grafiet-2); }
.approach__fig--1 .media { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.approach__fig--2 { width: 78%; margin-left: auto; }
.approach__fig--3 { width: 78%; }
@media (min-width: 760px) and (max-width: 1023px) {
  .approach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "s1 s2"
      "f1 f2"
      "s3 f3"
      "f4 f4"
      "s4 s4";
    align-items: start;
  }
  .approach__fig--2, .approach__fig--3 { width: auto; margin: 0; }
}
@media (min-width: 1024px) {
  .approach {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "s1 s1 s1 s1 f1 f1 f1 f1 f1 f1 f1 f1"
      "s2 s2 s2 s2 f1 f1 f1 f1 f1 f1 f1 f1"
      "f2 f2 f2 f2 f1 f1 f1 f1 f1 f1 f1 f1"
      "sp sp sp sp sp sp sp sp sp sp sp sp"
      "f4 f4 f4 f4 f4 f4 f4 s3 s3 s3 s3 s3"
      "f4 f4 f4 f4 f4 f4 f4 f3 f3 f3 f3 f3"
      "f4 f4 f4 f4 f4 f4 f4 s4 s4 s4 s4 s4";
    grid-template-rows: auto auto 1fr clamp(16px, 2vw, 40px) auto auto auto;  /* laatste rij op inhoud: geen lege band onder stap 04 */
    row-gap: 44px;
    align-items: start;
  }
  .approach__fig--2, .approach__fig--3 { width: auto; margin: 0; }
  .approach__fig--2 { align-self: end; }
  /* grote foto's vullen de hoogte van de tekstkolom ernaast */
  .approach__fig--1 { align-self: stretch; display: flex; flex-direction: column; }
  .approach__fig--1 .media { flex: 1; aspect-ratio: auto; min-height: 420px; }
  .approach__fig--4 { align-self: start; }
  .approach__fig--1 figcaption { flex: none; }
}
.approach__step--1 { grid-area: s1; }
.approach__step--2 { grid-area: s2; }
.approach__step--3 { grid-area: s3; }
.approach__step--4 { grid-area: s4; }
.approach__fig--1 { grid-area: f1; }
.approach__fig--2 { grid-area: f2; }
.approach__fig--3 { grid-area: f3; }
.approach__fig--4 { grid-area: f4; }
@media (max-width: 759px) {
  .approach > * { grid-area: auto; }
}
.approach__fig:target figcaption, .approach__fig:target .media, .approach__fig:target .roof-plan { outline: 3px solid var(--oker); outline-offset: 4px; }

/* Fig. 04: dakplan uit de werktekening, op papier in de donkere sectie */
.roof-plan { background: var(--papier); color: var(--grafiet); border: 1px solid var(--kalk-zacht); }
.roof-plan__svg { display: block; padding: 14px 8px 4px; }
.roof-plan__key { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 10px 14px 11px; border-top: 1px solid var(--grafiet); font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; text-transform: uppercase; color: var(--beton); }
.roof-plan__key span { display: inline-flex; align-items: center; gap: 8px; }
.rp-k { display: inline-block; width: 22px; height: 0; border-top: 1.5px dashed var(--beton); }
.rp-k--steel { border-top: 3px solid var(--oker-donker); }
.section-cut .rp-hidden { fill: none; stroke: var(--beton); stroke-width: 1; stroke-dasharray: 6 4; }
.section-cut .rp-trim { fill: none; stroke: var(--grafiet); stroke-width: 1.6; stroke-dasharray: 10 4; }
.section-cut .rp-steel { fill: none; stroke: var(--oker-donker); stroke-width: 4; }
.section-cut .rp-fall { fill: none; stroke: var(--grafiet); stroke-width: 1.4; }
@media (max-width: 599px) {
  .roof-plan__svg .rp-label-bg { width: 196px; }  /* vrij vlak achter het grotere label */
}
@media (max-width: 400px) {
  /* 360–400: tekst en nummers nog een stap groter (≥ 9px op 360), iets minder spatiëring zodat de labels even lang blijven */
  .section-cut.roof-plan__svg .sc-text { font-size: 18.5px; letter-spacing: .03em; }
  .section-cut.roof-plan__svg .sc-co text { font-size: 18.5px; }
}
@media (min-width: 600px) {
  .roof-plan__svg .sc-text { font-size: 12.5px; }
  .roof-plan__svg .sc-co text { font-size: 12.5px; }
}
@media (min-width: 760px) {
  .roof-plan__svg { padding: 22px 18px 6px; }
}
/* 1024–1199: de tekening staat in een smallere kolom; iets grotere letters houden elk label ≥ 9px gerenderd */
@media (min-width: 1024px) and (max-width: 1199px) {
  .section-cut.roof-plan__svg .sc-text, .section-cut.roof-plan__svg .sc-co text { font-size: 13.2px; }  /* dubbele klasse: wint van de basisregel .section-cut .sc-text verderop */
}
.approach__fig:target figcaption { outline: 0; }

/* =========================================================================
   04 · Materialen: doorsnede-tekening + materiaalstaat
   ========================================================================= */
.materials { display: grid; gap: 40px; }
.materials__drawing {
  margin: 0 calc(-1 * var(--pad));
  border-block: 1px solid var(--grafiet);
  background: var(--papier);
}
.section-cut { width: 100%; height: auto; padding: 14px 6px 0; overflow: visible; font-family: var(--f-mono); }
.materials__caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  padding: 10px var(--pad);
  border-top: 1px solid var(--grafiet);
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; text-transform: uppercase;
}
.materials__caption b { font-weight: 500; color: var(--oker-donker); }
.materials__caption span { color: var(--beton); }
@media (min-width: 760px) {
  .materials__drawing { margin: 0; border: 1px solid var(--grafiet); outline: 1px solid var(--grafiet); outline-offset: 5px; }
  .section-cut { padding: 24px 20px 4px; }
  .materials__caption { padding: 10px 16px; }
}
@media (min-width: 1024px) {
  .materials { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .materials__drawing { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* lijnwerk van de doorsnede */
.section-cut .sc-hatch { stroke: var(--grafiet); stroke-width: 1; }
.section-cut .sc-hatch--soft { stroke: var(--lijn-sterk); stroke-width: 1; }
.section-cut .sc-dot { fill: var(--grafiet); }
.section-cut .sc-wave { fill: none; stroke: var(--grafiet); stroke-width: .9; }
.section-cut .sc-soil { stroke: none; }
.section-cut .sc-line { fill: none; stroke: var(--grafiet); stroke-width: 1.8; }
.section-cut .sc-thin { fill: none; stroke: var(--grafiet); stroke-width: 1; }
.section-cut .sc-cut { stroke: var(--grafiet); stroke-width: 1.6; }
.section-cut .sc-fill-light { fill: var(--kalk-2); }
.section-cut .sc-break { fill: none; stroke: var(--grafiet); stroke-width: 1; }
.section-cut .sc-steel { fill: var(--grafiet); }
.section-cut .sc-pipes circle { fill: var(--oker); stroke: var(--grafiet); stroke-width: 1; }
.section-cut .sc-render { stroke: var(--grafiet); stroke-width: 3; }
.section-cut .sc-glass { fill: none; stroke: var(--beton); stroke-width: 1; }
.section-cut .sc-tiles { fill: none; stroke: var(--grafiet); stroke-width: 4; stroke-dasharray: 2 4; }
.section-cut .sc-gap { fill: var(--papier); stroke: none; }
.section-cut .sc-ray path { fill: none; stroke: var(--oker-donker); stroke-width: 1.1; stroke-dasharray: 3 5; }
.section-cut .sc-solid { fill: var(--grafiet); }
.section-cut .sc-dim { fill: none; stroke: var(--grafiet); stroke-width: 1; }
.section-cut .sc-dim-bg { fill: var(--papier); }
.section-cut .sc-text { font-size: 11px; font-weight: 500; letter-spacing: .08em; fill: var(--grafiet); }
.section-cut .sc-text--muted { fill: var(--beton); }
.section-cut .sc-leader { fill: none; stroke: var(--grafiet); stroke-width: .9; }
.section-cut .sc-co rect { fill: var(--papier); stroke: var(--grafiet); stroke-width: 1.4; transition: fill .2s var(--ease); }
.section-cut .sc-co text { font-size: 11.5px; font-weight: 500; text-anchor: middle; fill: var(--grafiet); }
.section-cut .sc-co rect, .section-cut .sc-co text { transform-box: fill-box; transform-origin: center; }
/* op een smal scherm: grotere nummers en labels, anders worden ze 6px klein */
@media (max-width: 599px) {
  .section-cut .sc-text { font-size: 17px; }
  .section-cut .sc-co rect { transform: scale(1.55); }
  .section-cut .sc-co text { font-size: 17px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .materials__drawing .section-cut .sc-text, .materials__drawing .section-cut .sc-co text { font-size: 12.2px; }
}

/* materiaalstaat */
.mat { border-top: 1.5px solid var(--grafiet); }
.mat__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 2px 16px;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--lijn-sterk);
  transition: background-color .2s var(--ease);
}
.mat__no {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 28px; height: 28px; margin-top: 1px;
  border: 1.5px solid var(--grafiet);
  font-family: var(--f-mono); font-weight: 500; font-size: .75rem;
  transition: background-color .2s var(--ease);
}
.mat__name { font-weight: 680; font-size: 1.0625rem; line-height: 1.35; }
.mat__text { color: var(--beton); font-size: var(--fs-small); }
@media (min-width: 640px) and (max-width: 1023px) {
  .mat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
}
/* aanwijzen in de lijst laat het nummer in de tekening oplichten (en andersom) */
@media (hover: hover) {
  .mat__item:hover .mat__no { background: var(--oker); }
  .materials:has(.mat__item[data-n="1"]:hover) .sc-co[data-n="1"] rect,
  .materials:has(.mat__item[data-n="2"]:hover) .sc-co[data-n="2"] rect,
  .materials:has(.mat__item[data-n="3"]:hover) .sc-co[data-n="3"] rect,
  .materials:has(.mat__item[data-n="4"]:hover) .sc-co[data-n="4"] rect,
  .materials:has(.mat__item[data-n="5"]:hover) .sc-co[data-n="5"] rect,
  .materials:has(.mat__item[data-n="6"]:hover) .sc-co[data-n="6"] rect,
  .materials:has(.mat__item[data-n="7"]:hover) .sc-co[data-n="7"] rect,
  .materials:has(.mat__item[data-n="8"]:hover) .sc-co[data-n="8"] rect { fill: var(--oker); }
}

/* =========================================================================
   05 · Projectverloop: bouwplanning per week (signatuur van deze site)
   ========================================================================= */
.gantt { --phase-w: 100%; --weeks: 14; --col: calc(100% / var(--weeks)); }
.gantt__scale { position: relative; }
.gantt__corner { display: none; }
.gantt__axis { display: grid; gap: 10px; }
.gantt__dims { display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); }
.gantt__dims .dim { grid-column: var(--s) / var(--e); }
.gantt__dims .dim__label { font-size: .625rem; padding: 0 6px; }
.gantt__more { display: none; }
.gantt__weeks {
  display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
  border-bottom: 1.5px solid var(--grafiet);
  font-family: var(--f-mono); font-weight: 500; font-size: .625rem; letter-spacing: .02em; color: var(--beton);
}
.gantt__weeks li { position: relative; padding: 0 0 8px; text-align: center; }
.gantt__weeks li::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 1.5px; height: 6px; background: var(--grafiet); }
.gantt__weeks li:last-child::before { content: ""; position: absolute; right: 0; bottom: -1px; width: 1.5px; height: 6px; background: var(--grafiet); }
.gantt__wk { display: none; }

.gantt__rows { counter-reset: none; }
.gantt__row { display: grid; gap: 10px; padding: 16px 0 18px; border-bottom: 1px solid var(--lijn-sterk); }
.gantt__phase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "no name when" "note note note";
  column-gap: 10px; row-gap: 4px;
  align-items: baseline;
}
.gantt__no { grid-area: no; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; color: var(--oker-donker); }
.gantt__name { grid-area: name; font-weight: 760; font-stretch: 74%; font-size: 1.5rem; line-height: 1.05; }
.gantt__when { grid-area: when; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.gantt__note { grid-area: note; color: var(--beton); font-size: var(--fs-small); line-height: 1.45; }
.gantt__name.gantt__name--small { font-family: var(--f-mono); font-weight: 500; font-stretch: 100%; font-size: var(--fs-label); letter-spacing: .07em; text-transform: uppercase; color: var(--beton); }

/* het spoor: 14 weekkolommen met haarlijnen, de balk erin */
.gantt__track {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
  align-items: center;
  min-height: 30px;
  background-image: linear-gradient(to right, var(--lijn) 1px, transparent 1px);
  background-size: var(--col) 100%;
  box-shadow: inset -1px 0 0 var(--lijn);
}
.gantt__bar {
  grid-column: var(--s) / var(--e); grid-row: 1;
  height: 16px; margin: 0 1px;
  background: var(--grafiet);
  transform-origin: left center;
}
.gantt__row--af .gantt__bar {
  background: repeating-linear-gradient(135deg, var(--grafiet) 0 1.5px, transparent 1.5px 6px), var(--kalk);
  box-shadow: inset 0 0 0 1.5px var(--grafiet);
}
.gantt__row--key .gantt__bar { background: var(--oker); box-shadow: inset 0 0 0 1.5px var(--grafiet); }
.gantt__row--key .gantt__name { color: var(--grafiet); }

/* mijlpalen (ruit aan het eind van de week) */
.gantt__row--marks { display: none; }
.gantt__mark {
  grid-column: var(--w); grid-row: 1; justify-self: end;
  position: relative; width: 12px; height: 12px; margin-right: -6px;
  background: var(--grafiet); transform: rotate(45deg);
}
.gantt__mark--key { background: var(--oker); outline: 1.5px solid var(--grafiet); }
.gantt__mark span { display: none; }

/* bouwfoto's: op mobiel als rij knoppen, op groot scherm op de tijdas */
.gantt__row--photos { border-bottom: 1.5px solid var(--grafiet); }
.gantt__row--photos .gantt__track { display: flex; flex-wrap: wrap; gap: 8px; background: none; box-shadow: none; }
.gantt__photo {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--grafiet);
  background: var(--kalk);
  font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.gantt__photo::before { content: ""; width: 12px; height: 9px; border: 1.5px solid currentColor; border-radius: 0; flex: none; }
.gantt__photo-wk { color: var(--beton); }
.gantt__photo:hover { background: var(--oker); }
.gantt__photo:hover .gantt__photo-wk { color: var(--grafiet); }

/* voet: mijlpalen + legenda */
.gantt__foot { display: grid; gap: 32px; margin-top: 28px; }
.gantt__foot-key { margin-bottom: 10px; color: var(--beton); }
.miles { border-top: 1px solid var(--lijn-sterk); }
.miles__item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--lijn-sterk); }
.miles__wk { position: relative; padding-left: 22px; font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.miles__wk::before { content: ""; position: absolute; left: 1px; top: .3em; width: 9px; height: 9px; background: var(--grafiet); transform: rotate(45deg); }
.miles__item--key .miles__wk::before { background: var(--oker); outline: 1.5px solid var(--grafiet); }
.miles__text { font-weight: 560; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; font-size: var(--fs-small); }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend li:last-child { grid-column: 1 / -1; }
.legend__sw { flex: none; width: 28px; height: 12px; background: var(--grafiet); }
.legend__sw--af { background: repeating-linear-gradient(135deg, var(--grafiet) 0 1.5px, transparent 1.5px 6px), var(--kalk); box-shadow: inset 0 0 0 1.5px var(--grafiet); }
.legend__sw--key { background: var(--oker); box-shadow: inset 0 0 0 1.5px var(--grafiet); }
.legend__sw--mark { width: 10px; height: 10px; margin: 0 9px; transform: rotate(45deg); }
.legend__sw--photo { width: 28px; height: 20px; background: var(--kalk); border: 1.5px solid var(--grafiet); }
.gantt__note-foot { margin-top: 16px; color: var(--beton); font-size: var(--fs-small); max-width: 34em; }

/* tablet en groter: fasekolom links, tijdas rechts */
@media (min-width: 760px) {
  .gantt { --phase-w: clamp(220px, 27%, 360px); }
  .gantt__scale { display: grid; grid-template-columns: var(--phase-w) minmax(0, 1fr); column-gap: 0; }
  .gantt__corner { display: block; align-self: end; padding-bottom: 8px; color: var(--beton); border-bottom: 1.5px solid var(--grafiet); }
  .gantt__axis { gap: 12px; }
  .gantt__dims .dim__label { font-size: .6875rem; padding: 0 10px; }
  .gantt__more { display: inline; }
  .gantt__weeks { font-size: .6875rem; }
  .gantt__weeks li { padding-bottom: 10px; }
  .gantt__wk { display: inline; }
  .gantt__row {
    grid-template-columns: var(--phase-w) minmax(0, 1fr);
    gap: 0;
    padding: 0;
  }
  .gantt__phase {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "no name" ". when" ". note";
    align-content: center;
    padding: 18px 24px 18px 0;
  }
  .gantt__when { color: var(--oker-donker); margin-top: 2px; }
  .gantt__note { font-size: .875rem; max-width: 26em; }
  .gantt__track { min-height: 100%; }
  .gantt__bar { height: 22px; }
  .gantt__row--marks { display: grid; }
  .gantt__row--marks .gantt__phase, .gantt__row--photos .gantt__phase { padding-block: 0; }
  .gantt__row--marks .gantt__track { min-height: 52px; }
  .gantt__row--photos .gantt__track { padding: 14px 0 14px 0; min-height: 0; }
  .gantt__foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); margin-top: 36px; }
  .legend { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .gantt__name { font-size: 1.75rem; }
  .gantt__phase { padding-block: 22px; }
  .gantt__bar { height: 26px; }
  /* rij-hover: de hele fase licht op */
  .gantt__rows .gantt__row { transition: background-color .25s var(--ease); }
  .gantt__rows .gantt__row:hover { background: var(--papier); }
  .gantt__rows .gantt__row:hover .gantt__bar { box-shadow: inset 0 0 0 1.5px var(--grafiet), 0 0 0 3px var(--kalk), 0 0 0 4.5px var(--grafiet); }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* weeknummer onder elke mijlpaal */
  .gantt__mark span {
    display: block; position: absolute; left: 50%; top: 50%;
    transform-origin: 0 0; transform: rotate(-45deg) translate(-50%, 12px);
    font-family: var(--f-mono); font-weight: 500; font-size: .625rem; letter-spacing: .04em; color: var(--beton);
    white-space: nowrap;
  }
  .gantt__row--marks .gantt__track { min-height: 60px; align-items: start; padding-top: 14px; }
  /* bouwfoto's op de tijdas, in het midden van hun week */
  .gantt__row--photos .gantt__track {
    display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
    padding: 0;
    background-image: linear-gradient(to right, var(--lijn) 1px, transparent 1px);
    background-size: var(--col) 100%;
    box-shadow: inset -1px 0 0 var(--lijn);
    min-height: 76px;
    gap: 0;  /* geen flex-gap van mobiel: kolommen vallen op de weeklijnen en elke knop blijft ≥ 44px breed */
  }
  .gantt__row--photos li { grid-column: var(--w); grid-row: 1; display: flex; justify-content: center; padding: 0 2px; position: relative; z-index: 1; }
  .gantt__photo { flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-width: 44px; max-width: 52px; min-height: 52px; padding: 0; font-size: .625rem; }
  .gantt__photo::before { display: none; }
  .gantt__photo-wk { font-size: .5625rem; }
}

/* balken tekenen in van links naar rechts (alleen met JS en zonder reduced motion) */
.reveal-ready .gantt .gantt__bar { transform: scaleX(0); transition: transform .9s var(--ease-io); transition-delay: calc(200ms + var(--n, 0) * 110ms); }
.reveal-ready .gantt.is-in .gantt__bar { transform: none; }
.reveal-ready .gantt .gantt__mark { opacity: 0; transition: opacity .4s var(--ease) 1s; }
.reveal-ready .gantt.is-in .gantt__mark { opacity: 1; }

/* =========================================================================
   06 · Eindresultaat
   ========================================================================= */
.case-result__media { aspect-ratio: 4 / 5; }
.case-result__media img { object-position: 50% 55%; }
.case-result__tag { left: 0; top: 0; }
.case-result__grid { display: grid; gap: 36px; }
.case-result__title { max-width: 9ch; }
.case-result__prose { margin-top: 24px; }
.case-result__note { margin-top: 22px; color: var(--beton); }
.done { margin-top: 28px; border-top: 1.5px solid var(--grafiet); }
.done li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lijn-sterk);
  font-weight: 600;
}
.done li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px;
  background: var(--oker) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%231B1C1E' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat;
}
@media (min-width: 760px) {
  .case-result__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 112px); align-items: end; }
  .case-result__media { aspect-ratio: 2 / 3; }
}

/* =========================================================================
   07 · Volgend project
   ========================================================================= */
.next-sheet {
  position: relative;
  display: grid;
  color: inherit; text-decoration: none;
  background: var(--kalk);
  border: 1px solid var(--grafiet);
}
.next-sheet__media { position: relative; order: -1; aspect-ratio: 16 / 9; overflow: hidden; background: var(--kalk-2); border-bottom: 1px solid var(--grafiet); }
.next-sheet__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.next-sheet__tag { left: 0; bottom: 0; }
.next-sheet__media--plan { display: grid; place-items: center; aspect-ratio: auto; padding: 20px 20px 44px; background: var(--papier); }
.next-plan { width: min(100%, 420px); height: auto; font-family: var(--f-mono); transition: transform .8s var(--ease); }
.np-wall { fill: none; stroke: var(--grafiet); stroke-width: 9; }
.np-in { stroke-width: 6; }
.np-gone { fill: none; stroke: var(--oker-donker); stroke-width: 1.5; stroke-dasharray: 5 4; }
.np-beam { fill: var(--oker); stroke: var(--grafiet); stroke-width: 1.5; }
.np-door { fill: none; stroke: var(--grafiet); stroke-width: 1.4; }
.np-t { font-size: 17px; font-weight: 500; letter-spacing: .06em; fill: var(--grafiet); }
.np-t--accent { fill: var(--oker-donker); }
@media (max-width: 479px) { .np-t { font-size: 19px; letter-spacing: .03em; } }  /* ≥ 9px op 360 */
.next-sheet:hover .next-plan { transform: scale(1.03); }
.next-sheet__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 18px 24px; }
.next-sheet__body::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: var(--oker);
  transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease);
}
.next-sheet__no { color: var(--oker-donker); }
.next-sheet__title { font-weight: 780; font-stretch: 66%; font-size: var(--fs-h2); line-height: .94; letter-spacing: -.012em; text-wrap: balance; }
.next-sheet__meta { color: var(--beton); max-width: 34em; }
.next-sheet__more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px;
  font-weight: 650; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: var(--lijn-sterk);
}
.next-sheet__more .i-arrow { transition: transform .25s var(--ease); }
.next-sheet:hover .next-sheet__media img, .next-sheet:focus-visible .next-sheet__media img { transform: scale(1.035); }
.next-sheet:hover .next-sheet__body::before, .next-sheet:focus-visible .next-sheet__body::before { transform: scaleX(1); }
.next-sheet:hover .next-sheet__more { color: var(--oker-donker); text-decoration-color: currentColor; }
.next-sheet:hover .next-sheet__more .i-arrow { transform: translateX(4px); }
.next-sheet:focus-visible { outline-offset: 5px; }
@media (min-width: 900px) {
  .next-sheet { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .next-sheet__media { order: 0; aspect-ratio: auto; min-height: 360px; border-bottom: 0; border-left: 1px solid var(--grafiet); }
  .next-sheet__body { padding: clamp(28px, 3vw, 48px); gap: 16px; }
  .next-sheet__more { margin-top: auto; }
}
.case-next__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 20px; color: var(--beton); }
.case-next__more .link-arrow { color: var(--grafiet); }

/* =========================================================================
   Print / forced colors
   ========================================================================= */
@media (forced-colors: active) {
  .gantt__bar, .gantt__mark, .legend__sw, .case-tb__sheet, .done li::before { forced-color-adjust: none; }
  .gantt__photo, .mat__no { border-color: CanvasText; }
}
@media print {
  .gantt__bar { transform: none !important; }
  .case-situation__fig, .materials__drawing { position: static; }
}