/* ==========================================================================
   Seronera mockup: shared components      (owner: architect, S-002)
   Hero, teaser, fact, compare, mini-timeline, image placeholder, reassurance,
   strip, close/next blocks, chapter progress, claim + variant markers, and the
   motion hooks used by assets/motion.js. Depends on tokens.css + shell.css.
   Look = index.html (hairline lists, ring glyph, dark/light bands, calm images).

   MARKUP CHEAT SHEET (copy and fill; all copy is placeholder)

   Hero     <section class="c-hero korrel">
              <div class="c-hero__media" data-settle> <div class="c-placeholder c-placeholder--fill">[PHOTO: ...]</div> </div>
              <div class="s-wrap c-hero__text">
                <p class="label">Label</p>
                <h1 class="kop1" data-lines>Heading with <em>accent</em></h1>
                <p class="intro">One line.</p>
              </div>
            </section>
            (use a real read-only image instead of the placeholder: <img src="beeld/oever.jpg" alt="...">)

   Teaser   <section class="s-section [licht|groen]"> <div class="s-wrap">
              <article class="c-tease [c-tease--flip]" data-reveal-group>
                <div class="c-tease__media"> placeholder or <img> </div>
                <div class="c-tease__body">
                  <p class="label">Eyebrow</p>
                  <h2 class="kop2">Title</h2>
                  <p>Two or three lines.</p>
                  <ul class="c-facts"> <li class="c-fact"> ... </li> </ul>
                  <a class="c-link" data-go="ethical-farming">Read more</a>   (shell.js resolves href or turns it into a non-link)
                </div>
              </article> </div> </section>

   Fact     <li class="c-fact"><b>24<small>h</small></b><span>Eggs collected within a day <span class="c-claim" data-cl="CL-07">[VERIFY]</span></span></li>

   Compare  <div class="c-compare"><figure>[placeholder 4x5]<figcaption>Belly</figcaption></figure><figure>...Back</figure></div>

   Timeline <ol class="c-minitl" data-minitl>
              <li class="c-minitl__item"><span class="c-minitl__node"></span><time>[date]</time><h3 class="kop3">Station</h3><p>Detail</p></li> ...
            </ol>

   Placeholder <div class="c-placeholder c-ratio-4x3" role="img" aria-label="Placeholder: ..."><span>[PHOTO: required shot]</span></div>
               ratios: c-ratio-4x3 | 3x2 | 4x5 | 16x9 | 1x1;  .c-placeholder--fill fills its parent

   Reassure <ul class="c-reassure"><li>Delivery from the Netherlands</li>...</ul>   (<li> text only, ring glyph is CSS)
   Strip    <div class="c-strip"><figure>img/placeholder<figcaption>factual caption</figcaption></figure>...</div>
   Close    <section class="c-close licht"> <div class="s-wrap"> <p class="label">..</p> <h2 class="kop2">..</h2> <a class="knop knop-oker" data-go="pieces">..</a> </div> </section>
   Progress <p class="c-prog" data-chapter="3" data-of="7"></p>      (dots + text filled by motion.js; chapter pages only)
   Markers  <span class="c-claim" data-cl="CL-05">[VERIFY]</span>   <span class="c-variant">VARIANT V-01 · on</span>

   Steps    <ol class="c-steps" data-steps>                       (M5 line + node fill; add c-steps--nonum to hide the 01, 02 labels)
              <li class="c-steps__item"><span class="c-steps__node" aria-hidden="true"></span>
                <div class="c-steps__body"><h3 class="c-steps__title">Station</h3><p>Two lines. <span class="c-claim" data-cl="CL-07">[VERIFY]</span></p></div>
                <figure class="c-steps__media"> <img src="..." alt="..." width="1200" height="800" loading="lazy"> <figcaption>factual caption</figcaption> </figure>   (media optional)
              </li> ... </ol>

   Pillars  <ul class="c-pillars [c-pillars--not]"> <li><b>Practice</b><span>One plain sentence.</span></li> ... </ul>
            side by side:  <div class="c-pillars-pair"> <div><p class="label">What we do not do</p><ul class="c-pillars c-pillars--not">..</ul></div> <div><p class="label">What we do instead</p><ul class="c-pillars">..</ul></div> </div>

   Gallery  <ul class="c-gallery [c-gallery--portrait] [c-gallery--dense]" data-gallery [data-lightbox="off"] data-reveal-group>
              <li class="c-gallery__item"><figure>
                <a class="c-gallery__link" href="full-size.jpg"><img src="thumb.jpg" alt="what is in the photo" width="1200" height="800" loading="lazy"><span class="s-vh">Open larger image</span></a>
                <figcaption>Factual caption, always visible <span class="c-claim" data-cl="CL-32">[VERIFY]</span></figcaption>
              </figure></li> ... </ul>
            + <script src="assets/gallery.js" defer></script>. Without JS the link opens the image file. data-lightbox="off" (variant V-09)
              turns the links into plain figures. Columns: 1 under 560px, 2 under 900px, 3 above (4 with --dense from 1200px).

   Route    <ul class="c-route" data-reveal-group>                (three form cards = ONE decision; data-go resolves or shows "Soon")
              <li><a class="c-route__card" data-go="rfi"><small class="c-route__who">I'm exploring</small><h3 class="c-route__title">Request for information</h3><p>One line.</p><span class="c-route__go">Start</span></a></li> ... </ul>
   Tracks   <div class="c-tracks"> <article class="c-tracks__track"><p class="label">Track 1</p><h3 class="c-tracks__title">Atelier pieces</h3><p>One line.</p><ul class="c-pillars">..</ul><a class="c-link" href="#track-atelier">See the track</a></article> ... </div>
   Spec     <div class="c-spec-wrap"><table class="c-spec" role="table"><caption>Grades</caption>
              <thead role="rowgroup"><tr role="row"><th role="columnheader" scope="col">Grade</th><th role="columnheader" scope="col">Belly width</th></tr></thead>
              <tbody role="rowgroup"><tr role="row"><th role="rowheader" scope="row">Grade 1</th><td role="cell" class="num" data-label="Belly width">30-35 cm</td></tr></tbody></table></div>
            <p class="c-spec__note">Source and basis <span class="c-claim">[VERIFY]</span></p>      (data-label feeds the mobile stack; keep the roles)
   Form     see the full markup contract at the top of assets/forms.js (c-form, c-field, c-check, c-choice, c-form__summary,
            c-form__progress, c-form__review, c-form__actions, c-form__mock). Sent state: c-confirm (+ __mark, __summary).
            + <script src="assets/forms.js" defer></script>

   Tile     <ul class="c-tiles" data-reveal-group> <li><a class="c-tile" data-go="case">            (piece types; 2 columns, 4 from 900px)
              <div class="c-tile__img c-unitplate"><img src="col/PRD-126843.webp" alt="..." width="640" height="480" loading="lazy"></div>
              <span class="c-tile__name">Belts</span><p class="c-tile__meta">3 types · from €100</p></a></li> ... </ul>
            counts and prices: use SeroneraShell.PIECE_TYPES (mock data from the home Shop menu), do not retype them
   Unit     <ul class="c-units [c-units--sub]" id="unit-list" data-filter-list>                  (--sub = smaller, for the Pieces hub grid)
              <li data-colour="grey" data-model="iphone-16-pro"><a class="c-unit [is-gone]" href="shop.html#case">
                <div class="c-unit__plate c-unitplate"><img src="stuk/PRD-127160.webp" alt="..." width="720" height="900" loading="lazy"></div>
                <b class="c-unit__code">PRD-127160</b><span class="c-unit__what">Grey · iPhone Pro case</span><span class="c-unit__tag">Tag …291657</span>
                <span class="c-unit__state">Available</span></a></li> ... </ul>                  (states: Available / Reserved / Sold; no timers, no urgency)
   Filter   <div class="c-filter" data-filter data-filter-target="#unit-list"> <fieldset class="c-filter__group" data-filter-group="colour"><legend class="c-filter__label">Colour</legend>
              <button type="button" class="c-chip" data-value="grey">Grey</button> ... </fieldset>
              <div class="c-filter__bar"><p class="c-filter__count" data-filter-count data-one="piece" data-other="pieces" aria-live="polite"></p><button type="button" class="c-filter__reset" data-filter-reset hidden>Clear filters</button></div> </div>
            full contract at the top of assets/filter.js  + <script src="assets/filter.js" defer></script>
   Empty    <div class="c-empty" data-empty hidden><h3>No pieces match</h3><p>Plain sentence and the next step.</p><div class="c-empty__actions"><button type="button" class="knop knop-lijn" data-filter-reset>Clear filters</button></div></div>
   Tags     <div class="c-tags" data-filter-group="tag" data-single> <a class="c-chip" href="?tag=farm" data-value="farm">Farm</a> ... </div>     (inside a data-filter box; same script)
   Article  <ul class="c-arts" data-filter-list data-reveal-group> <li data-tag="farm craft"><article class="c-art">
              <div class="c-art__media"><img ...></div>
              <p class="c-art__meta"><span class="c-art__tag">Farm</span><time datetime="2026-09-30">30 Sep 2026</time><span>5 min read</span></p>
              <h3 class="c-art__title"><a href="...">Title</a></h3><p class="c-art__standfirst">One line.</p><p class="c-art__rel">Related: The Egg</p>
            </article></li> ... </ul>        (featured story: a lone <article class="c-art c-art--feature"> above the list; "From the journal" strip = 2-3 cards in .c-arts)

   MOTION HOOKS (attributes read by assets/motion.js; harmless without it)
     data-steps           c-steps line + node fill (M5)
     data-reveal            block reveal (M1)
     data-reveal-group      children reveal with a stagger (M1)
     data-lines             heading word-mask reveal (M2), headings only
     data-settle            one lead image per page: clip + slight parallax (M6)
     data-minitl            station timeline (M5)
     .c-prog[data-chapter]  chapter progress (M4)
   ========================================================================== */

/* ---------- link with arrow ---------- */
.c-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--doel); font-weight: 700; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--oker); align-self: flex-start; transition: color var(--dur-micro);
}
.c-link::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor; transition: transform var(--dur-micro) ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.c-link:hover { color: var(--oker-licht); }
.c-link:hover::after { transform: translateX(5px); }
.licht .c-link { border-bottom-color: var(--oker-diep); }
.licht .c-link:hover { color: var(--oker-diep); }
.c-link.s-soon { border-bottom: 1px dashed currentColor; }
.c-link.s-soon::after { display: none; }

/* ---------- image placeholder (brief rule 5.2: describe the required shot) ---------- */
.c-placeholder {
  position: relative; display: grid; place-items: center; text-align: center; padding: 20px; width: 100%;
  background: var(--nacht-2); color: var(--mist); border: 1px dashed var(--lijn-d); border-radius: 2px; overflow: hidden;
  font-size: var(--fs-caption); letter-spacing: .04em; line-height: 1.45;
}
.c-placeholder > span { display: grid; gap: 10px; justify-items: center; max-width: 34ch; }
.c-placeholder > span::before { content: ""; width: 18px; height: 18px; border-radius: 50%; color: var(--oker-licht);
  background: radial-gradient(circle, currentColor 0 2px, transparent 2.5px 4.5px, currentColor 5px 6.2px, transparent 6.7px 8px, currentColor 8.4px 9px, transparent 9.4px); }
.licht .c-placeholder { background: var(--steen-2); color: var(--inkt-zacht); border-color: var(--steen-lijn); }
.licht .c-placeholder > span::before { color: var(--oker-diep); }
.c-ratio-4x3 { aspect-ratio: 4 / 3; } .c-ratio-3x2 { aspect-ratio: 3 / 2; } .c-ratio-4x5 { aspect-ratio: 4 / 5; }
.c-ratio-16x9 { aspect-ratio: 16 / 9; } .c-ratio-1x1 { aspect-ratio: 1; }
.c-placeholder--fill { position: absolute; inset: 0; height: 100%; border: 0; border-radius: 0; }

/* Real photography: house treatment (dark, calm; never tinted scrims) */
.c-photo { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.95); }
.c-photo--small { filter: saturate(.82) contrast(1.04) brightness(.94); }
.c-unitplate { background: #fff; background-blend-mode: multiply; }         /* white-studio unit photos */

/* ---------- hero ---------- */
.c-hero { position: relative; min-height: min(78vh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--nacht); }
.c-hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--nacht-2); }
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: brightness(.8) saturate(.95); }
.c-hero::before {                                    /* neutral black scrim, never coloured */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 5, 4, .86) 0%, rgba(5, 5, 4, .55) 40%, rgba(5, 5, 4, .08) 70%), linear-gradient(0deg, rgba(5, 5, 4, .6) 0%, rgba(5, 5, 4, 0) 40%);
}
.c-hero__text { position: relative; z-index: 2; width: 100%; padding-block: clamp(72px, 12vh, 140px) clamp(40px, 8vh, 88px); display: grid; gap: 22px; }
.c-hero .kop1 { max-width: 13ch; }
.c-hero .intro { color: #DAD5CB; max-width: 46ch; }
.c-hero--lead { min-height: min(56vh, 520px); }
@media (max-width: 900px) {
  .c-hero { min-height: min(86svh, 640px); }
  .c-hero .kop1 { font-size: clamp(34px, 10.2vw, 48px); }
  .c-hero::before { background: linear-gradient(180deg, rgba(5, 5, 4, .1) 0%, rgba(5, 5, 4, .3) 28%, rgba(5, 5, 4, .86) 62%, rgba(5, 5, 4, .95) 100%); }
}

/* ---------- teaser (hub block) ---------- */
.c-tease { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--col-gap); align-items: center; }
.c-tease--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.c-tease--flip .c-tease__media { order: 2; }
.c-tease__media { min-width: 0; overflow: hidden; background: var(--nacht-2); }
.c-tease__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(.82) saturate(.95); }
.c-tease__body { display: grid; gap: 22px; align-content: center; min-width: 0; }
.c-tease__body > p { margin: 0; color: var(--mist); max-width: 52ch; }
.licht .c-tease__body > p { color: var(--inkt-zacht); }
.c-tease__body .kop2 { font-size: clamp(32px, 4vw, 58px); }
@media (max-width: 900px) {
  .c-tease, .c-tease--flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .c-tease--flip .c-tease__media { order: 0; }
}

/* ---------- facts: hairline list, big numerals ---------- */
.c-facts { list-style: none; margin: 4px 0 0; padding: 0; border-top: 2px solid currentColor; }
.c-fact { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(0, 3fr); gap: 6px 22px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--lijn-d); }
.licht .c-fact { border-bottom-color: var(--steen-lijn); }
.c-fact > b { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 3.6vw, 52px); line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-fact > b small { font-size: .38em; letter-spacing: 0; margin-left: .12em; color: var(--oker-licht); }
.licht .c-fact > b small { color: var(--oker-diep); }
.c-fact > span { font-size: 15.5px; color: var(--mist); }
.licht .c-fact > span { color: var(--inkt-zacht); }
@media (max-width: 560px) { .c-fact { grid-template-columns: minmax(0, 1fr); } }

/* ---------- compare: two close-ups, same scale, captions ---------- */
.c-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin: 0; }
.c-compare figure { margin: 0; display: grid; gap: 10px; }
.c-compare figcaption, .c-strip figcaption { font-size: var(--fs-caption); color: var(--mist); display: flex; gap: 10px; align-items: center; }
.licht .c-compare figcaption, .licht .c-strip figcaption { color: var(--inkt-zacht); }
.c-compare figcaption::before, .c-strip figcaption::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--oker-licht); border-radius: 50%; flex: none; }
.licht .c-compare figcaption::before, .licht .c-strip figcaption::before { border-color: var(--oker-diep); }

/* ---------- strip: images with factual captions ---------- */
.c-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 28%); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.c-strip figure { margin: 0; display: grid; gap: 10px; scroll-snap-align: start; align-content: start; }
.c-strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(.82) contrast(1.04) brightness(.94); }
@media (min-width: 901px) { .c-strip--grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-auto-columns: auto; overflow: visible; } }
@media (max-width: 560px) { .c-strip { grid-auto-columns: 78%; } }

/* ---------- mini-timeline: one real unit, stations with dates ---------- */
.c-minitl { --p: 1; list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; display: grid; gap: clamp(22px, 3vw, 36px); counter-reset: st; }
.c-minitl::before, .c-minitl::after { content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; }
.c-minitl::before { background: var(--lijn-d); }
.licht .c-minitl::before { background: var(--steen-lijn); }
.c-minitl::after { background: var(--oker); transform-origin: 50% 0; transform: scaleY(var(--p)); }       /* motion M5 drives --p */
.c-minitl__item { position: relative; display: grid; gap: 4px; }
.c-minitl__node {
  position: absolute; left: -44px; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--oker-licht); background: var(--nacht);
  transition: border-color .4s, background .4s;
}
.licht .c-minitl__node { background: var(--steen); border-color: var(--oker-diep); }
.is-on > .c-minitl__node, .c-minitl__item.is-on .c-minitl__node { background: radial-gradient(circle, var(--oker-licht) 0 4px, var(--nacht) 4.5px); }
.licht .c-minitl__item.is-on .c-minitl__node { background: radial-gradient(circle, var(--oker-diep) 0 4px, var(--steen) 4.5px); }
.c-minitl time { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oker-licht); }
.licht .c-minitl time { color: var(--oker-diep); }
.c-minitl p { margin: 0; color: var(--mist); max-width: 48ch; font-size: 15.5px; }
.licht .c-minitl p { color: var(--inkt-zacht); }

/* ---------- reassurance band ---------- */
.c-reassure { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--lijn-d); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 28px; font-size: 15px; color: var(--mist); }
.licht .c-reassure { border-top-color: var(--steen-lijn); color: var(--inkt-zacht); }
.c-reassure li { display: flex; gap: 12px; align-items: flex-start; }
.c-reassure li::before { content: ""; flex: none; margin-top: 5px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--oker-licht); }
.licht .c-reassure li::before { border-color: var(--oker-diep); }
@media (max-width: 900px) { .c-reassure { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c-reassure { grid-template-columns: minmax(0, 1fr); } }

/* ---------- close (hub) and next-chapter (chapter) blocks: the page's ONE primary action ---------- */
.c-close { padding-block: var(--section-pad); }
.c-close .s-wrap { display: grid; gap: 28px; justify-items: start; }
.c-close .kop2 { max-width: 16ch; }
.c-next { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; border-top: 2px solid currentColor; padding-top: 28px; }
.c-next__prev { color: var(--mist); text-decoration: none; font-size: 14px; }
.c-next .knop { justify-self: end; }
@media (max-width: 560px) { .c-next { grid-template-columns: minmax(0, 1fr); } .c-next .knop { justify-self: start; } }

/* ---------- chapter progress "Chapter n of 7" (chapter pages only; motion M4) ---------- */
.c-prog { margin: 0; display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-caption); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--mist); }
.c-prog__dots { display: inline-flex; gap: 6px; }
.c-prog__dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--oker-licht); display: block; transition: background .5s; }
.c-prog__dots i.is-done, .c-prog__dots i.is-current { background: var(--oker-licht); }
.licht .c-prog { color: var(--inkt-zacht); }
.licht .c-prog__dots i { border-color: var(--oker-diep); }
.licht .c-prog__dots i.is-done, .licht .c-prog__dots i.is-current { background: var(--oker-diep); }

/* ---------- steps: numbered stations with ring nodes, optional photo (Egg, Life Cycle, Production, B2B cycle) ---------- */
.c-steps { --p: 1; list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; display: grid; gap: clamp(36px, 5vw, 64px); counter-reset: step; }
.c-steps::before, .c-steps::after { content: ""; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; }
.c-steps::before { background: var(--lijn-d); }
.licht .c-steps::before { background: var(--steen-lijn); }
.c-steps::after { background: var(--oker); transform-origin: 50% 0; transform: scaleY(var(--p)); }       /* motion M5 drives --p */
.c-steps__item { position: relative; display: grid; gap: clamp(18px, 3vw, 36px); counter-increment: step; min-width: 0; }
.c-steps__node {
  position: absolute; left: -44px; top: 2px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--oker-licht); background: var(--nacht);
  transition: border-color .4s, background .4s;
}
.licht .c-steps__node { background: var(--steen); border-color: var(--oker-diep); }
.groen .c-steps__node { background: var(--bos); }
.c-steps__item.is-on .c-steps__node { background: radial-gradient(circle, var(--oker-licht) 0 4px, var(--nacht) 4.5px); }
.licht .c-steps__item.is-on .c-steps__node { background: radial-gradient(circle, var(--oker-diep) 0 4px, var(--steen) 4.5px); }
.groen .c-steps__item.is-on .c-steps__node { background: radial-gradient(circle, var(--oker-licht) 0 4px, var(--bos) 4.5px); }
.c-steps__body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.c-steps__body::before {                                  /* automatic 01, 02, ... */
  content: counter(step, decimal-leading-zero); font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--oker-licht);
}
.licht .c-steps__body::before { color: var(--oker-diep); }
.c-steps--nonum .c-steps__body::before { display: none; }
.c-steps__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.c-steps__body > p { margin: 0; color: var(--mist); max-width: 52ch; }
.licht .c-steps__body > p { color: var(--inkt-zacht); }
.c-steps__media { margin: 0; min-width: 0; display: grid; gap: 10px; align-content: start; }
.c-steps__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: brightness(.82) saturate(.95); }
.c-steps__media figcaption { font-size: var(--fs-caption); color: var(--mist); display: flex; gap: 10px; align-items: baseline; }
.licht .c-steps__media figcaption { color: var(--inkt-zacht); }
.c-steps__media figcaption::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--oker-licht); border-radius: 50%; flex: none; transform: translateY(1px); }
.licht .c-steps__media figcaption::before { border-color: var(--oker-diep); }
@media (min-width: 901px) {
  .c-steps__item:has(> .c-steps__media) { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: start; gap: var(--col-gap); }
}

/* ---------- pillars: hairline practice list (what we do / what we do not do) ---------- */
.c-pillars { list-style: none; margin: 4px 0 0; padding: 0; border-top: 2px solid currentColor; }
.c-pillars > li { position: relative; display: grid; gap: 4px; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--lijn-d); }
.licht .c-pillars > li { border-bottom-color: var(--steen-lijn); }
.c-pillars > li::before { content: ""; position: absolute; left: 0; top: 21px; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--oker-licht); }
.licht .c-pillars > li::before { border-color: var(--oker-diep); }
.c-pillars > li > b { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; line-height: 1.2; }
.c-pillars > li > span { font-size: 15.5px; color: var(--mist); max-width: 52ch; }
.licht .c-pillars > li > span { color: var(--inkt-zacht); }
.c-pillars--not > li::after { content: ""; position: absolute; left: 3.75px; top: 27.25px; width: 5.5px; height: 1.5px; background: var(--oker-licht); }   /* dash inside the ring = "we do not" */
.licht .c-pillars--not > li::after { background: var(--oker-diep); }
.c-pillars-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--col-gap); }
.c-pillars-pair .label { margin: 0 0 8px; }
@media (max-width: 900px) { .c-pillars-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- gallery: captioned grid + accessible lightbox (assets/gallery.js; variant V-09) ---------- */
.c-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px) clamp(14px, 2vw, 24px); --ratio: 3 / 2; }
.c-gallery--portrait { --ratio: 4 / 5; }
@media (min-width: 560px) { .c-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .c-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .c-gallery--dense { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-gallery__item { margin: 0; min-width: 0; }
.c-gallery__item figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.c-gallery__link { position: relative; display: block; aspect-ratio: var(--ratio); overflow: hidden; background: var(--nacht-2); color: inherit; text-decoration: none; cursor: zoom-in; }
.licht .c-gallery__link { background: var(--steen-2); }
span.c-gallery__link { cursor: default; }                                   /* lightbox off (V-09): plain figure */
.c-gallery__link img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.82) contrast(1.04) brightness(.94); transition: transform .4s var(--ease-enter); }
a.c-gallery__link:hover img { transform: translateY(-3px) scale(1.02); }
a.c-gallery__link::after {                                                  /* decorative "enlarge" ring */
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--oker-licht); background: rgba(10, 9, 8, .5);
  opacity: .85; transition: opacity var(--dur-micro), transform var(--dur-micro);
}
a.c-gallery__link::before {
  content: ""; position: absolute; right: 22px; bottom: 22px; width: 14px; height: 14px; z-index: 1; pointer-events: none;
  background: linear-gradient(var(--oker-licht), var(--oker-licht)) center / 100% 1.5px no-repeat, linear-gradient(var(--oker-licht), var(--oker-licht)) center / 1.5px 100% no-repeat;
}
a.c-gallery__link:hover::after { opacity: 1; transform: scale(1.08); }
a.c-gallery__link:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.licht a.c-gallery__link:focus-visible { outline-color: var(--oker-diep); }
.c-gallery figcaption { font-size: var(--fs-caption); color: var(--mist); display: flex; gap: 10px; align-items: baseline; }   /* always visible, never hover-only */
.licht .c-gallery figcaption { color: var(--inkt-zacht); }
.c-gallery figcaption::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--oker-licht); border-radius: 50%; flex: none; transform: translateY(1px); }
.licht .c-gallery figcaption::before { border-color: var(--oker-diep); }

html.c-lightbox-open { overflow: hidden; }
.c-lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox); box-sizing: border-box; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(10, 9, 8, .97); color: var(--wit); overflow: hidden;
}
.c-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.c-lightbox::backdrop { background: rgba(10, 9, 8, .97); }
.c-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter) 0; }
.c-lightbox__count { margin: 0; font-size: var(--fs-caption); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); font-variant-numeric: tabular-nums; }
.c-lightbox__btn {
  display: grid; place-items: center; width: var(--doel); height: var(--doel); flex: none; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--oker-licht); background: transparent; color: var(--oker-licht); transition: background var(--dur-micro), transform var(--dur-micro);
}
.c-lightbox__btn svg { width: 20px; height: 20px; }
.c-lightbox__btn:hover { background: rgba(205, 180, 135, .14); }
.c-lightbox__btn:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.c-lightbox__stage { position: relative; min-height: 0; touch-action: pan-y; margin: 12px var(--gutter); }
.c-lightbox__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; visibility: hidden; filter: brightness(.95) saturate(.97); }
.c-lightbox__img.is-front { opacity: 1; visibility: visible; }
.c-lightbox__foot { display: grid; grid-template-columns: var(--doel) minmax(0, 1fr) var(--doel); gap: 14px; align-items: center; padding: 0 var(--gutter) calc(18px + env(safe-area-inset-bottom)); }
.c-lightbox__cap { margin: 0; min-height: 3.2em; display: flex; gap: 10px; align-items: baseline; justify-content: center; text-align: left; font-size: 15px; line-height: 1.5; color: var(--wit); max-width: 70ch; justify-self: center; }
.c-lightbox__cap::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--oker-licht); border-radius: 50%; flex: none; transform: translateY(2px); }
@media (max-width: 560px) {
  .c-lightbox__foot { grid-template-columns: var(--doel) var(--doel); grid-template-areas: "prev next" "cap cap"; justify-content: space-between; row-gap: 10px; }
  .c-lightbox__foot > :nth-child(1) { grid-area: prev; } .c-lightbox__foot > :nth-child(3) { grid-area: next; }
  .c-lightbox__cap { grid-area: cap; justify-self: stretch; justify-content: flex-start; }
}

/* ---------- route: form chooser (For Business). Cards are links; the three together are ONE decision ---------- */
.c-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.c-route > li { display: flex; min-width: 0; }
.c-route__card {
  position: relative; display: grid; gap: 10px; align-content: start; width: 100%; min-height: 84px; padding: 22px 22px 20px; box-sizing: border-box;
  color: inherit; text-decoration: none; border: 1px solid rgba(205, 180, 135, .5); background: rgba(205, 180, 135, .08);
  transition: background var(--dur-micro), border-color var(--dur-micro), transform var(--dur-micro);
}
.c-route__who { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oker-licht); }
.c-route__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.c-route__card > p { margin: 0; color: var(--mist); font-size: 15.5px; max-width: 34ch; }
.c-route__go { display: inline-flex; align-items: center; gap: 10px; min-height: var(--doel); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.c-route__go::after {
  content: ""; width: 16px; height: 16px; background: currentColor; transition: transform var(--dur-micro) ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.c-route__card:hover { transform: translateY(-2px); border-color: var(--oker-licht); background: rgba(205, 180, 135, .16); }
a.c-route__card:hover .c-route__go::after { transform: translateX(5px); }
a.c-route__card:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.c-route__card.s-soon { border-style: dashed; cursor: default; }
.c-route__card.s-soon .c-route__go { display: none; }
.c-route__card.s-soon > small[aria-hidden] { position: absolute; top: 14px; right: 14px; margin: 0; }
.licht .c-route__card { border-color: rgba(107, 86, 48, .48); background: rgba(107, 86, 48, .07); }
.licht .c-route__who { color: var(--oker-diep); }
.licht .c-route__card > p { color: var(--inkt-zacht); }
.licht a.c-route__card:hover { border-color: var(--oker-diep); background: rgba(107, 86, 48, .13); }
.licht a.c-route__card:focus-visible { outline-color: var(--oker-diep); }
@media (max-width: 900px) { .c-route { grid-template-columns: minmax(0, 1fr); } }

/* ---------- tracks: two equal tracks (White Label). Anchors jump within the page; no filled button here ---------- */
.c-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--col-gap); }
.c-tracks__track { display: grid; gap: 14px; align-content: start; min-width: 0; padding-top: 20px; border-top: 2px solid currentColor; }
.c-tracks__track .label { margin: 0; }
.c-tracks__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.c-tracks__track > p { margin: 0; color: var(--mist); max-width: 46ch; }
.licht .c-tracks__track > p { color: var(--inkt-zacht); }
@media (max-width: 900px) { .c-tracks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- spec: technical table (grades, widths). Keep the ARIA roles in the markup: they survive the mobile stack ---------- */
.c-spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.c-spec { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.c-spec caption { caption-side: top; text-align: left; padding: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; }
.c-spec thead th { text-align: left; padding: 12px 18px 12px 0; border-top: 2px solid currentColor; border-bottom: 1px solid var(--lijn-d); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--oker-licht); white-space: nowrap; }
.c-spec th, .c-spec td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--lijn-d); }
.c-spec tbody th { font-weight: 700; }
.c-spec td { color: var(--mist); }
.c-spec .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-spec__note { margin: 14px 0 0; font-size: var(--fs-caption); color: var(--mist); }
.licht .c-spec thead th { color: var(--oker-diep); border-bottom-color: var(--steen-lijn); }
.licht .c-spec th, .licht .c-spec td { border-bottom-color: var(--steen-lijn); }
.licht .c-spec td, .licht .c-spec__note { color: var(--inkt-zacht); }
@media (max-width: 560px) {
  .c-spec-wrap { overflow: visible; }
  .c-spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .c-spec, .c-spec tbody, .c-spec tr, .c-spec th, .c-spec td { display: block; width: 100%; box-sizing: border-box; }
  .c-spec tbody tr { padding: 14px 0; border-top: 2px solid currentColor; }
  .c-spec tbody tr + tr { border-top: 1px solid var(--lijn-d); }
  .licht .c-spec tbody tr + tr { border-top-color: var(--steen-lijn); }
  .c-spec th, .c-spec td { padding: 4px 0; border: 0; }
  .c-spec tbody th { font-family: var(--display); font-size: 18px; padding-bottom: 8px; }
  .c-spec td { display: grid; grid-template-columns: minmax(96px, 2fr) 3fr; gap: 12px; }
  .c-spec td::before { content: attr(data-label); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oker-licht); }
  .licht .c-spec td::before { color: var(--oker-diep); }
}

/* ---------- form (assets/forms.js). Visible labels, 16px inputs, errors in words, never colour alone ---------- */
.c-form { display: grid; gap: 28px; max-width: 760px; min-width: 0; }
.c-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 22px; }
.c-form legend { padding: 0; margin: 0 0 4px; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; }
.c-form [data-step][hidden], .c-confirm[hidden], .c-form__summary[hidden], .c-field__error[hidden], .c-form [data-next][hidden], .c-form [data-back][hidden], .c-form [data-submit][hidden] { display: none; }
.c-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 28px; }
@media (min-width: 760px) { .c-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.c-field > label, .c-field__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); padding: 0; }
.c-field__opt { margin-left: 8px; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.c-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .c-field select, .c-field textarea {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 0; font: inherit; font-size: 16px; color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid var(--kaki); border-radius: 0; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-micro);
}
.c-field textarea { min-height: 140px; padding: 12px 14px; border: 1px solid var(--kaki); resize: vertical; line-height: 1.5; }
.c-field select {
  padding-right: 30px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CDB487' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 2px center / 18px no-repeat;
}
.licht .c-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5630' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.c-field input:hover, .c-field select:hover, .c-field textarea:hover { border-color: var(--mist); }
.c-field input:focus-visible, .c-field select:focus-visible, .c-field textarea:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 4px; border-color: var(--oker-licht); }
.c-field input[type="file"] { font: inherit; font-size: 15px; color: var(--mist); max-width: 100%; }
.c-field input[type="file"]::file-selector-button {
  min-height: var(--doel); margin-right: 14px; padding: 0 20px; border: 1px solid var(--oker-licht); border-radius: 999px; background: transparent; color: var(--oker-licht);
  font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.c-field__hint { margin: 0; font-size: var(--fs-caption); color: var(--mist); }
.c-field__error { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-caption); color: var(--wit); }
.c-field__error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--fout); color: var(--wit); font: 700 12px/18px var(--sans); text-align: center; }
.c-field.is-invalid input:not([type="checkbox"]):not([type="radio"]), .c-field.is-invalid select, .c-field.is-invalid textarea { border-color: var(--fout); box-shadow: 0 1px 0 var(--fout); }
.c-field.is-invalid .c-check input { border-color: var(--fout); }
.licht .c-field > label, .licht .c-field__label, .licht .c-field__hint, .licht .c-field input[type="file"] { color: var(--inkt-zacht); }
.licht .c-field__error { color: var(--fout); }
.licht .c-field input:hover, .licht .c-field select:hover, .licht .c-field textarea:hover { border-color: var(--inkt-zacht); }
.licht .c-field input:focus-visible, .licht .c-field select:focus-visible, .licht .c-field textarea:focus-visible { outline-color: var(--oker-diep); border-color: var(--oker-diep); }
.licht .c-field input[type="file"]::file-selector-button { border-color: var(--oker-diep); color: var(--oker-diep); }

/* ring-style checkbox and radio (the house ring glyph) */
.c-check { display: flex; gap: 14px; align-items: flex-start; min-height: var(--doel); padding: 10px 0; font-size: 15.5px; line-height: 1.5; cursor: pointer; }
.c-check input {
  -webkit-appearance: none; appearance: none; flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid var(--oker-licht); border-radius: 50%; background: transparent; cursor: pointer;
}
.c-check input[type="checkbox"] { border-radius: 5px; }
.c-check input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--oker-licht); transform: scale(0); transition: transform .2s ease; }
.c-check input[type="checkbox"]::before { border-radius: 2px; }
.c-check input:checked::before { transform: scale(1); }
.c-check input:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.licht .c-check input { border-color: var(--oker-diep); }
.licht .c-check input::before { background: var(--oker-diep); }
.licht .c-check input:focus-visible { outline-color: var(--oker-diep); }
.c-choice__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
@media (min-width: 560px) { .c-choice__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* step indicator (built by forms.js for <form data-steps>) */
.c-form__progress { list-style: none; margin: 0; padding: 0; display: flex; }
.c-form__progress li { position: relative; flex: 1; padding-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.c-form__progress li::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--oker-licht); background: var(--nacht); z-index: 1; }
.c-form__progress li::after { content: ""; position: absolute; left: 20px; right: 8px; top: 5px; height: 1px; background: var(--lijn-d); }
.c-form__progress li:last-child::after { display: none; }
.c-form__progress li.is-done::before, .c-form__progress li[aria-current="step"]::before { background: var(--oker-licht); }
.c-form__progress li.is-done::after { background: var(--oker); }
.c-form__progress li[aria-current="step"] { color: var(--wit); }
.licht .c-form__progress li { color: var(--inkt-zacht); }
.licht .c-form__progress li::before { border-color: var(--oker-diep); background: var(--steen); }
.licht .c-form__progress li::after { background: var(--steen-lijn); }
.licht .c-form__progress li.is-done::before, .licht .c-form__progress li[aria-current="step"]::before { background: var(--oker-diep); }
.licht .c-form__progress li[aria-current="step"] { color: var(--inkt); }
.c-form__stepno { margin: 0; font-size: var(--fs-caption); color: var(--mist); }
.licht .c-form__stepno { color: var(--inkt-zacht); }
@media (max-width: 560px) { .c-form__progress li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .c-form__progress li[aria-current="step"] span { position: static; width: auto; height: auto; clip-path: none; overflow: visible; } .c-form__progress li[aria-current="step"] { flex: 3; } }
@media (prefers-reduced-motion: no-preference) { .c-form [data-step].is-entering { animation: c-fade .25s ease; } }
@keyframes c-fade { from { opacity: 0; } to { opacity: 1; } }

/* error summary, review list, actions, mock note */
.c-form__summary { padding: 18px 20px; border: 1px solid var(--fout); background: rgba(166, 61, 42, .14); }
.c-form__summary h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 700; font-size: 17px; }
.c-form__summary ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.c-form__summary a { color: inherit; text-underline-offset: 3px; }
.c-form__summary:focus { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.licht .c-form__summary { background: rgba(166, 61, 42, .08); }
.licht .c-form__summary:focus { outline-color: var(--oker-diep); }
.c-form__review, .c-confirm__summary { margin: 0; border-top: 2px solid currentColor; }
.c-form__review > div, .c-confirm__summary > div { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) auto; gap: 6px 18px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--lijn-d); }
.licht .c-form__review > div, .licht .c-confirm__summary > div { border-bottom-color: var(--steen-lijn); }
.c-confirm__summary > div { grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr); }
.c-form__review dt, .c-confirm__summary dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oker-licht); }
.licht .c-form__review dt, .licht .c-confirm__summary dt { color: var(--oker-diep); }
.c-form__review dd, .c-confirm__summary dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.c-form__review button { min-height: var(--doel); padding: 0 4px; border: 0; background: none; color: inherit; font: 700 13px/1 var(--sans); letter-spacing: .08em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.c-form__review button:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 2px; }
@media (max-width: 560px) { .c-form__review > div { grid-template-columns: minmax(0, 1fr) auto; } .c-form__review dt { grid-column: 1 / -1; } }
.c-form__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.c-form__mock { margin: 0; font-size: var(--fs-caption); color: var(--mist); }
.licht .c-form__mock { color: var(--inkt-zacht); }

/* ---------- confirm: the sent state (V-14). Restates what was sent, says when to expect an answer, one link ---------- */
.c-confirm { display: grid; gap: 18px; justify-items: start; max-width: 760px; padding-top: 28px; border-top: 2px solid currentColor; }
.c-confirm:focus { outline: none; }
.c-confirm__mark { display: grid; place-items: center; width: var(--doel); height: var(--doel); border-radius: 50%; border: 1.5px solid var(--oker-licht); color: var(--oker-licht); }
.c-confirm__mark svg { width: 22px; height: 22px; }
.licht .c-confirm__mark { border-color: var(--oker-diep); color: var(--oker-diep); }
.c-confirm > p { margin: 0; color: var(--mist); max-width: 54ch; }
.licht .c-confirm > p { color: var(--inkt-zacht); }
.c-confirm__summary { width: 100%; }

/* ---------- tile: piece-type tile (the Pieces decision). Photo on a white plate, name, count and "from" price ---------- */
.c-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px) clamp(12px, 2vw, 24px); }
@media (min-width: 900px) { .c-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-tile { position: relative; display: grid; gap: 12px; align-content: start; min-width: 0; color: inherit; text-decoration: none; }
.c-tile__img { aspect-ratio: 4 / 3; overflow: hidden; background-color: #fff; }       /* add class c-unitplate for the white-studio multiply blend */
.c-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease-enter); }
.c-tile__name { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; }
.c-tile__name::after {
  content: ""; width: 16px; height: 16px; flex: none; background: var(--oker-licht); transition: transform var(--dur-micro) ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.licht .c-tile__name::after { background: var(--oker-diep); }
.c-tile__meta { margin: 0; font-size: var(--fs-caption); color: var(--mist); }
.licht .c-tile__meta { color: var(--inkt-zacht); }
a.c-tile:hover .c-tile__img img { transform: translateY(-3px); }
a.c-tile:hover .c-tile__name::after { transform: translateX(5px); }
a.c-tile:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 4px; }
.licht a.c-tile:focus-visible { outline-color: var(--oker-diep); }
.c-tile.s-soon { cursor: default; }
.c-tile.s-soon .c-tile__name::after { display: none; }

/* ---------- unit: one real piece. Own photo, PRD code, what it is, CITES tag suffix, honest state ---------- */
.c-units { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 32px) clamp(12px, 2vw, 22px); }
@media (min-width: 760px) { .c-units { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .c-units { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-units--sub { gap: 18px 12px; }                                                          /* subordinate grid (Pieces hub): smaller, no competing heading */
@media (min-width: 560px) { .c-units--sub { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .c-units--sub { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.c-unit { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; color: inherit; text-decoration: none; }
.c-unit__plate { aspect-ratio: 4 / 5; overflow: hidden; background-color: #fff; }          /* use with c-unitplate */
.c-unit__plate img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease-enter); }
.c-unit__code { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.c-unit__what { font-size: 14px; color: var(--mist); }
.c-unit__tag { font-size: 12px; letter-spacing: .06em; color: var(--mist); }
.c-unit__state { display: inline-flex; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oker-licht); }
.c-unit__state::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; }
.c-unit.is-gone .c-unit__plate { opacity: .55; }
.c-unit.is-gone .c-unit__state { color: var(--mist); }
.licht .c-unit__what, .licht .c-unit__tag { color: var(--inkt-zacht); }
.licht .c-unit__state { color: var(--oker-diep); }
.licht .c-unit.is-gone .c-unit__state { color: var(--inkt-zacht); }
.c-units--sub .c-unit__code { font-size: 14px; } .c-units--sub .c-unit__what, .c-units--sub .c-unit__tag { font-size: 12.5px; }
a.c-unit:hover .c-unit__plate img { transform: translateY(-3px); }
a.c-unit:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 4px; }
.licht a.c-unit:focus-visible { outline-color: var(--oker-diep); }
.c-unit.s-soon { cursor: default; }
[data-filter-list] > [hidden] { display: none !important; }

/* ---------- filter chips (assets/filter.js) and tag chips: same control, URL-backed ---------- */
.c-filter { display: grid; gap: 14px; }
.c-filter__group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 0; margin: 0; padding: 0; min-width: 0; }
.c-filter__label { margin-right: 6px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); padding: 0; }
.licht .c-filter__label { color: var(--inkt-zacht); }
.c-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--doel); padding: 0 18px; box-sizing: border-box; cursor: pointer; text-decoration: none;
  border: 1px solid var(--kaki); border-radius: 999px; background: transparent; color: inherit; font: 600 14px/1 var(--sans); letter-spacing: .02em;
  transition: border-color var(--dur-micro), background var(--dur-micro), color var(--dur-micro);
}
.c-chip:hover { border-color: var(--oker-licht); }
.c-chip:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 3px; }
.c-chip[aria-pressed="true"], .c-chip[aria-current="true"] { background: var(--oker); border-color: var(--oker); color: var(--nacht); }
.licht .c-chip { border-color: var(--steen-lijn); }
.licht .c-chip:hover { border-color: var(--oker-diep); }
.licht .c-chip:focus-visible { outline-color: var(--oker-diep); }
.licht .c-chip[aria-pressed="true"], .licht .c-chip[aria-current="true"] { background: var(--oker-diep); border-color: var(--oker-diep); color: var(--wit); }
.c-filter__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; }
.c-filter__count { margin: 0; font-size: var(--fs-caption); color: var(--mist); }
.licht .c-filter__count { color: var(--inkt-zacht); }
.c-filter__reset { min-height: var(--doel); padding: 0 4px; border: 0; background: none; color: inherit; font: 700 13px/1 var(--sans); letter-spacing: .08em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.c-filter__reset[hidden] { display: none; }
.c-filter__reset:focus-visible { outline: 2px solid var(--oker-licht); outline-offset: 2px; }

/* ---------- empty: says so plainly, offers the next step ---------- */
.c-empty { display: grid; gap: 14px; justify-items: start; padding: 32px 0; border-top: 2px solid currentColor; }
.c-empty[hidden] { display: none; }
.c-empty h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; }
.c-empty p { margin: 0; color: var(--mist); max-width: 52ch; }
.licht .c-empty p { color: var(--inkt-zacht); }
.c-empty__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- article card (Journal index, journal strip). Whole card is one link on the title ---------- */
.c-arts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 48px) clamp(18px, 2.4vw, 32px); }
@media (min-width: 560px) { .c-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .c-arts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-art { position: relative; display: grid; gap: 12px; align-content: start; min-width: 0; }
.c-art__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--nacht-2); }
.licht .c-art__media { background: var(--steen-2); }
.c-art__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.82) contrast(1.04) brightness(.94); transition: transform .4s var(--ease-enter); }
.c-art:hover .c-art__media img { transform: translateY(-3px) scale(1.02); }
.c-art__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.c-art__tag { color: var(--oker-licht); font-weight: 700; }
.licht .c-art__meta { color: var(--inkt-zacht); } .licht .c-art__tag { color: var(--oker-diep); }
.c-art__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.15; text-wrap: balance; }
.c-art__title a { color: inherit; text-decoration: none; }
.c-art__title a::after { content: ""; position: absolute; inset: 0; }                    /* stretched link: the card is the target */
.c-art__title a:focus-visible { outline: none; }
.c-art__title a:focus-visible::after { outline: 2px solid var(--oker-licht); outline-offset: 4px; }
.licht .c-art__title a:focus-visible::after { outline-color: var(--oker-diep); }
.c-art__standfirst { margin: 0; color: var(--mist); font-size: 15.5px; max-width: 48ch; }
.licht .c-art__standfirst { color: var(--inkt-zacht); }
.c-art__rel { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-caption); color: var(--mist); }
.licht .c-art__rel { color: var(--inkt-zacht); }
.c-art__rel::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--oker-licht); border-radius: 50%; flex: none; transform: translateY(1px); }
.licht .c-art__rel::before { border-color: var(--oker-diep); }
.c-art--feature { grid-template-columns: minmax(0, 1fr); gap: 18px; }                      /* featured story: sits above the grid, outside the list */
.c-art--feature .c-art__title { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.05; }
@media (min-width: 900px) { .c-art--feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--col-gap); align-items: center; } .c-art--feature .c-art__media { grid-row: 1 / span 4; } }

/* ---------- markers (mock only) ---------- */
.c-claim {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; vertical-align: .15em;
  color: var(--oker-licht); border: 1px solid currentColor; border-radius: 4px; padding: 0 6px; margin-left: 6px; white-space: nowrap;
}
.licht .c-claim { color: var(--oker-diep); }
.c-variant {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--nacht); background: var(--oker-licht);
  border-radius: 999px; padding: 3px 12px;
}

/* ==========================================================================
   Motion hooks. Gate classes are added to <html> ONLY by assets/motion.js
   (or the optional head snippet in motion.js docs) when motion is allowed and
   GSAP is present. Without JS, or with reduced motion, nothing is hidden.
   ========================================================================== */
html.motion-ok [data-reveal]:not(.is-in),
html.motion-ok [data-reveal-group] > *:not(.is-in) { opacity: 0; }
html.motion-ok [data-lines]:not(.is-split) { visibility: hidden; }
html.motion-ok .c-minitl__item:not(.is-on) .c-minitl__node { background: var(--nacht); }
html.motion-ok .licht .c-minitl__item:not(.is-on) .c-minitl__node { background: var(--steen); }
html.motion-ok .c-minitl__item:not(.is-on) > :not(.c-minitl__node) { opacity: .55; }
.c-minitl__item > :not(.c-minitl__node) { transition: opacity .5s; }
html.motion-ok .c-steps__item:not(.is-on) .c-steps__node { background: var(--nacht); }
html.motion-ok .licht .c-steps__item:not(.is-on) .c-steps__node { background: var(--steen); }
html.motion-ok .groen .c-steps__item:not(.is-on) .c-steps__node { background: var(--bos); }
html.motion-ok .c-steps__item:not(.is-on) > :not(.c-steps__node) { opacity: .55; }
.c-steps__item > :not(.c-steps__node) { transition: opacity .5s; }