@charset "UTF-8";
/**
 * Developercode — Mozaïek (dc-mesh)
 * ============================================================================
 * De kaartensectie, getekend als een werkblad in plaats van een kaartenrij.
 *
 * Uitgangspunt komt uit de merkfilms: een bijna-witte tekentafel met platen
 * die daarop gelegd zijn, mono volgnummers langs een liniaal en één blauwe
 * lijn die de aandacht stuurt. Elke plaat heeft een
 * afgesneden bovenhoek — de vorm van een uitgesneden werkblad, niet die van
 * de zoveelste ronde kaart.
 *
 * Dit bestand erft alle kleuren, maten en bewegingen uit dc-home.css en zet
 * er geen tweede ontwerpsysteem naast: het tekent alleen deze ene sectie.
 * Losse bundel, zodat een pagina zonder mozaïek er niets van meekrijgt.
 *
 * Inhoud
 *   1. Wortel
 *   2. Sectiekop
 *   3. Rasterindeling
 *   4. De plaat
 *   5. Liniaal, nummer en spookcijfer
 *   6. Icoonteken en labelpil
 *   7. Tekst, opsomming, cijfer en link
 *   8. Beeld
 *   9. De acht vormen
 *  10. Diep blauw
 *  11. Afsluiting
 *  12. Smalle schermen en rustige weergave
 */

/* ==========================================================================
   1. WORTEL
   ========================================================================== */

.dc-mesh {
    --dc-a: var(--dc-blue);
    --dc-a-rgb: var(--dc-blue-rgb);
    --dc-a-soft: var(--dc-blue-soft);

    /* De maat van de afgesneden hoek. Eén variabele, want de vormen
       zonder plaat zetten hem gewoon op 0. */
    --dc-cut: 26px;

    /* De grondmaat van het mozaïek: de gap van het raster volgt hem, zodat
       de platen op één maatvoering blijven staan. */
    --dc-unit: 92px;

    --dc-plate: var(--dc-surface);
    --dc-edge: var(--dc-line);

    position: relative;
    isolation: isolate;
}

.dc-mesh > .dcx-shell {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   2. SECTIEKOP
   ========================================================================== */

.dc-mesh__head {
    position: relative;
    margin-bottom: clamp(40px, 4.6vw, 74px);
}

.dc-mesh__head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: end;
}

.dc-mesh__head--left { max-width: 820px; }

.dc-mesh__head--center {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
}

.dc-mesh__head--center .dcx-eyebrow { justify-content: center; }
.dc-mesh__head--center .dc-mesh__meter { justify-content: center; }

.dc-mesh__head .dcx-eyebrow { margin-bottom: 18px; }

.dc-mesh__aside {
    display: grid;
    gap: 20px;
    align-content: end;
}

.dc-mesh__head--split .dc-mesh__aside,
.dc-mesh__head--left .dc-mesh__aside { margin-top: 22px; }

/* De teller is een meetlat: mono cijfer, een reeks streepjes en het woord. */
.dc-mesh__meter {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--dc-font-mono);
    font-size: .6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

.dc-mesh__meter b {
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .08em;
    color: var(--dc-a);
}

.dc-mesh__meter svg {
    width: 74px;
    height: 10px;
    flex: none;
    color: var(--dc-line);
}

.dcx--deep .dc-mesh__meter { color: rgba(255, 255, 255, .5); }
.dcx--deep .dc-mesh__meter b { color: #62aaf3; }
.dcx--deep .dc-mesh__meter svg { color: rgba(255, 255, 255, .22); }

/* ==========================================================================
   3. RASTERINDELING
   ========================================================================== */

.dc-mesh__plates {
    --dc-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--dc-cols), minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: clamp(14px, 1.5vw, 24px);
    list-style: none;
    /* de versprongen platen mogen onderuit steken */
    padding-bottom: 22px;
}

.dc-mesh--c2 .dc-mesh__plates { --dc-cols: 2; }
.dc-mesh--c3 .dc-mesh__plates { --dc-cols: 3; }
.dc-mesh--c4 .dc-mesh__plates { --dc-cols: 4; }
.dc-mesh--c1 .dc-mesh__plates,
.dc-mesh--stack .dc-mesh__plates { --dc-cols: 1; }

.dc-mesh__item {
    position: relative;
    min-width: 0;
    display: flex;
}

/* Accenten. Blauw draagt, grafiet is het tegenwicht; paars en rood komen in
   deze huisstijl niet voor. */
.dc-mesh__item--blue     { --dc-a: var(--dc-blue);     --dc-a-rgb: var(--dc-blue-rgb);     --dc-a-soft: var(--dc-blue-soft); }
.dc-mesh__item--green    { --dc-a: #0d9668;            --dc-a-rgb: var(--dc-green-rgb);    --dc-a-soft: var(--dc-green-soft); }
.dc-mesh__item--graphite { --dc-a: var(--dc-graphite); --dc-a-rgb: var(--dc-graphite-rgb); --dc-a-soft: var(--dc-graphite-soft); }
.dc-mesh__item--amber    { --dc-a: #b8760a;            --dc-a-rgb: 245, 158, 11;           --dc-a-soft: var(--dc-amber-soft); }

.dcx--deep .dc-mesh__item--graphite { --dc-a: #93a4bb; }
.dcx--deep .dc-mesh__item--blue     { --dc-a: #62aaf3; }

/* Verspringing: niet elke plaat begint op dezelfde hoogte. Het is een
   verschuiving, geen rasterwijziging, dus de rijen blijven kloppen. */
.dc-mesh--offset .dc-mesh__item--small:nth-of-type(3n)   { --dc-lift: 16px; }
.dc-mesh--offset .dc-mesh__item--small:nth-of-type(4n+1) { --dc-lift: 8px; }

/* ==========================================================================
   4. DE PLAAT
   ==========================================================================
   Twee lagen boven elkaar: de onderste is de haarlijn, de bovenste — 1px
   kleiner — het vlak. Zo blijft de afgesneden hoek een echte rand in plaats
   van een border die door de clip wordt afgekapt.
   -------------------------------------------------------------------------- */

.dc-mesh__cell {
    --dc-shape: polygon(0 0, calc(100% - var(--dc-cut)) 0, 100% var(--dc-cut), 100% 100%, 0 100%);

    position: relative;
    display: flex;
    width: 100%;
    padding: 1px;
    background: var(--dc-edge);
    clip-path: var(--dc-shape);
    transform: translate3d(0, var(--dc-lift, 0px), 0);
    transition: transform var(--dc-mid) var(--dc-ease),
                background var(--dc-mid) var(--dc-ease);
}

.dc-mesh__item:hover .dc-mesh__cell,
.dc-mesh__item:focus-within .dc-mesh__cell {
    background: rgba(var(--dc-a-rgb), .55);
    transform: translate3d(0, calc(var(--dc-lift, 0px) - 5px), 0);
}

.dc-mesh__plate {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: clamp(22px, 2vw, 30px);
    gap: 16px;
    background: var(--dc-plate);
    clip-path: var(--dc-shape);
    overflow: hidden;
}

/* De schuine hoek krijgt bij aanwijzen een gevulde punt: het accent zit in
   de snede zelf, niet in een extra randje. */
.dc-mesh__nick {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--dc-cut);
    height: var(--dc-cut);
    background: var(--dc-a);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    opacity: 0;
    transform: translate3d(6px, -6px, 0);
    transition: opacity var(--dc-mid) var(--dc-ease), transform var(--dc-mid) var(--dc-ease);
}

.dc-mesh__item:hover .dc-mesh__nick,
.dc-mesh__item:focus-within .dc-mesh__nick { opacity: 1; transform: none; }

/* De accentlijn die over de bovenrand trekt. */
.dc-mesh__sweep {
    position: absolute;
    top: 0;
    left: 0;
    right: var(--dc-cut);
    height: 2px;
    background: linear-gradient(90deg, var(--dc-a), rgba(var(--dc-a-rgb), 0));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dc-slow) var(--dc-ease);
}

.dc-mesh__item:hover .dc-mesh__sweep,
.dc-mesh__item:focus-within .dc-mesh__sweep { transform: scaleX(1); }

/* Het klikvlak loopt over de hele plaat, ook al staat de link in de titel. */
.dc-mesh__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.dc-mesh__body {
    /* isolation in plaats van position: zo staat de tekst boven het
       spookcijfer, maar blijft de plaat het containing block voor het
       klikvlak van .dc-mesh__link — anders stopt dat vlak bij de tekst. */
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ==========================================================================
   5. LINIAAL, NUMMER EN SPOOKCIJFER
   ========================================================================== */

.dc-mesh__rule {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--dc-font-mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--dc-faint);
}

.dc-mesh__rule i {
    display: block;
    height: 6px;
    flex: 1 1 auto;
    background-image: linear-gradient(90deg, var(--dc-line) 1px, transparent 1px);
    background-size: 14px 100%;
    background-position: left center;
}

.dc-mesh__rule b {
    font-weight: 600;
    color: var(--dc-a);
    transition: color var(--dc-fast) var(--dc-ease);
}

.dcx--deep .dc-mesh__rule { color: rgba(255, 255, 255, .42); }
.dcx--deep .dc-mesh__rule i { background-image: linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px); }

/* Het grote cijfer van de dragende plaat, half buiten beeld gesneden. */
.dc-mesh__ghost {
    position: absolute;
    right: -14px;
    bottom: -34px;
    font-family: var(--dc-font-mono);
    font-size: clamp(6rem, 12vw, 11rem);
    font-weight: 700;
    line-height: .8;
    letter-spacing: -.05em;
    color: rgba(var(--dc-a-rgb), .07);
    pointer-events: none;
    user-select: none;
}

.dcx--deep .dc-mesh__ghost { color: rgba(255, 255, 255, .05); }

/* ==========================================================================
   6. ICOONTEKEN EN LABELPIL
   ========================================================================== */

.dc-mesh__top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Het icoon staat niet op een gekleurd plaatje maar in een getekend
   meetvenster: haarlijn, hoekjes en het teken zelf. */
.dc-mesh__glyph {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: none;
    color: var(--dc-a);
    background: var(--dc-a-soft);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    transition: background var(--dc-mid) var(--dc-ease), color var(--dc-mid) var(--dc-ease);
}

.dc-mesh__item:hover .dc-mesh__glyph,
.dc-mesh__item:focus-within .dc-mesh__glyph {
    background: var(--dc-a);
    color: var(--dc-plate);
}

.dc-mesh__svg {
    width: 32px;
    height: 32px;
    display: block;
}

/* De hulplijnen draaien traag mee zolang de plaat wordt aangewezen: de
   tekening blijft leven zonder dat er iets beweegt dat gelezen moet worden. */
.dc-mesh__wire {
    transform-origin: 16px 16px;
    transition: opacity var(--dc-mid) var(--dc-ease);
}

.dc-mesh__item:hover .dc-mesh__wire,
.dc-mesh__item:focus-within .dc-mesh__wire {
    animation: dc-mesh-wire 9s linear infinite;
}

@keyframes dc-mesh-wire {
    to { transform: rotate(360deg); }
}

.dc-mesh__node {
    transform-origin: center;
    transition: transform var(--dc-mid) var(--dc-ease);
}

.dc-mesh__item:hover .dc-mesh__node,
.dc-mesh__item:focus-within .dc-mesh__node { transform: scale(1.5); }

.dcx--deep .dc-mesh__glyph { background: rgba(var(--dc-a-rgb), .16); }
.dcx--deep .dc-mesh__item:hover .dc-mesh__glyph { color: var(--dc-bg-deep); }

/* Labelpil: mono, klein, met een streepje ervoor. */
.dc-mesh__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    font-family: var(--dc-font-mono);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-muted);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-r-pill);
    background: var(--dc-bg);
}

.dc-mesh__badge::before {
    content: "";
    width: 9px;
    height: 1px;
    background: var(--dc-a);
}

.dcx--deep .dc-mesh__badge {
    color: rgba(255, 255, 255, .7);
    border-color: var(--dc-line-dark);
    background: rgba(255, 255, 255, .04);
}

/* ==========================================================================
   7. TEKST, OPSOMMING, CIJFER EN LINK
   ========================================================================== */

.dc-mesh__title {
    font-family: var(--dc-font);
    font-weight: 600;
    font-size: 1.1875rem;
    line-height: 1.24;
    letter-spacing: -.012em;
    color: var(--dc-ink);
}

.dc-mesh__link {
    color: inherit;
    text-decoration: none;
    transition: color var(--dc-fast) var(--dc-ease);
}

.dc-mesh__item:hover .dc-mesh__link { color: var(--dc-a); }

.dc-mesh__text {
    font-size: .9375rem;
    line-height: 1.62;
    color: var(--dc-muted);
    max-width: 56ch;
}

.dc-mesh__checks {
    display: grid;
    gap: 9px;
    list-style: none;
}

.dc-mesh__checks li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--dc-ink-soft);
}

.dc-mesh__checks svg {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--dc-a);
}

/* Het cijfer krijgt een eigen strook met een liniaalrand erboven. */
.dc-mesh__stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--dc-line-soft);
}

.dc-mesh__stat b {
    font-family: var(--dc-font);
    font-size: clamp(1.375rem, 2.1vw, 1.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--dc-a);
    font-variant-numeric: tabular-nums;
}

.dc-mesh__stat span {
    font-family: var(--dc-font-mono);
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dc-faint);
}

/* De link zakt naar de onderrand: platen die in dezelfde rij staan eindigen
   dan op dezelfde hoogte, ook als de ene meer tekst draagt dan de andere. */
.dc-mesh__more {
    margin-top: auto;
    padding-top: 6px;
}

.dc-mesh__stat + .dc-mesh__more {
    margin-top: 14px;
    padding-top: 0;
}

/* De link is een pijl die uit een haakje schuift. */
.dc-mesh__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--dc-font-mono);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-ink);
    text-decoration: none;
}

.dc-mesh__cta i {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    color: var(--dc-a);
    border: 1px solid var(--dc-line);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
    transition: background var(--dc-mid) var(--dc-ease), color var(--dc-mid) var(--dc-ease);
}

.dc-mesh__cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--dc-mid) var(--dc-ease);
}

.dc-mesh__item:hover .dc-mesh__cta i,
.dc-mesh__item:focus-within .dc-mesh__cta i {
    background: var(--dc-a);
    color: var(--dc-plate);
}

.dc-mesh__item:hover .dc-mesh__cta svg,
.dc-mesh__item:focus-within .dc-mesh__cta svg { transform: translateX(3px); }

.dcx--deep .dc-mesh__title,
.dcx--deep .dc-mesh__cta { color: #fff; }
.dcx--deep .dc-mesh__text { color: rgba(255, 255, 255, .66); }
.dcx--deep .dc-mesh__checks li { color: rgba(255, 255, 255, .78); }
.dcx--deep .dc-mesh__stat { border-top-color: var(--dc-line-dark); }
.dcx--deep .dc-mesh__cta i { border-color: var(--dc-line-dark); }
.dcx--deep .dc-mesh__item:hover .dc-mesh__cta i { color: var(--dc-bg-deep); }

/* ==========================================================================
   8. BEELD
   ==========================================================================
   Het beeld staat niet als plaatje bovenin de kaart maar als opname in een
   kader: hoekmarkeringen, een maatstreepje en een leesbaar naamplaatje.
   In rust is het ingetogen, bij aanwijzen komt de kleur terug.
   -------------------------------------------------------------------------- */

.dc-mesh__frame {
    position: relative;
    display: block;
    overflow: hidden;
    margin: calc(clamp(22px, 2vw, 30px) * -1) calc(clamp(22px, 2vw, 30px) * -1) 2px;
    background: var(--dc-bg-tint);
    aspect-ratio: 16 / 10;
}

.dc-mesh__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.55) contrast(1.04);
    transform: scale(1.01);
    transition: transform var(--dc-slow) var(--dc-ease), filter var(--dc-slow) var(--dc-ease);
}

.dc-mesh--photo .dc-mesh__frame img { filter: none; }

.dc-mesh__item:hover .dc-mesh__frame img,
.dc-mesh__item:focus-within .dc-mesh__frame img {
    filter: none;
    transform: scale(1.055);
}

/* Een dunne blauwe waas over de opname, zodat elk beeld — hoe verschillend
   ook — in dezelfde toon blijft als de rest van de sectie. */
.dc-mesh__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--dc-a-rgb), .12), rgba(14, 22, 34, .3));
    mix-blend-mode: multiply;
    opacity: .75;
    transition: opacity var(--dc-mid) var(--dc-ease);
    pointer-events: none;
}

.dc-mesh__item:hover .dc-mesh__frame::after { opacity: .3; }
.dc-mesh--photo .dc-mesh__frame::after { opacity: .28; }

/* Hoekmarkeringen: twee haakjes zoals in een zoeker. */
.dc-mesh__corners {
    position: absolute;
    inset: 12px;
    pointer-events: none;
    z-index: 2;
}

.dc-mesh__corners::before,
.dc-mesh__corners::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, .55);
}

.dc-mesh__corners::before {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}

.dc-mesh__corners::after {
    right: 0;
    bottom: 0;
    border-left: 0;
    border-top: 0;
}

/* Naamplaatje op het beeld: mono tekst met een pulserend stipje. */
.dc-mesh__slate {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-family: var(--dc-font-mono);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(14, 22, 34, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .16);
}

.dc-mesh__slate i {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--dc-green);
    box-shadow: 0 0 0 0 rgba(var(--dc-green-rgb), .7);
    animation: dc-mesh-pulse 2.6s var(--dc-ease) infinite;
}

@keyframes dc-mesh-pulse {
    70%  { box-shadow: 0 0 0 7px rgba(var(--dc-green-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--dc-green-rgb), 0); }
}

/* Maatstreepje rechtsboven op de opname. */
.dc-mesh__scale {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 58px;
    height: 8px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
    background-size: 8px 100%;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

/* Op brede schermen schuift het beeld traag mee met de scroll. Alleen waar
   de browser dat zelf kan: geen script, geen scroll-luisteraar. */
@supports (animation-timeline: view()) {
    @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
        .dc-mesh__item--feature .dc-mesh__frame img {
            animation: dc-mesh-drift linear both;
            animation-timeline: view();
            animation-range: entry 10% exit 90%;
        }

        @keyframes dc-mesh-drift {
            from { transform: scale(1.1) translateY(-2.2%); }
            to   { transform: scale(1.1) translateY(2.2%); }
        }
    }
}

/* ==========================================================================
   9. DE ACHT VORMEN
   ==========================================================================
   Alle vormen delen de plaat hierboven. Wat verandert is de indeling —
   nooit de anatomie, want dan zou elke pagina er anders uit gaan zien.
   -------------------------------------------------------------------------- */

/* -------------------------------------------------- 9.1 mozaïek */

.dc-mesh--mosaic .dc-mesh__item--feature { grid-column: span 2; grid-row: span 2; }
.dc-mesh--mosaic .dc-mesh__item--wide    { grid-column: span 2; }

.dc-mesh--mosaic .dc-mesh__item--feature { --dc-cut: 40px; --dc-lift: 0px; }

.dc-mesh--mosaic .dc-mesh__item--feature .dc-mesh__plate { padding: clamp(26px, 2.4vw, 40px); }

.dc-mesh--mosaic .dc-mesh__item--feature .dc-mesh__frame {
    margin: calc(clamp(26px, 2.4vw, 40px) * -1) calc(clamp(26px, 2.4vw, 40px) * -1) 6px;
    aspect-ratio: 16 / 9;
}

.dc-mesh--mosaic .dc-mesh__item--feature .dc-mesh__title {
    font-size: clamp(1.375rem, 2.1vw, 1.875rem);
}

.dc-mesh--mosaic .dc-mesh__item--feature .dc-mesh__text {
    font-size: 1rem;
    max-width: 52ch;
}

.dc-mesh--mosaic .dc-mesh__item--feature .dc-mesh__glyph { width: 60px; height: 60px; }

/* Kleine cellen zonder beeld krijgen wat meer lucht tussen de regels, zodat
   ze naast de grote plaat niet als propjes lezen. */
.dc-mesh--mosaic .dc-mesh__item--small .dc-mesh__plate { gap: 14px; }

/* -------------------------------------------------- 9.2 tekening */

.dc-mesh--blueprint .dc-mesh__plates {
    gap: 0;
    border: 1px solid var(--dc-line);
    background: var(--dc-plate);
    padding-bottom: 0;
    /* de naden vallen net buiten elke cel; de rand van het geheel snijdt
       de laatste kolom en rij weer af */
    overflow: hidden;
}

.dc-mesh--blueprint .dc-mesh__item {
    --dc-cut: 0px;
    --dc-lift: 0px;
    box-shadow: 1px 0 0 0 var(--dc-line), 0 1px 0 0 var(--dc-line);
}

.dc-mesh--blueprint .dc-mesh__cell {
    padding: 0;
    background: none;
}

.dc-mesh--blueprint .dc-mesh__item:hover .dc-mesh__cell,
.dc-mesh--blueprint .dc-mesh__item:focus-within .dc-mesh__cell { transform: none; }

.dc-mesh--blueprint .dc-mesh__plate {
    background: none;
    transition: background var(--dc-mid) var(--dc-ease);
}

.dc-mesh--blueprint .dc-mesh__item:hover .dc-mesh__plate,
.dc-mesh--blueprint .dc-mesh__item:focus-within .dc-mesh__plate { background: var(--dc-bg-tint); }

.dc-mesh--blueprint .dc-mesh__nick { display: none; }

.dc-mesh--blueprint.dcx--deep .dc-mesh__plates {
    border-color: rgba(255, 255, 255, .14);
    background: none;
}

.dc-mesh--blueprint.dcx--deep .dc-mesh__item {
    box-shadow: 1px 0 0 0 rgba(255, 255, 255, .12), 0 1px 0 0 rgba(255, 255, 255, .12);
}

.dc-mesh--blueprint.dcx--deep .dc-mesh__item:hover .dc-mesh__plate {
    background: rgba(255, 255, 255, .05);
}

/* -------------------------------------------------- 9.3 reeks */

.dc-mesh--stack .dc-mesh__plates { gap: 14px; }

.dc-mesh--stack .dc-mesh__plate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    padding-block: clamp(20px, 2vw, 30px);
}

.dc-mesh--stack .dc-mesh__rule {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.dc-mesh--stack .dc-mesh__rule b {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: .9;
    letter-spacing: -.04em;
}

.dc-mesh--stack .dc-mesh__rule i {
    width: 46px;
    flex: none;
    height: 6px;
}

.dc-mesh--stack .dc-mesh__frame {
    order: 3;
    margin: 0;
    width: clamp(120px, 16vw, 220px);
    aspect-ratio: 4 / 3;
}

.dc-mesh--stack .dc-mesh__body { gap: 10px; }
.dc-mesh--stack .dc-mesh__title { font-size: clamp(1.125rem, 1.7vw, 1.375rem); }
.dc-mesh--stack .dc-mesh__text { max-width: 64ch; }
.dc-mesh--stack .dc-mesh__stat { margin-top: 8px; border-top: 0; padding-top: 0; }
.dc-mesh--stack .dc-mesh__ghost { display: none; }

/* -------------------------------------------------- 9.4 platen met icoon */

/* Deze vorm leunt op het teken, niet op beeld. Staat er toch een afbeelding
   in de plaat, dan krijgt ze een lager kader zodat het icoon de plaat blijft
   openen in plaats van de foto. */
.dc-mesh--cards .dc-mesh__frame { aspect-ratio: 21 / 9; }

/* -------------------------------------------------- 9.5 panelen met beeld */

.dc-mesh--panels .dc-mesh__frame { aspect-ratio: 3 / 2; }
.dc-mesh--panels .dc-mesh__glyph { width: 46px; height: 46px; }
.dc-mesh--panels .dc-mesh__svg { width: 26px; height: 26px; }

/* -------------------------------------------------- 9.6 genummerde reeks */

.dc-mesh--steps .dc-mesh__item { --dc-cut: 0px; --dc-lift: 0px; }

.dc-mesh--steps .dc-mesh__cell {
    padding: 0;
    background: none;
    clip-path: none;
}

.dc-mesh--steps .dc-mesh__item:hover .dc-mesh__cell { transform: none; }

.dc-mesh--steps .dc-mesh__plate {
    background: none;
    padding: 26px 22px 0 0;
    clip-path: none;
    gap: 14px;
}

/* De maatlijn boven de stap, met het knooppunt op de eigen kolom. */
.dc-mesh--steps .dc-mesh__plate::before,
.dc-mesh--steps .dc-mesh__plate::after {
    content: "";
    position: absolute;
    top: 0;
    height: 1px;
}

.dc-mesh--steps .dc-mesh__plate::before {
    left: 0;
    right: 0;
    background: var(--dc-line);
}

.dc-mesh--steps .dc-mesh__plate::after {
    left: 0;
    width: 0;
    background: var(--dc-a);
    transition: width var(--dc-slow) var(--dc-ease) var(--dc-delay, 0ms);
}

.dc-mesh--steps .dc-mesh__item.is-in .dc-mesh__plate::after,
.dc-mesh--steps .dc-mesh__item:hover .dc-mesh__plate::after { width: 42%; }

.dc-mesh--steps .dc-mesh__rule b { font-size: 1.75rem; letter-spacing: -.03em; }
.dc-mesh--steps .dc-mesh__nick,
.dc-mesh--steps .dc-mesh__sweep,
.dc-mesh--steps .dc-mesh__frame,
.dc-mesh--steps .dc-mesh__ghost { display: none; }

.dcx--deep.dc-mesh--steps .dc-mesh__plate::before { background: var(--dc-line-dark); }

/* -------------------------------------------------- 9.7 vinklijst */

.dc-mesh--checks .dc-mesh__item { --dc-cut: 0px; --dc-lift: 0px; }

/* Alleen een lijn langs de linkerzijde. Een inset-schaduw in plaats van een
   gevulde onderlaag: die zou door de doorzichtige plaat heen schijnen. */
.dc-mesh--checks .dc-mesh__cell {
    padding: 0;
    background: none;
    clip-path: none;
    box-shadow: inset 1px 0 0 0 var(--dc-line);
    transition: box-shadow var(--dc-mid) var(--dc-ease);
}

.dc-mesh--checks .dc-mesh__item:hover .dc-mesh__cell,
.dc-mesh--checks .dc-mesh__item:focus-within .dc-mesh__cell {
    box-shadow: inset 2px 0 0 0 var(--dc-a);
    transform: none;
}

.dc-mesh--checks .dc-mesh__plate {
    background: none;
    padding: 4px 20px 4px 20px;
    clip-path: none;
    gap: 10px;
}

.dc-mesh--checks .dc-mesh__nick,
.dc-mesh--checks .dc-mesh__sweep,
.dc-mesh--checks .dc-mesh__frame,
.dc-mesh--checks .dc-mesh__ghost,
.dc-mesh--checks .dc-mesh__rule { display: none; }

.dc-mesh--checks .dc-mesh__top { margin-bottom: 2px; }
.dc-mesh--checks .dc-mesh__glyph { width: 38px; height: 38px; }
.dc-mesh--checks .dc-mesh__svg { width: 22px; height: 22px; }

/* -------------------------------------------------- 9.8 kolommen zonder kader */

.dc-mesh--plain .dc-mesh__item { --dc-cut: 0px; --dc-lift: 0px; }

/* Eén lijn boven de kolom, verder niets. */
.dc-mesh--plain .dc-mesh__cell {
    padding: 0;
    background: none;
    clip-path: none;
    box-shadow: inset 0 1px 0 0 var(--dc-line);
    transition: box-shadow var(--dc-mid) var(--dc-ease);
}

.dc-mesh--plain .dc-mesh__item:hover .dc-mesh__cell,
.dc-mesh--plain .dc-mesh__item:focus-within .dc-mesh__cell {
    box-shadow: inset 0 2px 0 0 var(--dc-a);
    transform: none;
}

.dc-mesh--plain .dc-mesh__plate {
    background: none;
    padding: 22px 18px 4px 0;
    clip-path: none;
}

.dc-mesh--plain .dc-mesh__nick,
.dc-mesh--plain .dc-mesh__sweep,
.dc-mesh--plain .dc-mesh__frame,
.dc-mesh--plain .dc-mesh__ghost { display: none; }

/* ==========================================================================
   10. DIEP BLAUW
   ========================================================================== */

.dcx--deep .dc-mesh {
    --dc-plate: rgba(255, 255, 255, .035);
    --dc-edge: var(--dc-line-dark);
}

.dcx--deep.dc-mesh {
    --dc-plate: rgba(255, 255, 255, .035);
    --dc-edge: rgba(255, 255, 255, .14);
}

.dcx--deep .dc-mesh__frame { background: rgba(255, 255, 255, .05); }

.dcx--deep.dc-mesh--checks .dc-mesh__cell { box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, .16); }
.dcx--deep.dc-mesh--plain .dc-mesh__cell { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .16); }
.dcx--deep .dc-mesh__badge::before { background: var(--dc-a); }

/* ==========================================================================
   11. AFSLUITING
   ========================================================================== */

.dc-mesh__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: clamp(32px, 3.4vw, 54px);
    padding-top: clamp(24px, 2.6vw, 34px);
    border-top: 1px solid var(--dc-line);
}

.dc-mesh__footnote {
    font-size: .9375rem;
    color: var(--dc-muted);
    max-width: 62ch;
}

.dcx--deep .dc-mesh__foot { border-top-color: var(--dc-line-dark); }
.dcx--deep .dc-mesh__footnote { color: rgba(255, 255, 255, .66); }

/* ==========================================================================
   12. SMALLE SCHERMEN EN RUSTIGE WEERGAVE
   ========================================================================== */

@media (max-width: 1080px) {
    .dc-mesh--c3 .dc-mesh__plates,
    .dc-mesh--c4 .dc-mesh__plates { --dc-cols: 2; }

    .dc-mesh--offset .dc-mesh__item { --dc-lift: 0px; }
}

@media (max-width: 860px) {
    .dc-mesh__head--split {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .dc-mesh--stack .dc-mesh__plate {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .dc-mesh--stack .dc-mesh__frame {
        order: 3;
        grid-column: 1 / -1;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 640px) {
    .dc-mesh__plates { --dc-cols: 1 !important; }

    .dc-mesh--mosaic .dc-mesh__item--feature,
    .dc-mesh--mosaic .dc-mesh__item--wide {
        grid-column: span 1;
        grid-row: span 1;
    }

    .dc-mesh { --dc-cut: 20px; --dc-unit: 64px; }
    .dc-mesh--mosaic .dc-mesh__item--feature { --dc-cut: 28px; }

    .dc-mesh--stack .dc-mesh__rule { flex-direction: row; align-items: baseline; }
    .dc-mesh__foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-mesh__cell,
    .dc-mesh__frame img,
    .dc-mesh__sweep,
    .dc-mesh__nick,
    .dc-mesh__cta svg { transition: none; }

    .dc-mesh__item:hover .dc-mesh__wire { animation: none; }
    .dc-mesh__slate i { animation: none; }
    .dc-mesh__item:hover .dc-mesh__cell { transform: translate3d(0, var(--dc-lift, 0px), 0); }
}

/* Zonder script blijft alles zichtbaar; de reveal is versiering, geen poort. */
.no-js .dc-mesh__item { opacity: 1; transform: none; }