/* Groenhart — Tuinontwerp (salespagina). Gedeelde componenten staan in style.css.
   Paginaklassen beginnen met .to- ; extra tekenklassen voor het tuinplan staan onder 3. */

/* --------------------------------------------------------------------------
   1. Hero met titelblok
   -------------------------------------------------------------------------- */
.to-hero { min-height: min(calc(100svh - 36px), 940px); }
.to-hero .hero__media img { object-position: 50% 40%; }
.to-hero__inner { justify-content: flex-end; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.to-hero__text { max-width: 52rem; }
.to-hero__title { max-width: 15ch; }
.to-hero .hero__lead { max-width: 44ch; }

/* Open strook zoals de legenda in de home-hero: geen kaders, geen tussenlijnen */
.to-titleblock {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap);
  border-top: 1px solid rgba(236, 231, 219, .3);
}
.to-titleblock > div { padding-top: .95rem; display: grid; gap: .2rem; align-content: start; }
.to-titleblock dt {
  font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mos-licht);
}
.to-titleblock dd { font-size: var(--fs-small); line-height: 1.4; color: rgba(236, 231, 219, .9); }
@media (min-width: 900px) and (max-width: 1199px) {
  .to-titleblock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .to-titleblock > div:first-child { display: none; }
}
@media (max-width: 899px) {
  .to-titleblock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .to-titleblock > div { padding: .8rem 0; border-bottom: 1px solid rgba(236, 231, 219, .16); }
  .to-titleblock > div:first-child { display: none; }
  .to-titleblock > div:nth-child(4), .to-titleblock > div:nth-child(5) { border-bottom: 0; }
}
@media (max-width: 599px) {
  .to-hero::before {
    background: linear-gradient(180deg, rgba(16, 26, 20, .55) 0%, rgba(16, 26, 20, .1) 22%, rgba(16, 26, 20, .45) 40%, rgba(16, 26, 20, .86) 60%, rgba(16, 26, 20, .95) 100%);
  }
  .to-hero__inner { padding-bottom: 1.5rem; }
  .to-hero__title { max-width: none; }
  .to-hero .hero__actions .btn { width: 100%; }
  .to-hero .hero__lead { font-size: 1.22rem; }
  .to-titleblock dd { font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   2. Waarom eerst tekenen
   -------------------------------------------------------------------------- */
.to-why__grid { display: grid; gap: var(--space-xl) var(--gap); }
.to-why__head { display: grid; gap: var(--space-m); justify-items: start; }
.to-why__title { font-size: clamp(2.15rem, 1.35rem + 3vw, 4.25rem); font-weight: 300; line-height: 1.04; letter-spacing: -.024em; max-width: 15ch; }
.to-why__sub { color: var(--kiezel); max-width: 44ch; }

.to-reasons { display: grid; border-top: 1px solid var(--steen-lijn); }
.to-reason {
  display: grid; grid-template-columns: clamp(3.5rem, 2.6rem + 3vw, 6rem) minmax(0, 1fr);
  grid-template-areas: "n title" "n text";
  gap: .5rem var(--gap); padding: var(--space-l) 0; border-bottom: 1px solid var(--steen-lijn);
}
.to-reason__n {
  grid-area: n; font-family: var(--serif); font-optical-sizing: auto; font-weight: 200;
  font-size: clamp(3.75rem, 2.6rem + 4.4vw, 7rem); line-height: .78; letter-spacing: -.04em; color: var(--mos);
  font-variant-numeric: lining-nums;
}
.to-reason__title { grid-area: title; font-size: var(--fs-h3); }
.to-reason p { grid-area: text; color: var(--kiezel); max-width: 46ch; }

.to-why__photo .media { aspect-ratio: 3 / 2; }
.to-why__aside { display: grid; gap: .6rem; justify-items: start; padding-top: var(--space-m); border-top: 1px solid var(--steen-lijn); max-width: 40ch; }
.to-why__aside-title { font-family: var(--serif); font-size: 1.45rem; font-weight: 380; line-height: 1.2; }
.to-why__aside p:not(.to-why__aside-title) { color: var(--kiezel); }

@media (min-width: 960px) {
  .to-why__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; row-gap: var(--space-xl); align-items: start; }
  .to-why__head { grid-column: 1 / span 6; grid-row: 1; }
  .to-why__photo { grid-column: 1 / span 6; grid-row: 2 / span 2; margin-top: var(--space-m); }
  .to-reasons { grid-column: 8 / -1; grid-row: 1 / span 2; margin-top: .35rem; }
  .to-reason { grid-template-columns: 6rem minmax(0, 1fr); padding: 2.25rem 0 2.5rem; }
  .to-why__aside { grid-column: 8 / -1; grid-row: 3; align-self: end; }
}

/* --------------------------------------------------------------------------
   3. Zeven stappen met tuinplan dat laag voor laag opbouwt
   -------------------------------------------------------------------------- */
/* Extra tekenklassen (aanvulling op de plan-klassen in style.css) */
.plan-shape { fill: var(--linnen-licht); stroke: var(--bos); stroke-width: 1.2; }
.plan-klinker { fill: url(#plan-klinker); stroke: var(--bos); stroke-width: 1.2; }
.plan-edge { fill: none; stroke: var(--bos); stroke-width: 2.6; }
.plan-stone { fill: var(--steen); stroke: var(--bos); stroke-width: 1; }
.plan-tree--old { stroke-dasharray: 6 4; }
.plan-tag rect { fill: var(--linnen-licht); stroke: var(--bos); stroke-width: 1.1; }
.plan-tag text { fill: var(--bos-diep); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }
.plan-pin { fill: var(--mos); stroke: var(--linnen-licht); stroke-width: 2; }
.plan-pin-text { fill: var(--linnen-licht); font-size: 11px; font-weight: 700; }
.plan-dim { fill: none; stroke: var(--kiezel); stroke-width: .9; }
.plan-dim-text { fill: var(--kiezel); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.plan-level { fill: none; stroke: var(--kiezel); stroke-width: 1; }
.plan-zone { fill: rgba(86, 101, 58, .07); stroke: var(--mos); stroke-width: 1.3; stroke-dasharray: 6 5; }
.plan-zone--band { fill: none; stroke: rgba(86, 101, 58, .16); stroke-width: 26; stroke-linecap: round; stroke-dasharray: none; }
.plan-zone-text { fill: var(--mos); font-size: 13px; font-weight: 600; letter-spacing: .06em; }

/* Overzichtstekening: alle tekst ≥ 9px op het scherm (viewBox is 720 breed).
   600–959px: volle breedte, schaal 0,83–1,33. Codes iets groter, en tot 679px ook de kleine notities. */
@media (min-width: 600px) and (max-width: 959px) {
  .to-plan__svg .plan-code { font-size: 12.5px; letter-spacing: 0; }
  .to-plan__svg .plan-tag text { font-size: 11px; letter-spacing: .02em; }
}
@media (min-width: 600px) and (max-width: 679px) {
  .to-plan__svg :is(.plan-note, .plan-dim-text) { font-size: 11px; letter-spacing: .02em; }
}
/* 960–1279px: sticky in 7 van 12 kolommen, schaal 0,69 (960) tot 0,93 → alle tekst 13,5 eenheden (≥ 9,3px).
   Pinnen, materiaalvakjes en de vlakjes achter notities groeien mee; de uitsneden (<use>) blijven ongemoeid. */
@media (min-width: 960px) and (max-width: 1279px) {
  .to-plan__svg :is(.plan-label, .plan-note, .plan-dim-text, .plan-zone-text, .plan-pin-text, .plan-tag text, text.plan-size) { font-size: 13.5px; letter-spacing: .03em; }
  .to-plan__svg .plan-code { font-size: 13.5px; letter-spacing: 0; transform: translateY(1.2px); }
  .to-plan__svg .plan-pin-text { transform: translateY(1px); }
  .to-plan__svg .plan-tag text { transform: translateY(1.2px); }
  .to-plan__svg circle.plan-fill { r: 12.5px; }
  .to-plan__svg circle.plan-pin { r: 12.5px; }
  .to-plan__svg :is(.plan-tag rect, rect:has(+ text.plan-note)) { transform-box: fill-box; transform-origin: center; transform: scale(1.3, 1.25); }
  .to-plan__svg rect:has(+ text.plan-label) { transform-box: fill-box; transform-origin: center; transform: scale(1.15, 1.15); }
}
/* Vanaf 1280px: de sticky tekening wordt begrensd door de hoogte (1280×720: schaal 0,82) of de kolom (1280–1439: 0,93) */
@media (min-width: 1280px) and (max-width: 1439px), (min-width: 1280px) and (max-height: 899px) {
  .to-plan__svg :is(.plan-label, .plan-note, .plan-dim-text, .plan-pin-text, .plan-tag text) { font-size: 11.5px; letter-spacing: .04em; }
  .to-plan__svg .plan-code { font-size: 11.5px; letter-spacing: 0; transform: translateY(.5px); }
  .to-plan__svg .plan-tag text { transform: translateY(.6px); }
}
/* Telefoon: de hele tekening staat hier op ca. 54% van zijn maat. De kleine codes, maten en notities
   zouden 5px worden; die staan leesbaar in de uitsnede bij elke stap. Het overzicht houdt de vormen,
   de vier hoofdnamen en de genummerde wensen, groter gezet. (Selectors raken alleen het overzicht,
   niet de uitsneden met <use>.) */
.to-plan__mnote { display: none; }
@media (max-width: 599px) {
  .to-plan__svg :is(.plan-code, .plan-note, .plan-tag, .plan-dim, .plan-dim-text, .plan-zone-text, text.plan-size),
  .to-plan__svg rect:has(+ text.plan-note) { display: none; }
  .to-plan__svg .plan-label { font-size: 17px; letter-spacing: .06em; }
  .to-plan__svg rect:has(+ text.plan-label) { transform-box: fill-box; transform-origin: center; transform: scale(1.5, 1.3); }
  .to-plan__svg circle.plan-pin { r: 15px; }
  .to-plan__svg .plan-pin-text { font-size: 17px; transform: translateY(2px); }
  .to-plan__mnote { display: block; padding: .7rem var(--pad) 0; font-size: var(--fs-xs); color: var(--kiezel); }
}
/* Smalste telefoons (360–389px): schaal 0,5 → namen en pinnummers 18,5 eenheden (≥ 9,2px) */
@media (max-width: 389px) {
  .to-plan__svg .plan-label { font-size: 18.5px; letter-spacing: .05em; }
  .to-plan__svg rect:has(+ text.plan-label) { transform: scale(1.62, 1.4); }
  .to-plan__svg circle.plan-pin { r: 16px; }
  .to-plan__svg .plan-pin-text { font-size: 18.5px; }
}

/* Zonder JS en bij reduced motion: alle lagen zichtbaar, schetszones verborgen */
.plan-zones { display: none; }
.plan-live .plan-zones { display: inline; opacity: 0; transition: opacity .6s var(--ease); }
.plan-live .to-plan__svg[data-stage="2"] .plan-zones { opacity: 1; }
.plan-live .to-plan__svg [data-layer] { transition: opacity .7s var(--ease); }
.plan-live .to-plan__svg [data-layer].is-off { opacity: 0; }

.to-flow { display: grid; gap: var(--space-l) var(--gap); }
.to-plan { margin: 0; }
.to-plan__sheet { box-shadow: 0 1px 0 rgba(23, 33, 27, .04), 0 22px 40px -32px rgba(23, 33, 27, .35); }
.to-plan__phase { color: var(--bos); }

.to-layers { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .9rem; font-size: var(--fs-xs); font-weight: 600; color: var(--inkt); }
.to-layers li { display: inline-flex; align-items: center; gap: .5rem; transition: color var(--t) var(--ease); }
.to-layers svg { width: 22px; height: 16px; flex: none; overflow: visible; transition: opacity var(--t) var(--ease); }
.plan-live .to-layers li.is-off { color: var(--kiezel); font-weight: 500; }
.plan-live .to-layers li.is-off svg { opacity: .35; }

.to-steps { counter-reset: none; }
.to-step { position: relative; display: grid; gap: var(--space-m); align-content: center; padding: var(--space-xl) 0; border-top: 1px solid var(--steen-lijn); }
.to-step:first-child { border-top: 0; padding-top: 0; }
.to-step__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.to-step__num {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 340; line-height: 1; color: var(--bos);
  transition: color var(--t) var(--ease);
}
.to-step__of { font-family: var(--sans); font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--kiezel); margin-left: .2rem; }
.to-step__layer {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos);
}
.to-step__layer::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.to-step__title { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem); font-weight: 320; line-height: 1.08; letter-spacing: -.016em; }
.to-step__body { display: grid; gap: .9rem; max-width: 48ch; }
.to-step__small { font-size: var(--fs-small); color: var(--kiezel); max-width: 48ch; }
.to-step__note { font-size: 1.3rem; max-width: 34ch; }
.to-step__list { max-width: 44ch; }
.to-step__photo .media { aspect-ratio: 3 / 2; }
.to-step > .link-arrow { justify-self: start; }

/* Actieve stap (alleen met JS): kantlijn en nummer kleuren mee */
.to-step::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1rem, 2.5vw, 2.25rem)); top: var(--space-xl); bottom: var(--space-xl);
  width: 2px; background: var(--mos); transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease);
}
.to-step:first-child::before { top: 0; }
.plan-live .to-step.is-active::before { transform: scaleY(1); }
.plan-live .to-step.is-active .to-step__num { color: var(--mos); }

/* Wensen met genummerde punten (zelfde punten als op de tekening) */
.to-wishes { display: grid; border-top: 1px solid var(--steen-lijn); max-width: 44ch; }
.to-wishes li { display: flex; align-items: center; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--steen-lijn); font-weight: 500; }
.to-pin {
  flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--mos); color: var(--linnen-licht); font-size: .78rem; font-weight: 700; line-height: 1;
}

/* Plantlijst met codes van de tekening */
.to-plants { max-width: 52ch; }
.to-plants li { grid-template-columns: 2.4rem minmax(0, 1fr) auto; column-gap: .9rem; }
.to-plants .latin { grid-column: 2; }
.to-plants .plant-list__sci { grid-column: 2; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
.to-plants .plant-list__sci .latin { font-size: inherit; }
.to-plants .plant-list__nl { grid-column: 2; }
.to-plants .plant-list__when { grid-column: 3; text-align: right; max-width: 9rem; }
.to-code {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--bos); background: var(--linnen-licht);
  font-size: .72rem; font-weight: 700; font-stretch: 85%; letter-spacing: .04em; color: var(--bos-diep);
}

@media (min-width: 960px) {
  .to-flow { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .to-plan {
    grid-column: 1 / span 7; position: sticky; top: calc(var(--header-h) + 1.5rem);
    width: 100%; max-width: calc((100svh - var(--header-h) - 9.5rem) * 1.21);
  }
  .to-steps { grid-column: 9 / -1; }
  .to-step { min-height: 60vh; padding: var(--space-2xl) 0; }
  .to-step:first-child { min-height: 0; padding-top: .25rem; padding-bottom: var(--space-2xl); align-content: start; }
  .to-step--last { min-height: 0; }
}

/* Mobiel en tablet: de hele tekening één keer op volle breedte, en bij elke stap een
   leesbare uitsnede van precies het deel dat erbij komt (geen kleine sticky tekening meer). */
.to-crop { display: none; }
@media (max-width: 959px) {
  .to-plan { margin-inline: calc(-1 * var(--pad)); }
  .to-plan__sheet { border-inline: 0; box-shadow: none; }
  .to-plan .sheet__title { padding: .55rem var(--pad); }
  .to-layers { padding-inline: var(--pad); }
  .to-step { padding: var(--space-xl) 0; }
  .to-step:first-child { padding-top: var(--space-xl); border-top: 1px solid var(--steen-lijn); }
  .to-crop {
    display: grid; margin: 0; background: var(--linnen-licht); border: 1px solid var(--steen-lijn);
  }
  .to-crop svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Tussen-CTA (bosgroen)
   -------------------------------------------------------------------------- */
.to-cta { background: var(--bos); color: var(--tekst-licht); padding-block: clamp(4rem, 2.8rem + 5vw, 7.5rem); }
.to-cta__grid { display: grid; gap: var(--space-l) var(--gap); }
.to-cta__label { color: var(--mos-licht); }
.to-cta__title { font-size: clamp(2.1rem, 1.3rem + 3vw, 4rem); font-weight: 300; line-height: 1.04; letter-spacing: -.022em; max-width: 17ch; }
.to-cta__body { display: grid; gap: var(--space-l); align-content: end; }
.to-cta__body p { color: rgba(236, 231, 219, .86); max-width: 44ch; }
@media (min-width: 960px) {
  .to-cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .to-cta__label { grid-column: 1 / -1; }
  .to-cta__title { grid-column: 1 / span 7; }
  .to-cta__body { grid-column: 8 / -1; padding-bottom: .4rem; }
}
@media (max-width: 599px) {
  .to-cta .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   4. Wat je krijgt: tekeningenset
   -------------------------------------------------------------------------- */
.to-set__grid { display: grid; gap: var(--space-xl) var(--gap); }

/* De drie bladen naast elkaar, als tekeningen (geen stapel papier) */
.to-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.to-thumb {
  display: grid; background: var(--linnen-licht); border: 1px solid var(--steen-lijn);
  transition: border-color var(--t-fast);
}
.to-thumb svg { width: 100%; height: auto; }
/* Onderschrift van een uitsnede of blad: dezelfde legendaregel als .sheet__title (boomsymbool + Newsreader), geen kapitalen */
.to-crop__cap, .to-thumb__cap {
  display: flex; align-items: baseline; gap: .5rem; min-width: 0;
  border-top: 1px dotted var(--lijn-sterk);
  font-family: var(--serif); font-weight: 380; letter-spacing: 0; line-height: 1.35; color: var(--inkt);
}
.to-crop__cap::before, .to-thumb__cap::before {
  content: ""; flex: none; align-self: center; width: .72rem; height: .72rem; border-radius: 50%;
  border: 1px solid var(--bos); background: radial-gradient(circle, var(--bos) 0 1.5px, transparent 2.1px);
}
@media (forced-colors: active) { .to-crop__cap::before, .to-thumb__cap::before { border-color: CanvasText; background: none; } }
.to-crop__cap { padding: .6rem .8rem .65rem; font-size: 1rem; }
.to-thumb__cap { padding: .5rem .6rem .55rem; font-size: .9375rem; white-space: nowrap; }
.to-thumb__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.to-thumb__name { display: none; }
@media (min-width: 960px) { .to-thumb__name { display: inline; } }

.to-table { width: 100%; border-collapse: collapse; text-align: left; }
.to-table thead th {
  padding: 0 1rem .7rem 0; border-bottom: 1px solid var(--lijn-sterk);
  font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--kiezel);
}
.to-table tbody tr { border-bottom: 1px solid var(--steen-lijn); transition: background-color var(--t-fast); }
.to-table tbody th, .to-table td { padding: 1.15rem 1rem 1.15rem 0; vertical-align: baseline; }
.to-table tbody th {
  white-space: nowrap; font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos);
}
.to-table__name { font-family: var(--serif); font-size: clamp(1.2rem, 1.08rem + .45vw, 1.45rem); font-weight: 380; line-height: 1.25; letter-spacing: -.008em; }
.to-table__what { color: var(--kiezel); font-size: var(--fs-small); max-width: 44ch; }
.to-table__scale { white-space: nowrap; font-size: var(--fs-small); font-weight: 600; color: var(--inkt); padding-right: 0 !important; text-align: right; }
.to-table thead th:last-child { text-align: right; padding-right: 0; }

@media (min-width: 960px) {
  .to-set__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .to-stack { grid-column: 1 / -1; gap: var(--gap); }
  .to-set__more { grid-column: 4 / -1; }
  /* Rij aanwijzen = het blad erboven krijgt een donkere rand (zonder JS) */
  .to-set__grid:has(tr[data-sheet="1"]:hover) .to-thumb[data-sheet="1"],
  .to-set__grid:has(tr[data-sheet="2"]:hover) .to-thumb[data-sheet="2"],
  .to-set__grid:has(tr[data-sheet="3"]:hover) .to-thumb[data-sheet="3"] { border-color: var(--bos); }
  .to-table tbody tr:hover { background: rgba(247, 244, 238, .7); }
}

/* Smalle schermen: tabel wordt een lijst van rijen */
@media (max-width: 699px) {
  .to-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .to-table, .to-table tbody { display: block; }
  .to-table tbody { border-top: 1px solid var(--lijn-sterk); }
  .to-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "blad scale" "name name" "what what";
    gap: .25rem 1rem; padding: 1.05rem 0;
  }
  .to-table tbody th, .to-table td { padding: 0; }
  .to-table tbody th { grid-area: blad; }
  .to-table__name { grid-area: name; }
  .to-table__what { grid-area: what; }
  .to-table__scale { grid-area: scale; font-size: var(--fs-xs); color: var(--kiezel); }
}

/* --------------------------------------------------------------------------
   5. Materialen: collage op donker + staalkaart
   -------------------------------------------------------------------------- */
.to-mat__grid { display: grid; gap: var(--space-l) var(--gap); }
.to-mat__a .media, .to-mat__b .media, .to-mat__c .media { aspect-ratio: 3 / 2; }
.to-mat__b { width: 84%; justify-self: end; }
.to-mat__note { max-width: 30ch; color: var(--tekst-licht); }

.to-swatches { margin-top: var(--space-2xl); display: grid; gap: var(--space-m); }
.to-swatch-list { display: grid; border-top: 1px solid var(--lijn-donker); }
.to-swatch {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "chip code" "chip name" "chip text";
  column-gap: 1rem; row-gap: .1rem; padding: 1rem 0; border-bottom: 1px solid var(--lijn-donker); align-items: start; align-content: start;
}
.to-swatch__chip { grid-area: chip; width: 56px; height: 56px; outline: 1px solid rgba(236, 231, 219, .4); }
.to-swatch__code { grid-area: code; font-size: var(--fs-label); font-weight: 700; font-stretch: 85%; letter-spacing: .16em; color: var(--mos-licht); }
.to-swatch__name { grid-area: name; font-family: var(--serif); font-size: 1.3rem; font-weight: 360; line-height: 1.2; color: var(--tekst-licht); }
.to-swatch__text { grid-area: text; font-size: var(--fs-small); color: var(--mist); max-width: 40ch; margin-top: .2rem; }

@media (min-width: 700px) and (max-width: 1099px) {
  .to-swatch-list { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
}
@media (min-width: 960px) {
  .to-mat__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-xl); align-items: start; }
  .to-mat__a { grid-column: 1 / span 7; grid-row: 1; }
  .to-mat__a .media { aspect-ratio: 4 / 3; }
  .to-mat__b { grid-column: 9 / -1; grid-row: 1; width: auto; margin-top: clamp(4rem, 8vw, 7.5rem); }
  .to-mat__b .media { aspect-ratio: 4 / 5; }
  .to-mat__b .media img { object-position: 0% 50%; }
  .to-mat__note { grid-column: 2 / span 4; grid-row: 2; align-self: center; }
  .to-mat__c { grid-column: 6 / span 6; grid-row: 2; }
}
@media (min-width: 1100px) {
  /* Staalkaart: vijf stalen naast elkaar, zoals op tafel bij de bespreking */
  .to-swatch-list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); border-top: 0; }
  .to-swatch { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chip" "code" "name" "text"; row-gap: .3rem; padding: 1.25rem 0 0; border-bottom: 0; border-top: 1px solid var(--lijn-donker); }
  .to-swatch__chip { width: 72px; height: 72px; margin-bottom: .7rem; }
  .to-swatch__code { margin-top: .1rem; }
}

/* --------------------------------------------------------------------------
   6. Prijs en tijd
   -------------------------------------------------------------------------- */
.to-price__grid { display: grid; gap: var(--space-xl) var(--gap); }
.to-price__col { display: grid; gap: 1rem; align-content: start; }
.to-price__col > p:not(.to-price__kicker) { max-width: 50ch; }
.to-price__col > p:not(.to-price__kicker):not(.to-price__tip) { color: var(--kiezel); }
.to-price__kicker {
  font-size: var(--fs-label); font-weight: 600; font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; color: var(--mos);
  padding-bottom: .7rem; border-bottom: 1px solid var(--steen-lijn);
}
.to-price__big { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; margin-bottom: .25rem; }
.to-price__list { margin-top: .5rem; }
.to-price__tip { font-size: var(--fs-small); color: var(--inkt); padding: 1rem 1.1rem; background: var(--linnen-licht); border-left: 2px solid var(--mos); margin-top: .5rem; }
.to-price__tip strong { color: var(--bos); }

/* Drie momenten: een haarlijnlijst, geen planningsbalken */
.to-moments { display: grid; margin-top: var(--space-s); border-top: 1px solid var(--lijn-sterk); }
.to-moments li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .2rem 1rem; align-items: baseline;
  padding: .95rem 0; border-bottom: 1px solid var(--steen-lijn);
}
.to-moments__when {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--serif); font-optical-sizing: auto; font-size: 1.3rem; font-weight: 340; line-height: 1.15; color: var(--bos); white-space: nowrap;
}
.to-moments__when::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-.1em);
  border: 1px solid var(--mos); background: radial-gradient(circle, var(--mos) 0 1.5px, transparent 2px);
}
.to-moments__what { color: var(--kiezel); }
@media (max-width: 420px) {
  .to-moments li { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 960px) {
  .to-price__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .to-price__col:first-child { grid-column: 4 / span 4; }
  .to-price__col:last-child { grid-column: 8 / -1; padding-left: var(--gap); border-left: 1px solid var(--steen-lijn); }
}
/* --------------------------------------------------------------------------
   Toegankelijkheid en print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .to-thumb { transition: none; }
}
@media (forced-colors: active) {
  .to-pin, .to-code { forced-color-adjust: none; }
  .to-plan__svg { forced-color-adjust: none; }
}
@media print {
  .to-plan { position: static; }
  .to-crop { display: none; }
  .to-cta { display: none; }
}


/* --------------------------------------------------------------------------
   3. Wat je krijgt: de kop staat in de titelstrook van de tekeningenset
   -------------------------------------------------------------------------- */
/* De kop is een open strook zoals de legenda: één sterke lijn erboven, geen kaders of tussenlijnen */
.to-set__frame .to-set__grid { padding: var(--space-l) 0 0; }
.to-cartouche { display: grid; gap: .8rem var(--gap); padding: 1.1rem 0 0; border-top: 1.5px solid var(--bos); }
.to-cartouche__title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem); font-weight: 300; line-height: 1.06; letter-spacing: -.02em; max-width: 18ch; }
.to-cartouche__intro { font-size: var(--fs-small); color: var(--kiezel); max-width: 44ch; }
.to-cartouche__meta { font-family: var(--serif); font-size: 1.15rem; font-weight: 380; color: var(--inkt); }
@media (min-width: 960px) {
  .to-cartouche { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .to-cartouche__label { grid-column: 1 / span 3; padding-top: .45rem; }
  .to-cartouche__title { grid-column: 4 / span 5; grid-row: 1 / span 2; }
  .to-cartouche__intro { grid-column: 9 / -1; grid-row: 1; padding-top: .45rem; }
  .to-cartouche__meta { grid-column: 9 / -1; grid-row: 2; }
  .to-set__frame .to-set__grid { padding-top: var(--space-xl); }
}

/* --------------------------------------------------------------------------
   4. Materialen: de kop staat tegen de onderrand van de eerste foto
   -------------------------------------------------------------------------- */
.to-mat__title { display: grid; gap: var(--space-m); align-content: start; }
.to-mat__title h2 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.75rem); font-weight: 300; line-height: 1.04; letter-spacing: -.024em; max-width: 13ch; }
.to-mat__intro { color: var(--mist); max-width: 46ch; }
@media (max-width: 959px) {
  /* Telefoon en tablet: eerst de foto met bijschrift, dan de kop. Geen overlap, zodat het bijschrift van M2 leesbaar blijft. */
  .to-mat__a { margin-inline: calc(-1 * var(--pad)); }
  .to-mat__a .caption { padding-inline: var(--pad); }
  .to-mat__title { position: static; margin-top: var(--space-s); padding-top: var(--space-m); border-top: 1px solid var(--lijn-donker); }
}
@media (min-width: 960px) {
  .to-mat__title {
    grid-column: 7 / -1; grid-row: 1; align-self: end; position: relative; z-index: 1;
    margin-bottom: 2.55rem; margin-left: calc(-1 * var(--gap)); background: var(--bos-diep); padding: 2rem 0 2rem 2.2rem;
  }
  .to-mat__c { grid-column: 1 / span 6; grid-row: 2; }
  .to-mat__b { grid-column: 8 / span 4; grid-row: 2; margin-top: clamp(5rem, 9vw, 9rem); }
  .to-mat__note { grid-column: 8 / -1; grid-row: 3; align-self: start; }
}

/* --------------------------------------------------------------------------
   5. Prijs en tijd: één typografische stelling als kop
   -------------------------------------------------------------------------- */
.to-price__head { display: grid; gap: var(--space-m); margin-bottom: var(--space-xl); padding-bottom: var(--space-l); border-bottom: 1px solid var(--steen-lijn); }
.to-price__statement { font-size: clamp(2rem, 1.3rem + 2.8vw, 4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; max-width: 22ch; }

/* --------------------------------------------------------------------------
   6. Slot: van tekening naar tuin
   -------------------------------------------------------------------------- */
.to-end__grid { display: grid; gap: var(--space-l) var(--gap); }
.to-end__photo .media { aspect-ratio: 3 / 2; }
.to-end__text { display: grid; gap: var(--space-m); align-content: start; justify-items: start; }
.to-end__text > p:not(.label):not(.to-end__mail) { color: var(--kiezel); max-width: 44ch; }
.to-end__title { font-size: clamp(2rem, 1.45rem + 2vw, 3.25rem); font-weight: 300; line-height: 1.05; letter-spacing: -.022em; }
.to-end__plants { display: grid; gap: .35rem; font-size: 1.1rem; }
.to-end__plants li { display: flex; align-items: center; gap: .6rem; }
.to-end__plants li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--mos); background: radial-gradient(circle, var(--mos) 0 1.2px, transparent 1.6px); }
.to-end__mail { font-size: var(--fs-small); color: var(--kiezel); padding-top: var(--space-s); border-top: 1px solid var(--steen-lijn); width: 100%; }
@media (max-width: 599px) {
  .to-end__photo { margin-inline: calc(-1 * var(--pad)); }
  .to-end__photo .caption { padding-inline: var(--pad); }
}
@media (min-width: 960px) {
  .to-end__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .to-end__photo { grid-column: 1 / span 7; }
  .to-end__text { grid-column: 9 / -1; }
}

/* "Meer over …" op de telefoon: de kop van de stalen wordt de knop */
@media (max-width: 959px) {
  .js .to-swatches.more .to-swatches__label { display: none; }
  .js .to-swatches .more__toggle { border-color: var(--lijn-donker); }
  .js .to-step__more .more__toggle { margin-top: .25rem; }
}